Applied Accesbility

<div> - groups content

<section> - groups related content

<article> - groups independent, self-contained content

 

----

 <fieldset>

        <legend>What level ninja are you?</legend>

        <input id="newbie" type="radio" name="levels" value="newbie">

        <label for="newbie">Newbie Kitten</label><br>

        <input id="intermediate" type="radio" name="levels" value="intermediate">

        <label for="intermediate">Developing Student</label><br>

        <input id="master" type="radio" name="levels" value="master">

        <label for="master">Master</label>

      </fieldset>

display: flex;

flex-direction: row or column;

 

example : 

<style>

  body {

    font-family: Arial, sans-serif;

  }

  header, footer {

    display: flex;

    flex-direction: row;

  }

  header .profile-thumbnail {

    width: 50px;

    height: 50px;

    border-radius: 4px;

  }

  header .profile-name {

    display: flex;

  flex-direction: column;

    margin-left: 10px;

  }

  header .follow-btn {

    display: flex;

    margin: 0 0 0 auto;

  }

  header .follow-btn button {

    border: 0;

    border-radius: 3px;

    padding: 5px;

  }

  header h3, header h4 {

    display: flex;

    margin: 0;

  }

  #inner p {

    margin-bottom: 10px;

    font-size: 20px;

  }

  #inner hr {

    margin: 20px 0;

    border-style: solid;

    opacity: 0.1;

  }

  footer .stats {

    display: flex;

    font-size: 15px;

  }

  footer .stats strong {

    font-size: 18px;

  }

  footer .stats .likes {

    margin-left: 10px;

  }

  footer .cta {

    margin-left: auto;

  }

  footer .cta button {

    border: 0;

    background: transparent;

  }

</style>

<header>

  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">

  <div class="profile-name">

    <h3>Quincy Larson</h3>

    <h4>@ossia</h4>

  </div>

  <div class="follow-btn">

    <button>Follow</button>

  </div>

</header>

<div id="inner">

  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>

  <span class="date">1:32 PM - 12 Jan 2018</span>

  <hr>

</div>

<footer>

  <div class="stats">

    <div class="Retweets">

      <strong>107</strong> Retweets

    </div>

    <div class="likes">

      <strong>431</strong> Likes

    </div>

  </div>

  <div class="cta">

    <button class="share-btn">Share</button>

    <button class="retweet-btn">Retweet</button>

    <button class="like-btn">Like</button>

  </div>

</footer>

 

justify-content property set to any of these values: center, flex-start, flex-end, space-between, space-around, or space-evenly.