-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (141 loc) · 8.16 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
<!DOCTYPE html>
<html lang="fr-FR">
<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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.min.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=Instrument+Sans&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="medias/icon/favicon.ico">
<title>Welcome to Tasty Burger</title>
</head>
<body>
<div class="container-fluid common-content">
<header>
<nav class="navbar navbar-dark navbar-expand-md pt-5">
<a class="navbar-brand" href="#"><img src="medias/img/tasty_burger_logo.png" class="company-logo" alt="mapizza logo"></a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav ms-auto text-uppercase">
<li class="nav-item mx-0 mx-lg-1"><a href="#" class="nav-link px-lg-3">Home</a></li>
<li class="nav-item mx-0 mx-lg-1"><a href="#" class="nav-link px-lg-3">Product</a></li>
<li class="nav-item mx-0 mx-lg-1"><a href="#" class="nav-link px-lg-3">Promo</a></li>
<li class="nav-item mx-0 mx-lg-1"><a href="#" class="nav-link px-lg-3">About</a></li>
<li class="nav-item mx-0 mx-lg-1"><a href="#" class="nav-link px-lg-3">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<div data-aos="fade-down-right" data-aos-delay="800">
<section class="promotion-presentation">
<h1 class="fw-bold">Tasty Burger<i class="bi bi-person"></i></h1>
<article>
<h2 class="fw-bold mt-2 mt-5">Promotion</h2>
<div style="width: 25rem;">
<div class="card-body">
<h3 class="card-title fw-bold mt-3">Get Cash back up to 50%</h3>
<p class="card-text mt-5 mb-5">Lorem ipsum dolor sit amet, consectetur piscing elit. Suspendisse consectetur justo eu nunc consequat.</p>
<a href="#" class="btn text-uppercase">Order now</a>
</div>
</div>
</article>
</section>
</div>
</div>
<section id="team-presentation" class="text-center">
<div data-aos="fade-down" data-aos-delay="100" data-aos-duration="4000">
<h2 class="fw-bold">Our chefs</h2>
</div>
<article>
<div data-aos="fade-up" data-aos-delay="100" data-aos-duration="5000">
<h3 class="fw-bold pt-2 pb-3">Three team members</h3>
<p>Lorem ipsdum dolor sit amet, consectetur adipiscing elit. <span>Vivamus lacinia odio vitae vestibulum vestibulum.</span></p>
</div>
<div class="container pt-5 pb-5">
<div data-aos="zoom-in" data-aos-delay="500" data-aos-duration="2000">
<div class="row">
<figure class="figure col-md-4">
<img src="medias/img/chef_aiden_hunter.png" class="figure-img img-fluid rounded" alt="Tasty Burger chef image">
<figcaption class="figure-caption"><b class="text-uppercase">Aiden Hunter</b> <span>Founder</span></figcaption>
</figure>
<figure class="figure col-md-4">
<img src="medias/img/chef_ethel_ramsay.png" class="figure-img img-fluid rounded ethel-ramsay__img" alt="Tasty Burger chef image">
<figcaption class="figure-caption"><b class="text-uppercase">Ethel Ramsay</b> <span>Co-Founder</span></figcaption>
</figure>
<figure class="figure col-md-4">
<img src="medias/img/chef_fannie_stewart.png" class="figure-img img-fluid rounded" alt="Tasty Burger chef image">
<figcaption class="figure-caption"><b class="text-uppercase">Fannie Stewart</b> <span>Co-Founder</span></figcaption>
</figure>
</div>
</div>
</article>
</div>
</section>
<section class="best-burger color-change-2x mx-auto text-center">
<div data-aos="fade-left" data-aos-delay="500" data-aos-duration="2000">
<h2 class="fw-bold text-center">New burger</h2>
<article>
<h3 class="fw-bold text-center mt-5"> The Best McBurger</h3>
<img src="medias/img/hamburger.png" alt="hamburger image">
<p class="mt-5 mb-5">Lorem ipsum dolor sit amet, consectetur adispising elit. <span>Vivamus lacinia odio vitae vestibulum vestibulum.</span></p>
<a href="#" class="btn btn-light text-uppercase">Order now</a>
</article>
</div>
</section>
</main>
<footer class="pt-5 pb-2">
<nav class="col-md-3">
<ul>
<h5 class="fw-bold mb-3">Title Here</h5>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aquilam at dignissim nunc, id maximus ex.
Etiam nec dignissim elit, at dignissim enim.</li>
<div class="d-flex mt-4">
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>
</div>
</ul>
</nav>
<nav>
<ul>
<h5 class="fw-bold mb-3">About</h5>
<li class="mb-2"><a href="#">History</a></li>
<li class="mb-2"><a href="#">Our Team</a></li>
<li class="mb-2"><a href="#">Brand Guidelines</a></li>
<li class="mb-2"><a href="#">Terms & Condition</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</nav>
<nav>
<ul>
<h5 class="fw-bold mb-3">Services</h5>
<li class="mb-2"><a href="#">How to Order</a></li>
<li class="mb-2"><a href="#">Our Product</a></li>
<li class="mb-2"><a href="#">Order Status</a></li>
<li class="mb-2"><a href="#">Promo</a></li>
<li><a href="#">Payment Method</a></li>
</ul>
</nav>
<nav>
<ul>
<h5 class="fw-bold mb-3">Other</h5>
<li class="mb-2"><a href="#">Contact Us</a></li>
<li class="mb-2"><a href="#">Help</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</nav>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="js/app.min.js"></script>
</body>
</html>