Hey everyone! Today, I'll be crafting an HTML page assigned by Media Monks as part of the initial interview assessment process. In this post, you'll discover the key principles behind creating effective HTML pages and explore the essential HTML elements necessary for dynamic webpage construction.
1. Create a simple webpage with dynamic slides moving forward and backward when pressing the buttons. for your reference below I'm providing output screenshots checkout.
Complete Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="banner">
<img id="logo" src="images/Logo.png">
<a class="prev" onclick="plusSlides(-1)"><img id="prev_btn" src="images/prev.svg"></a>
<a class="next" onclick="plusSlides(1)"><img id="next_btn" src="images/next.svg"></a>
<img id="line" src="images/Line.png">
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/img_1.jpg">
</div>
<div class="mySlides fade">
<img src="images/img_2.jpg">
</div>
<div class="mySlides fade">
<img src="images/img_3.jpg">
</div>
<div class="mySlides fade">
<img src="images/img_4.jpg">
</div>
<div class="mySlides fade">
<img src="images/img_5.jpg">
</div>
</div>
</div>
<style>
/*privew button*/
#prev_btn {
height: 25px;
width: 25px;
margin-top: -615px;
margin-left: -200px;
}
/*next button*/
#next_btn {
height: 25px;
width: 25px;
margin-top: -615px;
margin-right: 1070px;
}
/*banner creation*/
.banner {
border:solid black 2px;
width: 300px;
height: 250px;
}
/* logo design*/
#logo {
width: 100px;
height: 40px;
margin-left: 100px;
margin-top: 9px;
margin-bottom: 3px;
}
/*dividing line for images and logo*/
#line {
width: 304px;
height: 150px;
margin-left: -4px;
margin-top: -70px;
}
* {
box-sizing: border-box
}
body{
margin:0
}
/*changing image margins*/
.mySlides {
margin-top: -72px;
display: none
}
/*making image sizes as suitable for banner*/
img {
width: 296px;
height: 186px;
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* 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) {
.prev, .next {
width: 100%;
}
}
</style>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
}
</script>
</body>
</html>
0 Comments