index.html

<!DOCTYPE html>
<html lang="pt-br" prefix="og: https://ogp.me/ns#">

<head>
    <!--
        Metadados
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="Website para armazenar minhas ideias, guias, anotações e quaisquer registros sobre tecnologia que considero interessante.">
    <meta name="author" content="Breno Ariel">

    <title>
        Breno - Página inicial
    </title>

    <link rel="stylesheet" href="/assets/css/main-styles.css">

    <link rel="icon" href="/assets/img/icones/my-logo/my-mark-black.png" type="image/png">

    <!--
        Open graph
    -->
    <meta property="og:title" content="Breno - Página inicial" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://b-ariel.github.io/" />
    <meta property="og:description"
        content="Website para armazenar minhas ideias, guias, anotações e quaisquer registros sobre tecnologia que considero interessante." />
    <meta property="og:locale" content="pt_BR" />
    <meta property="og:site_name" content="b-ariel" />
    <!--
        Open graph - og:image
    -->
    <meta property="og:image" content="https://b-ariel.github.io/assets/img/icones/my-logo/my-mark-black.png" />
    <meta property="og:image:secure_url"
        content="https://b-ariel.github.io/assets/img/icones/my-logo/my-mark-black.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="1024" />
    <meta property="og:image:height" content="1024" />
    <meta property="og:image:alt" content="Ícone </> em quadrado preto." />

    <!--
        X cards - Twitter cards
    -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="Breno - Página inicial" />
    <meta name="twitter:description"
        content="Website para armazenar minhas ideias, guias, anotações e quaisquer registros sobre tecnologia que considero interessante." />
    <!--
        X cards - Twitter cards - twitter:image
    -->
    <meta name="twitter:image" content="https://b-ariel.github.io/assets/img/icones/my-logo/my-mark-black.png" />

</head>

<body class="home">

    <header>

        <h1>
            Seja muito bem-vindo(a) ao meu site!😎
        </h1>
        <h2>
            O espaço onde guardo minhas anotações 🤓☝️
        </h2>

        <nav class="links-header">
            <a href="index.html" target="_self">
                Página inicial
            </a>
            <a href="src/about.html" target="_self">
                Sobre mim
            </a>
            <a href="src/my-links.html" target="_self">
                Meus links
            </a>
        </nav>

    </header>

    <main class="container">

        <section class="page">
            <h3>
                Olá caro internauta
            </h3>
            <p>
                Fiz este sítio eletrônico para armazenar minhas ideias, guias, anotações e quaisquer registros sobre
                tecnologia
                que considero interessante.
            </p>
            <p>
                E <mark>ainda está na fase de construção</mark>, então, se você encontrar algum erro ou tiver alguma
                sugestão, por
                favor, me avise!
            </p>
            <p>
                Grato pela compreensão e por visitar meu site! Espero que encontre algo útil aqui. 😊
            </p>
        </section>

        <section class="page">
            <h3>
                Atenção!
            </h3>
            <p>
                <strong>Para uma melhor experiência, recomendo deixar o <i lang="en">JavaScript</i> ativado.</strong>
            </p>
            <p>
                Pois componentes importantes, como o cabeçalho, rodapé, exemplos de código ...
            </p>
            <p>
                <mark>São carregados via <i lang="en">JavaScript</i> em certas páginas.</mark>
            </p>
        </section>

        <hr>

        <section class="page links-normal">
            <h3>
                <a href="/pages/bugigangas/bugigangas.html" target="_self">
                    Minhas BUGIGANGAS aqui
                </a>
            </h3>
            <p>
                Página para <b>acessar meus arquivos!</b>
            </p>
            <p>
                <b>Última data de atualização:</b>
                <time datetime="2026-06-12">12 de junho de 2026</time>
            </p>
        </section>

        <article class="page links-normal">
            <h3>
                <a href="/pages/markdown/github-flavored-markdown/github-flavored-markdown-page-1.html" target="_self">
                    Guia de <i lang="en">MARKDOWN</i> (versão <i lang="en">GFM</i> 0.29)
                </a>
            </h3>
            <p>
                <b>Guia de <i lang="en">MARKDOWN</i></b> que fará você sobreviver no <i lang="en">GITHUB</i> !
            </p>
            <p>
                <b>Última data de atualização:</b>
                <time datetime="2026-06-12">12 de junho de 2026</time>
            </p>
        </article>

        <article class="page links-normal">
            <h3>
                <a href="/pages/database/database-page-1.html" target="_self">
                    O que é um BANCO DE DADOS?
                </a>
            </h3>
            <p>
                Este <b>resumo</b> fará você entender melhor!
            </p>
            <p>
                <b>Última data de atualização:</b>
                <time datetime="2026-06-12">12 de junho de 2026</time>
            </p>

        </article>

    </main>

    <footer>

        <section id="footer-main">
            <h4>
                Direitos autorais &copy;
            </h4>
            <p>
                Licença MIT
            </p>
            <p>
                <time datetime="2025">2025</time>
            </p>
            <p>
                Breno Ariel
            </p>
        </section>

        <section id="footer-secondary">
            <h4>
                Links interessantes:
            </h4>
            <nav class="links-footer">
                <ul>
                    <li>
                        <a href="assets/components/web-component/sketch.html" target="_self">
                            Esboço web
                        </a>
                    </li>
                    <li>
                        <a aria-disabled="true">
                            em breve... sitemap
                        </a>
                    </li>
                    <li>
                        <a aria-disabled="true">
                            em breve... projetos
                        </a>
                    </li>
                    <li>
                        <a aria-disabled="true">
                            em breve... tutoriais
                        </a>
                    </li>
                    <li>
                        <a aria-disabled="true">
                            em breve... jogos
                        </a>
                    </li>
                </ul>
            </nav>
        </section>

    </footer>

</body>

</html>

<!--
                                   __
                                  / /
                                 /_/
  ______      ___          ________
 /  __  \     |  \        /   ___  \
 | /  \ |     |  |        |  /   \  |
 | |  | |     |  |        |  \___/  |
 | |  | |     |  |        |   ___   |
 | \__/ |     |  |____    |  |   |  |
 \______/     \______/    |__|   |__|
   _____________       ___   ___       ________      __________        ______       __
 /   __    __   \     |  |  |  |     /   __   \     |   ____   \      /  __  \     | |
 |  /  \  /  \  |     |  |  |  |     |  /  \  |     |  |    \   \     | /  \ |     | |
 |  |  |  |  |  |     |  |  |  |     |  |  |  |     |  |     |  |     | |  | |     | |
 |  |  |  |  |  |     |  |  |  |     |  |  |  |     |  |     |  |     | |  | |     |_|
 |  |  |  |  |  |     |  \__/  |     |  |  |  |     |  |_____/  /     | \__/ |      _ 
 |__|  |__|  |__|     \________/     |__|  |__|     |__________/      \______/     |_|
-->