[go: up one dir, main page]
Scribd
Upload
9 views3 pages

!doctype HTML

The document is an HTML webpage featuring a tribute to Prof Nii Nyarku Quaynor, referred to as 'Africa's Father of The Internet'. It includes a styled header with an image background and a navigation menu with links to various sections such as Home, Achievement, Gallery, and Contribution. The CSS styles define the layout and visual effects for the webpage elements, enhancing the user experience with hover effects and responsive design.

Uploaded by

boatengclement1905
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views3 pages

!doctype HTML

The document is an HTML webpage featuring a tribute to Prof Nii Nyarku Quaynor, referred to as 'Africa's Father of The Internet'. It includes a styled header with an image background and a navigation menu with links to various sections such as Home, Achievement, Gallery, and Contribution. The CSS styles define the layout and visual effects for the webpage elements, enhancing the user experience with hover effects and responsive design.

Uploaded by

boatengclement1905
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>

</style>
</head>
<body>
<div class="top">
<div class="sub">
<div class="normal-image">
<h1>Africa's Father of The Internet</h1>
</div>
<div class="hover-image">
<h3>Prof Nii Nyarku Quaynor</h3>
<p class="p1">Senior Lecturer - (Senior Member)</p>
<p class="p2">Department of Computer Science and Information
Technology</p>
</div>
</div>
<div class="menu-1"></div>
<div class="menu-2">
<span>Portfo<i>lio</i></span>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Achivevment</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contribution</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>

style.css
body{
margin: 0;
}
.top{
top: 0;
margin:0;
width: 100%;
height: 40em;
}
.top .sub{
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,.7));

}
.top .sub .normal-image{
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,.7)),
url(father-of-internet.jpg);
width: 100%;
height: 40em;
position: absolute;
top: 0;
transition: opacity 1.5s;
}
.top .sub .normal-image h1{
color: rgba(255, 215, 0,.6);
margin-top: 43%;
margin-left: 100px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;

.top .sub .hover-image{


background: linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,.3)),
url(n.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 40em;
position: absolute;
top: 0;
transition: opacity 1.5s;
}
.top .sub .hover-image{
opacity: 0;
}
.top .sub:hover .hover-image{
opacity: 1;
}
.top .sub .hover-image h3{
position: absolute;
top: 40%;
margin-left: 100px;
color: white;
font-size: 40px;
font-weight: bold;
}
.top .sub .hover-image .p1{
position: absolute;
top: 52%;
margin-left: 100px;
color: white;
font-weight: bold;
}
.top .sub .hover-image .p2{
position: absolute;
top: 57%;
margin-left: 100px;
color: white;
font-weight: bold;
}

.top .menu-1{
position: absolute;
top: 0;
height: 50px;
width: 100%;
background: rgba(0,0,0,.8);
color: white;
font-size: 30px;
}

.top .menu-2{
margin-top: 20px;
padding: 10px 0;
position: sticky;
top: 0;
border: 2px solid transparent;
background-color: rgb(0, 0, 0);
}
.top .menu-2 span{
float: left;
font-size: 30px;
color: white;
margin-left: 70px;
text-shadow: 0px 1px 3px rgba(255, 255, 255,.5),
0px 1px 3px rgba(255, 255, 255,.5),
0px 1px 5px rgba(255, 255, 255,.5);
}
.top .menu-2 span i{
color: crimson;
font-style: normal;
text-shadow: 0px 1px 3px rgba(220, 20, 60,.5),
0px 1px 3px rgba(220, 20, 60,.5),
0px 1px 5px rgba(220, 20, 60,.5);
}
.top .menu-2 nav ul{
color: white;
display: flex;
flex-direction: row;
justify-content: space-evenly;

}
.top .menu-2 nav ul li{
transition: 1.5s;
}
.top .menu-2 nav ul li a{
color: white;
text-decoration: none;
transition: 1.5s;
}
.top .menu-2 nav ul li a:hover, .top .menu-2 nav ul li:hover{
list-style-type: none;
color: wheat;
}

You might also like