Star-wars slider

Developer
Mike Otis
Size
2,535 Kb
Views
2,024
  1. Star-wars slider Previews
  2. Star-wars slider HTML Codes
  3. Star-wars slider CSS Codes

How do I make an star-wars slider?

What is a star-wars slider? How do you make a star-wars slider? This script and codes were developed by Mike Otis on 01 February 2023, Wednesday.

Star-wars slider Previews
IQ Test

Star-wars slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Star-wars slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<title>Pure CSS Horizontal Slide</title	<meta name="viewport" content="width=device-width, initial-scale=1">	<link rel="stylesheet" href="pure-horizontal-slider.css">	</head>	<body>	<div class="wrap"> <header> <label for="slide-1-trigger" class="font" id="one">Slide One</label> <label for="slide-2-trigger" class="font" id="two">Slide Two</label> <label for="slide-3-trigger" class="font" id="three">Slide Three</label> <label for="slide-4-trigger" class="font" id="four">Slide Four</label> </header> <input id="slide-1-trigger" type="radio" name="slides" checked> <section class="slide slide-one"> <h1>Pure CSS Slider</h1> </section> <input id="slide-2-trigger" type="radio" name="slides"> <section class="slide slide-two"> <h1>Headline Two</h1> </section> <input id="slide-3-trigger" type="radio" name="slides"> <section class="slide slide-three"> <h1>Headline Three</h1> </section> <input id="slide-4-trigger" type="radio" name="slides"> <section class="slide slide-four"> <h1>Headline Four</h1> </section>
<img src="https://res.cloudinary.com/mikeotis/image/upload/v1463415239/profile_qozvu6.jpg" class="profile-pic">
</div>
</body>
</html>

Star-wars slider - Script Codes CSS Codes

html { box-sizing: border-box; font-family: Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.4;
}
*,
*:before,
*:after { box-sizing: inherit; }
h1 { color: #fff; font-family: "Audiowide", cursive; font-size: 2em; font-size: 6vw; line-height: 1.2; margin: 0.5em 0 3em; text-shadow: 1px 1px 1px #333;
}
html,
body { height: 100%; width: 100%; margin: 0; padding: 0;
}
.wrap { height: 100%; width: 100%; position: relative; overflow: hidden; background: #120103; color: #fff; text-align: center;
}
header { background: white; box-shadow: 0 .5em 1em #111; position: absolute; top: 0; left: 0; z-index: 900; width: 100%; height: 0px; } label { color: black; cursor: pointer; display: inline-block; line-height: 4.25em; font-size: 17px; font-weight: bold; padding: 0 1em;
}
.font{ font-size:19px; margin-top: 100px; color:red; margin-left:80px;
}
header label:hover { background: DarkRed;
}
h1 { opacity: 0; transform: translateY(100%); transition: transform .5s .5s, opacity .5s; }
.slide { height: 100%; width: 100%; position: absolute; top: 0; left: 100%; z-index: 10; padding: 8em 1em 0; background-color: #120103; background-position: 50% 50%; background-size: cover; transition: left 0s .75s;
}
.slide-one { background-image: url('https://res.cloudinary.com/mikeotis/image/upload/v1463415277/Death-Star-2_tyxegk.jpg'); }
.slide-two { background-image: url('https://res.cloudinary.com/mikeotis/image/upload/v1463361425/star-wars-7.0_qrwbra.jpg'); }
.slide-three { background-image: url('https://res.cloudinary.com/mikeotis/image/upload/v1463415201/kylo-ren_mz9hgf.jpg'); }
.slide-four { background-image: url('https://res.cloudinary.com/mikeotis/image/upload/v1463415182/art_beuyed.jpg'); }
[id^="slide"]:checked + .slide { left: 0; z-index: 100; transition: left .65s ease-out; } .profile-pic{ position: absolute; z-index: 102; border-radius: 50px; margin-top:200px; margin-left:-600px; cursor: pointer; } .profile-pic:hover{ opacity: 0; }
Star-wars slider - Script Codes
Star-wars slider - Script Codes
Home Page Home
Developer Mike Otis
Username mikeotis
Uploaded February 01, 2023
Rating 3
Size 2,535 Kb
Views 2,024
Do you need developer help for Star-wars slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mike Otis (mikeotis) Script Codes
Name
A replica of the good work website
Practice amazing seller
3 pages in One Website
This is the Full Stack Conf build a website with bootstrap course by treehouse
Pro hack advertisement
A simple face-book button
A share button
Fake-book
A slider web page. Pages are in the slider.
Codeconquest fake website.
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!