-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
177 lines (177 loc) · 15 KB
/
index.html
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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="description" content="O seu melhor cinema em Matão!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<link href="styles/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900">
<link rel="preconnect" href="https://www.youtube-nocookie.com/">
<title>Cineteatro Matão</title>
</head>
<body>
<div class="gradient-background"></div>
<nav class="navbar navbar-expand-lg" style="background: linear-gradient(180deg, #020024 9.9%, rgba(2, 0, 36, 0.00) 100%); position: absolute; z-index: 2; width: 100%;">
<div class="container">
<a class="navbar-brand">
<img style="width: 250px; height: auto;" src="images/logo.png" alt="Logo Cine Teatro Matão">
</a>
<a class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbar" aria-controls="navbar" aria-label="Abrir navegação">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="18" viewBox="0 0 30 18" fill="#F8EBFF">
<path d="M0 17.0068H30V14.1858H0V17.0068ZM0 9.9544H30V7.13345H0V9.9544ZM0 0.0810852V2.90203H30V0.0810852H0Z" fill="#F8EBFF"/>
</svg>
</a>
<div class="offcanvas offcanvas-end" style="background-color: #28166D" tabindex="-1" id="navbar" aria-labelledby="navbarLabel">
<div class="offcanvas-header">
<img style="width: 250px; height: auto;" src="images/logo.png" alt="Logo Cine Teatro Matão">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Fechar"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav flex-grow-1 pe-3 justify-content-end">
<li class="nav-item"><a class="nav-link" href="#prog"><h5 data-bs-dismiss="offcanvas">PROGRAMAÇÃO</h5></a></li>
<li class="nav-item"><a class="nav-link" href="#em-breve"><h5 data-bs-dismiss="offcanvas">EM BREVE</h5></a></li>
<li class="nav-item"><a class="nav-link" href="#sobre"><h5 data-bs-dismiss="offcanvas">SOBRE</h5></a></li>
<li class="nav-item"><a class="nav-link" href="#contato"><h5 data-bs-dismiss="offcanvas">CONTATO</h5></a></li>
</ul>
</div>
</div>
</div>
</nav>
<section>
<div id="filmCarousel" class="carousel slide" data-bs-ride="carousel" style="position: relative; z-index: 1;">
<div class="carousel-inner" id="carouselInner"></div>
<button class="carousel-control-prev" type="button" data-bs-target="#filmCarousel" data-bs-slide="prev" aria-label="Mudar filme">
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 46 46" fill="none">
<path d="M28.82 33.18L19.66 24L28.82 14.82L26 12L14 24L26 36L28.82 33.18Z" fill="#F8EBFF"/>
<path d="M2 22C2 10.9543 10.9543 2 22 2H24C35.0457 2 44 10.9543 44 22V24C44 35.0457 35.0457 44 24 44H22C10.9543 44 2 35.0457 2 24V22Z" stroke="#F8EBFF" stroke-width="4"/>
</svg>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#filmCarousel" data-bs-slide="next" aria-label="Mudar filme">
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 46 46" fill="none">
<path d="M17 33.18L26.16 24L17 14.82L19.82 12L31.82 24L19.82 36L17 33.18Z" fill="#F8EBFF"/>
<path d="M2 22C2 10.9543 10.9543 2 22 2H24C35.0457 2 44 10.9543 44 22V24C44 35.0457 35.0457 44 24 44H22C10.9543 44 2 35.0457 2 24V22Z" stroke="#F8EBFF" stroke-width="4"/>
</svg>
</button>
<div class="carousel-indicators" id="carousel-indicators"></div>
</div>
</section>
<section>
<a href="#em-breve" class="banner" id="banner-breve" style="padding: 45px 0">
<h2>Pré-Vendas e Novidades</h2>
<p>Assista em primeira mão os filmes que você mais ama ou veja o que vem de novo na nossa programação!</p>
</a>
</section>
<section>
<h1 class="pd45 container mt-4" id="prog">Programação Completa</h1>
<div class="date-carousel container mt-4" id="dateCarousel">
<div class="d-flex overflow-auto flex-nowrap">
<button class="date-button mobile-hide" onclick="changeDate(-1)" aria-label="Dia anterior">
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 46 46" fill="none">
<path d="M28.82 33.18L19.66 24L28.82 14.82L26 12L14 24L26 36L28.82 33.18Z" fill="#F8EBFF"/>
<path d="M2 22C2 10.9543 10.9543 2 22 2H24C35.0457 2 44 10.9543 44 22V24C44 35.0457 35.0457 44 24 44H22C10.9543 44 2 35.0457 2 24V22Z" stroke="#F8EBFF" stroke-width="4"/>
</svg>
</button>
<button class="date-item numero active" onclick="selectDate(0)"></button>
<button class="date-item numero" onclick="selectDate(1)"></button>
<button class="date-item numero" onclick="selectDate(2)"></button>
<button class="date-item numero" onclick="selectDate(3)"></button>
<button class="date-item numero" onclick="selectDate(4)"></button>
<button class="date-item numero" onclick="selectDate(5)"></button>
<button class="date-item numero" onclick="selectDate(6)"></button>
<button class="date-button mobile-hide" onclick="changeDate(1)" aria-label="Dia posterior">
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 46 46" fill="none">
<path d="M17 33.18L26.16 24L17 14.82L19.82 12L31.82 24L19.82 36L17 33.18Z" fill="#F8EBFF"/>
<path d="M2 22C2 10.9543 10.9543 2 22 2H24C35.0457 2 44 10.9543 44 22V24C44 35.0457 35.0457 44 24 44H22C10.9543 44 2 35.0457 2 24V22Z" stroke="#F8EBFF" stroke-width="4"/>
</svg>
</button>
</div>
</div>
</section>
<div id="programacao" style="margin-top: -40px"></div>
<section>
<div class="container mt-4">
<h1 id="em-breve" style="padding-top: 15px">Em Breve</h1>
<div class="d-flex overflow-auto flex-nowrap cartazes" id="em-breve-elements"></div>
</div>
</section>
<section>
<div class="container mt-4">
<h1 style="padding-bottom: 16px">Perguntas frequentes</h1>
<div class="accordion" id="accordionFAQ"></div>
</div>
</section>
<section>
<div class="sobre" id="sobre">
<div class="carousel-caption container mt-4" style="top: 65px">
<h1>Sobre o Cinema</h1>
<p>Equipado com a mais alta tecnologia, o Cine Teatro Matão possui o melhor equipamento para filmes em 2D e 3D de nossa região; com salas confortáveis e ambiente climatizado proporcionam mais emoção e entretenimento durante a apresentação.</p>
<p> Inaugurado em 27 de agosto de 2003 com capacidade para 312 lugares, o Cine Teatro Matão possui uma série de vantagens para o telespectador.</p>
<p> Venha conhecer e desfrutar hoje mesmo de todas as vantagens de assistir a um bom filme em um lugar agradável.</p>
</div>
</div>
</section>
<footer>
<div class="container mt-4" id="contato">
<img src="images/logo.png" style="width: 250px; height: auto;" alt="Logo Cine Teatro Matão">
<div class="row justify-content-evenly">
<div class="col-sm-4">
<h3>R. João Pessoa, 842 - Centro<br>Matão - SP</h3>
<div class="contato">
<a href="mailto:[email protected]" class="link-contato">
<svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="33" height="28" viewBox="0 0 33 28" fill="none">
<path d="M29.7 0.800049H3.3C1.485 0.800049 0.0165 2.28505 0.0165 4.10005L0 23.9C0 25.715 1.485 27.2 3.3 27.2H29.7C31.515 27.2 33 25.715 33 23.9V4.10005C33 2.28505 31.515 0.800049 29.7 0.800049ZM29.7 7.40005L16.5 15.65L3.3 7.40005V4.10005L16.5 12.35L29.7 4.10005V7.40005Z" fill="#F8EBFF"/>
</svg>
<h5>[email protected]</h5></a>
</div>
<div class="contato">
<a href="tel:1633847777">
<svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
<path d="M6.63667 14.2817C9.27667 19.47 13.53 23.705 18.7183 26.3633L22.7517 22.33C23.2467 21.835 23.98 21.67 24.6217 21.89C26.675 22.5683 28.8933 22.935 31.1667 22.935C32.175 22.935 33 23.76 33 24.7683V31.1667C33 32.175 32.175 33 31.1667 33C13.9517 33 0 19.0483 0 1.83333C0 0.825 0.825 0 1.83333 0H8.25C9.25833 0 10.0833 0.825 10.0833 1.83333C10.0833 4.125 10.45 6.325 11.1283 8.37833C11.33 9.02 11.1833 9.735 10.67 10.2483L6.63667 14.2817Z" fill="#F8EBFF"/>
</svg>
<h5>(16) 3384-7777</h5></a>
</div>
<div class="contato">
<a href="https://instagram.com/cineteatromatao">
<svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
<path d="M16.5 2.97303C20.9057 2.97303 21.4275 2.9898 23.1674 3.06918C24.7761 3.1426 25.6497 3.4114 26.2312 3.6373C27.0013 3.93662 27.5511 4.29424 28.1284 4.87159C28.7058 5.44895 29.0634 5.99866 29.3626 6.76877C29.5886 7.35025 29.8574 8.22392 29.9308 9.83258C30.0102 11.5725 30.027 12.0943 30.027 16.5C30.027 20.9057 30.0102 21.4276 29.9308 23.1674C29.8574 24.7761 29.5886 25.6498 29.3626 26.2313C29.0634 27.0014 28.7058 27.5511 28.1284 28.1285C27.5511 28.7058 27.0013 29.0634 26.2312 29.3627C25.6497 29.5887 24.7761 29.8575 23.1674 29.9309C21.4278 30.0103 20.9059 30.027 16.5 30.027C12.094 30.027 11.5722 30.0103 9.83258 29.9309C8.22385 29.8575 7.35019 29.5887 6.76877 29.3627C5.99859 29.0634 5.44888 28.7058 4.87153 28.1285C4.29417 27.5511 3.93656 27.0014 3.6373 26.2313C3.41134 25.6498 3.14254 24.7761 3.06912 23.1675C2.98973 21.4276 2.97297 20.9057 2.97297 16.5C2.97297 12.0943 2.98973 11.5725 3.06912 9.83265C3.14254 8.22392 3.41134 7.35025 3.6373 6.76877C3.93656 5.99866 4.29417 5.44895 4.87153 4.87159C5.44888 4.29424 5.99859 3.93662 6.76877 3.6373C7.35019 3.4114 8.22385 3.1426 9.83252 3.06918C11.5724 2.9898 12.0943 2.97303 16.5 2.97303ZM16.5 0C12.0188 0 11.457 0.0189941 9.69707 0.0992932C7.94077 0.179461 6.74139 0.458347 5.69181 0.866261C4.60679 1.28793 3.68662 1.85212 2.76934 2.7694C1.85205 3.68669 1.28786 4.60685 0.866196 5.69187C0.458281 6.74146 0.179396 7.94084 0.0992277 9.69714C0.0189286 11.457 0 12.0189 0 16.5C0 20.9812 0.0189286 21.5431 0.0992277 23.3029C0.179396 25.0592 0.458281 26.2586 0.866196 27.3082C1.28786 28.3931 1.85205 29.3134 2.76934 30.2307C3.68662 31.1479 4.60679 31.7121 5.69181 32.1338C6.74139 32.5417 7.94077 32.8206 9.69707 32.9008C11.457 32.9811 12.0188 33 16.5 33C20.9811 33 21.543 32.9811 23.3029 32.9008C25.0592 32.8206 26.2585 32.5417 27.3081 32.1338C28.3931 31.7121 29.3133 31.1479 30.2306 30.2307C31.1479 29.3134 31.7121 28.3932 32.1337 27.3082C32.5417 26.2586 32.8205 25.0592 32.9007 23.3029C32.981 21.5431 33 20.9812 33 16.5C33 12.0189 32.981 11.457 32.9007 9.69714C32.8205 7.94084 32.5417 6.74146 32.1337 5.69187C31.7121 4.60685 31.1479 3.68669 30.2306 2.7694C29.3133 1.85212 28.3931 1.28793 27.3081 0.866261C26.2585 0.458347 25.0592 0.179461 23.3029 0.0992932C21.543 0.0189941 20.9811 0 16.5 0ZM16.5 8.02703C11.8205 8.02703 8.02697 11.8205 8.02697 16.5C8.02697 21.1795 11.8205 24.973 16.5 24.973C21.1795 24.973 24.973 21.1795 24.973 16.5C24.973 11.8205 21.1795 8.02703 16.5 8.02703ZM16.5 22.0001C13.4624 22.0001 10.9999 19.5376 10.9999 16.5C10.9999 13.4625 13.4624 11 16.5 11C19.5375 11 22 13.4625 22 16.5C22 19.5376 19.5375 22.0001 16.5 22.0001ZM27.2877 7.69228C27.2877 8.78581 26.4013 9.67231 25.3077 9.67231C24.2142 9.67231 23.3277 8.78581 23.3277 7.69228C23.3277 6.59874 24.2142 5.71231 25.3077 5.71231C26.4013 5.71231 27.2877 6.59874 27.2877 7.69228Z" fill="#F8EBFF"/>
</svg>
<h5>@cineteatromatao</h5></a>
</div>
<div class="contato">
<a href="https://www.facebook.com/profile.php?id=100057220939556">
<svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="36" height="33" viewBox="0 0 36 33" fill="none">
<path d="M35.4444 16.5414C35.4444 7.41053 27.5049 0 17.7222 0C7.93956 0 0 7.41053 0 16.5414C0 24.5474 6.09644 31.2135 14.1778 32.7519V21.5038H10.6333V16.5414H14.1778V12.406C14.1778 9.21353 16.9602 6.61654 20.3806 6.61654H24.8111V11.5789H21.2667C20.2919 11.5789 19.4944 12.3233 19.4944 13.2331V16.5414H24.8111V21.5038H19.4944V33C28.4442 32.1729 35.4444 25.1263 35.4444 16.5414Z" fill="#F8EBFF"/>
</svg>
<h5>/cineteatromatao</h5></a>
</div>
</div>
<div class="col-sm-4">
<h5>Informações Importantes</h5>
<p>A programação pode ser alterada sem prévio aviso.</p>
<p>Horário de funcionamento: das <strong>17h às 00h</strong></p>
<p>Todas as <strong>segundas</strong> e <strong>quartas</strong>, o valor da entrada para o cinema será correspondente ao da <strong>meia entrada</strong>. Exceto aos feriados e Lançamentos.</p>
</div>
<div class="col-sm-4">
<h5>Tabela de Preços</h5>
<p>Filmes em 2D e 3D: <strong>R$28,00</strong> (inteira) e <strong>R$14,00</strong> (meia)</p>
<p>Obrigatória a apresentação do documento que comprove a meia entrada.</p>
</div>
</div>
</div>
<p class="small text-center" style="padding-top: 32px">Copyright © 2023 Cine Teatro Matão. Todos os direitos reservados.<br>Desenvolvimento e design por <a href="https://github.com/Henriicoo/cinema-website">Henrique Napimoga</a></p>
</footer>
<div class="modal fade" id="infoModal" tabindex="-1" aria-labelledby="infoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body row justify-content-center clearfix" id="filmeInfoModal"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="scripts/main.js"></script>
</body>
</html>