Ram Maheshwari Logo Image
Olha Kostovetska

Landing Page — HTML and CSS Project

Landing page for Nothing’s online store showcasing electronics like smartphones and wireless earbuds. Users can browse by categories such as audio, accessories, or all products. The project focuses on a visually engaging, responsive, and user-friendly interface.

Project Image

Key Features

  • • Responsive Design: Optimized for various screen sizes and devices.
  • • Favicon: The Nothing logo is used as the favicon.
  • • Page Title: Uses the landing name as the page title.
  • • Clickable Logos: All logos act as links to the top of the page.
  • • Interactive Contact Info:
    • ◦ Phone, email, and address change text color on hover.
    • ◦ Phone numbers and icons are clickable and initiate calls.
    • ◦ Addresses link to locations on Google Maps.
  • • Image Interactions: All images enlarge on hover and are clickable (linked to # where no target exists).
  • • Mobile Optimization: Fully optimized for mobile without horizontal scrolling.
  • • Consistent Animations: Animation speeds are uniform across the site (e.g., hover effects and scrolling transitions).
  • • Smooth Navigation: All navigation links (nav__links) scroll smoothly to their sections.
  • • Form Handling:
    • ◦ All form fields are required and have proper input types (e.g., email, tel).
    • ◦ Placeholders provide format examples to guide users.
    • ◦ Submitting the form does not reload the page; it clears the fields afterward.
  • • Sticky Footer: The footer stays at the bottom of the page, even on shorter screens.

Design Reference

This project is based on one of the provided UI kits 👉 Figma design

Tools Used

HTML
CSS