codeChella/setores.html at main · NathaliaVargas/codeChella · 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
<!DOCTYPE html>
<html lang="pt-br">
<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">
    <title>CodeChella - Setores</title>
    <link rel="stylesheet" href="./style/style.css">
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/setores.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

</head>
<body>
    <header class="cabecalho">
        <section class="cabecalho__logo">
            <div class="cabecalho__img">
                <img src="./img/logo.png" href="index.html">
            </div>
            <div class="cabecalho__iconMenu">
                <span class="material-symbols-outlined" id="botaoMenu"> menu </span>
            </div>
        </section>

        <section class="cabecalho__menu">
                <a class="cabecalho__menu__item" href="index.html">Home</a>
                <a class="cabecalho__menu__item" href="experiencia.html">A experiência</a>
                <a class="cabecalho__menu__item" href="setores.html" style="text-decoration: underline;">Mapa de Setores</a>
                <a class="cabecalho__menu__item" href="informacoes.html">Informações</a>
                <a class="cabecalho__menu__item" href="ingresso.html">Ingresso</a>

        </section>
    </header>

    <main>
        <div class="paginaInicial">
            <img src="./setores/banner.png" class="paginaInicial__banner">
            <!-- <img src="./img/bannerTablet.png" class="paginaInicial__bannerTablet">-->
            <img src="./img/bannerCelular.png" class="paginaInicial__bannerCelular">
            <h1 class="paginaInicial__boasVindas">
                Mapa de setores <br> #CodeChella2023!</h1>

        </div>
        <section class="conteudo__evento">
            <div class="mapa">
                <div class="mapaSetores">
                    <img src="./setores/mapaSetores.png" alt="imagem do mapa de setores com cores diferenciando os espaços">
                </div>
                <div class="legenda">
                    <ul class="legendaLista">
                        <p class="legendaTitulo">Legenda:</p>
                        <li class="legendaLista_item" style="list-style-image: url('./setores/setor1.png')">Pista Premium</li>
                        <li class="legendaLista_item" style="list-style-image: url('./setores/setor2.png')">Pista Comum</li>
                        <li class="legendaLista_item" style="list-style-image: url('./setores/setor3.png')">Cadeiras térreo</li>
                        <li class="legendaLista_item" style="list-style-image: url('./setores/setor4.png')">Cadeiras superiores</li>
                        <li class="legendaLista_item" style="list-style-image: url('./setores/setor5.png')">Rampas</li>
                    </ul>
                </div>
            </div>
            <div class="setoresMais">
                <h2 class="titulo__sobreSetores">Mais detalhes sobre os setores</h2>
                <div class="sobreSetores">

                    <div class="imagemTextos">
                        <img src="./setores/imagem1.png" alt="imagem do setor pista">
                        <h2 class="subtituloSetores">Pista</h2>
                        <p class="textoSetores">Pista convencional, atendida pelos bares e banheiros das laterais do estádio.
                        Espaço amplo, com local para sentar e descansar. Separada da pista premium por uma grade.</p>
                    </div>
                    <div class="imagemTextos">
                        <img src="./setores/imagem2.png" alt="imagem do setor pista premium">
                        <h2 class="subtituloSetores">Pista Premium</h2>
                        <p class="textoSetores">Pista mais próxima do palco, com acesso muito próximo a banheiros e bares num raio de 100m.
                            Todas as pessoas idosas e/ou com deficiência têm direito a acesso gratuito a essa área.</p>
                    </div>

                    <div class="imagemTextos">
                        <img src="./setores/imagem3.png" alt="imagem das cadeiras do espaço">
                        <h2 class="subtituloSetores">Cadeiras</h2>
                        <p class="textoSetores">Opção de cadeiras térreas ou elevadas. Acesso próximo a banheiros e bares,
                        visão um pouco elevada em relação às pistas.</p>
                    </div>
                </div>
        </div>


        </section>
            </main>

            <footer class="rodape__container">
                <section class="redes">
                        <img src="./img/logo-rodape.png" class="logo-rodape">
                    <div class="rodape__texto">
                        <p  class="rodape__texto__texto">Acesse nossas redes:</p>
                            <div class="img__redeSocial">
                                <img src="./img/instagram.png">
                                <img src="./img/twitch.png">
                                <img src="./img/twitter.png">
                                <img src="./img/whatsapp.png">
                            </div>
                    </div>
                </section>

                <section class="credito">
                    <div class="rodape__texto__credito">
                        <p>Desenvolvido por Alura. <br>
                            Projeto fictício sem fins comerciais.</p>
                    </div>
                </section>
            </footer>
        </body>
        </html>