cafeteria/index.html at main · jacqdev/cafeteria · 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
<!DOCTYPE html>
<html lang="pt-br">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <title>Devclub café</title>
</head>
<body>
    <div class="caixa-video">
        <video src="./video/coffe.mp4" loop muted autoplay></video>
        <div class="mascara"></div>
        </div>

        <header class="header">
            <section>
                <a href="#">
                    <img src="./imag/logo.png" alt=" logo -cafeteria">
                </a>

                <nav>
                    <a href="#" >Home</a>
                    <a href="#" >Sobre</a>
                    <a href="#" onclick="mostrarModal()" >Endereço</a>
                    <a href="#">Avaliação</a>
                </nav>
            </section>
        </header>

            <section class="caixa-principal">
                <div>
                    <h1>Code com o melhor café da região</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus hic veritatis commodi nihil. Aspernatur, officiis facere? Vitae perferendis ipsum ad modi magnam repudiandae corporis, impedit et inventore nobis, nemo sit.</p>
                <a class="botao-link" >pague o seu agora</a>
                </div>
            </section>

            <section class="caixa-sobre">
                <h2 class="titulo" ><span>SOBRE</span>NÓS</h2>
                <div class="sobre-container">
                <div class="sobre-imagem">
                    <img src="./imag/about-img (1).jpeg">
                </div>

                <div class="sobre-texto">
                    <h3>o que faz o nosso café especial</h3>
                    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum incidunt maiores nostrum nihil obcaecati reprehenderit necessitatibus error eaque explicabo nesciunt, molestias minus omnis laudantium neque earum, similique et. Hic, laborum.</P>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem tempore ratione modi necessitatibus aspernatur cum quam cumque, numquam doloribus tempora quod, doloremque cupiditate? Animi, aspernatur cupiditate optio perspiciatis vitae non.</p>
                    <a class="botao-link" >Saiba Mais</a>
                </div>

            </div>
            </section>
             <div class="modal">
                <h3 class="titulo"><span>Nosso</span>Endereço</h3>

            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14508.75213693467!2d-53.33338764909758!3d-24.617203299418733!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94f24a34b2929109%3A0x1d3a1a0839e38167!2sCafel%C3%A2ndia%2C%20State%20of%20Paran%C3%A1%2C%2085415-000!5e0!3m2!1sen!2sbr!4v1730945329381!5m2!1sen!2sbr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>"
             </div>

             <div class="mascara-modal" onclick="esconderModal()"></div>
<script src="./scripts.js"></script>
          </body>
         </html>