├── .vscode └── settings.json ├── images ├── Maths.png ├── about.png ├── doggo.gif ├── games.png ├── logo.png ├── rock.png ├── sky.jpeg ├── solar.png ├── tree.png ├── Coding.png ├── English.png ├── Laptop.png ├── Pencil.png ├── Physics.png ├── cloudy.png ├── games.jpeg ├── aboutus.jpeg ├── cloud-sun.png ├── miniminds.png ├── walking-1.gif ├── night-cloud.png └── our courses.png ├── SECURITY.md ├── README.md ├── contact.html ├── stories.html ├── about.html ├── script.js ├── courses.html ├── index.html └── styles.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /images/Maths.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/Maths.png -------------------------------------------------------------------------------- /images/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/about.png -------------------------------------------------------------------------------- /images/doggo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/doggo.gif -------------------------------------------------------------------------------- /images/games.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/games.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/rock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/rock.png -------------------------------------------------------------------------------- /images/sky.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/sky.jpeg -------------------------------------------------------------------------------- /images/solar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/solar.png -------------------------------------------------------------------------------- /images/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/tree.png -------------------------------------------------------------------------------- /images/Coding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/Coding.png -------------------------------------------------------------------------------- /images/English.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/English.png -------------------------------------------------------------------------------- /images/Laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/Laptop.png -------------------------------------------------------------------------------- /images/Pencil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/Pencil.png -------------------------------------------------------------------------------- /images/Physics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/Physics.png -------------------------------------------------------------------------------- /images/cloudy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/cloudy.png -------------------------------------------------------------------------------- /images/games.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/games.jpeg -------------------------------------------------------------------------------- /images/aboutus.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/aboutus.jpeg -------------------------------------------------------------------------------- /images/cloud-sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/cloud-sun.png -------------------------------------------------------------------------------- /images/miniminds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/miniminds.png -------------------------------------------------------------------------------- /images/walking-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/walking-1.gif -------------------------------------------------------------------------------- /images/night-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/night-cloud.png -------------------------------------------------------------------------------- /images/our courses.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alurubalakarthikeya/Mini-Minds/HEAD/images/our courses.png -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

MINI MINDS 💻

2 |

3 | Technologies 4 | Getting Started 5 |

6 |

mini minds is made for children of age 5-12 where, they find education in a fun games and courses that have rewards on completion

7 |

8 | 📱 Check Project 9 |

10 |

🎨 Layout

11 |

12 | Random Image 13 |

14 |

🧰 Tech Stack

15 | 16 | ### 📱 **Frontend** 17 | ![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) 18 | ![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white) 19 | ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black) 20 | 21 | ### 🔩 **Other Tools** 22 | ![Photoshop](https://img.shields.io/badge/Adobe%20Photoshop-31A8FF?style=for-the-badge&logo=adobephotoshop&logoColor=white) 23 | ![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white) 24 | ![Canva](https://img.shields.io/badge/Canva-00C4CC?style=for-the-badge&logo=canva&logoColor=white) 25 | 26 | ### 🪛 **Version Control** 27 | ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white) 28 | ![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white) 29 | 30 | ### 🚥 **Hosting** 31 | ![GitHub Pages](https://img.shields.io/badge/GitHub%20Pages-222222?style=for-the-badge&logo=githubpages&logoColor=white) 32 | 33 |

🚀 Getting started

34 | To run this project locally copy the below link and you can clone this project and make your version of this project 35 |

Cloning

36 | How to clone this project: 37 | 38 | ```bash 39 | git clone https://github.com/alurubalakarthikeya/miniminds.io 40 | ``` 41 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Contact | Mini Minds 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 | 36 | 58 |
59 | 60 | 61 | 146 | 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /stories.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Stories | Mini Minds 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 | 32 | 52 |
53 | 54 | 55 |
56 |

Stories

57 |
58 |
59 |
60 | 71 |
72 |
73 | 74 | 75 |
76 |

Stories

77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 | 88 | 161 | 162 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About | Mini Minds 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 | 36 | 56 |
57 | 58 | 59 |
60 |

About Us

61 |
62 |
63 |
64 |

We're on a mission to transform learning from a chore into an exhilarating adventure. At Mini Minds, we believe every child is a budding genius, bursting with curiosity and a thirst for knowledge. That's why we've created a vibrant digital playground where learning is disguised as fun. Imagine a world where numbers dance, words sing, and creativity soars! Our interactive games, captivating activities, and imaginative stories are crafted to ignite young minds and foster a lifelong love of learning. We're talking puzzles that perplex and delight, challenges that spark ingenuity, and tales that transport little explorers to far-off lands. Make education exciting, engaging, and effective for kids aged 5 to 12. Let's turn ordinary study time into extraordinary adventures together!

65 | 66 |
67 | 68 | 69 | 70 |

71 | 72 | Why Trust Mini Minds? 73 | 93 |
94 |
95 | Explore Courses 96 |
97 |
98 | 99 | 100 | 171 | 172 | 173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | const menuIcon = document.getElementById('menu-icon'); 3 | const menuItems = document.getElementById('menu-items'); 4 | const bodyElement = document.getElementById('body'); 5 | /*Function for Day-Night Mode*/ 6 | function toggleMode() { 7 | const body = document.body; 8 | const sun = document.getElementById("sun"); 9 | const moon = document.getElementById("moon"); 10 | 11 | if (body.classList.contains("night")) { 12 | body.classList.remove("night"); 13 | body.classList.add("day"); 14 | sun.style.display = "block"; 15 | moon.style.display = "none"; 16 | } else { 17 | body.classList.remove("day"); 18 | body.classList.add("night"); 19 | sun.style.display = "none"; 20 | moon.style.display = "block"; 21 | } 22 | } 23 | document.getElementById("sun").addEventListener("click", toggleMode); 24 | document.getElementById("moon").addEventListener("click", toggleMode); 25 | /*Function for Day-Night Mode*/ 26 | /*Function for Menu bar*/ 27 | menuIcon.addEventListener('click', (event) => { 28 | event.stopPropagation(); 29 | menuItems.classList.toggle('active'); 30 | }); 31 | 32 | document.addEventListener('click', (event) => { 33 | if (menuItems.classList.contains('active')) { 34 | menuItems.classList.remove('active'); 35 | } 36 | }); 37 | 38 | menuItems.addEventListener('click', (event) => { 39 | event.stopPropagation(); 40 | }); 41 | /*Function for Menu bar*/ 42 | /*Function for Cursor*/ 43 | const cursorDot = document.querySelector("[data-cursor-dot]"); 44 | const cursorOutline = document.querySelector("[data-cursor-outline]"); 45 | window.addEventListener("mousemove", (e) => { 46 | const posX = e.clientX; 47 | const posY = e.clientY; 48 | 49 | cursorDot.style.left = `${posX}px`; 50 | cursorDot.style.top = `${posY}px`; 51 | 52 | cursorOutline.style.left = `${posX}px`; 53 | cursorOutline.style.top = `${posY}px`; 54 | 55 | cursorOutline.animate({ 56 | left: `${posX}px`, 57 | top: `${posY}px` 58 | }, { duration: 500, fill: "forwards" }); 59 | }); 60 | document.body.style.cursor = 'none'; 61 | }); 62 | /*Function for Cursor*/ 63 | /*Scroll Animation*/ 64 | document.addEventListener("DOMContentLoaded", function() { 65 | gsap.registerPlugin(ScrollTrigger); 66 | 67 | gsap.utils.toArray('.fade-in-up-target').forEach(el => { 68 | gsap.fromTo(el, 69 | { opacity: 0, filter: blur(5), y: 100 }, 70 | { 71 | opacity: 1, 72 | filter: blur(0), 73 | y: 0, 74 | duration: 2, 75 | scrollTrigger: { 76 | trigger: el, 77 | start: 'top 95%', 78 | end: 'bottom 10%', 79 | scrub: true 80 | } 81 | } 82 | ); 83 | }); 84 | 85 | gsap.utils.toArray('.fade-in-left-target').forEach(el => { 86 | gsap.fromTo(el, 87 | { opacity: 0, x: -100 }, // Start state 88 | { 89 | opacity: 1, 90 | x: 0, // End state 91 | duration: 2, 92 | scrollTrigger: { 93 | trigger: el, 94 | start: 'top 97%', 95 | end: 'bottom 10%', 96 | scrub: true 97 | } 98 | } 99 | ); 100 | }); 101 | 102 | gsap.utils.toArray('.fade-in-right-target').forEach(el => { 103 | gsap.fromTo(el, 104 | { opacity: 0}, 105 | { 106 | opacity: 1, 107 | duration: 2, 108 | scrollTrigger: { 109 | trigger: el, 110 | start: 'top 95%', 111 | end: 'bottom 10%', 112 | scrub: true 113 | } 114 | } 115 | ); 116 | }); 117 | }); 118 | /*Scroll Animation*/ 119 | /*Sign-In function*/ 120 | function signIn() { 121 | const heroContent = document.getElementById('hero-content'); 122 | heroContent.innerHTML = ` 123 |

Sign In

124 |
125 |
126 | 127 | 128 |
129 |
130 | 131 | 132 |
133 | 134 |
135 |

Don't have an account? Sign up

136 | `; 137 | } 138 | /*Sign-In function*/ 139 | /*Sign Up interface*/ 140 | function signUp() { 141 | const heroContent = document.getElementById('hero-content'); 142 | heroContent.innerHTML = ` 143 |

Sign Up

144 |
145 |
146 | 147 | 148 |
149 |
150 | 151 | 152 |
153 |
154 | 155 | 156 |
157 | 158 |
159 |

Already have an account? Sign in

160 | `; 161 | } 162 | /*Sign Up interface*/ 163 | /*Loader Animation*/ 164 | document.addEventListener("DOMContentLoaded", function() { 165 | window.addEventListener("load", function() { 166 | const loader = document.getElementById('pulse-wrapper'); 167 | loader.style.display = 'none'; 168 | document.body.style.overflow = 'auto'; 169 | }); 170 | }); 171 | /*Loader Animation*/ 172 | /*Handling the pointer while scrolling*/ 173 | const cursorDot = document.querySelector('[data-cursor-dot]'); 174 | const cursorOutline = document.querySelector('[data-cursor-outline]'); 175 | 176 | function handleScroll() { 177 | cursorDot.classList.add('cursor-hidden'); 178 | cursorOutline.classList.add('cursor-hidden'); 179 | } 180 | 181 | function handleScrollEnd() { 182 | setTimeout(() => { 183 | cursorDot.classList.remove('cursor-hidden'); 184 | cursorOutline.classList.remove('cursor-hidden'); 185 | }, 100); 186 | } 187 | 188 | window.addEventListener('scroll', handleScroll); 189 | window.addEventListener('scroll', handleScrollEnd); 190 | function updateIconPosition() { 191 | const buttonContainer = document.querySelector('.back-to-top'); 192 | const icon = buttonContainer.querySelector('i'); 193 | const documentHeight = document.documentElement.scrollHeight; 194 | const viewportHeight = window.innerHeight; 195 | const scrollPosition = window.scrollY; 196 | const scrollPercentage = (scrollPosition / (documentHeight - viewportHeight)) * 100; 197 | const containerHeight = buttonContainer.offsetHeight; 198 | const iconHeight = icon.offsetHeight; 199 | const maxPosition = containerHeight - iconHeight; 200 | const newPosition = (scrollPercentage / 100) * maxPosition; 201 | icon.style.top = `${newPosition}px`; 202 | } 203 | document.addEventListener('scroll', updateIconPosition); 204 | window.addEventListener('load', updateIconPosition); 205 | /*Handling the pointer while scrolling*/ -------------------------------------------------------------------------------- /courses.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Courses | Mini Minds 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 | 34 | 54 |
55 | 56 | 57 |
58 |

59 | Our Courses 60 |

61 |
62 |
63 |
64 |

Unleash your child's potential with our fun and educational games! Designed to make learning an adventure, our platform offers a captivating blend of numbers, letters, and science. Watch as your child's curiosity is ignited and their confidence grows with every challenge conquered. Our games are more than just entertainment; they're a pathway to a brighter future.


65 | 92 |
93 |
94 | 95 | 96 |
97 |

Our Courses


98 |
99 |
100 | 101 |
102 |
103 | 104 |
105 |
106 | 107 |
108 |
109 | 110 |
111 |
112 | 113 |
114 |
115 |
116 | 117 | 118 | 191 | 192 | 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home | Mini Minds 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 | 38 | 58 |
59 | 60 | 61 |
62 |
63 |
64 |
65 | 66 | 67 |
68 |
69 |

Where Learning is 70 | made practical 71 |

72 |
94 | 95 |

no account? 96 | 97 | Sign In 98 | 99 |

100 |
101 | 102 |
103 |
Cloud
104 |
Cloud
105 |
106 | 107 | 108 |
109 | 110 | 111 | 112 |
113 | 114 |
115 | 116 | 117 |
118 | Tree 119 | Stone 120 | Stone 121 | cartoon 122 | cartoon 123 | cartoon 124 | cartoon 125 |
126 | 127 | 128 |
129 |

Why Us?

130 | cartoon 131 |
132 |

Welcome to Mini Minds! Our mission is to help children enrich their school basics while having tons of fun. At Mini Minds, we believe learning should be practical and enjoyable, which is why we've created a special place just for kids aged 5 to 12. Our site is packed with cool games, exciting activities, and interesting stories designed to make learning fun. Our logo represents our commitment to making education both practical and entertaining.



133 | Know More 134 |
135 |
136 | 137 | 138 |
139 |

What do we do?

140 | cartoon 141 |
142 |

Interactive Stories: We provide engaging stories help improve reading skills and ignite a imagination skills. According to Science, reading Sci-fi stories can improve your Analytical and Imagination skills. Each story is crafted to be entertaining and educational. Practical Learning: We believe in making education practical. Our content helps kids connect what they learn with real-world experiences, making learning meaningful. At Mini Minds, we are dedicated to creating a space where kids can learn, play, and grow



143 | Explore Stories 144 | 145 |

Stories are yet to be added, do you still wanna continue reading more about our Idea?

146 | Yes 147 | 148 | 149 |
150 |
151 | 152 | 153 |
154 |

Our Edu-Games

155 | cartoon 156 |
157 |
158 |

Our edu-games have levels, a new game unlocks on every level up ( course completion ) and games are fun and educational at the same time. Get ready for an awesome learning adventure! turn numbers into number magic, letters into language fun, and science into super cool discoveries. You'll explore, you'll laugh, and before you know it, you'll be a learning superstar! Dive into a world of fun where learning is an adventure. Note: Games are yet to be developed, if you still wanna explore our ideas about the game check them out by clicking on the button below!



159 | Coming soon!! 160 |
161 |
162 | 163 | 164 |
165 |

Recommended Courses

166 |
167 |
168 |
169 | 170 |
171 |
172 | 173 |
174 |
175 | 176 |
177 |
178 | 179 |
180 |
181 | 182 |
183 |
184 |
185 | 186 | 187 | 262 | 263 | 264 |
265 |
266 | 267 | 268 | 269 | 270 | 271 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /*Only Colors of the site*/ 2 | :root { 3 | --main-white: #f0f0f0; 4 | --main-black: #1e1c1c; 5 | --main-blue: #a7d6dc; 6 | --main-dark: #00008B; 7 | --main-green: #008000; 8 | --night-sky: #2c3e50; 9 | --moon-color: #f9f9f9; 10 | } 11 | /*Only Colors of the site*/ 12 | /*Responsive code*/ 13 | * { 14 | scroll-behavior: smooth; 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: border-box; 18 | } 19 | 20 | body { 21 | font-family: "Anek Devanagari", sans-serif; 22 | background-color: var(--main-white); 23 | overflow-x: hidden; 24 | } 25 | 26 | body a { 27 | text-decoration: none; 28 | color: var(--moon-color); 29 | } 30 | 31 | body p::selection { 32 | background-color: black; 33 | color: var(--moon-color); 34 | } 35 | 36 | body a::selection { 37 | background-color: black; 38 | color: var(--moon-color); 39 | } 40 | 41 | body h2::selection { 42 | background-color: black; 43 | color: var(--main-white); 44 | } 45 | 46 | html, body { 47 | overflow-x: hidden; 48 | } 49 | 50 | body > header { 51 | position: sticky; 52 | } 53 | /*Responsive code*/ 54 | /*Night stylings start here*/ 55 | body.night { 56 | background-color: var(--night-sky); 57 | } 58 | 59 | body.night header { 60 | background-color: rgba(44,62,80,1); 61 | top: 0; 62 | position: fixed; 63 | } 64 | 65 | body.night .logo { 66 | color: var(--moon-color); 67 | } 68 | 69 | body.night .hero-content { 70 | color: var(--moon-color); 71 | background-color: rgba(184, 192, 184, 0.4); 72 | border-radius: 20px; 73 | padding: 15px; 74 | } 75 | 76 | body.night .sun { 77 | opacity: 0; 78 | display: none; 79 | } 80 | 81 | body.night .moon { 82 | opacity: 1; 83 | display: block; 84 | } 85 | 86 | body.night .sky { 87 | position: absolute; 88 | width: 100%; 89 | height: 100vh; 90 | background: linear-gradient(to bottom, #1b2735, #2c3e50, #34495e); 91 | z-index: -1; 92 | top: 0; 93 | left: 0; 94 | transition: 2s ease-in-out; 95 | } 96 | 97 | body.night .stars { 98 | position: absolute; 99 | top: 0; 100 | left: 0; 101 | right: 0; 102 | bottom: 0; 103 | width: 100%; 104 | height: 50%; 105 | display: block; 106 | background: url('http://www.script-tutorials.com/demos/360/images/stars.png') repeat top center; 107 | } 108 | 109 | body.night h3 { 110 | font-family: "Rammetto One"; 111 | text-align: center; 112 | font-size: 1.75rem; 113 | width: 55%; 114 | margin: 5rem auto; 115 | line-height: 3rem; 116 | letter-spacing: 5px; 117 | } 118 | 119 | body.night nav ul li a { 120 | background-color: var(--night-sky); 121 | color: var(--moon-color); 122 | } 123 | 124 | body.night nav ul li a:hover { 125 | background-color: var(--main-green); 126 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.09); 127 | } 128 | 129 | body.night nav ul { 130 | background-color: var(--night-sky); 131 | margin-bottom: 10px; 132 | } 133 | 134 | 135 | body.night .cursor-dot { 136 | background-color: var(--main-white); 137 | } 138 | /*Night stylings ends here*/ 139 | /*Day stylings starts here*/ 140 | body.day { 141 | background: linear-gradient(to bottom, #90dffe 0%,#38a3d1 100%); 142 | } 143 | 144 | body.day header { 145 | background: rgba(167,214,220,0.75); 146 | position: fixed; 147 | top: 0; 148 | } 149 | 150 | body.day .cursor-dot { 151 | background-color: var(--main-blue); 152 | } 153 | 154 | body.day .logo a { 155 | color: var(--main-green); 156 | } 157 | 158 | body.day .logo span { 159 | color: var(--moon-color); 160 | } 161 | 162 | body.day .hero-content { 163 | color: var(--moon-color); 164 | background-color: rgba(108, 145, 108, 0.4); 165 | border-radius: 20px; 166 | padding: 15px; 167 | } 168 | 169 | body.day .hero-content > p { 170 | color: var(--main-green); 171 | } 172 | 173 | body.day .sun { 174 | opacity: 1; 175 | display: block; 176 | } 177 | 178 | body.day .moon { 179 | opacity: 0; 180 | display: none; 181 | } 182 | 183 | body.day .hehe { 184 | color: var(--main-green); 185 | } 186 | 187 | body.day .hehe > span { 188 | color: var(--moon-color); 189 | } 190 | 191 | body.day h3 { 192 | font-family: "Rammetto One"; 193 | text-align: center; 194 | font-size: 1.75rem; 195 | width: 55%; 196 | margin: 5rem auto; 197 | line-height: 3rem; 198 | letter-spacing: 5px; 199 | } 200 | 201 | body.day nav ul li a { 202 | background-color: rgba(167,214,220,0.75); 203 | border-radius: 20px; 204 | color: var(--main-white); 205 | } 206 | 207 | 208 | body.day nav ul li a:hover { 209 | background-color: var(--moon-color); 210 | color: var(--main-blue); 211 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.09); 212 | } 213 | 214 | 215 | body.day nav ul { 216 | margin-bottom: 10px; 217 | } 218 | 219 | body.day .courses { 220 | background-color: var(--moon-color); 221 | color: var(--night-sky); 222 | border-top: 3px solid var(--night-sky); 223 | } 224 | 225 | body.day .button-courses { 226 | background-color: var(--moon-color); 227 | color: var(--night-sky); 228 | border: 1px solid var(--night-sky); 229 | } 230 | 231 | body.day .button-courses:hover { 232 | background-color: var(--night-sky); 233 | color: var(--moon-color); 234 | } 235 | 236 | 237 | body.day .course-list { 238 | background: white; 239 | border-top: var(--main-green); 240 | color: var(--moon-color); 241 | margin: 0; 242 | text-align: justify; 243 | padding: 50px 60px; 244 | } 245 | 246 | body.day .course-list > h2 { 247 | color: var(--main-green); 248 | border-bottom: 2px solid var(--main-green); 249 | } 250 | 251 | body.day .contact { 252 | background-color: var(--main-black); 253 | color: var(--main-green); 254 | border-top: 3px solid var(--main-black); 255 | } 256 | 257 | body.day .icons > li > a> i { 258 | background-color: var(--moon-color); 259 | color: var(--main-green); 260 | padding: 17px; 261 | font-size: 2.2vh; 262 | border: 2px solid var(--main-green); 263 | margin: 10px; 264 | border-radius: 50%; 265 | } 266 | 267 | body.day ul.icons li i:hover { 268 | background-color: var(--main-green); 269 | color: var(--moon-color); 270 | } 271 | 272 | body.day .box { 273 | background-color: var(--main-white); 274 | border: 3px solid var(--main-green); 275 | color: var(--main-green); 276 | } 277 | 278 | body.day .sign-in { 279 | background-color: var(--moon-color); 280 | color: var(--main-green); 281 | border: 2px solid var(--main-green); 282 | border-radius: 15px; 283 | padding: 10px 110px; 284 | left: 50%; 285 | margin-top: 15px; 286 | font-family: "Anek Devanagari", sans-serif; 287 | font-size: 2vh; 288 | font-weight: 400; 289 | } 290 | 291 | body.day .sign-in:hover { 292 | background-color: var(--main-green); 293 | color: var(--moon-color); 294 | } 295 | 296 | body.day .story-list { 297 | padding: 60px; 298 | margin: 0; 299 | border-top: 1px solid var(--moon-color); 300 | background-color: var(--moon-color); 301 | color: var(--main-black); 302 | text-align: justify; 303 | } 304 | /*End of the day stylings*/ 305 | /*Loader animation styling*/ 306 | #pulse-wrapper { 307 | display: flex; 308 | position: fixed; 309 | width: 100%; 310 | height: 100%; 311 | overflow: hidden; 312 | background: var(--main-green); 313 | z-index: 999999; 314 | } 315 | 316 | #pulse-wrapper #pulse { 317 | margin: auto; 318 | } 319 | 320 | #pulse-wrapper #pulse span { 321 | position: absolute; 322 | margin-top: -25px; 323 | margin-left: -25px; 324 | width: 50px; 325 | height: 50px; 326 | border-radius: 50%; 327 | background: var(--moon-color); 328 | animation: pulse_animation 1.3s infinite; 329 | } 330 | 331 | #pulse-wrapper #pulse span:nth-child(2) { 332 | animation-delay: 0.3s; 333 | border-radius: 50%; 334 | } 335 | /*Loader animation styling*/ 336 | /*Logo styling*/ 337 | .logo { 338 | font-size: 2.8vh; 339 | font-weight: bold; 340 | font-family: "Architects Daughter", sans-serif; 341 | } 342 | 343 | .logo > a { 344 | text-decoration: none; 345 | } 346 | 347 | .logo span { 348 | color: var(--main-green); 349 | } 350 | /*Logo styling*/ 351 | /*Nav bar styling*/ 352 | header { 353 | position: sticky; 354 | top: 0; 355 | width: 100%; 356 | display: flex; 357 | justify-content: space-between; 358 | align-items: center; 359 | padding: 16px; 360 | border-bottom: 2px solid var(--main-white); 361 | z-index: 10000; 362 | } 363 | 364 | nav { 365 | position: sticky; 366 | margin-top: 10px; 367 | } 368 | 369 | .menu-icon { 370 | display: none; 371 | } 372 | 373 | nav ul { 374 | list-style-type: none; 375 | display: flex; 376 | background-color: transparent; 377 | } 378 | 379 | nav ul li { 380 | margin: 0 10px; 381 | z-index: 99999; 382 | background-color: transparent; 383 | } 384 | 385 | nav ul li a { 386 | text-decoration: none; 387 | background-color: transparent; 388 | border: 3px solid transparent; 389 | padding: 7px 20px; 390 | border-radius: 25px; 391 | z-index: 99999; 392 | margin-left: 20px; 393 | transition: 0.5s ease-in-out; 394 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.09); 395 | } 396 | 397 | nav ul li a:hover { 398 | background-color: var(--main-blue); 399 | color: var(--main-white); 400 | } 401 | 402 | nav ul.active { 403 | display: block !important; 404 | background-color: transparent; 405 | } 406 | /*Nav bar styling*/ 407 | /*Home interface*/ 408 | .sun-moon-container { 409 | display: flex; 410 | justify-content: center; 411 | align-items: center; 412 | position: absolute; 413 | top: 110px; 414 | left: 50%; 415 | transform: translateX(-50%); 416 | gap: 20px; 417 | z-index: 1; 418 | } 419 | 420 | .sun, .moon { 421 | width: 85px; 422 | height: 85px; 423 | border-radius: 50%; 424 | cursor: pointer; 425 | transition: opacity 1s ease; 426 | display: none; 427 | } 428 | 429 | .sun { 430 | display: block; 431 | background-color: yellow; 432 | box-shadow: 0 0 20px 5px yellow; 433 | } 434 | 435 | .moon { 436 | display: none; 437 | background-color: #fff; 438 | box-shadow: 0 0 20px 5px #fff; 439 | } 440 | 441 | /*Cursor styling*/ 442 | [data-cursor-dot], 443 | [data-cursor-outline] { 444 | transition: transform 0.5s ease; 445 | } 446 | 447 | .cursor-hidden { 448 | display: none; 449 | } 450 | 451 | .cursor-dot { 452 | width: 7px; 453 | height: 7px; 454 | border-radius: 10% transparent; 455 | background-color: var(--main-green); 456 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7); 457 | } 458 | 459 | .cursor-outline { 460 | width: 25px; 461 | height: 25px; 462 | border: 2px solid transparent; 463 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); 464 | } 465 | 466 | .cursor-dot, 467 | .cursor-outline { 468 | position: fixed; 469 | top: 0; 470 | left: 0; 471 | transform: translate(-50%, -50%); 472 | border-radius: 50%; 473 | z-index: 100000; 474 | pointer-events: none; 475 | } 476 | /*Cursor styling*/ 477 | /*sign-in, sign-up form*/ 478 | .form-group { 479 | position: relative; 480 | margin-bottom: 20px; 481 | width: 100%; 482 | } 483 | 484 | .form-group input { 485 | background-color: transparent; 486 | border: 3px solid var(--main-white); 487 | border-radius: 11px; 488 | outline: none; 489 | padding: 12px 12px 12px 0; 490 | width: 100%; 491 | font-size: 16px; 492 | color: var(--main-white); 493 | padding-left: 10px; 494 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 495 | font-weight: 250; 496 | } 497 | 498 | .form-group input:focus { 499 | border-color: var(--main-white); 500 | } 501 | 502 | .form-group label { 503 | position: absolute; 504 | top: 50%; 505 | left: 0; 506 | padding: 0 12px; 507 | font-size: 16px; 508 | color: var(--main-green); 509 | pointer-events: none; 510 | transform: translateY(-50%); 511 | transition: 0.2s; 512 | background-color: var(--moon-color); 513 | } 514 | 515 | .form-group input:focus + label, 516 | .form-group input:not(:placeholder-shown) + label { 517 | top: 0; 518 | width: 100%; 519 | transform: translateY(-50%); 520 | font-size: 12px; 521 | color: var(--main-green); 522 | border-radius: 10px 10px 0px 0px; 523 | } 524 | 525 | .hero-content button { 526 | width: 100%; 527 | box-sizing: border-box; 528 | } 529 | 530 | .icons > li > a> i { 531 | background-color: var(--main-green); 532 | color: var(--moon-color); 533 | padding: 18px; 534 | font-size: 2.2vh; 535 | border: 2px solid var(--moon-color); 536 | margin: 10px; 537 | border-radius: 50%; 538 | } 539 | 540 | ul.icons li i:hover { 541 | background-color: var(--moon-color); 542 | color: rgb(13, 139, 13); 543 | } 544 | 545 | ul.icons li i:visited { 546 | color: var(--moon-color); 547 | } 548 | 549 | a:visited { 550 | color: var(--moon-color); 551 | } 552 | 553 | .hero-content { 554 | font-size: 3vh; 555 | margin-top: 43vh; 556 | position: relative; 557 | z-index: 100; 558 | animation: 1.5s fadeInUp; 559 | animation: 6s floating-img ease-in-out infinite; 560 | } 561 | 562 | .hero-content span { 563 | color: var(--main-green); 564 | } 565 | 566 | .hero-content > h2 { 567 | margin-top: 10px; 568 | } 569 | 570 | .hero-content > p { 571 | font-family: "Anek Devanagari", sans-serif; 572 | font-size: 2vh; 573 | } 574 | 575 | .sign-in { 576 | background-color: var(--main-green); 577 | color: var(--moon-color); 578 | border: 2px solid var(--moon-color); 579 | border-radius: 15px; 580 | padding: 10px 110px; 581 | left: 50%; 582 | margin-top: 15px; 583 | font-family: "Anek Devanagari", sans-serif; 584 | font-size: 2vh; 585 | font-weight: 500; 586 | } 587 | 588 | .sign-in:hover { 589 | background-color: var(--moon-color); 590 | color: rgb(13, 139, 13); 591 | } 592 | 593 | ul.icons { 594 | display: inline-flex; 595 | left: 50%; 596 | list-style-type: none; 597 | text-decoration: none; 598 | z-index: 10; 599 | margin-top: 10px; 600 | } 601 | /*sign-in, sign-up form*/ 602 | 603 | #menu-items.active { 604 | display: block; 605 | } 606 | 607 | .menu-items-1 { 608 | display: none; 609 | z-index: 1000; 610 | } 611 | 612 | nav:hover .menu-items-1 { 613 | display: block; 614 | } 615 | 616 | .menu-icon-1 { 617 | color: var(--moon-color); 618 | } 619 | 620 | .hehe { 621 | font-size: 2.5vh; 622 | font-family: "Architects Daughter", sans-serif; 623 | font-weight: 600; 624 | } 625 | 626 | .back-to-top { 627 | position: fixed; 628 | top: 80%; 629 | right: 8%; 630 | background-color: var(--main-green); 631 | border: 2px solid var(--moon-color); 632 | padding: 7px; 633 | border-radius: 25px; 634 | width: 30px; 635 | height: 90px; 636 | align-items: center; 637 | justify-content: center; 638 | overflow: hidden; 639 | z-index: 99999; 640 | } 641 | 642 | .back-to-top a { 643 | position: relative; 644 | display: flex; 645 | align-items: center; 646 | justify-content: center; 647 | height: 100%; 648 | width: 100%; 649 | } 650 | 651 | .back-to-top i { 652 | position: absolute; 653 | transition: top 0.4s ease; 654 | } 655 | 656 | .hero { 657 | display: flex; 658 | justify-content: center; 659 | align-items: center; 660 | height: 55vh; 661 | text-align: center; 662 | overflow-x: none; 663 | } 664 | 665 | .tree-1 { 666 | position: relative; 667 | top: 21px; 668 | z-index: 0; 669 | } 670 | 671 | .container { 672 | position: relative; 673 | width: 100%; 674 | max-width: 200px; 675 | height: 210px; 676 | overflow-x: none; 677 | } 678 | 679 | .walk { 680 | position: relative; 681 | top: -223px; 682 | z-index: 100; 683 | animation: walking 7s infinite linear; 684 | animation-delay: 0.5s; 685 | overflow-x: none; 686 | } 687 | 688 | body.night .thoughts { 689 | display: block; 690 | position: relative; 691 | top: -500px; 692 | left: 130px; 693 | overflow-x: none; 694 | } 695 | 696 | body.day .thoughts { 697 | display: none; 698 | } 699 | 700 | body.day .thoughts-day { 701 | display: block; 702 | position: relative; 703 | top: -500px; 704 | left: 130px; 705 | overflow-x: none; 706 | } 707 | 708 | body.night .thoughts-day { 709 | display: none; 710 | } 711 | 712 | .ani-img { 713 | animation: 6s floating-img ease-in-out infinite; 714 | box-shadow: none !important; 715 | animation-delay: 5s; 716 | } 717 | 718 | 719 | .walk-1 { 720 | position: relative; 721 | top: -306px; 722 | z-index: 100; 723 | animation: walking-1 8.5s infinite linear; 724 | overflow-x: none; 725 | } 726 | 727 | .floating-clouds { 728 | position: absolute; 729 | top: 0; 730 | left: 0; 731 | width: 100%; 732 | height: 100%; 733 | pointer-events: none; 734 | overflow: hidden; 735 | } 736 | 737 | .cloud { 738 | position: absolute; 739 | width: 350px; 740 | opacity: 0.9; 741 | animation: float 20s infinite linear; 742 | } 743 | 744 | .cloud img { 745 | width: 100%; 746 | height: auto; 747 | } 748 | 749 | .cloud-1 { 750 | top: 3%; 751 | left: 2%; 752 | animation-delay: 0s; 753 | z-index: 2; 754 | } 755 | 756 | .cloud-2 { 757 | top: 4%; 758 | left: -70%; 759 | animation-delay: 2s; 760 | z-index: 2; 761 | } 762 | 763 | .menu-icon { 764 | color: var(--main-white); 765 | margin: 0; 766 | } 767 | 768 | .stone-1 { 769 | position: relative; 770 | top: -48px; 771 | } 772 | 773 | .stone-2 { 774 | position: relative; 775 | top: -48px; 776 | left: 170px; 777 | } 778 | /*End of home interface*/ 779 | /*Animations*/ 780 | @keyframes floating-img { 781 | 0% { 782 | transform: translatey(0px); 783 | } 784 | 50% { 785 | transform: translatey(-20px); 786 | } 787 | 100% { 788 | transform: translatey(0px); 789 | } 790 | } 791 | 792 | @keyframes float { 793 | 0% { 794 | transform: translateX(-80%); 795 | opacity: 0.1; 796 | } 797 | 50% { 798 | transform: translateX(100%); 799 | opacity: 1; 800 | } 801 | 100% { 802 | transform: translateX(300%); 803 | opacity: 0; 804 | } 805 | } 806 | 807 | @keyframes walking { 808 | 0% { 809 | transform: translateX(100%); 810 | opacity: 1; 811 | overflow-x: none; 812 | } 813 | 100% { 814 | transform: translateX(-100%); 815 | opacity: 1; 816 | overflow-x: none; 817 | } 818 | } 819 | 820 | 821 | @keyframes walking-1 { 822 | 0% { 823 | transform: translateX(500%); 824 | opacity: 1; 825 | overflow-x: none; 826 | } 827 | 100% { 828 | transform: translateX(-300%); 829 | opacity: 1; 830 | overflow-x: none; 831 | } 832 | } 833 | 834 | @keyframes pulse_animation { 835 | 0% { 836 | box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8) 837 | } 838 | 100% { 839 | box-shadow: 0 0 0 200px rgba(254, 206, 104, 0) 840 | } 841 | } 842 | 843 | @keyframes fadeInUp { 844 | 0% { 845 | opacity: 0; 846 | transform: translateY(200px); 847 | } 848 | 100% { 849 | opacity: 1; 850 | transform: translateY(0px); 851 | } 852 | } 853 | /*Animations end here*/ 854 | /*scrollbar styling for desktops*/ 855 | ::-webkit-scrollbar { 856 | width: 14px !important; 857 | } 858 | 859 | ::-webkit-scrollbar-track { 860 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important; 861 | -webkit-border-radius: 10px !important; 862 | border-radius: 10px !important; 863 | } 864 | 865 | ::-webkit-scrollbar-thumb { 866 | -webkit-border-radius: 10px !important; 867 | border-radius: 10px !important; 868 | background:var(--main-green) !important; 869 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 870 | } 871 | 872 | ::-webkit-scrollbar-thumb:window-inactive { 873 | background: var(--main-green)!important; 874 | } 875 | /*scrollbar styling for desktops*/ 876 | /*Media Quieries start here*/ 877 | @media (max-width: 400px) { 878 | .hehe { 879 | font-size: 2.5vh; 880 | } 881 | .logo { 882 | font-size: 2.5vh; 883 | } 884 | .box { 885 | height: 200px; 886 | width: 200px; 887 | } 888 | .about > img { 889 | height: 160px; 890 | float: left; 891 | animation: floating-img 6s ease-in-out infinite; 892 | } 893 | 894 | .courses > img { 895 | height: 160px; 896 | animation: floating-img 6s ease-in-out infinite; 897 | } 898 | 899 | .games > img { 900 | height: 170px; 901 | animation: floating-img 6s ease-in-out infinite; 902 | } 903 | 904 | .sign-in { 905 | margin-top: 10px; 906 | } 907 | 908 | header { 909 | padding: 12px; 910 | position: sticky; 911 | } 912 | 913 | body.day .icons > li > a> i { 914 | padding: 17px; 915 | font-size: 2.5vh; 916 | } 917 | } 918 | 919 | @media (max-width: 700px) { 920 | body.night nav ul { 921 | display: none; 922 | background-color: var(--night-sky); 923 | text-align: center; 924 | color: var(--night-sky); 925 | border-radius: 20px; 926 | margin-top: 5px; 927 | width: 18vh; 928 | position: absolute; 929 | overflow: hidden; 930 | right: 0px; 931 | transform: translateX(15px); 932 | z-index: 10000000; 933 | } 934 | 935 | .walk { 936 | position: relative; 937 | top: -223px; 938 | z-index: 100; 939 | animation: walking 6s infinite linear; 940 | overflow-x: none; 941 | } 942 | 943 | 944 | 945 | body.day nav ul { 946 | background-color: var(--main-blue); 947 | display: none; 948 | text-align: center; 949 | color: var(--night-sky); 950 | border-radius: 20px; 951 | margin-top: 5px; 952 | width: 18vh; 953 | position: absolute; 954 | overflow: hidden; 955 | right: 0px; 956 | transform: translateX(15px); 957 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.09); 958 | z-index: 10000000; 959 | } 960 | 961 | nav ul.active { 962 | display: block; 963 | } 964 | 965 | nav ul li { 966 | margin-top: 20px; 967 | } 968 | 969 | .menu-icon { 970 | display: block; 971 | } 972 | 973 | .sticky-nav { 974 | position: -webkit-sticky; 975 | position: sticky; 976 | top: 0; 977 | background: white; 978 | z-index: 1000; 979 | } 980 | 981 | 982 | nav ul li a { 983 | display: block; 984 | text-decoration: none; 985 | transition: 0.5s ease-in-out; 986 | position: relative; 987 | margin: 0px 0px 20px 0px; 988 | width: 100%; 989 | z-index: 999999; 990 | } 991 | 992 | nav ul li a:hover { 993 | background-color: var(--main-blue); 994 | color: var(--main-white); 995 | border-radius: 10px; 996 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.09); 997 | } 998 | 999 | .hehe { 1000 | font-size: 2.3vh; 1001 | } 1002 | 1003 | .about > img { 1004 | height: 170px; 1005 | left: 20px; 1006 | } 1007 | 1008 | .courses > img { 1009 | height: 170px; 1010 | left: 20px; 1011 | } 1012 | 1013 | .games > img { 1014 | height: 180px; 1015 | left: 20px; 1016 | } 1017 | 1018 | header { 1019 | padding: 14px; 1020 | position: sticky; 1021 | } 1022 | 1023 | .course-list { 1024 | display: flex; 1025 | align-items: center; 1026 | justify-content: center; 1027 | margin: 10px auto; 1028 | } 1029 | 1030 | dialog { 1031 | top: 30%; 1032 | left: 5%; 1033 | } 1034 | } 1035 | 1036 | @media (max-width: 350px) { 1037 | 1038 | body.night .hero-content > p { 1039 | font-size: 1.7vh; 1040 | } 1041 | 1042 | body.day .hero-content > p { 1043 | font-size: 1.7vh; 1044 | } 1045 | 1046 | body .hero-content > h4 { 1047 | font-size: 2.3vh; 1048 | } 1049 | 1050 | 1051 | body.night .hero-content { 1052 | border-radius: 20px; 1053 | padding: 5px; 1054 | margin: 10px; 1055 | margin-top: 35vh; 1056 | font-size: 1.5vh; 1057 | } 1058 | body.day .hero-content { 1059 | border-radius: 20px; 1060 | padding: 5px; 1061 | margin: 10px; 1062 | margin-top: 35vh; 1063 | font-size: 1.5vh; 1064 | } 1065 | 1066 | .about { 1067 | padding: 40px; 1068 | } 1069 | 1070 | .games { 1071 | padding: 40px; 1072 | } 1073 | 1074 | .courses { 1075 | padding: 40px; 1076 | } 1077 | 1078 | body.day .icons > li > a> i { 1079 | padding: 17px; 1080 | font-size: 2vh; 1081 | } 1082 | 1083 | body.night .icons > li > a> i { 1084 | padding: 17px; 1085 | font-size: 2vh; 1086 | } 1087 | } 1088 | 1089 | @media (max-width: 768px) { 1090 | .footer-section { 1091 | flex: 1 1 100%; 1092 | text-align: center; 1093 | } 1094 | 1095 | dialog { 1096 | top: 30%; 1097 | left: 5%; 1098 | } 1099 | 1100 | .footer-section-page { 1101 | position: relative; 1102 | top: 15%; 1103 | } 1104 | } 1105 | 1106 | @media (min-width: 768px) { 1107 | .links-div { 1108 | flex-direction: row; 1109 | justify-content: space-between; 1110 | } 1111 | 1112 | dialog { 1113 | top: 30%; 1114 | left: 30%; 1115 | } 1116 | 1117 | .icons > li > a > i { 1118 | padding: 15px; 1119 | font-size: 2vh; 1120 | } 1121 | 1122 | .back-to-top { 1123 | position: fixed; 1124 | top: 85%; 1125 | right: 1%; 1126 | } 1127 | 1128 | .walk { 1129 | position: relative; 1130 | top: -223px; 1131 | z-index: 100; 1132 | animation: walking 20s infinite linear; 1133 | overflow-x: none; 1134 | } 1135 | 1136 | .walk-1 { 1137 | position: relative; 1138 | top: -306px; 1139 | z-index: 100; 1140 | animation: walking-1 30s infinite linear; 1141 | animation-delay: 0.5s; 1142 | overflow-x: none; 1143 | } 1144 | 1145 | @keyframes walking { 1146 | 0% { 1147 | transform: translateX(480%); 1148 | overflow-x: none; 1149 | } 1150 | 100% { 1151 | transform: translateX(-100%); 1152 | overflow-x: none; 1153 | } 1154 | } 1155 | 1156 | @keyframes walking-1 { 1157 | 0% { 1158 | transform: translateX(1850%); 1159 | overflow-x: none; 1160 | } 1161 | 100% { 1162 | transform: translateX(-800%); 1163 | overflow-x: none; 1164 | } 1165 | } 1166 | 1167 | .thoughts { 1168 | height: 150px; 1169 | position: relative; 1170 | top: -700px; 1171 | } 1172 | 1173 | .thoughts-day { 1174 | height: 150px; 1175 | 1176 | } 1177 | } 1178 | 1179 | @media (min-width: 500px) { 1180 | .content { 1181 | width: 43%; 1182 | } 1183 | #button { 1184 | margin: 30px; 1185 | } 1186 | } 1187 | /*Media Quieries end here*/ 1188 | /*About section styling*/ 1189 | .about { 1190 | background-color: var(--main-green); 1191 | color: var(--main-white); 1192 | width: 100%; 1193 | overflow: hidden; 1194 | padding: 50px; 1195 | margin: 0; 1196 | border-top: 4px solid var(--main-white); 1197 | text-align: justify; 1198 | } 1199 | 1200 | .heading { 1201 | font-size: 3.5vh; 1202 | font-weight: 600; 1203 | clear: both; 1204 | display: inline-block; 1205 | margin-bottom: 10px; 1206 | border-bottom: 1px solid var(--moon-color); 1207 | } 1208 | 1209 | 1210 | .about > p { 1211 | padding: 50px; 1212 | } 1213 | 1214 | .about > img { 1215 | position: relative; 1216 | float: right; 1217 | } 1218 | 1219 | .about-us { 1220 | background: url(images/aboutus.jpeg); 1221 | width: 100%; 1222 | background-repeat: no-repeat; 1223 | opacity: 0.8; 1224 | } 1225 | 1226 | .about-us:hover { 1227 | opacity: 0.4; 1228 | } 1229 | 1230 | .about-us > .heading { 1231 | opacity: 1; 1232 | color: var(--moon-color); 1233 | padding: 70px; 1234 | } 1235 | 1236 | .about-2 { 1237 | background-color: var(--main-green); 1238 | color: var(--main-white); 1239 | width: 100%; 1240 | overflow: hidden; 1241 | padding: 60px; 1242 | margin: 0; 1243 | border-top: 1px solid var(--main-white); 1244 | text-align: justify; 1245 | } 1246 | 1247 | .button-about { 1248 | background-color: var(--main-green); 1249 | color: var(--moon-color); 1250 | transition: 0.4s; 1251 | border: 1px solid var(--moon-color); 1252 | border-radius: 26px; 1253 | padding: 11px 17px; 1254 | text-decoration: none; 1255 | } 1256 | 1257 | .button-about:hover { 1258 | background-color: var(--moon-color); 1259 | color: var(--main-green); 1260 | } 1261 | /*About section styling ends*/ 1262 | /*Games, stories and Courses section starts*/ 1263 | .courses { 1264 | padding: 60px 50px; 1265 | margin: 0; 1266 | border-top: 3px solid var(--moon-color); 1267 | background-color: var(--night-sky); 1268 | color: var(--main-white); 1269 | text-align: justify; 1270 | } 1271 | 1272 | .course { 1273 | height: 230px; 1274 | width: 220px; 1275 | background-color: var(--main-green); 1276 | border-radius: 20px; 1277 | margin: 5px; 1278 | padding: 10px; 1279 | display: inline-block; 1280 | margin: 20px; 1281 | text-align: center; 1282 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); 1283 | transition: 1s ease-in; 1284 | } 1285 | 1286 | .course:hover { 1287 | color: var(--main-green); 1288 | background-color: var(--main-dark); 1289 | } 1290 | 1291 | 1292 | .our-stories { 1293 | background: url(images/sky.jpeg); 1294 | width: 100%; 1295 | background-repeat: no-repeat; 1296 | opacity: 0.8; 1297 | } 1298 | 1299 | .our-stories:hover { 1300 | opacity: 0.4; 1301 | } 1302 | 1303 | .our-stories > .heading { 1304 | opacity: 1; 1305 | color: var(--moon-color); 1306 | padding: 70px; 1307 | } 1308 | 1309 | .story-list { 1310 | padding: 60px; 1311 | margin: 0; 1312 | border-top: 1px solid var(--moon-color); 1313 | background-color: var(--night-sky); 1314 | color: var(--main-white); 1315 | text-align: justify; 1316 | } 1317 | 1318 | dialog { 1319 | padding: 20px; 1320 | border: 1px solid var(--moon-color); 1321 | border-radius: 15px; 1322 | background-color: var(--main-green); 1323 | text-align: center; 1324 | color: var(--moon-color); 1325 | } 1326 | 1327 | .our-courses { 1328 | background: url(images/games.jpeg); 1329 | width: 100%; 1330 | background-repeat: no-repeat; 1331 | opacity: 0.8; 1332 | } 1333 | 1334 | .our-courses:hover { 1335 | opacity: 0.4; 1336 | } 1337 | 1338 | .our-courses > .heading { 1339 | opacity: 1; 1340 | color: var(--night-sky); 1341 | padding: 70px; 1342 | } 1343 | 1344 | .courses > img { 1345 | position: relative; 1346 | float: right; 1347 | } 1348 | 1349 | .button-courses { 1350 | background-color: var(--night-sky); 1351 | color: var(--moon-color); 1352 | transition: 0.4s; 1353 | border: 1px solid var(--moon-color); 1354 | border-radius: 26px; 1355 | padding: 11px 17px; 1356 | text-decoration: none; 1357 | } 1358 | 1359 | .button-courses:hover { 1360 | background-color: var(--moon-color); 1361 | color: var(--night-sky); 1362 | } 1363 | 1364 | .button-games { 1365 | background-color: inherit; 1366 | color: var(--moon-color); 1367 | transition: 0.4s; 1368 | border: 1px solid var(--moon-color); 1369 | border-radius: 26px; 1370 | padding: 11px 17px; 1371 | text-decoration: none; 1372 | } 1373 | 1374 | .button-games:hover { 1375 | background-color: var(--moon-color); 1376 | color: #3299cc; 1377 | } 1378 | 1379 | .games > img { 1380 | position: relative; 1381 | float: right; 1382 | } 1383 | 1384 | .games { 1385 | background: linear-gradient(120deg, #2E3192, #15cdcd); 1386 | animation-timing-function: ease-in-out; 1387 | border-top: 3px solid var(--moon-color); 1388 | color: var(--moon-color); 1389 | margin: 0; 1390 | text-align: justify; 1391 | padding: 50px; 1392 | } 1393 | 1394 | .course-list { 1395 | background: linear-gradient(140deg, var(--main-green), var(--main-black)) ; 1396 | border-top: 3px solid var(--moon-color); 1397 | color: var(--moon-color); 1398 | display: block; 1399 | margin: 0; 1400 | text-align: justify; 1401 | padding: 50px 60px; 1402 | } 1403 | .box { 1404 | height: 220px; 1405 | width: 220px; 1406 | display: flex; 1407 | align-items: center; 1408 | justify-content: center; 1409 | background-color: var(--moon-color); 1410 | box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.7); 1411 | border: 2px solid white; 1412 | border-radius: 15px; 1413 | margin: 40px 10px; 1414 | } 1415 | 1416 | .box > img { 1417 | max-height: 160%; 1418 | max-width: 160%; 1419 | } 1420 | 1421 | .box:hover { 1422 | opacity: 0.7; 1423 | } 1424 | 1425 | .img-fluid { 1426 | position: relative; 1427 | left: 50%; 1428 | } 1429 | 1430 | .div-course { 1431 | display: flex; 1432 | flex-wrap: wrap; 1433 | justify-content: center; 1434 | align-items: center; 1435 | } 1436 | /*Courses section ends here*/ 1437 | /*Footer section styling*/ 1438 | footer { 1439 | border-top: 1px solid var(--moon-color); 1440 | background-color: var(--main-black); 1441 | color: var(--moon-color); 1442 | padding: 40px 0; 1443 | display: inline-block; 1444 | width: 100%; 1445 | } 1446 | 1447 | .footer-container { 1448 | display: flex; 1449 | flex-wrap: wrap; 1450 | align-items: center; 1451 | justify-content: space-between; 1452 | max-width: 1200px; 1453 | margin: 0 auto; 1454 | padding: 0 20px; 1455 | } 1456 | 1457 | .footer-container-page { 1458 | display: flex; 1459 | flex-wrap: wrap; 1460 | justify-content: space-between; 1461 | margin: 0 auto; 1462 | padding: 0 20px; 1463 | } 1464 | 1465 | .footer-brand { 1466 | flex: 1 1 100%; 1467 | text-align: center; 1468 | margin-bottom: 20px; 1469 | font-family: "Architects Daughter", sans-serif; 1470 | } 1471 | 1472 | .footer-brand a { 1473 | font-size: 24px; 1474 | color: var(--main-green); 1475 | text-align: center; 1476 | text-decoration: none; 1477 | } 1478 | 1479 | .footer-brand a span { 1480 | color: var(--moon-color); 1481 | } 1482 | 1483 | .footer-section { 1484 | flex: 1 1 50%; 1485 | margin-bottom: 20px; 1486 | } 1487 | 1488 | .footer-section h2.heading { 1489 | font-size: 20px; 1490 | color: var(--main-green); 1491 | margin-bottom: 10px; 1492 | } 1493 | 1494 | .footer-section p { 1495 | margin: 10px 0; 1496 | } 1497 | 1498 | .social-links ul, .quick-links { 1499 | list-style: none; 1500 | padding: 0; 1501 | } 1502 | 1503 | .social-links ul li, .quick-links li { 1504 | display: inline-block; 1505 | } 1506 | 1507 | .social-links ul li a, .quick-links li a { 1508 | color: var(--main-green); 1509 | font-size: 18px; 1510 | text-decoration: none; 1511 | } 1512 | 1513 | .social-links ul li a:hover, .quick-links li a:hover { 1514 | color: var(--moon-color); 1515 | } 1516 | 1517 | .quick-links li { 1518 | display: block; 1519 | margin-bottom: 5px; 1520 | } 1521 | 1522 | .quick-links li a { 1523 | font-size: 16px; 1524 | } 1525 | 1526 | .quick-links li a:hover { 1527 | text-decoration: underline; 1528 | } 1529 | 1530 | .links-div { 1531 | display: flex; 1532 | flex-direction: column; 1533 | gap: 20px; 1534 | } 1535 | 1536 | .footer-section { 1537 | flex: 1; 1538 | } 1539 | 1540 | .contact { 1541 | color: var(--moon-color); 1542 | margin: 0; 1543 | text-align: justify; 1544 | padding: 50px 60px; 1545 | } 1546 | 1547 | .footer-brand.contact { 1548 | display: flex; 1549 | flex-direction: column; 1550 | align-items: center; 1551 | justify-content: center; 1552 | text-align: center; 1553 | color: var(--moon-color); 1554 | margin: 0; 1555 | padding: 50px 0; 1556 | } 1557 | 1558 | .footer-brand.contact img { 1559 | margin: 20px 0; 1560 | } 1561 | 1562 | 1563 | .message { 1564 | display: flex; 1565 | flex-direction: column; 1566 | align-items: center; 1567 | width: 100%; 1568 | margin-top: 20px; 1569 | } 1570 | 1571 | .message > h2 { 1572 | font-family: "Anek Devanagari", sans-serif; 1573 | font-weight: 410; 1574 | } 1575 | 1576 | .message { 1577 | position: relative; 1578 | width: 100%; 1579 | } 1580 | 1581 | .message textarea { 1582 | background-color: var(--main-black); 1583 | border: 3px solid var(--main-white); 1584 | border-radius: 11px; 1585 | border-top: 15px solid var(--moon-color); 1586 | outline: none; 1587 | padding: 10px; 1588 | width: 90%; 1589 | margin-top: 10px; 1590 | height: 120px; 1591 | font-size: 16px; 1592 | color: var(--main-white); 1593 | font-family: "Anek Devanagari", sans-serif; 1594 | font-weight: 250; 1595 | box-sizing: border-box; 1596 | resize: vertical; 1597 | } 1598 | 1599 | .message textarea:focus { 1600 | border-color: var(--main-white); 1601 | } 1602 | 1603 | .send-message { 1604 | background-color: var(--main-green); 1605 | color: var(--moon-color); 1606 | border: 2px solid var(--moon-color); 1607 | border-radius: 15px; 1608 | padding: 10px 70px; 1609 | margin-top: 15px; 1610 | font-family: "Anek Devanagari", sans-serif; 1611 | font-size: 2vh; 1612 | font-weight: 400; 1613 | } 1614 | 1615 | .send-message:hover { 1616 | background-color: var(--moon-color); 1617 | color: rgb(13, 139, 13); 1618 | } 1619 | 1620 | /*Footer section styling*/ --------------------------------------------------------------------------------