Jeybee89
11/2/2017 - 8:07 PM

Flex Box

some configurations for Flex Box

flexbox
content_copyfile_download
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Semantic Fonts</title>
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="reset.css">
  <style type="text/css">
    /* -------------------------Navigation --------------------------------------*/

    body {
      background-color: #F5D76E;
    }

    nav {
      font-family: roboto;
      margin: 30px auto;
      width: 100%;
      display: flex;
      /*set as a flex container*/
      flex-direction: column;
      /*mobile first approach*/
      align-items: stretch;
      border-radius: 10px;
      list-style-type: none;
      /*Remove Bullets*/
      padding: 0;
    }

    a {
      text-decoration: none;
      /*removes bullets*/
      color: #fff;
      flex: 1;
      /*equal width to links*/
      height: 30px;
      font-family: Dosis;
      padding: 20px;
      text-align: center;
      font-size: 40px;
      border-bottom: 1px solid white;
    }

    #logoNav {
      font-size: 40px;
      font-weight: bold;
    }

    /* ------------------Landing------------------------*/

    #landing {
      display: flex;
      /*set as a flex container*/
      flex-direction: column;
      /*mobile first approach*/
      justify-content: center;
      /* for the crox axis alignment*/
      align-items: center;
      /* for the main axis alignment*/
    }

    #landing-message {
      text-align: center;
      font-family: Dosis;
      font-size: 50px;
      margin: 50px 20px;
    }

    #landing-graphic {}

    /* ------------------Cards------------------------*/

    .cards {
      display: flex;
      /* create flex conatiner*/
      flex-direction: column;
      /*for mobile navigation*/
      justify-content: space-around;
      /*spacing for cards*/
    }

    .card {
      flex: 1;
      /*set as equal width*/
      margin-top: 50px;
      margin: 50px 20px;
      background-color: #eee;
      padding: 20px;
    }

    .card h2 {
      font-family: dosis;
      font-size: 30px;
      margin-top: 10px;
      margin-bottom: 20px;
    }

    .card img {
      width: 100%;
    }

    .card p {
      font-family: dosis;
      font-size: 22px;
    }

    /* ------------------Desktop------------------------*/

    @media screen and (min-width: 700px) {
      /* Navigation */
      nav {
        width: 90%;
        flex-flow: row;
        /* across screen for dexktop screen size*/
        align-items: baseline;
      }
      a {
        font-size: 25px;
        border: none;
      }
      #logoNav {
        flex: 6;
        text-align: left;
      }
      /* Landing */
      #landing {
        flex-direction: row;
        /* across screen for dexktop screen size*/
        width: 80%;
        margin: 100px auto;
      }
      .cards {
        flex-wrap: nowrap;
        /* sets cards to appear side by side for desktop*/
        flex-direction: row;
        /*sets flex direction*/
      }
    }
  </style>
</head>

<body>
  <nav>
    <a id="logoNav">CHOCOBLOCK</a>
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <a href="#">Photos</a>
  </nav>
  <div id="landing">
    <div id="landing-message">
      <h1>Make Creative Clever Fun Apps. Simple.</h1>
    </div>
    <div id="landing-graphic">
      <img id="landing-image" src="image/laptop.png" alt="laptop" width="400">
    </div>
  </div>
  <section class="cards">
    <div class="card">
      <img src="image/graphic1.png" alt="design pic">
      <h2>Remote learning</h2>
      <p>Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams.</p>
    </div>
    <div class="card">
      <img src="image/graphic2.png" alt="design pic">
      <h2>Remote learning</h2>
      <p>Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams.</p>
    </div>
    <div class="card">
      <img src="image/graphic3.png" alt="design pic">
      <h2>Remote learning</h2>
      <p>Once you join a Code Institute Bootcamp you will be taken on an accelerated contextualised learning path across 3 streams.</p>
    </div>
  </section>
  </div>
</body>
<