https://github.com/shuaib-code/kids-school
A static webpage for a kids' school, featuring a clean, vibrant UI designed using SASS. The layout includes easy navigation, bright colors, playful typography, and engaging images of school activities. It’s responsive, ensuring a seamless experience on both mobile and desktop devices, perfect for parents and students.
https://github.com/shuaib-code/kids-school
flexbox-css grid html sass sass-importer sass-mixins sass-variables
Last synced: about 1 year ago
JSON representation
A static webpage for a kids' school, featuring a clean, vibrant UI designed using SASS. The layout includes easy navigation, bright colors, playful typography, and engaging images of school activities. It’s responsive, ensuring a seamless experience on both mobile and desktop devices, perfect for parents and students.
- Host: GitHub
- URL: https://github.com/shuaib-code/kids-school
- Owner: shuaib-code
- Created: 2025-01-22T22:25:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-23T17:28:09.000Z (over 1 year ago)
- Last Synced: 2025-03-16T14:50:17.173Z (over 1 year ago)
- Topics: flexbox-css, grid, html, sass, sass-importer, sass-mixins, sass-variables
- Language: Sass
- Homepage: https://shuaib-code.github.io/kids-school/
- Size: 982 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kids' School Static Web Page
## Overview
This is a **static web page** designed for a kids' school with a **clean, vibrant UI**. The page is built using **SASS** for efficient styling, featuring a playful design with easy navigation and engaging colors. It’s fully responsive, ensuring a seamless experience on both mobile and desktop devices.
### Key Features:
- 🟦 **Bright and Playful Design**: Using primary and secondary colors to create an engaging and friendly atmosphere for children.
- 🎨 **SASS for Styling**: Leveraging **SASS** for efficient and maintainable styles, with variables and mixins to keep things organized and reusable.
- 📱 **Responsive Layout**: Adapts seamlessly to both mobile and desktop views.
- 🔠 **Typography and Imagery**: Child-friendly fonts and illustrations to enhance the learning experience.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/shuaib-code/kids-school
```
2. Navigate to the project folder:
```bash
cd kids-school
```
3. Open `index.html` in your browser.
## Technology Stack
- 🔠 **HTML**: Structure of the page
- 🎨 **SASS**: For styling the UI
- 📱 **Responsive Design**: Ensures compatibility with mobile and desktop devices
## Folder Structure
- 🗂️ `assets/`: Contains media like the logo, image etc.
- 📝 `index.html`: Main HTML file
- 🎨 `css/`: Contains SASS files (main.css, main.css.map)
- 🧰 `sass/`: Contains SASS files (main.sass, mixin.sass, ..., colors.sass)
- 📄 `README.md`: This file
## License
This project is licensed under the MIT License. See the LICENSE file for details.