An engaging and responsive web template for an online learning platform, built with HTML5 + CSS3.
It showcases educational content, available courses, testimonials, and user-friendly navigation with a modern design.
Live Preview: 🔗 Click Here (Add your Netlify or GitHub Pages link here)
- ✅ Sticky Navigation Header
- ✅ Responsive Layout with Flexbox
- ✅ FontAwesome Icons Integration
- ✅ Modern Hero Section with CTA
- ✅ Dynamic Course Cards with Price & Views
- ✅ Testimonials Section with Star Ratings
- ✅ Social Media Links in Footer
MangcodingStore/
│
├── assests/
│ ├── css/
│ │ └── style.css
│ ├── img/
│ │ ├── LOGO/
│ │ ├── Section1-Begin/
│ │ ├── Section2-wehave/
│ │ ├── section3-selectedCourse/
│ │ ├── section4-availableCourses/
│ │ └── Testimonials/
│
├── index.html
└── README.md
| Technology | Description |
|---|---|
HTML5 |
Semantic markup |
CSS3 |
Responsive design |
Flexbox |
Layout structure |
Google Fonts |
Custom typography |
FontAwesome |
Icons integration |
-
Clone this repo:
git clone https://github.com/Ghaida-jaaisa/mangcoding-Store.git
-
Navigate into project folder:
cd mangcoding-store -
Open
index.htmlin your browser or use a live server extension in VS Code.
- You can edit text and course details directly in
index.html. - To change colors or spacing, go to
assests/css/style.css. - Add or remove courses by duplicating the
.coursediv blocks. - To make it dynamic, you can connect it to a backend or CMS later.
Ghaida Ja'aysah — A passionate computer systems engineering student with creative energy and a strong desire to inspire through technology.
💌 Email: Ghaida.20004@gmail.com
This project is based on a design from the Figma community:
🎨 Course Simple Landing Page
🔗 View on Figma
The HTML & CSS implementation was crafted with care by Ghaida Ja'aysah, bringing the design to life with pixel-perfect attention to detail and modern web practices.
Designed with ❤️ by Ghaida Ja'aysah
"Engineering the Future ✨"