HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title>Responsive Card Design </title>
</head>
<body>
<div class="container">
<div class="login form">
<header> Login </header>
<form action="#">
<input type="text"placeholder="Enter your email">
<input type="password"placeholder="Enter your password">
<a href="#">Forgot password ?</a>
<input type="button"class="button"value="Login">
</form>
<div class="signup">
<span class="signup">Don't have an account?
<label class="sign">Signup</label>
</span>
</div>
</div>
</body>
</html>
CSS
/*Style the box items */
* {
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
font-family: sans-serif ;
}
body {
backgroun-color: #6433f9 ;
min-height: 100% ;
width: 100% ;
}
.container {
position: absolute ;
top: 50%;
left: 50% ;
transform: translate(-50%,-50%) ;
max-width: 425px ;
width: 100% ;
background-color: #fff ;
border-radius: 8px ;
box-shadow: 0 5px 12px rgba(0,0,0,0.3) ;
}
.container .card-item {
background-color: #fff ;
padding :15px ;
list-style :none ;
cursor :pointer ;
box-shadow : 0 8px 12px rgba(0, 0, 0, 0.4) ;
border : 2px solid transparent ;
text-decoration : none ;
border-radius : 12px ;
}
/* Add border on hover */
.container .card-item:hover {
border :3px solid #000 ;
}
.container .card-item img {
width :100% ;
aspect-ratio :16/9 ;
border-radius :8px ;
object-fit :cover ;
}
.card-item h2 {
color :#000 ;
font-size :18px ;
margin-top :27px ;
font-weight :600 ;
}
.card-item .arrow {
display :flex ;
align-items :center ;
justify-content :center ;
transform :rotate(-35deg) ;
height :41px ;
weight :41px ;
color :#000 ;
border :1px solid #000 ;
transition :0.2s ease ;
margin-top :40px ;
border-radius :50% ;
}
.form input.button {
Color : #fff ;
background-color : #009579 ;
font-size : 20px ;
font-weight : 500 ;
margin-top : 1.7rem ;
cursor : pointer ;
transition : 0.4s ;
}
.signup {
font-size : 17px ;
text-align : center ;
}
