Monday, April 29, 2019

Sunday, April 21, 2019

33 Favrite Animal

The code:

<!DOCTYPE html>
<html>
    <head>
        <title>The Wolverine</title>
        <style>
            {background-color: black;}
            h1    {color: blue; text-align: center; text-size: 80px;}
            .top { text-align: right;}
            .left {color: green; text-align: left;}
            .mid {text-align: center;}
            #pp {text-align: right; color: red;}
            #pq {text-align: left; background-color: red;}
            h2, h3, h4, p { text-align: right; color: blue;}
        </style>
    </head>
            <body>
                <h1>The Wolverine</h1>
                <p id="pp">The protector of the North<p>
                <p id="pq">Not the damn comic character
<img src="http://rs231.pbsrc.com/albums/ee207/KING-KONG_02/Wolverine-6.gif~c200" alt="The Wolverine" style="float:center;width:42px;height:42px;">
                </p>
                <br><hr><br>
                <h2 class="mid">This beast</h2>
                    <img src="https://i.imgur.com/UyoD2vi.gif?noredirect" alt="Wild Wolverine" title="A Wolverine">
                <h2>It travels around its territory</h2>
                <h3 class="left">Picking fights</h3>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/NvlalDNxccw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <br><br>
                <h4>Beware :- They smell really bad</h4>
                <p class="left">Yeah! Their smell is the "only" thing to be aware of!</p>           
            </body>
    </html>

Saturday, April 20, 2019

35 Background image

Her be my code:

<!DOCTYPE html>
<html>
<head>
<style>
body  {background-image: url("data:image/jpeg;base64,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");}
</style>
</head>
<body>
<h1 style="color: white; align: center;">TBI SUX</h1>
<p style="color: white;"> Well MND reall>
</body>
</html>

Monday, April 15, 2019

26 Browser

Found it.....
File:

<!DOCTYPE html>
<html>
<head>
<!-- My favorite browser was Waterfox, which is simply Firefox for a 64bit operating system.
However, it was discontinued a couple of years ago.
So, I have been focussing on Firefox (Default Linux browswer), Safari (Default Mac Os browser) or Google Chrome.
/!-->
<title> My prefered browser</title>

<style>
body {
background-color: lightblue;
}
h1 {
color: grey;
font-size: 90px;
}
h2 {
color: red;
font-size: 56px:
}
p {
 color: black;
 }
 .dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.desc {
  padding: 15px;
  text-align: center;
}
h3 {
color: green;
font-size: 45px;
}
h4 {
color: yellow;
font-size: 50px;
}
 </style>
</head>
<body>
<h1> Back in the hey day of the internet circa 1990*</h1>
<p>There was<br>
  This</p>
  <div class="dropdown">
  <img src="https://d2bs8hqp6qvsw6.cloudfront.net/article/images/750x750/dimg/netscape-3.jpg" alt="Netscape Navigator" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://d2bs8hqp6qvsw6.cloudfront.net/article/images/750x750/dimg/netscape-3.jpg" alt="Netscape Navigator" width="300" height="200">
  <div class="desc">Netscape Navigator</div>
  </div>
</div><hr>
<br><br><br>
<h2> Then we went to...<h2>
 <div class="dropdown">
  <img src="https://s.yimg.com/ny/api/res/1.2/D1fZgQIlx68XGqPv_5LT8g--~A/YXBwaWQ9aGlnaGxhbmRlcjtzbT0xO3c9ODAw/http://l.yimg.com/cd/resizer/2.0/original/Zabt2xcL0OanZB0J8vjFbPBlif0" alt="Internet Explorer 1995-2015" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://s.yimg.com/ny/api/res/1.2/D1fZgQIlx68XGqPv_5LT8g--~A/YXBwaWQ9aGlnaGxhbmRlcjtzbT0xO3c9ODAw/http://l.yimg.com/cd/resizer/2.0/original/Zabt2xcL0OanZB0J8vjFbPBlif0" alt="Internet Explorer 1995-2015" width="300" height="200">
  <div class="desc">Internet Explorer 1995-2015</div>
  </div>
</div><hr>
<h3> And I got hooked on.....</h3>
<div class="dropdown">
  <img src="https://www.ghacks.net/wp-content/uploads/2017/11/waterfox-56.png" alt="Waterfox" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://www.ghacks.net/wp-content/uploads/2017/11/waterfox-56.png" alt="Waterfox" width="300" height="200">
  <div class="desc">Waterfox</div>
  </div>
</div><hr>
<h4>Got a Mac Mini in 2013...<h4>
<div class="dropdown">
  <img src="http://www.rawinfopages.com/mac/sites/default/files/field/image/safari-700.jpg" alt="Safari" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://www.ghacks.net/wp-content/uploads/2017/11/waterfox-56.png" alt="Safari" width="300" height="200">
  <div class="desc">Safari</div>
  </div>
</div><hr>
<h5>Went to linux predominently in 2015</h5>
<div class="dropdown">
  <img src="https://static.makeuseof.com/wp-content/uploads/2009/08/image81.png" alt="firefox" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://static.makeuseof.com/wp-content/uploads/2009/08/image81.png" alt="firefox" width="300" height="200">
  <div class="desc">firefox</div>
  </div>
</div><hr>
<h6>Now I'm using Win10 to learn coding...</h6>
<div class="dropdown">
  <img src="https://c.slashgear.com/wp-content/uploads/2012/02/resolve_static.png" alt="Chrome" width="100" height="50">
  <div class="dropdown-content">
  <img src="https://c.slashgear.com/wp-content/uploads/2012/02/resolve_static.png" alt="Chrome" width="300" height="200">
  <div class="desc">Chrome</div>
  </div>
</div><hr>
</body>
</html>

38 IMDB 2015 movie table

The code contains some JS as well (designer's notes included in .html):

<!DOCTYPE html>
<html>
    <header>
        <script type="text/javascript">
//
// Description: Randomly change background color every 5 seconds
//
// NewcWare 1997
// Author: Scott Newcomer 3/1997
// Email: nuke@bright.net
//
function setbackground()
{
window.setTimeout( "setbackground()", 5000); // 5000 milliseconds delay

var index = Math.round(Math.random() * 9);

var ColorValue = "FFFFFF"; // default color - white (index = 0)

if(index == 1)
ColorValue = "FFCCCC"; //peach
if(index == 2)
ColorValue = "CCAFFF"; //violet
if(index == 3)
ColorValue = "A6BEFF"; //lt blue
if(index == 4)
ColorValue = "99FFFF"; //cyan
if(index == 5)
 ColorValue = "D5CCBB"; //tan
if(index == 6)
ColorValue = "99FF99"; //lt green
if(index == 7)
ColorValue = "FFFF99"; //lt yellow
if(index == 8)
ColorValue = "FFCC99"; //lt orange
if(index == 9)
ColorValue = "CCCCCC"; //lt grey

document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;

}
</script>
<body onload="setbackground();">
    </header>
        <body>
            <h1 style="align: midlle; background-color: red;"> Here we are</h1>
           
<table style="width:100%">
  <caption>IMDB 2015 Top 5 Movies</caption>
  <tr>
    <th>Movie Name:</th>
    <th>IMDB Star rating</th>
  </tr>
  <tr>
    <td style="text-align: center;"><a href="https://www.imdb.com/title/tt3774694/?ref_=adv_li_i">Love</a></td>
    <td style="text-align: center;">6</td>
  </tr>
  <tr>
    <td style="text-align: center;"><a href="https://www.imdb.com/title/tt2395427/?ref_=adv_li_i">Avegers: Rise of Ultron</a></td>
    <td style="text-align: center;">7.3</td>
  </tr>
   <tr>
    <td style="text-align: center;"><a href="https://www.imdb.com/title/tt3170832/?ref_=adv_li_i">Room</a></td>
    <td style="text-align: center;">8.2</td>
  </tr>
   <tr>
    <td style="text-align: center;"><a href="https://www.imdb.com/title/tt1392190/?ref_=adv_li_i">Mad Max: Fury Road</a></td>
    <td style="text-align: center;">8.1</td>
  </tr>
   <tr>
    <td style="text-align: center;"><a href="https://www.imdb.com/title/tt3460252/?ref_=adv_li_i">The Hateful Eight</a></td>
    <td style="text-align: center;">7.8</td>
  </tr>
</table>

<img src="https://m.media-amazon.com/images/M/MV5BMTQzNDUwODk5NF5BMl5BanBnXkFtZTgwNzA0MDQ2NTE@._V1_UY268_CR4,0,182,268_AL_.jpg" alt="Love cover shot"><img src="https://m.media-amazon.com/images/M/MV5BMTM4OGJmNWMtOTM4Ni00NTE3LTg3MDItZmQxYjc4N2JhNmUxXkEyXkFqcGdeQXVyNTgzMDMzMTg@._V1_UX182_CR0,0,182,268_AL_.jpg" alt="Avengers 2"><img src="https://m.media-amazon.com/images/M/MV5BMjE4NzgzNzEwMl5BMl5BanBnXkFtZTgwMTMzMDE0NjE@._V1_UX182_CR0,0,182,268_AL_.jpg" alt="Room cover"><img src="https://m.media-amazon.com/images/M/MV5BN2EwM2I5OWMtMGQyMi00Zjg1LWJkNTctZTdjYTA4OGUwZjMyXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg" alt="Mad Max cover"><img src="https://m.media-amazon.com/images/M/MV5BMjA1MTc1NTg5NV5BMl5BanBnXkFtZTgwOTM2MDEzNzE@._V1_UX182_CR0,0,182,268_AL_.jpg" alt="Hateful 8 cover">
</body>
</html>

36 Color the caption?

Here is the code:

<!DOCTYPE html>
<html>
<header>

</header>
    <body>
        <h1 style="color:white; background-color: black;">Where am I going?</h1>
        <h2 style="color: gold; background-color: grey;">Is it with you?</h2>
        <p mark style="background-color: rgb(255,0,0);"><b>GO HERE!</b></p>
        <p style="line-height: 3.0; background-color: lightgreen; color: grey;"> Or here?</p>
        <p style="background-color: pink;">A sailor went to sea, sea, sea</p>
        <p style="background-color: lightblue;">To see what he could see, see, see</p>
        <hr>
        <p style="background-color: rgb(120,120,120);">But all that he could see, see, see</p>
        <p style="color: white; background-color: rgb(25,25,25);">Was the bottom of the deep blue sea, sea sea</p>
        <p style="background-color:#787878;">Twinkle, twinkle, little star</p>
        <p style="background-color:#aaaaaa;">How I wonder what you are"</p>
        <p style="background-color:#bbbbbb;">Up above the word so high</p>
        <p style="background-color:#cccccc;">Like a diamond in the sky</p>
    </body>
        </html>

Thursday, April 11, 2019

34 fav Hobby

This starts on the first page, which links to the second "main" page:


First:

<!DOCTYPE html>
<html>
<header>
<style>
body {  background-color: #cc0000;}
h1 { font-size: 140px; color: blue; text-align: center;}
h2 { color:red; text-align:left;}
h3 {color: rgb(255,234,12);}
p.fish {text-align: middle; font-size: 140px;}
p.dog {text-align: center;}
</style>
</header>
<body
<h1 style=""><b> Warhammer 40,000</b></h1></font>
<h2>In the future.....there is only WAR!!</h2>
<br>
<p><del>I choose you Pikachu...</del></p>
<p><small> let's try that again</small></p>
<p class=fish><br><a href="34 Warhammer.html" alt="The main page">The Blood Angels</a></p>
</body>



Second "main":
<!DOCTYPE html>
<html>
<header>
<style>
body { background-color: black;}
h1 {color: white; }
h2 { color: rgb(255,0,0) }
p { color: white; }
</style>
</header>
<body>
<img src="https://warhammerart.com/wp-content/uploads/2015/10/JB124-Blood-Angel-v-Orks.jpg" alt+"Blood Angels army" style="width: 45%; height: 320px;"align="middle">
<br>
<br>
<h1 align="middle">Warhammer 40,000</h1>
<h2 align="middle">Blood Angels</h2><br><hr><br>
<p style="text-color: white;"><strong>I started collecting models back in 1992. <sup>Age</sup><sub>12<img style= "float: right;" src="https://cdn.shopify.com/s/files/1/0973/0376/products/mail_c7af8081-32de-45c5-9bd0-ec8bebb089b9.jpg?v=1548114472"></sub></strong></p>
<p> although, I didn't really play the game till I turned <em>14</em> <i>('94)</i>.</p><br><br>
<p style="font-size: 60px;"><mark>I really started collecting after I turned 19.</mark></p>
<hr>
<h2>You start with an unpainted figure</h2>
<img src="https://www.picclickimg.com/d/l400/pict/113479209926_/Warhammer-40K-Space-Marine-Blood-Angels-Death-Company.jpg" alt="Unpainted Blood Angels Dreadnaught">
<br><p align="middle"><small>Which you then paint</small></p>
<img src="https://www.frontlinegaming.org/wp-content/uploads/2016/03/Death-Dread.jpg" alt="Blood Angels Death Company Dreadnaught">

<p align="middle"><ins>The pictures are Decals</ins></p>
<p><small>I wish I could paint like the pictures :(</small></p>
</body>
</html>

Monday, April 8, 2019

32 CSS exercises 1-4

:)

Had to reload the third exercise.
For some reason, even though I got the answer right on the second attempt,
it would not alter anything till I reload the exercise.

30 Polytechnic linking

Here's the code:

<!DOTYPE html>
<html>
<header>
OP Linked
</header>
<body>
<img src="LivingCampus-MAP3-10x.jpg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="M block" title="M block" href="http://logicgroup.co.nz/wp-content/uploads/2018/12/IMG_8475-002-960x1442.jpg" coords="189,200,201,223" shape="rect">
    <area target="" alt="D block" title="D block" href="https://i.ytimg.com/vi/7cXEOWAStq4/maxresdefault.jpg" coords="123,223,158,257" shape="rect">
    <area target="" alt="F block" title="F block" href="https://www.odt.co.nz/sites/default/files/styles/odt_landscape_extra_large_21_10/public/story/2017/02/rainbow_hub_200217.jpg?itok=3lWQwBoA" coords="123,283,159,312" shape="rect">
    <area target="" alt="A block" title="A block" href="https://www.op.ac.nz/assets/infosheets/_resampled/FillWyIzMTciLCIyNDIiXQ/ABE-gen-Electrical-012-10x.jpg" coords="66,251,48,263,86,307,108,292" shape="poly">
    <area target="" alt="H block" title="H block" href="https://s3-media1.fl.yelpcdn.com/bphoto/2YGPDECwV8oPV-giKqKO4w/ls.jpg" coords="163,293,214,335" shape="rect">
    <area target="" alt="G block" title="G block" href="https://www.google.com/maps/uv?hl=en&amp;pb=!1s0xa82eac69c34b94c9:0x68a52f2e7d0736a3!2m22!2m2!1i80!2i80!3m1!2i20!16m16!1b1!2m2!1m1!1e1!2m2!1m1!1e3!2m2!1m1!1e5!2m2!1m1!1e4!2m2!1m1!1e6!3m1!7e115!4shttps://lh5.googleusercontent.com/p/AF1QipMfC52Tc8UikzPImK4vUu-lyxK4lrAxooiIH02P%3Dw239-h160-k-no!5sotago+polytechnic++Massage+Clinic+-+Google+Search&amp;imagekey=!1e10!2sAF1QipMfC52Tc8UikzPImK4vUu-lyxK4lrAxooiIH02P&amp;sa=X&amp;ved=2ahUKEwjjwvziicLhAhUQGKYKHQuvAlkQoiowCnoECA0QBg#" coords="219,251,202,286,221,290,238,258" shape="poly">
</map>
</body>
</html>