Uncategorized

SASS Crash Course

Code:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/75e53ee709.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="/dist/css/style.css" />
    <title>Sass crash course</title>
  </head>
  <body>
    <!-- Navigation -->
    <nav id="navbar" class="navbar">
      <ul class="t-center">
        <li><a href="">home</a></li>
        <li><a href="">services</a></li>
        <li><a href="">contact</a></li>
      </ul>
    </nav>
    <!-- Section Contact -->
    <section id="Main">
      <div class="section_container">
        <div class="text_container">
          <h1 class="text">Contact</h1>

          <ul class="text">
            <li><i class="fas fa-map-marker"></i> TheCity, US</li>
            <li><i class="fas fa-phone"></i> Phone: +006548511534</li>
            <li><i class="fas fa-envelope"></i> Email: mail@mail.com</li>
          </ul>
        </div>
        <div class="contact_container">
          <div class="img_contact">
            <h2 class="t-center">The Developer</h2>
          </div>
          <!-- About -->
          <section id="About">
            <h2 class="t-center">About me</h2>
            <h3 class="t-center">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              iste, atque repudiandae aperiam reprehenderit veniam eligendi
              dicta ad eaque accusamus? Laborum id nobis aperiam delectus, porro
              nulla itaque blanditiis laudantium?
            </h3>
          </section>
          <!-- Footer -->
          <footer id="Footer">
            <div class="social-section t-center">
              <i class="fab fa-facebook-f opacity"></i>
              <i class="fab fa-instagram opacity"></i>
              <i class="fab fa-pinterest-p opacity"></i>
              <i class="fab fa-twitter opacity"></i>
              <i class="fab fa-linkedin opacity"></i>
            </div>
          </footer>
        </div>
      </div>
    </section>
  </body>
</html>

Full Course:

Advanced CSS & SASS: Framework, FlexBox, Grid, Animations

Full Course:

Web Development HTML CSS & JS a 2020 Beginner to Advance

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: