center>

Apple Clone (re-written)

Begin by thoroughly examining the Apple website mock design. Identify the layout, color schemes, typography, and overall structure. Take note of the placement of elements such as the header, navigation bar, featured products, and footer.

Replace generic HTML tags with semantic tags to improve accessibility and SEO. For example, use <nav> for the navigation bar, <div class="container"> for content sections, and <div class="container"> for individual product details.

Live link can be found on netlify - here

Layout summary

The page is divided into four parts -

1. A header with a navigation bar.
2. A hero featuring the iPhone 13Pro with an image.
3. A sub hero containing 4 images for different products, and a recall program link.
4. A footer with site links and legal links.

---

The navigation bar has a full width black background, but the content is centred. You can define a container class with a max-width px value and margin: 0 auto; to achieve this. The links are evenly spread across, there are 10 links, so each link should take up 10% width.

The hero has some centred text, and an iphone image. The simplest way to add the iphone image is by adding a

with a height value (600px), then add the image as a CSS background-image on the

.

The sub hero has 4 images evenly distributed across. Each one should take up 25% width. Easiest way is to use

and set CSS background-image on each of the

. The recall link is simply a centred , you can nest it in a

then add text align the

The footer has 5 columns of site links. Each column should take up 20% width. The easiest way to do this is simply use

elements for each column and set them to inline-block, then set width to 20%.

Wanna try this challenge?

A link to the starter kit provided by altcademy

Screenshots