Menu
Hello everyone! I am Skylar and I am attempting to get a potfolio together for myself while in school and I am building a website for my Start up! I am attempting to make a slideshow that moves automatically but can also scroll on command. This is the code I have so far.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Prism eSports</title>
<link rel=”stylesheet” type=”text/css” href=”prism.css”>
</head>
<body>
<header>
<nav>
<link href=”
<p>Prism eSports</p>
<ul>
<li><a href=”Prism.html”>Home</a></li>
<li><a href=”#”>Products 🢓</a>
<ul>
<li><a href=””>Jerseys</a></li>
<li><a href=””>T-Shirts</a></li>
<li><a href=””>Hoodies</a></li>
<li><a href=””>Hats</a></li>
</ul>
</li>
<li><a href=”#”>Members 🢓</a>
<ul>
<li><a href=””>Management</a></li>
<li><a href=””>Apex Legends</a></li>
<li><a href=””>Fortnite</a></li>
<li><a href=””>Call Of Duty</a></li>
<li><a href=””>Pub G Mobile</a></li>
<li><a href=””>Rainbow Six Siege</a></li>
<li><a href=””>CSGO</a></li>
</ul>
</li>
<li><a href=”#”>Partners 🢓</a>
<ul>
<li><a href=””>Juggernaut Energy</a></li>
</ul>
</li>
<li><a href=”#”>Live Streams</a></li>
<li><a href=”#”>About Us</a></li>
</ul>
</nav>
</header>
<slider>
<slide><p>Slide 1</p></slide>
<slide><p>Slide 2</p></slide>
<slide><p>Slide 3</p></slide>
<slide><p>Slide 4</p></slide>
</slider>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background-image: url(img/logo.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: white;
width: 100%;
height: 100%;
}
nav {
width: 100%;
height: 60px;
background-color: #11171a;
}
nav p {
font-family: ‘Russo One’;
color:#A9A9A9;
font-size: 24px;
line-height: 55px;
float: left;
padding:0px 20px;
}
nav ul {
float:left;
}
nav ul li {
float:left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: arial;
color:#A9A9A9;
font-size: 15px;
padding: 22px 14px;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: #0099ff;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #11171a;
padding: 10px;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
color: white;
}
nav ul li ul li {
width:180px;
border-radius: 4px;
}
nav ul li ul li a{
padding:8px 14px;
color: white;
}
nav ul li ul li a:hover {
color: #0099ff;
background-color: none;
}
slider {
display: block;
width: 100%;
height: 100%;
background-color: #0099ff;
overflow: hidden;
}
slider > * {
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #0099ff;
animation: slide 12s infinite;
overflow: hidden;
}
slide:nth-child(1) {
animation-delay: -1s;
background-image: url(slideShow.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(2) {
animation-delay: 2s;
background-image: url(slideShow2.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(3) {
animation-delay: 5s;
background-image: url(slideShow3.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(4) {
animation-delay: 8s;
background-image: url(slideShow4.jpg);
background-size: cover;
background-position: center;
}
slide p {
font-family: ‘Russo One’;
font-size: 70px;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #0099ff;
}
@keyframes slide {
0% {left: 100%; width: 100%;}
5% {left: 0%;}
25% {left : 0%;}
30% {left: -100%; width: 100%;}
30.001% {left: -100%; width: 0%;}
100% {left: 100%; width : 0%;}
}
I am attempting to do a few things. First what can I do to size down the slide show and give it more of a “container” look. Second how would I go about adding custom controls? Would that be in JS? And third how can I make it to where my drop-down menu drops down in front of the photos rather than behind? I know it has to do with the position being absolute.