GridLayout-Flexbox-CSS/project.html at main · GuiBublitz/GridLayout-Flexbox-CSS · 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <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=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/4ab4d98fc4.js" crossorigin="anonymous"></script>
    <link href="./style/project.css" rel="stylesheet">
    <title>Hotel Paraíso</title>
</head>
<body>
    <header>
        <a href="#"><img src="./img/logo.png" alt="Hotel Paraíso"></a>
        <nav>
            <li><a href="#">Home</a></li>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Reservas</a></li>
            <li><a href="#">Contato</a></li>
        </nav>
    </header>
    <section class="hero">
        <h1>Conheça este paraíso chamado Itacaré</h1>
        <h3>"Aconchego, conforto, simpatia e alto astral"</h3>
        <a href="" class="btn">Saiba mais</a>
    </section>
    <section class="conheca-o-hotel">
        <h3>Conheçam o Hotel Paraíso!</h3>
        <p>
            Feche os olhos e imagine o paraíso. Um lugar no meio da Mata Atlântica e banhado pelo mar,
            onde você encontra paz, tranquilidade, conforto e comodidade.
        </p>
        <hr>
        <ul class="grid">
            <li class="small" style="background-image: url('./img/itacare-01.jpg');"></li>
            <li class="large" style="background-image: url('./img/itacare-02.jpg');"></li>
            <li class="large" style="background-image: url('./img/itacare-03.jpg');"></li>
            <li class="small" style="background-image: url('./img/itacare-04.jpg');"></li>
        </ul>
    </section>
    <section class="caracteristicas">
        <h3>Único hotel pé na areia de Itacaré</h3>
        <p>
            Implantado em uma área completamente arborizada, o Horel Paraíso é o único hotel pé na areia de Iracaré.
            Aqui o mar será seu companheiro e você terá as belezas da natureza como guia.
        </p>
        <hr>
        <ul class="grid">
            <li>
                <i class="fas fa-location-arrow"></i>
                <h4>Localização</h4>
                <p>
                    Localizada no sul da Bahia, entre o mar a Mata Atlântica, Itacaré tem refrescantes cachoeiras
                    e praias bellíssimas, muitas delas são tão pequenas que nem aparecem nos mapas.
                </p>
            </li>
            <li>
                <i class="fas fa-gift"></i>
                <h4>Pacote de Ofertas</h4>
                <p>
                    Sabe aquele descontraído encontro com a família e amigos? Ou um momento relax? Nossa estrutura
                    conta com uma nova diversidade de espaços que proporcionam momentos inesquecíveis.
                </p>
            </li>
            <li>
                <i class="fas fa-home"></i>
                <h4>Acomodações</h4>
                <p>
                    Hotel Paraíso possui 29 unidades, divididas entre 11 chalés, 16 amplas suítes e 2 chalés familiar, todas com
                    TV a cabo, frigobar, além de varanda com rede.
                </p>
            </li>
        </ul>
    </section>
    <section class="newsletter">
        <h3>Newsletter</h3>
        <p>
            Assine nossa newsletter para se atualizado com nossos serviços e a programação de
        </p>
        <hr>
        <form>
            <input type="email" placeholder="Email">
            <button>Cadastrar</button>
        </form>
    </section>
    <footer>
        <ul>
            <li><a href=""><i class="fab fa-facebook"></i></a></li>
            <li><a href=""><i class="fab fa-twitter"></i></a></li>
            <li><a href=""><i class="fab fa-snapchat"></i></a></li>
            <li><a href=""><i class="fab fa-pinterest"></i></a></li>
        </ul>
        <p>
            Todos os direitos reservados - Hotel Paraíso 2023
        </p>
    </footer>
</body>
</html>