Page 1 : Topic- About You This page must contain the structural/semantic element
ID: 3818506 • Letter: P
Question
Page 1: Topic- About You
This page must contain the structural/semantic elements using the HTML5 elements; See pages 48 in your Web Design book (by Terry Felke-Morris). Be certain to include a translucent overlay for navigation links to other web pages within your project on this page. This navigation menu should be consistent across all the pages of your project.
You may want to use different structural/semantic elements for all of your pages and design the menu to appear and behave the same way on every page.
Display at least 4 thumbnails of your favorite images at the top of this page and a large central image within your page. At the end of this step, you will need to have at least 5 images on your page.
Incorporate a slide show of these 5 images in the main/central image frame within your page (suggestions for images: They may be related to you/your family/your hometown/your hobbies. Remember, this page is all about you. The images must be clear and not smudged. This means you need to start with a decently large original image file above 800px X 800px.)
Make the page interesting and ensure the layout looks professional
Explanation / Answer
Note:- User should enter the image by downloading and replacing the image name with downloaded image name.
Code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Page</title>
<style>
body {margin:0;}
.topnav {
overflow: hidden;
background-color: #FFFFFF;
opacity: 0.5;
filter: alpha(opacity=50);
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: grey;
color: white;
}
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
margin-left: 50px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">About US</a>
<a href="#contact">Contact</a>
<a href="#about">Feedback</a>
</div>
<h2>Thumbnail Image</h2>
<p>Click on the image to enlarge it.</p>
<div class="thumb">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest"></a>
<a target="_blank" href="images.jfif">
<img src="images.jfif"></a>
<a target="_blank" href="download.jfif">
<img src="download.jfif"></a>
<a target="_blank" href="do.jfif">
<img src="do.jfif"></a>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="family1.jfif">
<div class="text">family</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="img_nature_wide.jpg">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="family3.jpg">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="family4.jpg">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5/ 5</div>
<img src="family5.jfif">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.