Skip to content

Commit 5b5d17d

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #501 from Atharvx1010/clone_tt
Added a project
2 parents 4595382 + 171f08e commit 5b5d17d

File tree

6 files changed

+357
-0
lines changed

6 files changed

+357
-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 ;
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+
}

‎styled calci/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="icon" href="tlogo.png">
10+
<title>© Mukhtar Ansarii </title>
11+
</head>
12+
<body>
13+
<div class="calculator">
14+
<h6 class="owner">MADE BY MUKHTAR ANSARII</h6>
15+
<input type="text" placeholder="0" id="inputBox">
16+
17+
<div>
18+
<button class="op">AC</button>
19+
<button class="op">DEL</button>
20+
<button class="op">%</button>
21+
<button class="op">/</button>
22+
</div>
23+
24+
<div>
25+
<button>7</button>
26+
<button>8</button>
27+
<button>9</button>
28+
<button class="op">*</button>
29+
</div>
30+
<div>
31+
<button>4</button>
32+
<button>5</button>
33+
<button>6</button>
34+
<button class="op">-</button>
35+
</div>
36+
<div>
37+
<button>1</button>
38+
<button>2</button>
39+
<button>3</button>
40+
<button class="op">+</button>
41+
</div>
42+
<div>
43+
<button>00</button>
44+
<button>0</button>
45+
<button class="op">.</button>
46+
<button class="equal8tn">=</button>
47+
</div>
48+
49+
</div>
50+
51+
<script src="script.js"></script>
52+
</body>
53+
</html>

‎styled calci/script.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
let input = document.getElementById('inputBox');
2+
let buttons = document.querySelectorAll('button');
3+
4+
let string = "";
5+
let arr = Array.from(buttons);
6+
arr.forEach(button => {
7+
button.addEventListener('click', (e) =>{
8+
if(e.target.innerHTML == '='){
9+
string = eval(string);
10+
input.value =string;
11+
}
12+
else if(e.target.innerHTML == 'AC'){
13+
string = "";
14+
input.value= string;
15+
}
16+
17+
else if(e.target.innerHTML == 'DEL'){
18+
string = string.substring(0, string.length-1);
19+
input.value = string;
20+
}
21+
22+
else{ string += e.target.innerHTML;
23+
input.value = string;
24+
25+
}
26+
27+
})
28+
})

‎styled calci/style.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
9+
}
10+
11+
body{
12+
width: 100%;
13+
height: 100vh;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
background: linear-gradient(45deg, #0a0a0a, #3a4452);
18+
}
19+
20+
.calculator{
21+
border: 1px solid #717377;
22+
padding: 20px;
23+
border-radius: 16px;
24+
background: transparent;
25+
box-shadow: 0px 3px 15px rgba(133, 115, 119, 0.5);
26+
}
27+
28+
input{
29+
width: 320px;
30+
border: none;
31+
padding: 24px;
32+
margin: 10px;
33+
background: transparent;
34+
box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);
35+
font-size: 40px;
36+
text-align: right;
37+
cursor: pointer;
38+
color: #ffffff;
39+
}
40+
41+
input::placeholder{
42+
color: #ffffff;
43+
}
44+
45+
button{
46+
border: none;
47+
width: 60px;
48+
height: 60px;
49+
margin: 10px;
50+
border-radius: 50%;
51+
background: transparent;
52+
color: #ffffff;
53+
font-size: 20px;
54+
box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
55+
cursor: pointer;
56+
}
57+
58+
.equal8tn{
59+
background-color: #fb7c14;
60+
}
61+
62+
.op{
63+
color: aqua;
64+
}
65+
66+
.owner{
67+
color: white;
68+
font-size: 10px;
69+
}

0 commit comments

Comments
 (0)