WEB PROGRAMMING (Finals): Audio/Video
ACTIVITY 3.2
RESULT:
HTML CODE:
<!DOCTYPE HTML>
<html>
<head>
<title>IFRAME DROPDOWN NAVIGATION BAR</title>
<link rel="stylesheet" type="text/css" href="create.css">
</head>
<div class="navbar">
<a href="PAINT.html">HOME</a>
</div>
<header>χρώμα</header>
<body>
<h1>THE ART OF PAINT</h1>
<video width="1080" height="720" controls>
<source src="ap.mp4" type="video/mp4">
</video>
<h1>FURTHER TO PAINT</h>
<video width="1080" height="720" controls>
<source src="paint.mp4" type="video/mp4">
</video>
<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>
</footer>
</body>
</html>
CSS CODE:
header {
position:fixed;
font-family: 'century gothic';
top:0px;
left:0px;
width:100%;
height:15%;
color:#FFFFFF;
background-color: #EFDAC6;
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: #CAA179;
margin-bottom: 100px;
}
hr {
border: solid;
color: #FFEFAF;
}
footer {
text-align: center;
padding: 10px;
background-color: #EFDAC6;
color: white;
font-size: 12px;
margin-top: 60px;
}
.navbar {
overflow: hidden;
background-color: #DFB792;
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: #EFDAC6;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #EFDAC6;
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