DESAIN WEB (FLEXBOX Part 2)

 FLEXBOX

1. <nav>

          <!-- <strong>This is the navigation</strong> -->

          <a href="blog.html">Blog</a>

          <a href="#">Challenges</a>

          <a href="flexbox.html">Flexbox</a>

          <a href="#">CSS Grid</a>

        </nav>

2. .container {

  /* STARTER */

  font-family: sans-serif;

  background-color: #ddd;

  font-size: 40px;

  margin: 40px;

  /* FLEXBOX */

  display: flex;

  align-items: center;

  justify-content: start;

  gap: 10px;

}

3. 

FLEXBOX

<div class="container">

      <header class="main-header clearfix">

        <h1>📘 The Code Magazine</h1>

        <nav>

          <!-- <strong>This is the navigation</strong> -->

          <a href="blog.html">Blog</a>

          <a href="#">Challenges</a>

          <a href="flexbox.html">flexbox</a>

          <a href="#">CSS Grid</a>

        </nav>

      </header>

.main-header{

  display: flex;

  align-items: center;

  justify-content: space-between;

}

FLEXBOX

<div class="author-box">

  <img

  src="img/laura-jones.jpg"

  alt="Headshot of Laura Jones"

  height="50"

  width="50"

  class="outhor-img"

/>

<p id="author" class="outhor">

Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027

</p>

</div>

FLEXBOX

<ul class="related">

  <li>

    <img

      src="img/related-1.jpg"

      alt="Person programming"

      width="75"

      height="75"

    />

    <a href="#">How to Learn Web Development</a>

    <p class="related-author">By Jonas Schmedtmann</p>

  </li>

  <li>

    <img

      src="img/related-2.jpg"

      alt="Lightning"

      width="75"

      height="75"

    />

    <a href="#">The Unknown Powers of CSS</a>

    <p class="related-author">By Jim Dillon</p>

  </li>

  <li>

    <img

      src="img/related-3.jpg"

      alt="JavaScript code on a screen"

      width="75"

      height="75"

    />

    <a href="#">Why JavaScript is Awesome</a>

    <p class="related-author">By Matilda</p>

  </li>

</ul>

</aside>

</div>

HASIL