codechella23/info.html at main · lcslago/codechella23 · 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
<!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="styles/reset.css">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/info.css">
    <link rel="icon" href="assets/icons/codechella-icon.png">
    <title>Codechella Valley Code and Techs Festival</title>
</head>

<body>
    <header>
        <nav class="inner-header">
            <a href="./index.html"><img src="assets/img/Logo1 1.svg" alt="Festival Codechella 2023"></a>
            <nav class="menu--mobile__lista">
                <input type="checkbox" id="menu" class="menu--mobile">
                <label for="menu">
                    <img src="assets/icons/menu.svg" alt="Acesso ao menu" class="inner-header__menu">
                </label>
                <ul class="inner-header__menu--mobile">
                    <li>
                        <a class="link" href="./about.html">
                            <bold>A experiência</bold>
                        </a>
                    </li>
                    <hr>
                    <li>
                        <a class="link" href="./map-sectors.html">
                            <bold>Mapas de Setores</bold>
                        </a>
                    </li>
                    <hr>
                    <li>
                        <a class="link" href="./info.html">
                            <bold>Informações</bold>
                        </a>
                    </li>
                    <hr>
                    <li>
                        <a class="link" href="./tickets.html">
                            <bold>Ingresso</bold>
                        </a>
                    </li>
                </ul>
            </nav>
        </nav>

        <ul class="inner-header__menu--alt">
            <li>
                <a class="link" href="./about.html">
                    <bold>A experiência</bold>
                </a>
            </li>
            <li>
                <a class="link" href="./map-sectors.html">
                    <bold>Mapas de Setores</bold>
                </a>
            </li>
            <li>
                <a class="link" href="./info.html">
                    <bold>Informações</bold>
                </a>
            </li>
            <li>
                <a class="link" href="./tickets.html">
                    <bold>Ingresso</bold>
                </a>
            </li>
        </ul>
    </header>

    <main>

        <div class="banner-info">
            <h1 class="banner-title">Informações Gerais</h1>
        </div>

        <div class="info__about">
            <p class="banner-title">Perguntas Frequentes:</p>
            <div class="text">
                <div class="cards">
                    <div class="card__ask" data-ask>
                        <h6>Quais serão as atrações?</h6>
                        <img src="assets/icons/arrow-drop-down.svg" alt="Seta para resposta" data-arrow>
                    </div>
                    <div class="card__answer" hidden data-answer>
                        <p>
                            Teremos dois dias de shows, o primeiro (11/03) com bandas de rock, e o segundo (12/03) com
                            bandas pop. <a href="./index.html">Confira o line-up em detalhes clicando neste link</a>!
                        </p>
                    </div>
                </div>
                <div class="cards">
                    <div class="card__ask" data-ask>
                        <h6>Qual é a classificação etária?</h6>
                        <img src="assets/icons/arrow-drop-down.svg" alt="Seta para resposta" data-arrow>
                    </div>
                    <div class="card__answer" hidden data-answer>
                        <p>
                            O CodeChella é um festival para todas as idades. Apesar disso, as pessoas com menos de 18
                            anos devem estar acompanhadas de um tutor legal.
                        </p>
                    </div>
                </div>
                <div class="cards">
                    <div class="card__ask" data-ask>
                        <h6>Quais são os setores disponíveis?</h6>
                        <img src="assets/icons/arrow-drop-down.svg" alt="Seta para resposta" data-arrow>
                    </div>
                    <div class="card__answer" hidden data-answer>
                        <p>
                            Temos uma seção especial que conta com um mapa e informações detalhadas sobre os diferentes
                            setores do evento. <a href="./map-sectors.html">Você pode acessá-lo aqui!</a>
                        </p>
                    </div>
                </div>
                <div class="cards">
                    <div class="card__ask" data-ask>
                        <h6>Quais são os itens proibidos?</h6>
                        <img src="assets/icons/arrow-drop-down.svg" alt="Seta para resposta" data-arrow>
                    </div>
                    <div class="card__answer" hidden data-answer>
                        <p>
                            Animais, bicicletas e outros itens esportivos, itens com símbolos divisórios ou
                            discriminatórios, drones ou qualquer outro tipo de dispositivo controlado remotamente,
                            canetas laser, tendas, sacos de dormir, objetos pontudos, cortantes ou qualquer tipo de
                            armamento.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <script src="./js/info-dropdown.js"></script>
    </main>

    <footer class="footer">
        <div class="footer__visual">
            <img src="assets/img/Logo1 1.svg" alt="Festival Codechella 2023">
            <div class="footer--container">
                <p>Acesse nossas redes:</p>
                <div class="footer__icons">
                    <img src="assets/icons/wpp.svg" alt="Whatsapp">
                    <img src="assets/icons/twitch.svg" alt="Twitch">
                    <img src="assets/icons/insta.svg" alt="Instagram">
                    <img src="assets/icons/twitter.svg" alt="Twitter">
                </div>
            </div>
        </div>
        <div class="footer__text">
            <p>Desenvolvido por Lucas Lago. <br> Projeto fictício sem fins comerciais.</p>
        </div>
    </footer>
</body>

</html>