Html task 2
Coding :
<!DOCTYPE html>
<html>
<head>
<title>Evergreen</title>
<style>
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#eaeaea;
}
.bubbles{
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 8%, transparent 9%),
radial-gradient(circle at 70% 20%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 6%, transparent 7%),
radial-gradient(circle at 40% 60%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 10%, transparent 11%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 7%, transparent 8%),
radial-gradient(circle at 25% 80%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.18) 9%, transparent 10%);
pointer-events:none;
}
.main-card{
position: relative;
width:420px;
height:580px;
background: green;
border-radius:25px;
box-shadow:0 15px 30px rgba(0,0,0,0.3);
overflow:hidden;
padding:25px;
}
.curve{
position:absolute;
top:-170px;
right:-140px;
width:380px;
height:260px;
background:white;
border-radius:50%;
}
.curve-text{
position:absolute;
top:25px;
right:30px;
font-size:32px;
color:#2e8b2e;
font-family: 'Times New Roman', Times, serif;
font-weight:500;
z-index:2;
}
.card{
background: red;
width:200px;
padding:20px;
border-radius:15px;
color:white;
text-align:center;
box-shadow:0 8px 16px rgba(0,0,0,0.3);
}
.card h1{
border-top:3px solid white;
border-bottom:3px solid white;
display:inline-block;
padding:5px 15px;
margin:10px 0 5px;
}
.card p{
margin:0;
font-size:16px;
}
.bottom-text{
position:absolute;
bottom:120px;
left:30px;
font-size:48px;
color:white;
font-weight:bold;
text-shadow:2px 2px 4px rgba(0,0,0,0.3);
line-height:1;
}
.long-book{
position:absolute;
bottom:40px;
right:40px;
background: red;
color:white;
padding:6px 12px;
font-weight:bold;
border-radius:4px;
}
</style>
</head>
<body>
<div class="main-card">
<div class="bubbles"></div>
<div class="curve"></div>
<div class="curve-text">Evergreen</div>
<div class="flower"></div>
<div class="card">
<div><sub>★</sub><sup>★</sup><sub>★</sub></div>
<h1>PREMIUM</h1>
<p>Series</p>
</div>
<div class="bottom-text">
Inspire<br>Creative
</div>
<div class="long-book">LONG BOOK</div>
</div>
</body>
</html>
Output :
Comments
Post a Comment