Skip to content

Commit

Permalink
Merge pull request #501 from Atharvx1010/clone_tt
Browse files Browse the repository at this point in the history
Added a project
  • Loading branch information
Ayushparikh-code authored Sep 17, 2024
2 parents 4595382 + 171f08e commit 5b5d17d
Show file tree
Hide file tree
Showing 6 changed files with 357 additions and 0 deletions.
30 changes: 30 additions & 0 deletions BirthdayLetter/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- coding by helpme_coder -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gift❤️ By @luciferx1010</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

</head>

<body>
<div class="container">
<div class="valentines">
<div class="envelope"></div>
<div class="front"></div>
<div class="card">
<div class="text">Happy😘</br> Birth💐</br> Day!🤗</div>
<div class="heart"></div>
</div>
</div>
</div>
<div class="shadow"></div>
</div>
<script src="script.js"></script>
</body>

</html>
19 changes: 19 additions & 0 deletions BirthdayLetter/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
$(document).ready(function () {
$(".container")
.mouseenter(function () {
$(".card").stop().animate(
{
top: "-90px",
},
"slow"
);
})
.mouseleave(function () {
$(".card").stop().animate(
{
top: 0,
},
"slow"
);
});
});
158 changes: 158 additions & 0 deletions BirthdayLetter/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
/* Set the colour and the position of the background and the elements */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #d64e39;
}

.container {
position: relative;
}
.valentines {
position: relative;
top: 50px;
cursor: pointer;
animation: up 3s linear infinite;
}

/* Style the envelope and the card */
.envelope {
position: relative;
width: 300px;
height: 200px;
background-color: #f08080;
}

.envelope:before {
background-color: #f08080;
content: "";
position: absolute;
width: 212px;
height: 212px;
transform: rotate(45deg);
top: -105px;
left: 44px;
border-radius: 30px 0 0 ;
}

.card {
position: absolute;
background-color: #eae2b7;
width: 270px;
height: 170px;
top: 5px;
left: 15px;
box-shadow: -5px -5px 100px rgba(0, 0, 0, 0.4);
}

.card:before {
content: "";
position: absolute;
border: 3px solid #003049;
border-style: dotted;
width: 240px;
height: 140px;
left: 12px;
top: 12px;
}

.text {
position: absolute;
font-family: 'Brush Script MT', cursive;
font-size: 28px;
text-align: center;
line-height: 25px;
top: 19px;
left: 85px;
color: #003049;
}

.heart {
background-color: #930505;
display: inline-block;
height: 30px;
margin: 0 10px;
position: relative;
top: 110px;
left: 105px;
transform: rotate(-45deg);
width: 30px;
}

.heart:before,
.heart:after {
content: "";
background-color: #e83e3e;
border-radius: 50%;
height: 30px;
position: absolute;
width: 30px;
}

.heart:before {
top: -15px;
left: 0;
}

.heart:after {
left: 15px;
top: 0;
}
.front {
position: absolute;
border-right: 180px solid #dda9a4;
border-top: 95px solid transparent;
border-bottom: 100px solid transparent;
left: 120px;
top: 5px;
width: 0;
height: 0;
z-index: 10;
}

.front:before {
position: absolute;
content: "";
border-left: 300px solid #d98c7b;
border-top: 195px solid transparent;
left: -120px;
top: -95px;
width: 0;
height: 0;
}


.shadow {
position: absolute;
width: 330px;
height: 25px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
bottom: 250px;
left: 650px;
animation: scale 3s linear infinite;
z-index: -1;
}


@keyframes up {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
}

@keyframes scale {
0%,
100% {
transform: scaleX(1);
}
50% {
transform: scaleX(0.85);
}
}
53 changes: 53 additions & 0 deletions styled calci/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="tlogo.png">
<title>© Mukhtar Ansarii </title>
</head>
<body>
<div class="calculator">
<h6 class="owner">MADE BY MUKHTAR ANSARII</h6>
<input type="text" placeholder="0" id="inputBox">

<div>
<button class="op">AC</button>
<button class="op">DEL</button>
<button class="op">%</button>
<button class="op">/</button>
</div>

<div>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="op">*</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="op">-</button>
</div>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="op">+</button>
</div>
<div>
<button>00</button>
<button>0</button>
<button class="op">.</button>
<button class="equal8tn">=</button>
</div>

</div>

<script src="script.js"></script>
</body>
</html>
28 changes: 28 additions & 0 deletions styled calci/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
let input = document.getElementById('inputBox');
let buttons = document.querySelectorAll('button');

let string = "";
let arr = Array.from(buttons);
arr.forEach(button => {
button.addEventListener('click', (e) =>{
if(e.target.innerHTML == '='){
string = eval(string);
input.value =string;
}
else if(e.target.innerHTML == 'AC'){
string = "";
input.value= string;
}

else if(e.target.innerHTML == 'DEL'){
string = string.substring(0, string.length-1);
input.value = string;
}

else{ string += e.target.innerHTML;
input.value = string;

}

})
})
69 changes: 69 additions & 0 deletions styled calci/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;

}

body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #0a0a0a, #3a4452);
}

.calculator{
border: 1px solid #717377;
padding: 20px;
border-radius: 16px;
background: transparent;
box-shadow: 0px 3px 15px rgba(133, 115, 119, 0.5);
}

input{
width: 320px;
border: none;
padding: 24px;
margin: 10px;
background: transparent;
box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);
font-size: 40px;
text-align: right;
cursor: pointer;
color: #ffffff;
}

input::placeholder{
color: #ffffff;
}

button{
border: none;
width: 60px;
height: 60px;
margin: 10px;
border-radius: 50%;
background: transparent;
color: #ffffff;
font-size: 20px;
box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
cursor: pointer;
}

.equal8tn{
background-color: #fb7c14;
}

.op{
color: aqua;
}

.owner{
color: white;
font-size: 10px;
}

0 comments on commit 5b5d17d

Please sign in to comment.