From 37cbaef324a41df267dfd5fcbbb9e0e7201b45f3 Mon Sep 17 00:00:00 2001 From: KSS Chaithanya Date: Wed, 17 May 2023 21:12:19 +0530 Subject: [PATCH 1/5] Added index.html and style.css to Loading Page folder. Updated README file. --- Loading Page/index.html | 18 +++++++++++ Loading Page/style.css | 71 +++++++++++++++++++++++++++++++++++++++++ README.md | 21 ++++++------ 3 files changed, 100 insertions(+), 10 deletions(-) create mode 100644 Loading Page/index.html create mode 100644 Loading Page/style.css diff --git a/Loading Page/index.html b/Loading Page/index.html new file mode 100644 index 0000000..8b9432e --- /dev/null +++ b/Loading Page/index.html @@ -0,0 +1,18 @@ + + + + + + + + L + o + a + d + i + n + g + + + + diff --git a/Loading Page/style.css b/Loading Page/style.css new file mode 100644 index 0000000..b33ad8e --- /dev/null +++ b/Loading Page/style.css @@ -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; +} diff --git a/README.md b/README.md index 30e836f..9e2fe99 100644 --- a/README.md +++ b/README.md @@ -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) | Cart Item | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) | -| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | Social Login | [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) | Counter | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) | -| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | Accordion | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) | -| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | 3D Cube | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) | -| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | Festival Lighting | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) | -| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [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) | Image Carousel I | [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) | Image Carousel II | [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) | Color Wheel | [Code - Color Wheel](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Color%20Wheel) | +| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | Cart Item | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) | +| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | Social Login | [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) | Counter | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) | +| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | Accordion | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) | +| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | 3D Cube | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) | +| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | Festival Lighting | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) | +| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [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) | Image Carousel I | [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) | Image Carousel II | [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) | Color Wheel | [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) | | Loading Page | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun)
From 595189bc26a512d30fa9fe0fa197a2df5a3bcf24 Mon Sep 17 00:00:00 2001 From: CHAITHANYA K S S Date: Wed, 17 May 2023 22:11:48 +0530 Subject: [PATCH 2/5] Update README.md --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 9e2fe99..d749c05 100644 --- a/README.md +++ b/README.md @@ -29,17 +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) | Cart Item | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) | -| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | Social Login | [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) | Counter | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) | -| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | Accordion | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) | -| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | 3D Cube | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) | -| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | Festival Lighting | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) | -| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [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) | Image Carousel I | [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) | Image Carousel II | [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) | Color Wheel | [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) | | Loading Page | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun) +| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | Cart Item | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) | +| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | Social Login | [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) | Counter | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) | +| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | Accordion | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) | +| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | 3D Cube | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) | +| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | Festival Lighting | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) | +| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [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) | Image Carousel I | [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) | Image Carousel II | [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) | Color Wheel | [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) | | Loading Page | | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun)
From afd60df84c5c2957e05edd71b1aa6fac0b547df2 Mon Sep 17 00:00:00 2001 From: CHAITHANYA K S S Date: Wed, 17 May 2023 22:32:53 +0530 Subject: [PATCH 3/5] Update README.md --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index d749c05..98aab20 100644 --- a/README.md +++ b/README.md @@ -29,17 +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) | Cart Item | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) | -| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | Social Login | [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) | Counter | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) | -| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | Accordion | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) | -| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | 3D Cube | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) | -| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | Festival Lighting | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) | -| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [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) | Image Carousel I | [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) | Image Carousel II | [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) | Color Wheel | [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) | | Loading Page | | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun) +| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | Cart Item | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) | +| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | Social Login | [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) | Counter | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) | +| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | Accordion | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) | +| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | 3D Cube | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) | +| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | Festival Lighting | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) | +| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [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) | Image Carousel I | [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) | Image Carousel II | [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) | Color Wheel | [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) | Loading Page | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun)
From 807e0b782d3035e89b567f2f4d2286fe6b0944cc Mon Sep 17 00:00:00 2001 From: CHAITHANYA K S S Date: Wed, 17 May 2023 22:36:39 +0530 Subject: [PATCH 4/5] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 98aab20..166ea91 100644 --- a/README.md +++ b/README.md @@ -38,8 +38,8 @@ To use these CSS animations and effects in your Local System , simply download o | Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [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) | Image Carousel I | [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) | Image Carousel II | [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) | Color Wheel | [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) | Loading Page | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun) +| Color Wheel | [Go Live](https://codepen.io/pen/GRYXvKw) | Color Wheel | [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) | Loading Page | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun) |
From 2712776edf9c38f7dcfa63c17c95a357b5b4f07a Mon Sep 17 00:00:00 2001 From: CHAITHANYA K S S Date: Wed, 17 May 2023 22:40:24 +0530 Subject: [PATCH 5/5] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 166ea91..edc406c 100644 --- a/README.md +++ b/README.md @@ -38,8 +38,8 @@ To use these CSS animations and effects in your Local System , simply download o | Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [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) | Image Carousel I | [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) | Image Carousel II | [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) | Color Wheel | [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) | Loading Page | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun) | +| Color Wheel | [Go Live](https://codepen.io/pen/GRYXvKw) | Color Wheel | [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) | Loading Page | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun) |