olimpiadasTec/surf.html at main · VlaMartins/olimpiadasTec · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Surf Olimpíadas</title>
    <link rel="icon" type="image/webp" href="img/kaique_surf_icon.webp">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;300;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Original+Surfer&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Josefin Sans', sans-serif;
            font-size: 18px;
            line-height: 1.6;
        }

        header {
            background-image: url('img/kaique_surf1.png');
            background-repeat: no-repeat;
            background-size: cover;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-content {
            text-align: center;
            color: white;
        }

        h1 {
            font-size: 4rem;
            margin: 0;
            font-weight: 300;
        }

        .icon {
            width: 80px;
            margin-bottom: 10px;
        }

        main {
            padding: 20px;
        }

        .info-section {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .info-box {
            flex: 1;
            min-width: 300px;
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .pictogram {
            width: 100%;
            max-width: 400px;
            height: auto;
            border-radius: 30px;
        }

        .pictogram:hover {
            color: rgb(0, 0, 0);
            transition: 300ms;
            filter: brightness(80%);
        }

        footer {
            background-color: #000;
            color: #fff;
            padding: 20px;
            text-align: center;
            list-style:none;
        }

        .footer-content h2 {
            font-size: 2rem;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            margin-bottom: 10px;
        }

        b {
            font-weight: bold;
        }

        .info-box {
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .info-box h2 {
            font-size: 2rem;
            margin-bottom: 20px;
            font-family: 'Josefin Sans', sans-serif;
        }

        .medalhistas {
            margin-bottom: 20px;
        }

        .medalhistas h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            font-family: 'Josefin Sans', sans-serif;
        }

        .medalhistas ul {
            list-style-type: none;
            padding: 0;
        }

        .medalhistas ul li {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        .medalhistas ul li strong {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <header>
        <section class="header-content">
            <a href="index.html"><img src="img/Fut-icon.png" alt="ícone Olimpíadas" class="icon"></a>
            <h1>Surfe Olímpico</h1>
        </section>
    </header>

    <main>
        <section class="info-section">
            <div class="info-box">
                <h2>Resumo das Regras</h2>
                <p>Os surfistas realizam manobras e truques em uma onda e são avaliados por cinco juízes com base na
                    variedade, tipo e dificuldade da apresentação. Os surfistas também são julgados pela velocidade,
                    força e fluxo (a forma como ele conecta perfeitamente seus movimentos de uma manobra a outra). As
                    shortboards (pranchas curtas) são as pranchas de surfe escolhidas para os Jogos Olímpicos. Menores
                    do que as longboards, elas são mais rápidas e manipuláveis, o que as tornam ideais para realizar
                    manobras espetaculares.</p>
            </div>
            <div class="info-box">
                <h2>História Olímpica</h2>
                <p>Na década de 1920, fãs e atletas de surfe, incluindo o havaiano e três vezes campeão olímpico da
                    natação estilo livre Duke Kahanamoku, começaram a fazer campanha para que o esporte fosse adicionado
                    ao programa Olímpico. Muitos anos depois, o surfe finalmente entrou no programa Olímpico dos Jogos
                    de Tóquio 2020. Ele também estará presente nos Jogos de Paris 2024; o lendário local para o surfe,
                    Teahupo'o, no Tahiti, foi escolhido como sede dos eventos do esporte.</p>
            </div>
            <div class="info-box">
                <h2>Medalhistas</h2>
                <div class="medalists">
                    <h3>Masculino</h3>
                    <ul>
                        <li><strong>Ouro:</strong> Kanoa Igarashi (Japão)</li>
                        <li><strong>Prata:</strong> Gabriel Medina (Brasil)</li>
                        <li><strong>Bronze:</strong> Italo Ferreira (Brasil)</li>
                    </ul>
                </div>
                <div class="medalhistas">
                    <h3>Feminino</h3>
                    <ul>
                        <li><strong>Ouro:</strong> Carissa Moore (Havai)</li>
                        <li><strong>Prata:</strong> Tyler Wright (Austrália)</li>
                        <li><strong>Bronze:</strong> Sally Fitzgibbons (Austrália)</li>
                    </ul>
                </div>
            </div>

            <div class="info-box">
                <h2>O Pictograma</h2>
                <img src="img/kaique_pictograma.avif" alt="Pictograma Olimpíadas" class="pictogram">
            </div>
        </section>
    </main>

    <footer>
        <section class="footer-content">
            <h2>Olimpíadas<i>Tec</i></h2>
            <ul>
                <li><b>Desenvolvido por:</b> Kaique Gabriel</li>
                <li><b>Telefone:</b> +89 (13) 4002-8922</li>
                <li><b>Email:</b> kaiquegabriel@colegio.com</li>
            </ul>
        </section>
    </footer>
</body>

</html>