Volti - Electric Ride

About Project: A modern electric vehicle booking website featuring smooth scroll animations, responsive navigation, and clean sections for services, statistics, and blog content. Built with semantic HTML5, custom CSS properties for consistent styling, and vanilla JavaScript for interactive elements like mobile menu toggle, header scroll effects, and scroll-triggered animations all organized in maintainable code that electric vehicle companies can easily adapt, and much more.

What I learned: Created custom CSS animations with keyframes for preloader and pulse effects, implemented scroll-based reveal animations with transform properties, built responsive grid layouts with multiple breakpoints, and worked with CSS custom properties for theming, and much more.

Personal Note: I started building HTML, CSS, and JavaScript projects in 2022.
At that time, I focused on learning first and began uploading to GitHub recently.
Now I'm working with React.js and Next.js, and seeking opportunities as a frontend or web developer.

Project More Details

What's Inside

• Preloader - Animated loading screen with rotating circle that fades out when page loads
• Hero Section - Full-width banner with performance stats cards, eco-friendly messaging, and vehicle image
• About Section - Dual-image layout with mission statement, feature cards, and benefit checkmarks
• Stats Section - Three statistics cards with video banner and play button overlay
• Service Section - Three-column grid showcasing advantages with icons and centered vehicle image
• CTA Section - Call-to-action card with promotional text and supporting image
• Blog Section - Article cards with thumbnails, publish dates, author info, and comment counts
• Contact Section - Three contact cards displaying hotline, email, and location information
• Footer - Newsletter signup, company info, navigation links, contact details, and social media icons
• Mobile Navigation - Toggle menu with smooth height transition and close button
• Sticky Header - Fixed navigation that slides in after scrolling with animation
• Back to Top - Floating button with circle border that appears when scrolling
• Scroll Reveal - Elements fade in and slide up as they enter viewport

Technologies Used

• HTML5 - Semantic markup with proper ARIA labels and structured sections
• CSS3 - Modern styling with Grid, Flexbox, custom properties, keyframe animations, and transforms
• JavaScript (ES6) - Vanilla JS for preloader, navigation toggle, header scroll, scroll reveal effects
• Custom Fonts - Quicksand and Nunito Sans font families loaded via custom font files
• Ionicons - Icon library for UI elements and social media links
• CSS Custom Properties - Variables for colors, typography, spacing, and timing for easy theming
• CSS Animations - Rotating preloader, pulsing play button, smooth transitions, and scroll reveals
• Media Queries - Responsive breakpoints at 575px, 768px, 992px, 1200px, and 1600px

Project Structure

    volti-ride/
    │
    ├── index.html                 # Main HTML with all sections and content
    │
    ├── assets/
    │   ├── css/
    │   │   └── style.css         # Complete styles, animations, and responsive design
    │   │
    │   ├── js/
    │   │   └── script.js         # Preloader, navigation, header scroll, reveal animations
    │   │
    │   ├── font/
    │   │   ├── font.css          # Font-face declarations
    │   │   ├── nunito-sans/      # Nunito Sans font files (bold, regular, semibold)
    │   │   └── quicksand/        # Quicksand font files (bold, semibold)
    │   │
    │   └── images/               # Hero banner, section images, blog photos, favicon, logos
    │
    └── README.md                 # Project documentation
    

Key Features

• Fully Responsive Design - Works on all devices from 320px mobile to 1920px+ desktop screens
• Animated Preloader - Rotating circle animation that disappears after page load
• Performance Cards - Hero section displays top speed, acceleration, and range statistics
• Mobile-First Navigation - Collapsible menu with smooth height transition and toggle button
• Scroll-Based Animations - Elements reveal with fade and slide effects as user scrolls
• Video Play Button - Animated pulse effect on stats section video overlay
• Sticky Header Effect - Navigation slides down and stays fixed after 100px scroll
• Hover Interactions - Image zoom on blog cards, color changes on buttons and links
• Newsletter Form - Email subscription input in footer with submit button
• Contact Cards - Phone, email, and address displayed with icon indicators
• Service Grid Layout - Three-column section with centered vehicle illustration
• Back to Top Button - Circular button with border that appears during scroll
• Blog Article Cards - Publish date badges, author info, and comment counts
• Border Radius Effects - Unique rounded corners on cards and images for modern look
• Cross-Browser Support - Tested on Chrome, Firefox, Safari, Edge, and Opera
• Easy Customization - CSS variables allow quick color and font modifications

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/volti-ride.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>

    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update company name and content in <code>index.html</code></li>
      <li>Change colors in <code>style.css</code> using CSS variables</li>
      <li>Replace images in <code>assets/images/</code> folder</li>
      <li>Update contact information in footer and contact sections</li>
    </ul>
  </li>
</ol>

Customization

• Text Content: Edit directly in index.html - update company name, service descriptions, blog articles, and contact details
• Colors: Update CSS variables in :root selector at the top of style.css

  :root {
    --rich-black-fogra-29: hsl(230, 14%, 9%);    /* Dark backgrounds */
    --yellow-green: hsl(86, 54%, 51%);           /* Primary accent color */
    --smoky-black: hsl(0, 0%, 6%);               /* Text and headers */
    --white: hsl(0, 0%, 100%);                   /* Light backgrounds */
  }

• Images: Replace files in assets/images/ with your own photos (keep filenames or update HTML references)
• Fonts: Add new font files to assets/font/ and update font.css with font-face declarations, then modify --ff-quicksand and --ff-nunito_sans variables
• Hero Stats: Modify performance numbers and labels in hero section list items
• Service Cards: Add or remove service items by duplicating <li class="service-item"> elements
• Blog Posts: Update blog cards with new images, dates, titles, authors, and comment counts
• Footer Content: Modify newsletter text, company description, navigation links, and social media icons
• Animations: Adjust timing in @keyframes sections and transition properties in CSS
• Scroll Reveal: Change reveal threshold by modifying the divisor in window.innerHeight / 1.2 in JavaScript

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

You can view the live project here ➜ Live Demo