Skip to content

Landing page with adaptive layout using HTML, CSS, JS 🚘

Notifications You must be signed in to change notification settings

bursasha/html-css-js-mercedes-landing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

12 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Mercedes Landing Page with Adaptive Layout 🏎️

Project Structure: πŸ“

  • css/: Contains the CSS files for styling the landing page.
    • styles.css: Main stylesheet for the project.
  • fonts/: Directory holding custom fonts used in the landing page.
  • images/: Folder containing all the images used in the landing page.
  • js/: Contains JavaScript files for interactive functionality.
    • scripts.js: Main JavaScript file with custom scripts.
  • README.md: This README file providing an overview of the project.
  • index.html: The main HTML file of the landing page.

Technology Stack: πŸ”

  • Languages:
    • HTML5: Markup language for creating the structure of the web page.
    • CSS3: Stylesheet language used for describing the presentation of the web page.
    • JavaScript: Programming language used to create interactive effects within the web page.
  • Tools and Techniques:
    • Responsive Design: Ensuring the landing page looks good on all devices (desktops, tablets, and mobile phones).
    • Custom Fonts and Icons: Utilizing web fonts and icons to enhance the visual appeal.
    • Image Optimization: Including optimized images to ensure fast loading times.
    • CSS Grid and Flexbox: Used for creating flexible and responsive layout structures.
    • JavaScript Event Handling: Adding interactivity to the landing page.

What is it capable of? πŸš€

This project implements a responsive landing page for a Mercedes-themed website, featuring:

  • Adaptive layout for various screen sizes.
  • Custom fonts and icons to enhance visual appeal.
  • JavaScript for interactive elements and enhanced user experience.

Development Focus:

  • Layout: Structuring the content in a visually appealing manner using HTML5 and CSS3.
  • Styling: Applying custom styles to ensure the page is attractive and aligned with the Mercedes brand.
  • Interactivity: Using JavaScript to add dynamic features and improve user engagement.

About the Project: πŸ“œ

The Mercedes Landing Page project demonstrates the implementation of a responsive and adaptive web design using HTML, CSS, and JavaScript. The goal was to create an attractive and functional landing page that effectively presents the luxury and performance of Mercedes vehicles. The project showcases skills in web development, including layout design, styling, and scripting.