Latihan CSS3

pada tanggal

 LATIHAN CSS 3 (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. 

      .el--1{
        align-self: flex-start;
      }
      .el--5{
        align-self: stretch;
        order: 1;
      }
      .el--6{
        order: -1;
      }



4.

      .el{
        /*
        DEFAULTS
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;

        flex-basis: 200px
        flex-shrink: 0;
        flex: 0 0 200px;
        flex-grow: 1;
        */
        flex: 1;
      }



5.

.container {
  width: 1200px;
  /* margin-left: auto;
  margin-right: auto; */
  margin: 0 auto;
  display: flex;
}



6.

        <div class="author-box">
          <img
            src="img/laura-jones.jpg"
            alt="Headshot of Laura Jones"
            height="50"
            width="50"
            class="author-img"
          />

          <p id="author" class="author">
            Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
          </p>
        </div>

.author-box {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.author {
  margin-bottom: 0;
  margin-left: 150px;
}


7.

    <div class="row"> <!--</div> after aside-->
      <article>
        <header class="post-header">
          <h2>The Basic Language of the Web: HTML</h2>
        <div class="author-box">
          <img
            src="img/laura-jones.jpg"
            alt="Headshot of Laura Jones"
            height="50"
            width="50"
            class="author-img"
          />

.row {
  display: flex;
  align-items: flex-start;
  gap: 75px;
  margin-bottom: 60px;
}

article {
  flex: 1;
  margin-bottom: 0;
}

aside {
  DEFAULTS:
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;

  flex: 0 0 300px;
}


8.

        <ul class="related">
          <li class="related-post">
            <img
              src="img/related-1.jpg"
              alt="Person programming"
              width="75"
              height="75"
            />
          <div>
            <a href="#" class="related-link"
            >How to Learn Web Development</a>
            <p class="related-author">By Jonas Schmedtmann</p>
          </div>
        </li>
          <li class="related-post">
            <img
              src="img/related-2.jpg"
              alt="Lightning"
              width="75"
              height="75"
            />
            <div>
            <a href="#" class="related-link">The Unknown Powers of CSS</a>
            <p class="related-author">By Jim Dillon</p>
          </div>

.related-post {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.related-link:link {
  font-size: 17px;
  font-weight: bold;
  font-style: normal;
  margin-bottom: 5px;
  display: block;
}

.related-author {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  font-style: italic;
}

















Komentar

Posting Komentar