-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (82 loc) · 4.51 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
<!DOCTYPE html>
<html lang="pt-br">
<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="icon" href="assets/favicon.ico">
<title>Zandaka</title>
<link rel="stylesheet" href="https://use.typekit.net/ptk0xvh.css">
<link href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-zinc-950 text-white ">
<header>
<nav class="">
<ul class="font-philosopher flex justify-between items-center w-1/2 h-14 mx-auto text-lg">
<li class="px-8 cursor-pointer hover:">Home</li>
<li class="px-8 cursor-pointer">Reserva</li>
<li class="px-8 cursor-pointer">Contato</li>
</ul>
</nav>
<banner class="flex items-center justify-center">
<video src="assets/img/zandaka sushi.mp4" type="video/mp4" autoplay loop muted class="-z-10"></video>
<img src="/assets/img/Frame.png" alt="" class="absolute m-w-auto">
</banner>
</header>
<main class="mx-14">
<section class="grid grid-cols-5 grid-rows-4 place-items-center my-6">
<img src="assets/img/pexels-yang-hao-10692508.jpg" alt=""
class="col-start-2 col-span-2 row-start-1 row-span-2 z-10 p-5 border-2 border-white border-solid">
<img src="assets/img/Group.png" alt="" class="col-start-4 col-end-6 row-start-1 row-end-3 w-1/2">
<img src="assets/img/pexels-volkan-vardar-3887985.jpg" alt=""
class="col-start-1 col-span-2 row-start-2 row-span-3 z-0 p-5 border-2 border-white border-solid">
<p class="font-brother text-base col-start-3 col-span-3 row-start-3 row-span-2 w-3/4">Lorem ipsum dolor sit
amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa
qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="flex justify-between items-center w-1/2 mx-auto my-36">
<img src="/assets/img/Group 1.png" alt="" class="">
<img src="/assets/img/Group 2.png" alt="" class="">
<img src="/assets/img/Group 3.png" alt="" class="">
</section>
<section class="flex font-philosopher text-center text-base">
<div class="w-1/3 mx-2">
<img src="assets/img/pexels-cottonbro-studio-3296394.jpg" alt=""
class="h-[38rem] w-full p-4 object-cover border-solid border-2 border-white">
<p class="mt-8 w-1/2 mx-auto">Ingredientes cuidadosamente selecionados</p>
</div>
<div class="w-1/3 mx-2">
<img src="assets/img/pexels-lubomir-satko-8672036.jpg" alt=""
class="h-[38rem] w-full p-4 object-cover border-solid border-2 border-white">
<p class="mt-8 w-1/2 mx-auto">Clássicos perfeitamente executados</p>
</div>
<div class="w-1/3 mx-2">
<img src="assets/img/pexels-dmitriy-ganin-10806012.jpg" alt=""
class="h-[38rem] w-full p-4 object-cover border-solid border-2 border-white">
<p class="mt-8 w-1/2 mx-auto">Contemporâneos simplesmente surpreendentes</p>
</div>
</section>
<button class="flex mx-auto my-36 px-6 py-2 font-philosopher text-2xl bg-white text-black">Faça sua
reserva</button>
</main>
<footer class="flex justify-between items-center px-12 py-8 border-t-2 border-solid border-white">
<img src="/assets/img/Frame.png" alt="" class="w-1/6">
<div class="text-right text-sm">
<p class="">Segunda à Sexta9:00hrs às 17:30hrs</p>
<p class="">Telefone: (12)3456-7891</p>
<p class="">Avenida Bernadino Bonavita, 500, Jardim Santa Rita</p>
<p class="">São Paulo, SP - 10000-010</p>
</div>
</footer>
</body>
</html>