frontside/index.html at main · edwardribas/frontside · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <!-- Metas -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- General -->
    <title>frontside | o portal norteador</title>
    <link rel="shortcut icon" href="assets/images/logo/logo.svg">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/index.css">

    <!-- Icons -->
    <link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>
    <script src="https://kit.fontawesome.com/932eb47ff0.js" crossorigin="anonymous"></script>
</head>
<body>
    <!-- Header -->
    <header>
        <nav>
            <img src="assets/images/logo/logowhite.svg" class="brand" alt="Logo branca do blog.">
            <ul>
                <li><a href="#" aria-label="Você já está nesta página."><span class="icon"><i class="fa-solid fa-house"></i></span>Início</a></li>
                <li><a href="https://github.com/edwardribas" target="_blank"><span class="icon"><i class="fa-brands fa-github"></i></span>Github</a></li>
                <li><a href="./membros.html"><span class="icon"><i class="fa-solid fa-user-group"></i></span>Membros</a></li>
            </ul>
            <button class="menu-toggler">
                <i class="gg-menu-right-alt"></i>
            </button>
        </nav>
    </header>

    <!-- Hero -->
    <div class="hero">
        <div class="container">
            <div class="text">
                <h1>Quer ajuda? Vem de frontside.</h1>
                <h2>Postagens práticas e eficientes para o seu melhor entendimento.</h2>
                <a aria-label="Acessar matéria aleatória."><i class="fa-solid fa-shuffle"></i> Surpreenda-me</a>
            </div>
            <div class="image desktop">
                <img src="assets/images/illustrations/hero.svg" alt="Rapaz estudando em seu escritório.">
            </div>
        </div>
    </div>

    <div class="waves"></div>

    <!-- Main -->
    <main>

        <div class="articles">
            <!-- Maneiras de utilizar a tecnologia para evitar a procrastinação. -->
            <article>
                <a href="./articles/01.html">
                    <div class="image">
                        <img src="assets/images/artigos/article-1.jpeg" alt="Banner do artigo.">
                        <img src="assets/images/authors/ribas.jpg" class="author" alt="Imagem do autor do artigo.">
                    </div>
                    <div class="text">
                        <p>Eduardo Ribas | 12 de abril de 2022</p>
                        <h3>Maneiras de utilizar a tecnologia para evitar a procrastinação.</h3>
                    </div>
                </a>
            </article>

            <!-- Como conseguir uma melhor retenção de conteúdo? -->
            <article>
                <a href="./articles/02.html">
                    <div class="image">
                        <img src="assets/images/artigos/article-2.jpeg" alt="Banner do artigo.">
                        <img src="assets/images/authors/ribas.jpg" class="author" alt="Imagem do autor do artigo.">
                    </div>
                    <div class="text">
                        <p>Eduardo Ribas | 16 de abril de 2022</p>
                        <h3>Como conseguir uma melhor retenção de conteúdo?</h3>
                    </div>
                </a>
            </article>

            <!-- Descubra os principais tipos primitivos do JavaScript. -->
            <article>
                <a href="./articles/03.html">
                    <div class="image">
                        <img src="assets/images/artigos/article-3.jpeg" alt="Banner do artigo.">
                        <img src="assets/images/authors/ribas.jpg" class="author" alt="Imagem do autor do artigo.">
                    </div>
                    <div class="text">
                        <p>Eduardo Ribas | 07 de junho de 2022</p>
                        <h3>Descubra os principais tipos primitivos do JavaScript.</h3>
                    </div>
                </a>
            </article>
        </div>

        <div class="sticky-bar">
            <h2>Sobre este blog...</h2>
            <p>Falaremos sobre diversos assuntos relacionados ao Front-End com o intuito de sanar dúvidas e gerar conhecimento tanto para o leitor como para quem escreve.</p>
            <a href="https://github.com/edwardribas/" target="_blank"><i class="fa-brands fa-github"></i>/ edwardribas</a>
        </div>

    </main>

    <div class="info-card">
        <div class="image">
            <img src="assets/images/illustrations/blogging.svg" alt="Imagem de rapaz digitando em seu notebook.">
        </div>
        <div class="text">
            <h2>Sobre o nosso projeto...</h2>
            <p>Falaremos sobre diversos assuntos relacionados ao Front-End com o intuito de sanar dúvidas e gerar conhecimento tanto para o leitor como para quem escreve.</p>
        </div>
    </div>

    <!-- Arrow Up Btn -->
    <a href="#" class="up-btn">
        <i class="fa-solid fa-angle-up"></i>
    </a>

    <!-- Footer -->
    <footer>
        <div class="container">
            <img src="assets/images/logo/logowhite.svg" alt="Logo branca do blog.">
            <p>frontside &copy; 2022. Todos os direitos reservados.</p>
        </div>
    </footer>

    <!-- Application -->
    <script type="module" src="assets/js/index.js"></script>
    <script src="assets/js/app.js"></script>
</body>
</html>