animated login form with 2 rings - tried to make it as minimal as possible
A Pen by Kevin Marville on CodePen.
animated login form with 2 rings - tried to make it as minimal as possible
A Pen by Kevin Marville on CodePen.
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Discount Check</title> | |
<link rel="stylesheet" href="styles.css"> | |
</head> | |
<body> | |
<!--ring div starts here--> | |
<div class="ring"> | |
<i style="--clr:#00ff0a;"></i> | |
<i style="--clr:#ff0057;"></i> | |
<i style="--clr:#fffd44;"></i> | |
<div class="discount"> | |
<h2>Check Discount Eligibility</h2> | |
<form onsubmit="event.preventDefault(); checkDiscount();"> | |
<div class="inputBx"> | |
<label for="age">Enter your age:</label> | |
<input type="number" id="age" name="age" required><br><br> | |
</div> | |
<div class="inputBx"> | |
<label for="isStudent">Are you a student?</label> | |
<input type="checkbox" id="isStudent" name="isStudent"><br><br> | |
</div> | |
<div class="inputBx"> | |
<input type="submit" value="Check Discount Eligibility"> | |
</div> | |
</form> | |
</div> | |
</div> | |
<!--ring div ends here--> | |
<script src="script.js"></script> | |
</body> | |
</html> |
function checkDiscount() { | |
let age = document.getElementById("age").value; | |
let isStudent = document.getElementById("isStudent").checked; | |
if (age < 18 || isStudent) { | |
alert("You are eligible for a discount!"); | |
} else { | |
alert("You are not eligible for a discount."); | |
} | |
} |
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap"); | |
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
font-family: "Quicksand", sans-serif; | |
} | |
body { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
min-height: 100vh; | |
background: #111; | |
width: 100%; | |
overflow: hidden; | |
} | |
.ring { | |
position: relative; | |
width: 500px; | |
height: 500px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.ring i { | |
position: absolute; | |
inset: 0; | |
border: 2px solid #fff; | |
transition: 0.5s; | |
} | |
.ring i:nth-child(1) { | |
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; | |
animation: animate 6s linear infinite; | |
} | |
.ring i:nth-child(2) { | |
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%; | |
animation: animate 4s linear infinite; | |
} | |
.ring i:nth-child(3) { | |
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%; | |
animation: animate2 10s linear infinite; | |
} | |
.ring:hover i { | |
border: 6px solid var(--clr); | |
filter: drop-shadow(0 0 20px var(--clr)); | |
} | |
@keyframes animate { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
@keyframes animate2 { | |
0% { | |
transform: rotate(360deg); | |
} | |
100% { | |
transform: rotate(0deg); | |
} | |
} | |
.discount { | |
position: absolute; | |
width: 300px; | |
height: 100%; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-direction: column; | |
gap: 20px; | |
} | |
.discount h2 { | |
font-size: 2em; | |
color: #fff; | |
} | |
.discount .inputBx { | |
position: relative; | |
width: 100%; | |
} | |
.discount .inputBx label { | |
font-size: 1.2em; | |
color: #fff; | |
} | |
.discount .inputBx input[type="number"], | |
.discount .inputBx input[type="checkbox"], | |
.discount .inputBx input[type="submit"] { | |
position: relative; | |
width: 100%; | |
padding: 12px 20px; | |
background: transparent; | |
border: 2px solid #fff; | |
border-radius: 40px; | |
font-size: 1.2em; | |
color: #fff; | |
box-shadow: none; | |
outline: none; | |
} | |
.discount .inputBx input[type="submit"] { | |
background: #0078ff; | |
background: linear-gradient(45deg, #ff357a, #fff172); | |
border: none; | |
cursor: pointer; | |
} | |
.discount .inputBx input::placeholder { | |
color: rgba(255, 255, 255, 0.75); | |
} |