Skip to content

Loading page #8

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

Merged
merged 5 commits into from
May 18, 2023
Merged

Loading page #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
37cbaef
Added index.html and style.css to Loading Page folder. Updated README…
KSS-CHAITHANYA May 17, 2023
595189b
Update README.md
KSS-CHAITHANYA May 17, 2023
afd60df
Update README.md
KSS-CHAITHANYA May 17, 2023
807e0b7
Update README.md
KSS-CHAITHANYA May 17, 2023
2712776
Update README.md
KSS-CHAITHANYA May 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions Loading Page/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>

<head> </head>

<body>
<span class="back">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</span>
</body>

</html>
71 changes: 71 additions & 0 deletions Loading Page/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
@import url(https://fonts.googleapis.com/css?family=Roboto:300);

html {
height: 90%;
}

body {
background: #3F485B;
display: flex;
align-items: center;
height: 90%;
}

.back {
margin: 1em auto;
font-family: "Roboto";
}

.back span {
font-size: 3em;
color: #F2C640;
background: #262B37;
display: table-cell;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), 0 5px 0 #ccc;
padding: 0 15px;
line-height: 100px;
animation: jumb 2s infinite;
}

@keyframes jumb {
0% {
transform: translateY(0px)
}

50% {
transform: translateY(-30px);
box-shadow: 0 15px 0 rgb(242, 198, 64);
}

100% {
transform: translateY(0px)
}
}

.back span:nth-child(1) {
animation-delay: 0s;
}

.back span:nth-child(2) {
animation-delay: .1s;
}

.back span:nth-child(3) {
animation-delay: .2s;
}

.back span:nth-child(4) {
animation-delay: .3s;
}

.back span:nth-child(5) {
animation-delay: .4s;
}

.back span:nth-child(6) {
animation-delay: .5s;
}

.back span:nth-child(7) {
animation-delay: .6s;
}
19 changes: 10 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,17 @@ To use these CSS animations and effects in your Local System , simply download o

| Project Name | CodePen Link | Preview | Source Code |
| --------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/9b12a923-f70a-411e-8964-0273e507576a" alt="Cart Item" width="400" height="400"> | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) |
| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/18d4af5d-459e-4b45-8c51-aa253ff88da9" alt="Social Login" width="400" height="400"> | [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Social%20Login) |
| Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/eefb6819-f21e-4b6b-8bcd-3a08368bcd51" alt="Counter" width="400" height="400"> | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) |
| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/8417ccd9-8363-4d3f-920b-1b7013ba1158" alt="Accordion" width="400" height="400"> | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) |
| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/07cf6fab-5941-44fa-8964-dc73175239a4" alt="3D Cube" width="400" height="400"> | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) |
| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/477cc242-4b77-4e50-bcd7-d64cfce2ed34" alt="Festival Lighting" width="400" height="400"> | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) |
| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/68843a36-a400-4e48-8907-435e68d8cdc0" alt="Indian Flag" width="400" height="400"> | [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Indian%20Flag) |
| Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/5fc52924-7403-4178-a7ab-fc796cfab567" alt="Image Carousel I" width="400" height="400"> | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20I) |
| Image Carousel II | [Go Live](https://codepen.io/pen/bGmjbVo) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/a8ef65b5-873c-4365-b4be-485bae463e87" alt="Image Carousel II" width="400" height="400"> | [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20II) |
| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/9b12a923-f70a-411e-8964-0273e507576a" alt="Cart Item" width="400" height="300"> | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) |
| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/18d4af5d-459e-4b45-8c51-aa253ff88da9" alt="Social Login" width="400" height="300"> | [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Social%20Login) |
| Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/eefb6819-f21e-4b6b-8bcd-3a08368bcd51" alt="Counter" width="400" height="300"> | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) |
| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/8417ccd9-8363-4d3f-920b-1b7013ba1158" alt="Accordion" width="400" height="300"> | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) |
| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/07cf6fab-5941-44fa-8964-dc73175239a4" alt="3D Cube" width="400" height="300"> | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) |
| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/477cc242-4b77-4e50-bcd7-d64cfce2ed34" alt="Festival Lighting" width="400" height="300"> | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) |
| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/68843a36-a400-4e48-8907-435e68d8cdc0" alt="Indian Flag" width="400" height="300"> | [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Indian%20Flag) |
| Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/5fc52924-7403-4178-a7ab-fc796cfab567" alt="Image Carousel I" width="400" height="300"> | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20I) |
| Image Carousel II | [Go Live](https://codepen.io/pen/bGmjbVo) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/a8ef65b5-873c-4365-b4be-485bae463e87" alt="Image Carousel II" width="400" height="300"> | [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20II) |
| Color Wheel | [Go Live](https://codepen.io/pen/GRYXvKw) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/b4a4bc20-d43b-4bc0-b86d-ae89ae84ff42" alt="Color Wheel" width="400" height="400"> | [Code - Color Wheel](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Color%20Wheel) |
| Loading Page | [Go Live](https://codepen.io/ahmedelmsery/pen/zZVLMN) | <img src="https://res.cloudinary.com/duwcigilo/image/upload/v1684336253/Loading_image_ig5hh7.jpg" alt="Loading Page" width="400" height="300"> | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun) |

<br>

Expand Down