Indus-Iteration-006

Introduction

This is a collaborative project done during a span of five days from 7 May 2024 to 11 May 2024. This project serves as a showcase of the skills we've acquired through past learning experiences.This Project has two sections

1. Cloning Marvel Website
2. Redering a Figma Design

Section 1: Cloning Marvel Website

In this Section we have cloned the website https://www.marvel.com/ .

Section 2: Rendering Figma Design

In this Section we have rendered the figma design number 6 from https://www.figma.com/file/KhG0vifIhXr8Rw5Va5MzNA/100%2B-Travel-Landing-website-templates-(Community)?type=design&node-id=2103-8740&mode=design&t=WWDcSUb0lrwxnYlz-0.

Project Type

Frontend

Deplolyed App

Frontend: https://www.netlify.com

Directory Structure

• bootstrap/
  • assets/
  • node_modules/
  • .gitignore
  • index.html
  • package-lock.json
  • package.json
• figma/
  • assets/
  • node_modules/
  • .gitignore
  • index1.html
  • package-lock.json
  • package.json
  • styles.css
  • styles.css.map
  • styles.scss
• README.md

Video Walkthrough of the project

a very short video walkthough of all of the features: https://www.youtube.com/watch?v=eUm5M1ga6Ho

Video Walkthrough of the codebase

a very short video walkthough of codebase [ 1 - 5 minutes ]:

Features

List out the key features of your application.

• Typography: We have rendered the font styles, sizes, colors, line heights, and spacing from the original website.

• Page Layouts: We have rendered our layout close to the orignal website.

• Hover Effects: hover effects such as changing font colors, changing background color in our webpage.

• Scrolling Effects: We have implemented scroll bar as in the original website.

• Animations and Transitions: CSS animations and transitions are added to for scaling sections for large screen.

Usage

1. Clone the Repository
2. Navigate through each Project Folder
3. Install Bootstrap using npm install [email protected] Refer https://getbootstrap.com/docs/5.3/getting-started/download/ for further details.

Technology Stack

• HTML
• CSS

Feedback

Welcome to the Project! We value your feedback and suggestions. Please open an issue if you have any feedback, suggestions, or bug reports. We appreciate your input!

Thank you for helping us improve the Project!