oth21dev/yandex

Responsive landing page designed from a Figma layout using HTML, CSS, and pure JavaScript

Landing Page Project

This is a responsive landing page designed from a Figma layout using HTML, CSS, and pure JavaScript (without any libraries or frameworks). The project follows Pixel Perfect principles and includes interactive features like a marquee, custom animations, anchor buttons, and carousels as described below.

Table of Contents

• Overview
• Features
• Prerequisites
• CSS Validation
• Lighthouse Scores
• Installation
• Usage
• Folder Structure

Overview

This project demonstrates how to build a responsive landing page with Pixel Perfect precision. It includes various interactive elements such as a scrolling text marquee, animations, anchor buttons for smooth navigation, and two types of carousels.

Features

• Responsive design following Pixel Perfect principles.
• Custom animations including a scrolling marquee.
• Anchor buttons for smooth scroll navigation to respective sections.
• Infinite loop carousel for participant cards with automatic slide changes every 4 seconds.
• Non-looping carousel for steps with manual slide change only.

Prerequisites

• Use HTML, CSS, and pure JavaScript without any libraries or frameworks.
• Avoid duplicating text content between mobile and desktop versions.

CSS Validation

Lighthouse Scores

Category	Score
Performance	98
Accessibility	96
Best Practices	100
SEO	100

Detailed Reports

• JSON Report: For more detailed performance metrics, check out the Lighthouse JSON Report.

Installation

1. Clone the repository:

   git clone https://github.com/OTH21DEV/yandex.git
   cd landing-page

2. Open the project directory:

   cd yandex

3. No additional dependencies required.

Usage

1. Simply open the index.html file in your browser:

   open index.html

2. Navigate through the page and interact with its features to see the animations and carousels in action.

Folder Structure

landing-page/
├── assets/                # Folder containing images and other static assets
├── data/                  # Folder containing data files (JSON )
├── scripts/               # Folder containing JavaScript files
├── styles/                # Folder containing CSS files
├── config.js              # Configuration file for the project
├── index.html             # Main HTML file containing the landing page structure
├── index.js               # Main JavaScript file for functionality, animation, and carousels
└── lighthouse-report.json # JSON file containing Lighthouse report for site performance animation, and carousels