index.html


<!DOCTYPE html>
<html lang="pt-BR">

    <head>

    <meta charset="utf-8" />
    <meta http-equiv="Refresh" content="120">
    <meta name="viewport" content="width=device-width, initial-scale=0.7" />
    <link rel="icon" href="./src/assets/logo.svg" />
    <links></links>
    <link rel="stylesheet" href="./src/css/main.css">

    <title>SASS PROJECT</title>
    </head>
    <body>
        <nav>
            <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
            </ul>
          </nav>
        
          <main>
            <div class="box">
              <p>Conteúdo com estilo SASS!</p>
            </div>
          </main>
        
          <section>
            <h2>O que é SASS e como funciona?</h2>
            <p>O SASS (Syntactically Awesome Style Sheets) é uma extensão do CSS que oferece uma forma mais poderosa e elegante de escrever estilos para páginas web. Ele introduz recursos como variáveis, mixins (fragmentos de código reutilizáveis), placeholders e funções, permitindo uma escrita mais eficiente e modular de estilos.</p>
            <p>O SASS é compilado para CSS, o que significa que, após escrevermos nossos estilos no SASS, precisamos compilá-los em arquivos CSS para que os navegadores possam interpretá-los corretamente.</p>
            <p>Neste exemplo, estamos utilizando variáveis, mixins e placeholders do SASS para estilizar elementos HTML de forma mais flexível e organizada.</p>
          </section>
        <footer>
        <div id="direitos" class="direitos">
            <div class="loading ">
            <p class="load "></p>
            </div>
        </div>
        </footer>
</body>

    <autoscripts>
        <script src="./src/js/load-scripts.js"></script>
    </autoscripts>
    <host>
        <script src="./src/js/load-host.js" defer></script>
    </host>
</html>