Skip to content

Latest commit

 

History

History
69 lines (47 loc) · 2.32 KB

README.md

File metadata and controls

69 lines (47 loc) · 2.32 KB

Apple-Homepage

This website is a clone of apple.com made using React, HTML, CSS, Javascript, which includes elements and components like Navigation bar, Footer, Images.

Approach:

The main idea is to divide the website into various components, which would take some parameters to be used to display. Within each components there would be sub-components which would use those provided parameters and display the content.

Components

  • NavigationBar
  • Image
  • WatchImage
  • Footer
  • Data.js

NavigationBar:

  • the NavigationBar consists of a Unordered List <ul> with the various NavListItem Components which would take two parameters i.e text, link.

  • the home button i.e. the Apple logo is displayed useing the NavIcon along with the search button and shopping cart button.

  • the icons are sourced from FontAwesome

  • the Styling is done within the NavigationBar.css file

    NavListItem:

    • returns an Anchor Tag <a> wrapped within a List item <li>.

    NavIcon:

    • returns an Achor Tag <a> with the given parameters as href and inner text.

Image:

  • It consists of an Image Tag <i> along with the Information component.

  • The provided parameters are image, imagesInfo, infoPos, bgColor, infoLinks which are used to modify the styling of the component.

    Information:

    • it takes in imagesInfo and imagesLinks as paramters
    • The parameters are displayed withi <h2>, <h3>, <p> and <a>.

Footer:

  • displays various texts using Paragraph Tag <p> and LinksComponent.

    LinksComponent:

    • Takes in categoryItems and categoryTitles as parameters
    • the different sections are divided within categories <div> which further contains category-column <div> to display the content from CategoryList component.

Data.js:

  • this exports various lists used within the Components containing the texts to be displays
    • imagesInfo
    • infoLinks
    • watchImageInfo
    • watchLinks
    • categoryTitles
    • categoryItems

Tech stacks used

  • React.js
  • HTML
  • CSS
  • JavaScript

Deployment

The deployment is done used Netlify.