1 Correct answer
CodePen, JS Fiddle, Bootsnips and other code sharing sites are testing grounds. Sometimes the code works OK or not. Use at your own risk and do your own testing.
7
Replies
None of the above, heres the HTML and CSS code for it.
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>S.T. Graffix - Illustrator</title>
<link href="stg-style.css" rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 24px;
color: #0061ff;
}
</style>
</head>
<body>
<h1><font class="textcoloured">S.T. Graffix:</font> Specializing In Graphic Design & Apparel Printing</h1>
<div id="container">
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Work</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="drawings.html">Drawings</a></li>
<li><a href="illustrator.html">illustrator</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="shirts.html">Printed Shirts</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div>
<div>
<div class="carousel">
<ul class="slides">
<input type="radio" name="radio-buttons" id="img-1" checked />
<li class="slide-container">
<div class="slide-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Timisoara_-_Regional_Business_Centre.jpg">
</div>
<div class="carousel-controls">
<label for="img-3" class="prev-slide">
<span>‹</span>
</label>
<label for="img-2" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-2" />
<li class="slide-container">
<div class="slide-image">
<img src="http://www.timisoaranight.gruzphoto.eu/IMG_8554.jpg">
</div>
<div class="carousel-controls">
<label for="img-1" class="prev-slide">
<span>‹</span>
</label>
<label for="img-3" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-3" />
<li class="slide-container">
<div class="slide-image">
<img src="https://speakzeasy.files.wordpress.com/2015/05/twa_blogpic_timisoara-4415.jpg">
</div>
<div class="carousel-controls">
<label for="img-2" class="prev-slide">
<span>‹</span>
</label>
<label for="img-1" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<div class="carousel-dots">
<label for="img-1" class="carousel-dot" id="img-dot-1"></label>
<label for="img-2" class="carousel-dot" id="img-dot-2"></label>
<label for="img-3" class="carousel-dot" id="img-dot-3"></label>
</div>
</ul>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #ffffff;
color: #fff;
margin: 0px;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #0061ff;
line-height: 60px;
margin-top: 30px;
text-align:left;
margin-left: 60px;
font-size:50px;
font-family: 'Bree Serif', 'serif';
}
.textcoloured {
color: #000000
}
#container {
margin: 0 auto;
}
nav {
margin: 50px 0;
background-color: #0061ff;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #0061ff;
transition: 0.5s;
}
nav a {
display:block;
padding: 0 20px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
transition: 0.5s;
}
nav a:hover {
background-color: #000000;
transition: 0.5s;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
opacity: 0.0;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
opacity: 1.0;
top -20px;
animation-name: fadein;
animation-duration: 0.5s;
z-index: -1;
}
@keyframes fadein {
from {opacity: 0.0; top: -20px;}
to {opacity: 1.0; top: 60px;}
}
/* Dropdown */
nav ul ul li {
width:190px;
float:none;
display:list-item;
position: relative;
transition: 0.5s;
}
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
.carousel {
margin-left: 35%;
margin-right: 30%;
}
ul.slides {
display: block;
position: relative;
height: 600px;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
ul.slides input {
display: none;
}
.slide-container {
display: block;
}
.slide-image {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: all .7s ease-in-out;
}
.slide-image img {
width: auto;
min-width: 100%;
height: 100%;
}
.carousel-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
font-size: 100px;
line-height: 600px;
color: #fff;
}
.carousel-controls label {
display: none;
position: absolute;
padding: 0 20px;
opacity: 0;
transition: opacity .2s;
cursor: pointer;
}
.slide-image:hover + .carousel-controls label{
opacity: 0.5;
}
.carousel-controls label:hover {
opacity: 1;
}
.carousel-controls .prev-slide {
width: 49%;
text-align: left;
left: 0;
}
.carousel-controls .next-slide {
width: 49%;
text-align: right;
right: 0;
}
.carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
z-index: 999;
text-align: center;
}
.carousel-dots .carousel-dot {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
opacity: 0.5;
margin: 10px;
}
input:checked + .slide-container .slide-image {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .carousel-controls label {
display: block;
}
input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6 {
opacity: 1;
}
input:checked + .slide-container .nav label { display: block; }
Im thinking this Div line may or may not have something to do with it, im not 100% sure.
I don't know how they got there but these errors are in your markup.
AdChoices