The following video is a Tutorial for Animating in HTML made by yours truly.
And the following is the compilation using a previous exercise which is using iFrames in HTML.
The code is will be provided here:
<!DOCTYPE html>
<html>
<head>
<style>
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.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: red;
}
.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-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color:dark-red;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="https://www.facebook.com/media/set/?set=a.1840113652672222&type=3 target">Gallery</a>
<div class="dropdown">
<button class="dropbtn">Web Programming
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://startingdigitally.blogspot.com/2021/04/web-programming-css-color-palette.html" target="iframe1">Exercise 6</a>
<a href="https://startingdigitally.blogspot.com/2021/04/web-programming-exercise-7.html" target="iframe1">Exercise 7</a>
<a href="https://startingdigitally.blogspot.com/2021/04/web-programming-exercise-8-css-sidebar.html" target="iframe1">Exercise 8 </a>
<a href="https://startingdigitally.blogspot.com/2021/05/web-programming-exercise-9.html" target="iframe1">Exercise 9</a>
<a href="https://startingdigitally.blogspot.com/2021/05/web-programming-exercise-10.html" target="iframe1">Exercise 10 </a>
<a href="https://startingdigitally.blogspot.com/2021/05/web-programming-exercise-11.html" target="iframe1">Exercise 11 </a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Interactive Media Design
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://startingdigitally.blogspot.com/2021/04/interactive-media-design-switch-case.html" target="iframe1">Exercise 6 </a>
<a href="https://startingdigitally.blogspot.com/2021/04/interactive-media-design-exercise-7.html" target="iframe1">Exercise 7</a>
<a href="https://startingdigitally.blogspot.com/2021/05/interactive-media-design-exercise-8.html" target="iframe1">Exercise 8 </a>
<a href="https://startingdigitally.blogspot.com/2021/05/interactive-media-design-exercise-10.html" target="iframe1">Exercise 9</a>
<a href="https://startingdigitally.blogspot.com/2021/06/interactive-media-design-exercise-10.html" target="iframe1">Exercise 10 </a>
<a href="https://startingdigitally.blogspot.com/2021/06/interactive-media-design-exercise-11.html" target="iframe1">Exercise 11 </a>
<a href="https://startingdigitally.blogspot.com/2021/06/interactive-media-design-exercise-12.html" target="iframe1">Exercise 12 </a>
</div>
</div>
</div>
<div style="padding:1px 16px;height:1000px; WIDTH="100%">
<h2 id="home"> Compilation of Activities Finals Project</h2>
<div></div>
<iframe name ="iframe1" src="https://startingdigitally.blogspot.com/" width="100%" height=600px>
</iframe>
<iframe name ="iframe2" src="https://www.deviantart.com/psychoticchoco" width="100%" height=600px>
</iframe>
</div>
</body>
</html>
No comments:
Post a Comment