Skip to content

Commit f345edf

Browse files
Atharvx1010Atharvx1010
committed
Added a project
1 parent b591985 commit f345edf

File tree

3 files changed

+207
-0
lines changed

3 files changed

+207
-0
lines changed

‎BirthdayLetter/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<!-- coding by helpme_coder -->
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Gift❤️ By @luciferx1010</title>
9+
<link rel="stylesheet" href="style.css">
10+
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
11+
12+
</head>
13+
14+
<body>
15+
<div class="container">
16+
<div class="valentines">
17+
<div class="envelope"></div>
18+
<div class="front"></div>
19+
<div class="card">
20+
<div class="text">Happy😘</br> Birth💐</br> Day!🤗</div>
21+
<div class="heart"></div>
22+
</div>
23+
</div>
24+
</div>
25+
<div class="shadow"></div>
26+
</div>
27+
<script src="script.js"></script>
28+
</body>
29+
30+
</html>

‎BirthdayLetter/script.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
$(document).ready(function () {
2+
$(".container")
3+
.mouseenter(function () {
4+
$(".card").stop().animate(
5+
{
6+
top: "-90px",
7+
},
8+
"slow"
9+
);
10+
})
11+
.mouseleave(function () {
12+
$(".card").stop().animate(
13+
{
14+
top: 0,
15+
},
16+
"slow"
17+
);
18+
});
19+
});

‎BirthdayLetter/style.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
/* Set the colour and the position of the background and the elements */
2+
body {
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
background-color: #d64e39;
8+
}
9+
10+
.container {
11+
position: relative;
12+
}
13+
.valentines {
14+
position: relative;
15+
top: 50px;
16+
cursor: pointer;
17+
animation: up 3s linear infinite;
18+
}
19+
20+
/* Style the envelope and the card */
21+
.envelope {
22+
position: relative;
23+
width: 300px;
24+
height: 200px;
25+
background-color: #f08080;
26+
}
27+
28+
.envelope:before {
29+
background-color: #f08080;
30+
content: "";
31+
position: absolute;
32+
width: 212px;
33+
height: 212px;
34+
transform: rotate(45deg);
35+
top: -105px;
36+
left: 44px;
37+
border-radius: 30px 0 0 0;
38+
}
39+
40+
.card {
41+
position: absolute;
42+
background-color: #eae2b7;
43+
width: 270px;
44+
height: 170px;
45+
top: 5px;
46+
left: 15px;
47+
box-shadow: -5px -5px 100px rgba(0, 0, 0, 0.4);
48+
}
49+
50+
.card:before {
51+
content: "";
52+
position: absolute;
53+
border: 3px solid #003049;
54+
border-style: dotted;
55+
width: 240px;
56+
height: 140px;
57+
left: 12px;
58+
top: 12px;
59+
}
60+
61+
.text {
62+
position: absolute;
63+
font-family: 'Brush Script MT', cursive;
64+
font-size: 28px;
65+
text-align: center;
66+
line-height: 25px;
67+
top: 19px;
68+
left: 85px;
69+
color: #003049;
70+
}
71+
72+
.heart {
73+
background-color: #930505;
74+
display: inline-block;
75+
height: 30px;
76+
margin: 0 10px;
77+
position: relative;
78+
top: 110px;
79+
left: 105px;
80+
transform: rotate(-45deg);
81+
width: 30px;
82+
}
83+
84+
.heart:before,
85+
.heart:after {
86+
content: "";
87+
background-color: #e83e3e;
88+
border-radius: 50%;
89+
height: 30px;
90+
position: absolute;
91+
width: 30px;
92+
}
93+
94+
.heart:before {
95+
top: -15px;
96+
left: 0;
97+
}
98+
99+
.heart:after {
100+
left: 15px;
101+
top: 0;
102+
}
103+
.front {
104+
position: absolute;
105+
border-right: 180px solid #dda9a4;
106+
border-top: 95px solid transparent;
107+
border-bottom: 100px solid transparent;
108+
left: 120px;
109+
top: 5px;
110+
width: 0;
111+
height: 0;
112+
z-index: 10;
113+
}
114+
115+
.front:before {
116+
position: absolute;
117+
content: "";
118+
border-left: 300px solid #d98c7b;
119+
border-top: 195px solid transparent;
120+
left: -120px;
121+
top: -95px;
122+
width: 0;
123+
height: 0;
124+
}
125+
126+
127+
.shadow {
128+
position: absolute;
129+
width: 330px;
130+
height: 25px;
131+
border-radius: 50%;
132+
background-color: rgba(0, 0, 0, 0.3);
133+
bottom: 250px;
134+
left: 650px;
135+
animation: scale 3s linear infinite;
136+
z-index: -1;
137+
}
138+
139+
140+
@keyframes up {
141+
0%,
142+
100% {
143+
transform: translateY(0);
144+
}
145+
50% {
146+
transform: translateY(-30px);
147+
}
148+
}
149+
150+
@keyframes scale {
151+
0%,
152+
100% {
153+
transform: scaleX(1);
154+
}
155+
50% {
156+
transform: scaleX(0.85);
157+
}
158+
}

0 commit comments

Comments
 (0)