Skip to content

Commit caa897f

Browse files
Oleksandr1902Oleksandr1902
authored
Merge branch 'TusharKesarwani:main' into feat/air-pollution-search-place-location
2 parents 67bba30 + b3ac80a commit caa897f

389 files changed

Lines changed: 15046 additions & 30039 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.DS_Store‎

8 KB
Binary file not shown.

‎Projects/3D Rotating Cube/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
### A 3D rotating cube
2+
Created a 3D rotating cube using HTML, CSS, and JavaScript. The end result will be an interactive cube that rotates in 3D space.

‎Projects/3D Rotating Cube/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Modern Rotating 3D Cube Animation</title>
5+
<link rel="stylesheet" href="styles.css">
6+
</head>
7+
<body>
8+
<div class="container">
9+
<div class="cube">
10+
<div class="face front">
11+
</div>
12+
<div class="face back">
13+
</div>
14+
<div class="face right">
15+
</div>
16+
<div class="face left">
17+
18+
</div>
19+
<div class="face top">
20+
</div>
21+
<div class="face bottom">
22+
</div>
23+
</div>
24+
</div>
25+
</body>
26+
</html>

‎Projects/3D Rotating Cube/styles.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
body {
2+
background: linear-gradient(to bottom right, #18427d, #5d7ac4);
3+
height: 100vh;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
margin: 0;
8+
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2); /* Updated box-shadow */
9+
10+
}
11+
12+
.container {
13+
perspective: 800px;
14+
15+
}
16+
17+
.cube {
18+
width: 200px;
19+
height: 200px;
20+
position: relative;
21+
transform-style: preserve-3d;
22+
animation: rotate 6s infinite linear;
23+
transform: rotateX(-20deg) rotateY(-30deg);
24+
background: linear-gradient(to bottom right, #695c29, #e67e22);
25+
}
26+
27+
.face {
28+
position: absolute;
29+
width: 200px;
30+
height: 200px;
31+
color: rgb(255, 255, 255);
32+
font-size: 24px;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
text-transform: uppercase;
37+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
38+
}
39+
40+
.front {
41+
background: linear-gradient(to bottom right, #477422, #77f12c); transform: translateZ(100px);
42+
}
43+
44+
.back {
45+
background: linear-gradient(to bottom right, #105561, #0ed7e9); transform: translateZ(-100px) rotateY(180deg);
46+
}
47+
48+
.right {
49+
background: linear-gradient(to bottom right, #b8a249, #e67e22); transform: translateX(100px) rotateY(90deg);
50+
}
51+
52+
.left {
53+
background: linear-gradient(to bottom right, #3e8575, #13eca0); transform: translateX(-100px) rotateY(-90deg);
54+
}
55+
56+
.top {
57+
background: linear-gradient(to bottom right, #f1c40f, #e67e22); transform: translateY(-100px) rotateX(90deg);
58+
}
59+
60+
.bottom {
61+
background: linear-gradient(to bottom right, #d16725, #ce905a); transform: translateY(100px) rotateX(-90deg);
62+
}
63+
64+
65+
@keyframes rotate {
66+
0% {
67+
transform: rotateX(-20deg) rotateY(-30deg);
68+
}
69+
100% {
70+
transform: rotateX(340deg) rotateY(330deg);
71+
}
72+
}
73+

‎Projects/Age Calculator/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<b>Simple Age Calculator Website</b>
2+
<br>
3+
<br>
4+
This repository contains a simple age calculator website built using HTML, CSS, and JavaScript. The website allows users to calculate their age based on their birthdate.
5+
<br>
6+
<br>
7+
<b>Features</b>
8+
<br>
9+
<br>
10+
-User-friendly interface.<br>
11+
-Input field for entering the birthdate.<br>
12+
-Calculate button to initiate the age calculation.<br>
13+
-Display area to show the calculated age.<br>
14+
<br>
15+
<br>
16+
<b>Technologies Used</b>
17+
<br>
18+
<br>
19+
-<b>HTML</b>: Used for structuring the website.<br>
20+
-<b>CSS</b>: Used for styling the website.<br>
21+
-<b>JavaScript</b>: Used for handling the age calculation logic.<br>
22+
<br>
23+
<br>
24+
**How to Use**
25+
<br>
26+
<br>
27+
1.Clone the repository or download the source code files.<br>
28+
2.Open the index.html file in your preferred web browser.<br>
29+
3.Enter your birthdate in the provided input field in the format YYYY-MM-DD.<br>
30+
4.Click on the "Calculate" button.<br>
31+
5.The calculated age will be displayed in the designated area.<br>
32+

‎Projects/Age Calculator/index.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Age Calculator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="calculator">
13+
<h1>Age Calculator</h1>
14+
<div class="input-box">
15+
16+
<input type="date" id="date">
17+
<button onclick="calculateAge()">Calculate</button>
18+
</div>
19+
<p id="result"></p>
20+
</div>
21+
22+
</div>
23+
24+
<script>
25+
let userInput=document.getElementById("date")
26+
userInput.max=new Date().toISOString().split("T")[0];
27+
28+
let result=document.getElementById("result");
29+
30+
function calculateAge(){
31+
let birthDate=new Date(userInput.value);
32+
let d1=birthDate.getDate();
33+
let m1=birthDate.getMonth()+1;
34+
let y1=birthDate.getFullYear();
35+
36+
let today=new Date();
37+
38+
let d2=today.getDate();
39+
let m2=today.getMonth()+1;
40+
let y2=today.getFullYear();
41+
42+
let d3,m3,y3;
43+
44+
y3=y2-y1;
45+
if(m2>=m1){
46+
m3=m2-m1;
47+
}
48+
else{
49+
y3--;
50+
m3=12+m2-m1;
51+
}
52+
if(d2>=d1){
53+
d3=d2-d1;
54+
}
55+
else{
56+
m3--;
57+
d3=getDaysInMonth(y1,m1)+d2-d1;
58+
}
59+
if(m3<0){
60+
m3=11;
61+
y3--;
62+
}
63+
result.innerHTML=`You are <span>${y3}</span> years, <span>${m3}</span> months and <span>${d3}</span> days old `;
64+
65+
66+
67+
68+
}
69+
function getDaysInMonth(year,month){
70+
return new Date(year,month,0).getDate();
71+
}
72+
73+
</script>
74+
</body>
75+
</html>

‎Projects/Age Calculator/style.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins',sans-serif;
5+
box-sizing: border-box;
6+
}
7+
.container{
8+
width: 100%;
9+
min-height: 100vh;
10+
background: linear-gradient(90deg, rgba(9,9,121,1) 8%, rgba(0,241,255,1) 100%, rgba(0,212,255,1) 100%);
11+
color: #fff;
12+
padding: 10px;
13+
}
14+
.calculator{
15+
width: 100%;
16+
max-width: 600px;
17+
margin-left: 10%;
18+
margin-top: 10%;
19+
}
20+
.calculator h1{
21+
font-size: 60px;
22+
color: #ffff76;
23+
}
24+
.input-box{
25+
margin: 40px 0;
26+
padding: 35px;
27+
border-radius:10px ;
28+
background: rgba(255,255,255,0.3);
29+
display: flex;
30+
align-items: center;
31+
}
32+
.input-box input{
33+
flex: 1;
34+
margin-right: 20px;
35+
padding: 14px 20px;
36+
border: 0;
37+
outline: 0;
38+
font-size: 18px;
39+
border-radius: 5px;
40+
position: relative;
41+
}
42+
.input-box button{
43+
background: #dd1600;
44+
border: 0;
45+
outline: 0;
46+
padding: 15px 30px;
47+
border-radius: 5px;
48+
font-weight: 500;
49+
color: #ffffff;
50+
cursor: pointer;
51+
52+
}
53+
.input-box input::-webkit-calender-picker-indicator{
54+
top: 0;
55+
left: 0;
56+
right: 0;
57+
bottom: 0;
58+
width: auto;
59+
height: auto;
60+
position: absolute;
61+
background-position: cal(100%-10px);
62+
background-size: 30px;
63+
cursor: pointer;
64+
65+
}
66+
#result span{
67+
color: #ffff76;
68+
}
69+
70+

‎Projects/Bakery_Website/Lava-Cake-PNG-Free-Download.png‎

698 KB
Loading

‎Projects/Bakery_Website/Pastry-PNG-Images.png‎

598 KB
Loading

‎Projects/Bakery_Website/cake.png‎

1.19 MB
Loading

0 commit comments

Comments
 (0)