https://github.com/hptrk/learn-advanced-css-projects

https://github.com/hptrk/learn-advanced-css-projects

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/hptrk/learn-advanced-css-projects
• Owner: hptrk
• Created: 2025-02-06T23:54:48.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-02-07T00:06:30.000Z (3 months ago)
• Last Synced: 2025-02-07T01:18:43.795Z (3 months ago)
• Language: CSS
• Size: 36.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Advanced CSS Projects

This repository contains three projects from an **Advanced CSS** Udemy course.  

Each project focuses on mastering advanced CSS concepts, including **flexbox**, **grid layout**, **animations**, and **responsive design**.

## 🚀 Projects Overview

### 1. **Nexter**  

A **real estate landing page** showcasing advanced **CSS animations**, **form styling**, and **responsiveness**.

- **Technologies**: HTML, CSS, Flexbox, Animations  

- **Key Features**: Interactive property cards, smooth page transitions, and mobile-first design.

![Nexter Screenshot](readme-images/nexter-screenshot.png)

### 2. **Trillo**  

A fully responsive **hotel booking website** designed to demonstrate **CSS Grid** and **responsive typography**.

- **Technologies**: HTML, CSS, Grid, Responsive Design  

- **Key Features**: Fully responsive layout, sleek design with well-structured components.

![Trillo Screenshot](readme-images/trillo-screenshot.png)

### 3. **Natours**  

A modern **travel website** showcasing advanced CSS techniques such as **flexbox**, **grid**, and **CSS animations**.

- **Technologies**: HTML, CSS, Flexbox, Grid, Animations  

- **Key Features**: Responsive design, image hover effects, and animated transitions.

![Natours Screenshot](readme-images/natours-screenshot.png)

## 📅 Project Details

- **Course**: Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!

- **Year**: 2023

- **Technologies**: HTML, CSS, Flexbox, Grid, Animations, Responsive Design  

---

⭐ These are learning projects and are not actively maintained.