Apple Home Page Using Flexbox and CSS Grid

In this example below you will see how to do a Apple Home Page Using Flexbox and CSS Grid with some HTML / CSS and Javascript

A mockup of the current Apple.com website using CSS Grid and Flexbox for layout. No floats or frameworks used in this design.

Thumbnail
This awesome code was written by brianhaferkamp, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright brianhaferkamp ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Apple Home Page Using Flexbox and CSS Grid</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<!-- navigation top-->
<header class="nav-top">
  <ul>
    <li> <a href=""><i class="fa fa-apple" aria-hidden="true"></i></a></li>
    <li> <a href="">Mac</a></li>
    <li> <a href="">iPad</a></li>
    <li> <a href="">iPhone</a></li>
    <li> <a href="">Watch</a></li>
    <li> <a href="">TV</a></li>
    <li> <a href="">Music</a></li>
    <li> <a href="">Support</a></li>
    <li> <a href=""><i class="fa fa-search" aria-hidden="true"></i></a></li>
    <li> <a href=""><i class="fa fa-shopping-bag" aria-hidden="true"></i></a></li>
  </ul>
</header>
<!-- hero section-->
<section class="hero">
  <div class="hero__text">
    <h1>Apple Special Event</h1>
    <h2>Watch the keynote.</h2>
  </div>
  <div class="hero__nav">
    <div class="hero__nav--line"></div>
    <div class="hero__nav--line"></div>
    <div class="hero__nav--line"></div>
  </div>
</section>
<!-- features below hero-->
<section class="features"><a class="features__wrapper--1" href="">
    <div class="features__text">
      <h3><i class="fa fa-apple" aria-hidden="true"></i> tv</h3>
      <h4>The new TV app. One place for everything you want to watch.</h4>
    </div>
    <div class="features__image features__image--1"><img src="http://placehold.it/200x100"/></div></a><a class="features__wrapper--2" href="">
    <div class="features__text">
      <h3><i class="fa fa-apple" aria-hidden="true"></i> WATCH</h3>
      <h4>For the love of running.</h4>
    </div>
    <div class="features__image features__image--2"><img src="http://placehold.it/200x100"/></div></a><a class="features__wrapper--3" href="">
    <div class="features__text">
      <h3>AirPods</h3>
      <h4>Wireless. Effortless. Magical.</h4>
    </div>
    <div class="features__image features__image--1"><img src="http://placehold.it/200x100"/></div></a><a class="features__wrapper--4" href="">
    <div class="features__text">
      <h3>Accessibility</h3>
      <h4>We believe that technology should be accessible to everyone.</h4>
    </div>
    <div class="features__image features__image--1"><img src="http://placehold.it/200x100"/></div></a></section>
<div class="footer footer-menu__menu footer-menu__menu-shop">
  <div class="footer-menu__header">
    <h5>Shop and Learn</h5>
  </div>
  <div class="footer-menu__links footer-menu__links--shop">
    <ul>
      <li> <a href="#">Mac</a></li>
      <li> <a href="#">iPad</a></li>
      <li> <a href="#">iPhone</a></li>
      <li> <a href="#">Watch</a></li>
      <li> <a href="#">TV</a></li>
      <li> <a href="#">Music</a></li>
      <li> <a href="#">iTunes</a></li>
      <li> <a href="#">iPod</a></li>
      <li> <a href="#">Accessories</a></li>
      <li> <a href="#">Gift Cards</a></li>
    </ul>
  </div>
</div>
<div class="footer footer-menu__menu footer-menu__menu-store">
  <div class="footer-menu__header">
    <h5>Apple Store</h5>
  </div>
  <div class="footer-menu__links footer-menu__links--store">
    <ul>
      <li> <a href="#">Find a Store</a></li>
      <li> <a href="#">Genius Bar</a></li>
      <li> <a href="#">Workshops and Learning</a></li>
      <li> <a href="#">Youth Programs</a></li>
      <li> <a href="#">Apple Store App</a></li>
      <li> <a href="#">Refurbished and Clearance</a></li>
      <li> <a href="#">Financing</a></li>
      <li> <a href="#">Reuse and Recycling</a></li>
      <li> <a href="#">Order Status</a></li>
      <li> <a href="#">Shopping Help</a></li>
    </ul>
  </div>
</div>
<div class="footer footer-menu__menu footer-menu__menu-education">
  <div class="footer-menu__header">
    <h5>For Education</h5>
  </div>
  <div class="footer-menu__links footer-menu__links--education">
    <ul>
      <li> <a href="#">Apple and Education</a></li>
      <li> <a href="#">Shop for College</a></li>
    </ul>
  </div>
  <div class="footer-menu__header">
    <h5>For Business</h5>
  </div>
  <div class="footer-menu__links footer-menu__links--business">
    <ul>
      <li> <a href="#">Apple and Business</a></li>
      <li> <a href="#">Shop for Business</a></li>
    </ul>
  </div>
</div>
<div class="footer footer-menu__menu footer-menu__menu-account">
  <div class="footer-menu__header">
    <h5>Account</h5>
  </div>
  <div class="footer-menu__links footer-menu__links--account">
    <ul>
      <li> <a href="#">Manage Your Apple ID</a></li>
      <li> <a href="#">Apple Store Account</a></li>
      <li> <a href="#">iCloud.com</a></li>
    </ul>
  </div>
  <div class="footer-menu__header">
    <h5>Apple Values</h5>
  </div>
  <div class="footer-menu__links footer-menu__links--values">
    <ul>
      <li> <a href="#">Accessibility</a></li>
      <li> <a href="#">Education</a></li>
      <li> <a href="#">Environment</a></li>
      <li> <a href="#">Inclusion and Diversity</a></li>
      <li> <a href="#">Privacy</a></li>
      <li> <a href="#">Supplier Responsibility</a></li>
    </ul>
  </div>
</div>
<div class="footer footer-menu__menu footer-menu__menu-about">
  <div class="footer-menu__header">
    <h5>About Apple</h5>
  </div>
  <div class="footer-menu__links footer-menu__links--about">
    <ul>
      <li> <a href="#">Apple Info</a></li>
      <li> <a href="#">Newsroom</a></li>
      <li> <a href="#">Job Opportunities</a></li>
      <li> <a href="#">Press Info</a></li>
      <li> <a href="#">Investors</a></li>
      <li> <a href="#">Events</a></li>
      <li> <a href="#">Contact Apple</a></li>
    </ul>
  </div>
</div>
<div class="footer footer-menu__info">
  <p> </p>More ways to shop. Visit an 
   <a href="">Apple Store</a> 
  , call 1-800-MY APPLE, or 
   <a href="">find a reseller</a>.
  <div class="footer-menu__border"></div>
</div>
<div class="footer footer__colophon">
  <div class="copyright">
    <div class="footer__colophon--copyright">
      <p>Copyright &copy; 2016 Apple Inc. All rights reserved.</p>
    </div>
    <div class="footer__colophon--menu">
      <ul>
        <li> <a href="#">Privacy Policy</a></li>
        <li class="separator">|</li>
        <li> <a href="#">Terms of Use</a></li>
        <li class="separator">|</li>
        <li> <a href="#">Sales and Refunds</a></li>
        <li class="separator">|</li>
        <li> <a href="#">Legal</a></li>
        <li class="separator">|</li>
        <li> <a href="#">Site Map</a></li>
      </ul>
    </div>
  </div>
  <div class="language"><img src="https://images.apple.com/ac/flags/1/images/us/16.png"/>
    <p class="language__current">United States</p>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/brianhaferkamp/apple-home-page-using-flexbox-and-css-grid-woaEze */
body {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  background: #fcfcfc;
  color: #444;
  font-family: "Source Sans Pro", sans-serif;
}

img {
  width: 100%;
}

.nav-top {
  width: 100%;
  grid-column: 1/-1;
  grid-row: 1;
  font-size: 1.2em;
  background: black;
}
.nav-top a {
  text-decoration: none;
  color: white;
  font-weight: 300;
}
.nav-top ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  justify-content: center;
  margin: 5px 0;
}
.nav-top ul li {
  margin: 0 2vw;
}

.hero {
  background-image: url(https://images.apple.com/v/home/cz/images/gallery/event_large.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  grid-column: 1/-1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  position: relative;
}

.hero__text {
  color: white;
  margin-top: 3.5em;
  text-align: center;
  letter-spacing: -2px;
}
.hero__text h1 {
  margin: 0 0 -5px;
  font-size: 2.5em;
  font-weight: 400;
}
.hero__text h2 {
  font-weight: 300;
  font-size: 3.3em;
  margin: 0;
  padding: 0;
}

.hero__nav {
  position: absolute;
  bottom: 40px;
  display: flex;
}

.hero__nav--line {
  border-bottom: 3px solid rgba(255, 255, 255, 0.3);
  margin-right: 10px;
  padding: 5px;
  width: 50px;
}

.features {
  grid-column: 1/-1;
  grid-row: 3;
  display: flex;
}

.features__wrapper--1,
.features__wrapper--2,
.features__wrapper--3,
.features__wrapper--4 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1.5em 2em;
  text-align: center;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  border-left: 2px solid white;
  text-decoration: none;
  color: #444;
}

.features__wrapper--1 {
  grid-column: 1/span 3;
  grid-row: 3;
  width: 25%;
}

.features__wrapper--2 {
  grid-column: 3/span 3;
  grid-row: 3;
  width: 25%;
}

.features__wrapper--3 {
  grid-column: 8/span 3;
  grid-row: 3;
  width: 25%;
}

.features__wrapper--4 {
  grid-column: 10/span 3;
  grid-row: 3;
  width: 25%;
}

.features__text h3 {
  font-size: 1.7em;
  margin: 0;
  letter-spacing: -1px;
}
.features__text h4 {
  font-weight: 300;
  font-size: 1.2em;
  margin: 5px 0 15px;
}

.features__image {
  width: 70%;
}

.footer {
  font-size: 0.9em;
  color: #999;
}

.footer-menu__menu {
  padding-top: 2em;
  font-size: 0.9em;
}
.footer-menu__menu a {
  color: #777;
  text-decoration: none;
  line-height: 1.8;
}

.footer-menu__header h5 {
  margin: 0 0 5px;
  padding: 0;
  font-size: 1em;
  color: #444;
}

.footer-menu__links ul {
  list-style: none;
  padding-left: 0;
}

.footer-menu__menu-shop {
  grid-column: 2/span 2;
  grid-row: 4;
}

.footer-menu__menu-store {
  grid-column: 4/span 2;
  grid-row: 4;
}

.footer-menu__menu-education {
  grid-column: 6/span 2;
  grid-row: 4;
}

.footer-menu__menu-account {
  grid-column: 8/span 2;
  grid-row: 4;
}

.footer-menu__menu-about {
  grid-column: 10/span 2;
  grid-row: 4;
}

.footer-menu__info {
  grid-column: 2/span 10;
  grid-row: 5;
}
.footer-menu__info a {
  color: rgba(0, 0, 255, 0.6);
}

.footer-menu__border {
  border-bottom: 2px solid #e3e3e3;
  margin-right: 10px;
  padding: 5px;
  width: 100%;
}

.copyright {
  display: flex;
}

.footer__colophon {
  grid-column: 2/span 10;
  grid-row: 6;
  display: flex;
  justify-content: space-between;
  color: #999;
  padding-bottom: 1em;
}
.footer__colophon a {
  color: #999;
  text-decoration: none;
}

.footer__colophon--menu ul {
  display: flex;
  list-style: none;
}
.footer__colophon--menu ul li {
  margin: 0 5px;
}

.separator {
  color: #ddd;
}

.language {
  display: flex;
  align-items: center;
}
.language p {
  margin-right: 0;
}
.language img {
  width: 16px;
  height: 16px;
  padding-right: 5px;
}

Comments