https://github.com/dawidolko/F1Zone-Project-HTML-CSS-JS-SASS
F1 website design project.
https://github.com/dawidolko/F1Zone-Project-HTML-CSS-JS-SASS
design f1 f1-score f1-web formula1 page project site website
Last synced: about 1 month ago
JSON representation
F1 website design project.
- Host: GitHub
- URL: https://github.com/dawidolko/F1Zone-Project-HTML-CSS-JS-SASS
- Owner: dawidolko
- License: mit
- Created: 2023-07-25T21:36:06.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-29T19:37:46.000Z (almost 2 years ago)
- Last Synced: 2024-12-17T08:56:32.770Z (10 months ago)
- Topics: design, f1, f1-score, f1-web, formula1, page, project, site, website
- Language: HTML
- Homepage: https://f1.dawidolko.pl/
- Size: 19.6 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# F1-Website-Design
> 🚀 **Modern Formula 1 Poster Shop** - Build responsive frontend websites with HTML5, JavaScript, and SCSS
## 📋 Description
Welcome to the **F1-Website-Design** repository! This project showcases a modern and fully responsive frontend website for showcasing and selling premium Formula 1 posters. The focus is on delivering high performance, aesthetic design, and smooth user experience across all devices using cutting-edge frontend technologies.
This repository demonstrates best practices in modern web development, featuring responsive design, interactive JavaScript functionality, and organized SCSS architecture for maintainable styling solutions.
## 📁 Repository Structure
```
F1-Website-Design/
├── 📄 index.html # Main entry page and application structure
├── 🎨 css/ # Compiled CSS files for production
├── ⚙️ scss/ # SCSS/SASS source files for styling
├── 💻 js/ # JavaScript scripts and interactive functionality
├── 🖼️ img/ # Images, graphics, and product assets
└── 📖 README.md # Project documentation
```
## 🚀 Getting Started
### 1. Clone the Repository
```bash
git clone https://github.com/dawidolko/F1-Website-Design.git
cd F1-Website-Design
```
### 2. Basic Setup (Static Version)
- Open the `index.html` file directly in your browser
- All styles and scripts are ready to use immediately
### 3. Advanced Setup (With Build Tools)
For development with SCSS compilation and optimization:
```bash
npm install
npm start
```
## ⚙️ System Requirements
### **Essential Tools:**
- **Modern Web Browser** (Chrome, Firefox, Safari, Edge)
- **Code Editor** (VS Code, Sublime Text, WebStorm)
- **Git** for version control
### **Development Environment (Optional):**
- **Node.js & npm** for package management
- **Sass/SCSS compiler** for style preprocessing
- **Webpack** for build optimization and asset bundling
- **Live Server** extension for real-time development
### **Recommended Extensions:**
- **Sass/SCSS** syntax highlighting
- **Live Sass Compiler** for automatic compilation
- **Prettier** for code formatting
- **ESLint** for JavaScript code quality
## ✨ Key Features
### **🏪 Product Catalog**
- Premium F1 posters featuring famous drivers, teams, and legendary race tracks
- Detailed product descriptions with pricing and high-quality imagery
### **📱 Responsive Design**
- Fully optimized for mobile phones, tablets, and desktop devices
- Modern CSS Grid and Flexbox layouts
### **⚡ Dynamic Frontend**
- Interactive product search and category filtering
- Smooth animations and transitions for enhanced user experience
### **🎨 Modern UI/UX**
- Modular SCSS/SASS architecture for maintainable styling
- Professional design following current web design trends
### **🚀 Performance Optimized**
- Fast loading times and smooth navigation
- Optimized images and efficient asset delivery
## 🛠️ Technologies Used
- **HTML5** - Semantic markup and modern web standards
- **CSS3/SCSS/SASS** - Advanced styling and responsiveness
- **JavaScript** - Interactive functionality and DOM manipulation
- **Webpack** - Module bundling and build optimization
- **Git** - Version control and collaboration
## 🌍 Live Demo
The project is deployed and available at: **[https://f1.dawidolko.pl](https://f1.dawidolko.pl)**
## 🖼️ Preview
[
](img/f1.dawidolko.pl_.png)
## 🤝 Contributing
Contributions are highly welcomed! Here's how you can help:
- 🐛 **Report bugs** - Found an issue? Let us know!
- 💡 **Suggest improvements** - Have ideas for better features?
- 🔧 **Submit pull requests** - Share your enhancements and solutions
- 📖 **Improve documentation** - Help make the project clearer
Feel free to open issues or reach out through GitHub for any questions or suggestions.
## 👨💻 Author
Created by **Dawid Olko** - Part of the ongoing Formula 1 web development series.
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
---
⭐ **Found this helpful?** Give it a star and share with fellow frontend developers!