Curso-Frontend_CodeBlue/layout-html5.html at master · oliheitor/Curso-Frontend_CodeBlue · 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
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Layout HTML5</title>
    </head>
    <body>
        <!-- Aqui começa o topo -->
        <header>
            <h1>
                <a href="/">
                    <img src="../Imagens/Logos/logo-codeblue.png" alt="Logo CodeBlue">
                </a>
            </h1>
        </header>

        <!-- Aqui começa o menu -->
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Imagens</a></li>
                <li><a href="">Produtos</a></li>
                <li><a href="">Contatos</a></li>
            </ul>
        </nav>

        <!-- Aqui começa o conteúdo da home -->
        <main>
            <aside>
                <h4></h4>
                <ul>
                    <li><a href="#">Site Maujor</a></li>
                    <li><a href="#">Site W2Schools</a></li>
                    <li><a href="#">Site W3C</a></li>
                </ul>
            </aside>

            <section>
                <article>
                    <h3>Notícia 1</h3>
                    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, aperiam quidem! Fugit deleniti, ut odit inventore ipsa repellendus porro placeat error id culpa fuga. Totam corrupti nulla quibusdam delectus ratione!</P>
                    <p>Fugit excepturi, ipsam et dignissimos fuga asperiores? Odio recusandae architecto perspiciatis, nihil necessitatibus soluta cum sed consectetur ex dignissimos nam temporibus, consequatur obcaecati commodi, dolore laudantium saepe quae est sapiente.</p>
                    <p class="leia"><a href="">Leia mais...</a></p>

                    <h3>Noticia 2</h3>
                    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, aperiam quidem! Fugit deleniti, ut odit inventore ipsa repellendus porro placeat error id culpa fuga. Totam corrupti nulla quibusdam delectus ratione!</P>
                    <p>Fugit excepturi, ipsam et dignissimos fuga asperiores? Odio recusandae architecto perspiciatis, nihil necessitatibus soluta cum sed consectetur ex dignissimos nam temporibus, consequatur obcaecati commodi, dolore laudantium saepe quae est sapiente.</p>
                    <p class="leia"><a href="">Leia mais...</a></p>
                </article>
            </section>
        </main>

        <!-- Aqui começa o rodapé -->
        <footer>
            <p>&copy; Copyright - Todos os Direitos Reservados - CodeBlue</p>
        </footer>
    </body>
</html>