Test
How do I make an test?
What is a test? How do you make a test? This script and codes were developed by Jermaine on 26 August 2022, Friday.
Test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="switch"> <input name="switch" id="one" type="radio" checked/> <label for="one" class="switch__label">One</label> <input name="switch" id="two" type="radio" /> <label for="two" class="switch__label">Two</label> <input name="switch" id="three" type="radio" /> <label for="three" class="switch__label" >Three</label> <div class="switch__indicator" /></div>
</div>
</body>
</html>
Test - Script Codes CSS Codes
.switch { position: relative; width: 14rem; padding: 0 1rem; font-family: verdana;
}
.switch:before { content: ' '; position: absolute; left: 0; z-index: -1; width: 100%; height: 3rem; background: #000; border-radius: 30px;
}
.switch__label { display: inline-block; width: 2rem; padding: 1rem; text-align: center; cursor: pointer; transition: color 200ms ease-out;
}
.switch__label:hover { color: white;
}
.switch__indicator { width: 4rem; height: 4rem; position: absolute; top: -.5rem; left: 0; background: blue; border-radius: 50%; transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03); transform: translate3d(1rem, 0, 0);
}
.switch input#one:checked ~ .switch__indicator { background: PaleGreen; transform: translate3d(1.2rem, 0, 0);
}
.switch input#two:checked ~ .switch__indicator { background: MediumTurquoise; transform: translate3d(5.5rem, 0, 0);
}
.switch input#three:checked ~ .switch__indicator { background: PaleVioletRed; transform: translate3d(10.6rem, 0, 0);
}
.switch input[type="radio"]:not(:checked), .switch input[type="radio"]:checked { display: none;
}
body { background: #333; color: #999; position: absolute; top: 50%; left: 50%; margin-left: -9rem; margin-top: -3rem;
}
Developer | Jermaine |
Username | dviate |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 2,668 Kb |
Views | 32,384 |
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!
Name | Size |
Filter testje | 3,307 Kb |
Testje voor KPN | 1,976 Kb |
Blur demo | 1,925 Kb |
Dingetje 2 | 3,087 Kb |
Accordion demootje | 14,607 Kb |
Mac Baby | 5,317 Kb |
Dingetje 1 | 2,890 Kb |
Console fun | 1,500 Kb |
A Pen by Jermaine | 3,249 Kb |
Cross Browser Autofill Form | 2,492 Kb |
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!
Name | Username | Size |
SlideupBoxes | Gavra | 23,772 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Waveform function for a siren tone modulation | Clafou | 1,656 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!