var bannerStatus = 1;
var bannerTimer = 3000;
window.onload = function() {
bannerLoop();
}
var startBannerLoop = setInterval(function() {
bannerLoop();
}, bannerTimer);
document.getElementById("main-banner").onmouseenter = function() {
clearInterval(startBannerLoop);
}
document.getElementById("main-banner").onmouseleave = function() {
startBannerLoop = setInterval(function() {
bannerLoop();
}, bannerTimer);
}
document.getElementById("imgbanbtn-prev").onclick = function() {
if (bannerStatus === 1) {
bannerStatus = 2;
} else if (bannerStatus === 2) {
bannerStatus = 3;
} else if (bannerStatus === 3) {
bannerStatus = 1;
}
bannerLoop();
};
document.getElementById("imgbanbtn-next").onclick = function() {
bannerLoop();
};
function bannerLoop() {
if (bannerStatus === 1) {
document.getElementById("img-ban2").style.opacity = "0";
setTimeout(function() {
document.getElementById("img-ban1").style.right = "0px";
document.getElementById("img-ban1").style.zIndex = "1000";
document.getElementById("img-ban2").style.right = "-1200px";
document.getElementById("img-ban2").style.zIndex = "1500";
document.getElementById("img-ban3").style.right = "1200px";
document.getElementById("img-ban3").style.zIndex = "500";
}, 500);
setTimeout(function() {
document.getElementById("img-ban2").style.opacity = "1";
}, 1000);
bannerStatus = 2;
} else if (bannerStatus === 2) {
document.getElementById("img-ban3").style.opacity = "0";
setTimeout(function() {
document.getElementById("img-ban2").style.right = "0px";
document.getElementById("img-ban2").style.zIndex = "1000";
document.getElementById("img-ban3").style.right = "-1200px";
document.getElementById("img-ban3").style.zIndex = "1500";
document.getElementById("img-ban1").style.right = "1200px";
document.getElementById("img-ban1").style.zIndex = "500";
}, 500);
setTimeout(function() {
document.getElementById("img-ban3").style.opacity = "1";
}, 1000);
bannerStatus = 3;
} else if (bannerStatus === 3) {
document.getElementById("img-ban1").style.opacity = "0";
setTimeout(function() {
document.getElementById("img-ban3").style.right = "0px";
document.getElementById("img-ban3").style.zIndex = "1000";
document.getElementById("img-ban1").style.right = "-1200px";
document.getElementById("img-ban1").style.zIndex = "1500";
document.getElementById("img-ban2").style.right = "1200px";
document.getElementById("img-ban2").style.zIndex = "500";
}, 500);
setTimeout(function() {
document.getElementById("img-ban1").style.opacity = "1";
}, 1000);
bannerStatus = 1;
}
}
body {
margin: 0;
padding: 0;
}
html {
font-size: 1em;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto auto auto;
}
header {
background-color: white;
grid-column: 1 / 5;
box-shadow: 3px 3px 8px darkgrey;
width: 100%;
position: fixed;
z-index: 9999999;
}
nav {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: flex-start;
padding: calc(1rem / 1.618);
}
.logo {
flex: 1 1 70%;
max-width: 70%;
overflow: hidden;
width: 100%;
}
.logo img {
width: 20%;
}
nav .btn {
background-color: blue;
padding: 1.1% 1.2%;
color: white;
cursor: pointer;
border: 0 none;
}
nav .open {
display: block !important;
transition: .5s ease;
}
nav .navbar-collapse {
flex: 1 1 100%;
max-width: 100%;
display: none;
}
nav .navbar-collapse .navbar-nav,
nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu {
padding: 0;
margin: 0;
list-style-type: none;
}
nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu {
display: none;
}
nav .navbar-collapse .navbar-nav .nav-item {}
nav .navbar-collapse .navbar-nav .nav-item .nav-link,
nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item .dropdown-link {
padding: calc(1em / 1.618);
display: block;
overflow: hidden;
text-decoration: none;
}
nav .navbar-collapse .navbar-nav .nav-item .nav-link {
color: red;
}
nav .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
background-color: red;
color: white;
}
nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item .dropdown-link {
color: black;
}
nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item .dropdown-link:hover {
background-color: #AAAA;
color: white;
}
nav .navbar-collapse .navbar-nav .nav-item.dropdown {}
nav .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle {}
nav .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle:after {
font-family: FontAwesome;
content: "f0d7";
margin-left: 1rem;
}
nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {}
main {
grid-column: 1 / 5;
background-color: grey;
margin-top: 15%;
margin-left: .8%;
margin-right: .8%;
}
.main-banner {
margin: 2% auto;
width: 90%;
height: 20%;
background-color: black;
position: relative;
overflow: hidden;
}
.main-banner .img-ban {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
transition: all ease-in-out 500ms;
}
.main-banner #img-ban3 {
background-image: url("3d-grids.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.main-banner #img-ban2 {
background-image: url("black.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.main-banner #img-ban1 {
background-image: url("starWars.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.imgban-btn {
background-color: grey;
border-radius: 4px;
position: absolute;
top: 50%;
width: 6%;
height: 24px;
transform: translateY(-50%);
z-index: 2000;
opacity: 0.8;
cursor: pointer;
}
.imgban-btn:hover {
opacity: .9;
}
.imgbanbtn-prev {
left: 1%;
background-image: url("back-arrow.png");
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
}
.imgbanbtn-next {
right: 1%;
background-image: url("next-arrow.png");
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
}
.imgban-box {}
.main-banner .imgban-box h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5rem;
color: #fff;
}
.main-banner .imgban-box p {
padding-top: 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: .8rem;
color: #fff;
}
.main-banner #img-ban3 .imgban-box {
padding-top: 10%;
text-align: center;
}
.main-banner #img-ban2 .imgban-box {
padding-top: 15%;
padding-left: 1%;
float: right;
margin-right: 5%;
}
.main-banner #img-ban1 .imgban-box {
padding-top: 15%;
padding-left: 1%;
margin-left: 7%;
float: left;
}
main .options {
width: 100%;
margin: auto;
display: flex;
flex-flow: column wrap;
justify-content: space-between;
padding: 1.3%;
}
main .options .service {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
display: inline-block;
padding: 2%;
background-color: #f5f6fa;
width: 80%;
margin: 5% auto;
height: 200px;
border-radius: 2%;
box-shadow: 5px 5px 8px black;
transition: all 200ms ease-out;
}
footer {
grid-column: 1 / 5;
margin-top: 10%;
padding: 1.3% 0;
background-color: black;
color: white;
}
footer ul {
list-style: none;
text-align: center;
}
footer ul li {
display: inline;
padding: 1% 1%;
}
@media screen and (min-width: 520px) {
.main-banner {
height: 30%;
}
}
@media screen and (min-width: 1350px) {
.main-banner {
width: 80%;
}
}
@media screen and (min-width: 1530px) {
.main-banner {
width: 1200px;
}
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/cb3417b510.js" crossorigin="anonymous"></script>
<div class="container">
<header>
<nav>
<a href="index.html" class="logo">
<img src="logo.png" alt="M-TECH">
</a>
<button class="btn" type="button" data-target="#navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Item 1</a></li>
<li class="nav-item"><a href="#" class="nav-link">Item 2</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle">Dropdown menu</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#" class="dropdown-link">Dropdown item 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Dropdown item 2</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">Dropdown item 3</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Item 4</a></li>
<li class="nav-item"><a href="#" class="nav-link">Item 5</a></li>
</ul>
</div>
</nav>
</header>
<main>
<div class="main-banner" id="main-banner">
<div class="imgban-btn imgbanbtn-prev" id="imgbanbtn-prev"></div>
<div class="img-ban" id="img-ban3">
<div class="imgban-box">
<h2>3D Grids</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
</div>
<div class="img-ban" id="img-ban2">
<div class="imgban-box">
<h2>Black</h2>
<p>Darkness Awaits</p>
</div>
</div>
<div class="img-ban" id="img-ban1">
<div class="imgban-box">
<h2>Star Wars</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
</div>
<div class="imgban-btn imgbanbtn-next" id="imgbanbtn-next"></div>
</div>
<div class="options">
<div class="service">
<h2>Tire alignment</h2>
<p>$30.99</p>
</div>
<div class="service">
<h2>Oil change</h2>
<p>$12.99</p>
</div>
<div class="service">
<h2>Car wash</h2>
<p>$5.99 - basic</p>
<p>$8.99 - premium</p>
<p>$12.99 - gold</p>
</div>