📥 Softonic Website Clone

A pixel-perfect, responsive frontend replica of the Softonic software discovery platform. This project demonstrates modern web layout techniques, focusing on structure, visual hierarchy, and cross-device compatibility.

📖 About The Project

This project replicates the core user experience of Softonic.com. It includes a dynamic homepage for discovering apps and a detailed product download page (templated with VLC Media Player/Google Chrome).

Key Pages:

1. Homepage (index.html): Features trending apps, categories, news feeds, and top download charts.
2. Product Page (chrome.html): A detailed software view including version history, technical specs, pros/cons, and related articles.

✨ Key Features

• 📱 Fully Responsive Layout:
  • Adapts seamlessly to Desktop, Tablet (max-width: 1000px), and Mobile (max-width: 600px/750px) using CSS Media Queries.
  • Optimized navigation that switches between a full menu and mobile-friendly layouts.
• ⚓ Sticky Navigation:
  • Features a persistent top navigation bar with shadow effects for better user experience.
• 🎨 Modern CSS Techniques:
  • Flexbox & Grid: Used extensively for the "Most Popular Categories" grid and "Top Downloads" lists.
  • Custom Gradients: Stylish buttons and footer backgrounds using linear gradients.
  • Interactive Elements: Hover effects on cards, download buttons, and navigation links.
• 📂 Detailed UI Components:
  • Hero Section with a centered search bar.
  • Horizontal scrolling sections for "Trending Games" and "Latest Apps".
  • "Pros & Cons" visualization blocks using SVG icons.
  • Comprehensive footer with organized links.

🛠️ Technologies Used

• HTML5: Semantic markup (Sections, Nav, Footer, Figure/Figcaption).
• CSS3: Custom stylesheets (style.css and chrome.css) without relying on external CSS frameworks.
• Assets: Integration of high-quality icons and images from SFTCDN and Cloudinary.

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• A web browser (Chrome, Firefox, Edge, etc.)
• Git installed on your machine

Installation

1. Clone the repository

   git clone [https://github.com/Nitishkumar0517768/softonic-clone.git](https://github.com/Nitishkumar0517768/softonic-clone.git)

2. Navigate to the project directory

   cd softonic-clone

3. Open the project

   • Simply double-click index.html to view the homepage.
   • Double-click chrome.html to view the product detail page.

📂 Project Structure

softonic-clone/
│
├── index.html        # Main landing page (Home)
├── chrome.html       # Software detail page template
├── style.css         # Stylesheet for the Homepage
├── chrome.css        # Stylesheet for the Product Page
└── README.md         # Project Documentation