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>
No comments:
Post a Comment