Skip to content

Latest commit

 

History

History
41 lines (32 loc) · 2.39 KB

README.md

File metadata and controls

41 lines (32 loc) · 2.39 KB

🍔 Burger Station - Landing Page

Status HTML5 CSS3

🎨 Project Overview

This project marks the second milestone in my web development journey (Task 2 for the CodSoft Virtual Internship).

After understanding the core structure of web pages in my previous task, my goal here was to master Visual Presentation and User Experience (UX). I challenged myself to move beyond static layouts and implement entrance animations to create a more immersive first impression for the user.

🔗 Live Demo

Click here to view the Landing Page (Check the "About" section of this repository for the deployment link!)

✨ Key Features

  • Dynamic Entrance Animation: Implemented a slide-in effect upon page load, followed by a smooth fade-in of content. This brings the interface to life immediately.
  • Visual Hierarchy: Designed a clean navigation bar with a logo and aligned elements to guide the user's eye naturally.
  • Call-to-Action (CTA): Styled interactive buttons designed to encourage user clicks.
  • Asset Management: Integrated high-quality background imagery with overlay text that remains readable.

🧠 What I Learned (The "Level Up")

This project was a deep dive into the power of CSS3.

  1. CSS Animations: I learned how to control the timing and flow of elements appearing on the screen, understanding that a website shouldn't just be there—it should arrive.
  2. Layout Mastery: I gained better control over the "Box Model" (margins, padding, and positioning) to ensure the navigation bar and hero section looked professional.
  3. Design consistency: Learned how to match fonts and colors to a specific theme (Food/Restaurant industry) to create a cohesive brand look.

🛠️ Tech Stack

  • HTML5: Semantic structure.
  • CSS3: Advanced styling, background handling, and keyframe animations.

🏃‍♂️ How to Run Locally

  1. Clone the repository: 
    git clone https://github.com/tsdebug/codsoft_task-2
  2. Navigate to the project folder.
  3. Open index.html in any web browser.

Built with code, creativity, and a craving for better design.