WEB PROGRAMMING(Midterms): IFRAME and Dropdown Navigation Bar
ASSIGNMENT 2.4
HTML CODE:
<!DOCTYPE HTML>
<html>
<head>
<title>IFRAME DROPDOWN NAVIGATION BAR</title>
<link rel="stylesheet" type="text/css" href="dropdown.css">
</head>
<div class="navbar">
<a href="dropdown.html">HOME</a>
<a href="about.html">ABOUT</a>
<div class="dropdown">
<button class="dropbtn">COMICS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="1.html">No. 1 (Hi!)</a>
<a href="2.html">No. 2 (Dishes)</a>
<a href="3.html">No. 3 (Fit Check)</a>
</div>
</div>
</div>
<header>KULOT N ME</header>
<body>
<hr> <img src="km.jpg" alt="NO. 1"> <hr>
<footer>
<p><h4>FIND ME ON MY SOCIALS</h4></p>
<p><a href="https://aquire2021.blogspot.com/">ACQUIRE</a></p>
<p><a href="https://facebook.com/gee.gregorio">FACEBOOK</a></p>
<p><a href="https://instagram.com/create.gee">CREATE THAT GEE</a></p>
<p><a href="https://www.instagram.com/kulotnme/>">KULOT N ME </a></p>
</footer>
</body>
</html>
CSS CODE:
header {
position:fixed;
font-family: 'century gothic';
top:0px;
left:0px;
width:100%;
height:15%;
color:#FFFFFF;
background-color: #FFC10090;
background-size: 200% 50%;
font-size: 65px;
padding:10px;
padding-bottom: 0px;
text-align: center;
}
body {
margin-top: 120px;
margin-left: 100px;
margin-right: 100px;
font-family: "century gothic";
background-color:#FFF7D8;
color: #DCA700;
margin-bottom: 100px;
}
img {
margin: 10px;
border: solid;
border-color: #FFEFAF;
width: 500px;
height: 500px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
hr {
border: solid;
color: #FFEFAF;
}
footer {
text-align: center;
padding: 10px;
background-color: #F3C30070;
color: white;
font-size: 12px;
margin-top: 60px;
}
.navbar {
overflow: hidden;
background-color: #FFC100 ;
font-family: Century Gothic;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #FFD422;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #FFEFAF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: #E6B900;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
Comments
Post a Comment