<!doctype html> <html lang=""> <head> <title>levore2</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="levore2.css"> </head> <body> <div id="landing_page"> <nav> <a><img src="Levore images/levore-web.png"></a> <ul> <li><a href="">Home</a></li> <li><a href="">Products</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> <li><a href="" id="account_a">Account</a></li> </ul> </nav> <div class="container"> <div class="slider"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <!-- slider 1 --> <div class="slide" id="slide1"> <img src="image/1.jpg"> </div> <!-- slider 2 --> <div class="slide" id="slide2"> <img src="image/2.jpg"> </div> <!-- slider 3 --> <div class="slide" id="slide3"> <img src="image/3.jpg"> </div> </div> <div class="sliding_buttons"> <label for="r1"></label> <label for="r2"></label> <label for="r3"></label> </div> </div> </div> </body> </html>
@font-face { font-family: HelveticaNeue-lightweight; src: url(Fonts/Helvetica_Neue_LT_55_Roman.ttf); font-weight: 100px; font-style: lightweight; } @font-face { font-family: HelveticaNeue; src: url(fonts/HelveticaNeue-Medium.otf); font-weight: 200px; } * { padding: 0px; margin: 0px; } .Landing_Page { display: flex; height: 100vh; width: 100%; } nav { height: 5.5vh; width: 100%; display: flex; position: fixed; background-color: black; align-items: center; justify-content: space-between; } /* Logo */ nav a { display: inline-flex; justify-content: center; align-items: center; height: 100%; padding-left: 5%; } nav a img { height: 80%; } /* navigation tabs */ ul { list-style-type: none; padding-right: 5%; } ul li { display: inline-block; padding: 0px 20px; } ul li a { color: white; text-decoration: none; font-family: HelveticaNeue-lightweight; font-size: 19px; } #account_a { padding-right: 0px; } /* slider */ .container { top: 7.5vh; position: relative; overflow: hidden; width: 93%; height: 90vh; border: 10px solid green; left: 50%; transform: translateX(-50%); } input { display: none; } .slider { height: 100%; width: 300%; display: flex; border: 10px solid red; } .slide { width: 33.34%; transition: 0.6s; } .slide img { width: 100%; } .sliding_buttons { width: 100%; position: absolute; height: 100%; display: flex; justify-content: center; align-items: center; bottom: 0%; top: 30%; } .sliding_buttons label { height: 3%; width: 7%; margin: 10%; background-color: rgba(0, 0, 255, 0.507); cursor: pointer; } .sliding_buttons label:hover { background-color: rgb(165, 138, 138); } #r1:checked ~ #slide1 { margin-left: 0%; } #r2:checked ~ #slide1 { margin-left: -33.34%; } #r3:checked ~ #slide1 { margin-left: -66.67%; }
<input type="radio">
name
The radio group must share the same name (the value of the name attribute) to be treated as a group.
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)