final-project-module-html-css/index.html at main · jonasmachados/final-project-module-html-css · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Document</title>
</head>

<body>
    <header class="header-wrapper">
        <div class="header">
            <div class="checkbox-container">
                <div class="checkbox-wrapper">
                    <input type="checkbox" id="toggle">
                    <label class="checkbox" for="toggle">
                        <div class="trace"></div>
                        <div class="trace"></div>
                        <div class="trace"></div>
                    </label>
                    <div class="menu"></div>
                    <nav class="menu-items">
                        <ul>
                            <li>
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="#">Sobre</a>
                            </li>
                            <li>
                                <a href="#">Projetos</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <h1>Jonas Machado</h1>
        <h2>Front-end Developer</h2>
        <div class="social-media">
            <a href="#">Linkedin</a>
            <a href="#">GitHub</a>
        </div>
    </header>

    <main class="container">
        <div class="card-container">
            <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis distinctio
                nihil, culpa repudiandae atque facilis eveniet neque
                consequuntur quas dolorem aliquam maiores nulla ullam optio fugit voluptatibus soluta? Nulla, ipsum.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis distinctio nihil, culpa
                repudiandae atque facilis eveniet neque
                consequuntur quas dolorem aliquam maiores nulla ullam optio fugit voluptatibus soluta? Nulla, ipsum.
            </div>
            <div class="card">
                <div class="card-wrapper">
                    <h2>Github</h2>
                    <p>Veja meus projetos!</p>
                </div>
            </div>
        </div>

        <div class="card-container">
            <div class="card">
                <div class="card-wrapper">
                    <h2>Linkedin</h2>
                    <p>Vem ver minha carreira profissional!</p>
                </div>
            </div>
            <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis distinctio
                nihil, culpa repudiandae atque facilis eveniet neque
                consequuntur quas dolorem aliquam maiores nulla ullam optio fugit voluptatibus soluta? Nulla, ipsum.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis distinctio nihil, culpa
                repudiandae atque facilis eveniet neque
                consequuntur quas dolorem aliquam maiores nulla ullam optio fugit voluptatibus soluta? Nulla, ipsum.
            </div>
        </div>

        <div class="card-container">
            <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis distinctio
                nihil, culpa repudiandae atque facilis eveniet neque
                consequuntur quas dolorem aliquam maiores nulla ullam optio fugit voluptatibus soluta? Nulla, ipsum.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis distinctio nihil, culpa
                repudiandae atque facilis eveniet neque
                consequuntur quas dolorem aliquam maiores nulla ullam optio fugit voluptatibus soluta? Nulla, ipsum.
            </div>
            <div class="card">
                <div class="card-wrapper">
                    <h2>Instagram</h2>
                    <p>Ou mais do meu dia-a-dia ;)</p>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer">
        Developed by Jonas Machado.
    </footer>

</body>

</html>