https://github.com/rakibul263/kids-school

https://github.com/rakibul263/kids-school

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/rakibul263/kids-school
• Owner: rakibul263
• Created: 2025-01-23T04:17:58.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-01-23T05:20:52.000Z (4 months ago)
• Last Synced: 2025-01-23T05:25:46.508Z (4 months ago)
• Language: CSS
• Size: 3.02 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
#  Kids-School

### 1. Navbar

- **Logo and Site Name**: Positioned at the left.

- **Colorful Navigation Links**: Three links are centered for easy navigation.

- **Contact Button**: button at the right to encourage user interaction.

- **Mobile Responsiveness**:

  - Displays only the logo at the left and a menu bar at the right.

  - Other elements of the navbar will be hidden for a cleaner mobile experience.

---

### 2. Banner

- **Content**:

  - Heading with different colored text, a paragraph, and a button styled as per design.

  - Relevant image of a child is placed on the right.

- **Mobile Responsiveness**:

  - Image moves to the top.

  - Content will be after the image.

  - Content will be center aligned as Figma.

---

### 3. Standard Curriculum

- **background**: Add a Background Image same as Figma.

- **Center-Aligned Heading**: Add a center aligned section's title.

- **Cards**:

  - Three center-aligned cards with an image, heading, and "Read More" link.

  - Unique gradient backgrounds for each card.

- **Arrow Button Group**: Center-aligned arrow buttons with some hovering effect.

- **Mobile Responsiveness**:

  - Cards will display in a single column, will took more than 90% of the device width.

---

### 4. Our Stories Section

- **background with Gradient**: Add a Background Image and a gradiant same as Figma.

- **Card Design**:

  - Five cards with an image at the top and heading, and text at the bottom.

  - Elements are aligned as per design.

- **Responsiveness**:

  - Mobile: Cards will displayed in two columns.

### 5. Footer

- **Structure**:

  - Three columns:

    1. Logo, site name, and about text as figma.

    2. Navigation links as figma.

    3. social media icons same as figma.

- **Mobile Responsiveness**:

  - Content will displayed in a single-column format, styled as per Figma design.

---

## Challenges

### Positioning & Data Hiding

- show the date by positioning between image and context as figma on every cards

- hide the 1st  card on  small devices and show 4-6 card.

- hide arrow button group  from the statndard curriculam section.

### Explore Marquee & Use It

- Explore Marquee Tag. use it anywhere in your homepage. make sure marquee is working.

---

# Technology

- HTML & CSS only

- You can't use any other technology / Framework.

---

# What to Submit

- Your Github Repository . ex.("https://github.com/Repo-name")

- Your Live Link. ex.(https://user.github.io/Repo-name/)

---

# Design for Large Device



---

# Design for Small Device

 

---