Skip to content

Commit 8cf8c6b

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #397 from DilshadNoshad/main
added CSS_loading_D-vers-1
2 parents 9d96d12 + af18f84 commit 8cf8c6b

File tree

5 files changed

+158
-8
lines changed

5 files changed

+158
-8
lines changed

‎CSS_loading-Animation-D-vers-1/README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# CSS_loading-Animation-D-vers-1
2+
3+
## 💻Tech Stack
4+
5+
<br>
6+
7+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
8+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
9+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
10+
11+
<br>
12+
13+
### How to use:
14+
15+
---
16+
17+
- Download or clone the repository
18+
19+
```
20+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
21+
```
22+
23+
- Go to the directory
24+
- Run the index.html file
25+
- Enter your DOB and find age..
26+
27+
<br>
28+
29+
# Screenshot
30+
31+
![screenshot](loading-demo.png)
32+
33+
<br>
34+
35+
## Happy Coding!

‎CSS_loading-Animation-D-vers-1/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css"
10+
/>
11+
<link rel="stylesheet" href="style.css" />
12+
<title>CSS_loading-Animation | D-vers</title>
13+
</head>
14+
<body>
15+
<div class="load-container">
16+
<div class="circle"></div>
17+
<div class="circle"></div>
18+
<div class="circle"></div>
19+
<div class="circle"></div>
20+
</div>
21+
22+
<footer>
23+
<p>
24+
Created by <i class="fa fa-heart"></i>
25+
<a target="_blank" href="https://github.com/DilshadNoshad"
26+
>Dilshad Noshad</a
27+
>
28+
</p>
29+
</footer>
30+
</body>
31+
</html>

‎CSS_loading-Animation-D-vers-1/loading-demo.png

9.63 KB
Loading

‎CSS_loading-Animation-D-vers-1/style.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@import url("https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
:root {
10+
--primary_clr: #343a40;
11+
--secondary-clr: rgb(135, 57, 250);
12+
--gray-clr: #d0d0d0;
13+
--black: #000;
14+
--white: #ffffff;
15+
}
16+
17+
body {
18+
background-color: var(--white);
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
flex-direction: column;
23+
min-height: 100vh;
24+
font-family: "IM Fell English SC", serif;
25+
margin: 0;
26+
}
27+
28+
.load-container {
29+
animation: mover 1s infinite alternate;
30+
height: 50px;
31+
transform-origin: bottom center;
32+
}
33+
34+
@keyframes mover {
35+
0% {
36+
transform: translateY(0);
37+
opacity: 0;
38+
}
39+
100% {
40+
transform: translateY(-30px);
41+
opacity: 0.5555556;
42+
}
43+
}
44+
45+
.circle {
46+
border-radius: 50%;
47+
display: inline-block;
48+
margin: -10px;
49+
height: 50px;
50+
width: 50px;
51+
transform: scale(0);
52+
animation: grow 1.5s linear infinite;
53+
background-color: var(--primary_clr);
54+
}
55+
56+
.circle:nth-of-type(2) {
57+
animation-delay: 0.75s;
58+
background-color: var(--secondary-clr);
59+
}
60+
.circle:nth-of-type(4) {
61+
animation-delay: 0.75s;
62+
background-color: var(--secondary-clr);
63+
}
64+
@keyframes grow {
65+
50% {
66+
transform: scale(1);
67+
}
68+
}
69+
70+
footer {
71+
background-color: var(--black);
72+
color: var(--white);
73+
font-size: 14px;
74+
bottom: 0;
75+
position: fixed;
76+
left: 0;
77+
right: 0;
78+
text-align: center;
79+
}
80+
81+
footer p {
82+
margin: 10px 0;
83+
}
84+
85+
footer a {
86+
color: var(--gray-clr);
87+
text-decoration: none;
88+
}
89+
90+
footer i {
91+
color: red;
92+
}

‎Neumorphism-calculator-D-vers-1/README.md

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
# Neumorphism Simple calculator D-vers-1
22

3-
# Instructions of the game
4-
5-
1. Follow the steps on root repository to clone this whole project.
6-
2. Click on the folder 2048 Game.
7-
3. Click on the index.html inside the folder.
8-
4. Use arrow keys to play.
9-
5. Have fun!
10-
113
## 💻Tech Stack
124

135
<br>

0 commit comments

Comments
 (0)