Scribd
Upload
14 views

!Doctype HTML

Uploaded by

parmilapilanya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

!Doctype HTML

Uploaded by

parmilapilanya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Happy Birthday Card</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.card {
width: 400px;
height: 600px;
background: linear-gradient(to right, #ff6a00, #ffb347);
border-radius: 15px;
overflow: hidden;
text-align: center;
padding: 20px;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
}

h1 {
font-size: 40px;
color: white;
margin: 20px 0;
}

p {
font-size: 18px;
color: white;
}

.birthday-image {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
margin-top: 30px;
}

.footer {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
color: white;
}

.balloon {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 70px;
background-color: #ff4d4d;
border-radius: 50%;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.balloon-string {
position: absolute;
top: 60%;
left: 50%;
width: 2px;
height: 150px;
background-color: #000;
transform: translateX(-50%);
}
</style>
</head>
<body>

<div class="card">
<div class="balloon"></div>
<div class="balloon-string"></div>

<h1>Happy Birthday!</h1>
<img src="https://via.placeholder.com/200" alt="Birthday Image"
class="birthday-image">

<p>Wishing you all the best on your special day!</p>

<div class="footer">
<p>Anushka,</p>
<p>[Aarvi]</p>
</div>
</div>

</body>
</html>

You might also like