la-cafeteria/index.html at main · Developer-Vini/la-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
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cafeteria</title>
    <link rel="stylesheet" href="source/css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="icon" href="source/img/menu-1.png" type="image/png">
    <link
        href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
</head>

<body>
    <header>
        <img src="source/img/logo.png" alt="logo">

        <div class="menu-toggle" id="menu-toggle">
             ☰
        </div>
        <nav>
                <ul>
                    <a href="#home">Home</a>
                    <a href="#produtos">Produtos</a>
                    <a href="#avaliacoes">Avaliações</a>
                    <a href="#endereco">Endereço</a>
                </ul>
        </nav>
    </header>

    <section class="home" id="home">
        <div class="bg">
            <img src="source/img/home-img.jpg" alt="">
        </div>
        <div class="textos">
            <h1> <span><span>
                        < </span>Code <span> > </span>
                    </span> com o <br>melhor café da <br>região</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus illo suscipit eos consequuntur
                earum
                possimus impedit, eaque libero fugiat asperiores accusantium perferendis voluptatibus dolores vero
                facilis
                omnis illum architecto.</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, ullam veniam? Laudantium corporis eveniet
                doloribus, dolor ipsum possimus velit ratione minima animi error tempore officiis quas iusto eos,
                aliquam
                commodi!</p>
            <button>Clique aqui</button>
        </div>
    </section>

    <section class="produtos" id="produtos">
        <h2><span>Nossos</span> Produtos ☕</h2>
        <div class="cards-container">
            <div class="card">
                <img src="source/img/menu-2.png" alt="Café 1">
                <h3>Café</h3>
                <p>R$ 6,90</p>
                <button>Comprar</button>
            </div>

            <div class="card">
                <img src="source/img/menu-1.png" alt="Café 2">
                <h3>Café</h3>
                <p>R$ 8,50</p>
                <button>Comprar</button>
            </div>

            <div class="card">
                <img src="source/img/menu-6.png" alt="Café 3">
                <h3>Café</h3>
                <p>R$ 9,90</p>
                <button>Comprar</button>
            </div>
        </div>
    </section>

    <section class="avaliacoes" id="avaliacoes">
        <h2><span>Depoimentos</span> dos nossos clientes ☕</h2>

        <div class="cards-container">

            <div class="card">
                <img src="source/img/pic-1.png" alt="Maria Silva">
                <h3>Marcos Silva</h3>
                <div class="estrelas">⭐⭐⭐⭐⭐</div>
                <p>"Melhor café que já tomei. Lugar super agradável!"</p>
            </div>

            <div class="card">
                <img src="source/img/pic-2.png" alt="João Pedro">
                <h3>Lara</h3>
                <div class="estrelas">⭐⭐⭐⭐</div>
                <p>"Doces incríveis e o atendimento é show!"</p>
            </div>

            <div class="card">
                <img src="source/img/pic-3.png" alt="Larissa Melo">
                <h3>Paulo</h3>
                <div class="estrelas">⭐⭐⭐⭐⭐</div>
                <p>"Lugar aconchegante e com excelente cardápio!"</p>
            </div>

        </div>
    </section>

    <section id="endereco">
        <div class="map">
            <h1>Venha nós conhecer</h1>
            <iframe
                 src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d267829.0792957723!2d-33.94972483252666!3d-8.106268976168764!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-BR!2sbr!4v1751237283285!5m2!1spt-BR!2sbr"
                width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </section>

    <footer>
        <h4>Feito por, Vinicius!🖤</h4>
    </footer>
    <script src="source/js/script.js"></script>
</body>

</html>