<!DOCTYPE html>
<html>
<head>
<title>Слайдер на CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<div class="all">
<input checked type="radio" name="respond" id="desktop">
<article id="slider">
<input checked type="radio" name="slider" id="switch1">
<input type="radio" name="slider" id="switch2">
<input type="radio" name="slider" id="switch3">
<input type="radio" name="slider" id="switch4">
<input type="radio" name="slider" id="switch5">
<div id="slides">
<div id="overflow">
<div class="image">
<article><img src="1.jpg"></article>
<article><img src="2.jpg"></article>
<article><img src="3.jpg"></article>
<article><img src="4.jpg"></article>
<article><img src="5.jpg"></article>
</div>
</div>
</div>
<div id="controls">
<label for="switch1"></label>
<label for="switch2"></label>
<label for="switch3"></label>
<label for="switch4"></label>
<label for="switch5"></label>
</div>
<div id="active">
<label for="switch1"></label>
<label for="switch2"></label>
<label for="switch3"></label>
<label for="switch4"></label>
<label for="switch5"></label>
</div>
</article>
</div>
</body>
</html>
style.css
body {
background: rgb(255, 33, 4);
color: rgba(216, 25, 0, 0.73);
font-family: Arial, Times New Roman;
font-size: 20px;
}
#container {
background: rgba(153, 204, 0, 0.83);
margin: 40px auto;
width: 1800px;
height: 600px;
}
#header {
background: rgba(9, 77, 230, 0.75);
height: 520px;
width: 1800px;
}
#navigation {
background: rgba(255, 255, 255, 0.7);
width: 1800px;
height: 80px;
}
#menu {
background: rgba(157, 3, 253, 0.76);
float: left;
width: 705px;
height: 495px;
}
#content {
background: rgba(255, 187, 0, 0.74);
float: right;
width: 1090px;
height: 495px;
}
#clear {
clear:both;
}
#footer {
background: rgb(255, 225, 0);
height: 80px;
width: 1800px;
}
img{
margin-top:-45px;
}