Today l learned about Quotes elements

Here's My HTML code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./normalize.css" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <blockquote class="quote">
      <p class="quote__text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis,
        aperiam! Dolorum nemo officia corporis quae modi expedita quod, esse
        iure?
      </p>
      <footer>
        <div class="media">
            <div class="media__image">
              <svg class="icon icon--primary quote__line">
                <use xlink:href="../images/sprite.svg#line"></use>
              </svg>
            </div>
            <div class="media__body">
              <h3 class="media__title quote__author">Ahtsham Hassan</h3>
              <p class="quote__organization">
                  Made By Ajus
              </p>
            </div>
             <div> 
      </footer>
    </blockquote>
  </body>
</html>

Here's My CSS code.

.quote {
  font-size: 3rem;
  color: var(--color-body-darker);
  font-style: italic;
  line-height: 1.3;
}
.quote__text::before {
  content: open-quote;
}
.quote__text::after {
  content: close-quote;
}

.quote__author {
  font-size: 3rem;
  font-weight: 500;
  font-style: normal;
  margin-bottom: 0;
}
.quote__organization {
  color: var(--color-headings);
  opacity: 0.4;
  font-size: 2rem;
  font-style: normal;
}
.quote__line {
  position: relative;
  bottom: 10px;
}
@media screen and (min-width: 1024px) {
  .quote {
    font-size: 2rem;
  }
  .quote__author {
    font-size: 2.4rem;
  }
  .quote__organization {
    font-size: 1.6rem;
  }
}

Here's the output

Blog

Today l learned about Quotes elements

Ahtsham Ajus

Join Our Newsletter. No Spam, Only the good stuff.

Related