Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added a project #501

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added a project #501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f345edf
Added a project
luciferx1010 Feb 2, 2024
7dbfd23
Added styled calculator
luciferx1010 Feb 21, 2024
171f08e
added my code
luciferx1010 Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 30 additions & 0 deletions BirthdayLetter/index.html
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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;
}