-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
319 lines (302 loc) · 20.6 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>agence de design graphique</title>
<link rel="stylesheet" href="./src/css/output.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body class="w-screen relative overflow-x-hidden">
<div id="mouse_follow" class="fixed hidden lg:block z-50 mix-blend-multiply opacity-70 h-5 w-5 border bg-transparent border-orange-600 rounded-full top-3 left-3"></div>
<main class="">
<section id="introbox" class="fixed top-0 left-0 bg-orange-600 h-screen w-screen z-50 grid place-content-center">
<div class=" overflow-hidden">
<h2 id="intro" class="text-white text-3xl lg:text-7xl font-bold">
<span class="inline-block">S</span>
<span class="inline-block">h</span>
<span class="inline-block">o</span>
<span class="inline-block">o</span>
<span class="inline-block">t</span>
<span class="ml-2 "></span>
<span class="inline-block">o</span>
<span class="inline-block">f</span>
<span class="inline-block">f</span>
<span class="inline-block">.</span>
</h2>
</div>
</section>
<header id="header" class="lg:container lg:mx-auto p-4 lg:p-10">
<div class="mb-6 text-gray-900 flex justify-between items-center">
<div class="flex flex-col lg:flex-row items-center">
<h1 id="logo" class="text-[1.3rem] lg:text-4xl font-extrabold text-gray-900 flex flex-col lg:flex-row "><span>Shoot</span> <span class="lg:ml-1">Off.</span></h1>
<nav class="lg:ml-16 ">
<ul id="menu" class="flex h-max border lg:border-none left-5 lg:left-0 mt-5 lg:mt-0 rounded-3xl lg:h-max scale-0 lg:scale-100 duration-300 absolute z-40 bg-white w-[80vw] lg:w-max p-6 lg:p-0 lg:relative flex-col lg:flex-row">
<li id="link1" class="mt-4 lg:mt-0 lg:ml-5 text-lg"><a href="#header" class="block hover:text-orange-600 duration-300">Acceuil</a></li>
<li id="link2" class="mt-4 lg:mt-0 lg:ml-5 text-lg"><a href="#project_section" class="block hover:text-orange-600 duration-300">Réalisations</a></li>
<li id="link3" class="mt-4 lg:mt-0 lg:ml-5 text-lg"><a href="#pricing" class="block hover:text-orange-600 duration-300">Tarif</a></li>
</ul>
</nav>
</div>
<div class="flex items-center">
<a id="rdvbtn" href="#contact" class="block border font-medium border-orange-600 p-2 px-4 lg:p-4 lg:px-7 rounded-full relative">
Prendre RDV
<div class="absolute -top-3 lg:-top-4 h-5 w-5 text-sm lg:text-lg lg:h-8 lg:w-8 bg-red-600 text-white rounded-full right-2 flex justify-center items-center">1</div>
</a>
<button id="menubtn" title="toggle nav btn" class="lg:hidden ml-2 lg:ml-0 z-40 relative mr-4">
<div id="bar-1" class="bg-gray-800 h-0.5 w-6 rounded-full duration-300"></div>
<div id="bar-2" class="bg-gray-800 h-0.5 w-6 rounded-full duration-300 mt-2"></div>
</button>
</div>
</div>
</header>
<!-- hero section -->
<section id="hero" class="mb-8 p-4 lg:p-0">
<div id="" class="grid gap-4 place-content-center">
<div class="flex text-gray-900 flex-col items-center">
<h2 id="herotext" class="text-4xl lg:text-7xl lg:w-[80vw] text-center font-extrabold">Nous réalisons des <span class="text-orange-600">affiches</span> et <span class="text-orange-600">logos</span> Professionnels</h2>
<p id="heroparagraph" class="text-center text-lg mt-8 lg:w-[40vw] text-gray-600">Démarquez vous avec une image de marque Professionnelle et un design qui repond à vos besoins, nous avons des offres tout en un</p>
</div>
<div id="btnBox" class="flex flex-col lg:flex-row mt-4 lg:items-center lg:justify-center lg:mt-8">
<a id="" href="#pricing" class="block btntarifs bg-orange-600 hover:scale-90 duration-300 text-center p-3 text-white text-lg lg:p-4 px-7 rounded-full">Nos Tarifs</a>
<a id="" href="#contact" class="block btnrdvv2 border mt-5 text-center hover:scale-90 duration-300 p-3 lg:mt-0 lg:w-max font-medium lg:ml-4 lg:p-4 px-7 rounded-full relative text-gray-900">
Prendre un RDV
</a>
</div>
<div class="flex mt-8 mb-8 justify-center">
<div class="lg:w-[80vw] grid lg:grid-cols-4 gap-4 lg:gap-6">
<div id="herobox1" class="h-[40vh] rounded-3xl border overflow-hidden ">
<img src="./img/work (13).png" class="h-full w-full object-cover" alt="">
</div>
<div id="herobox2" class=" h-[40vh] lg:mt-10 overflow-hidden rounded-3xl border ">
<img src="./img/work (18).png" class="h-full w-full object-cover" alt="">
</div>
<div id="herobox3" class=" h-[40vh] rounded-3xl overflow-hidden border ">
<img src="./img/work (3).png" class="h-full w-full object-cover" alt="">
</div>
<div id="herobox4" class=" h-[40vh] lg:mt-10 overflow-hidden rounded-3xl border ">
<img src="./img/work (5).png" class="h-full w-full object-cover" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- Logo section -->
<section id="logoSection" class="p-4 lg:p-6">
<div class="flex justify-center">
<p id="logopara" class="text-center text-lg text-gray-500">On a Travaillé avec +30 Clients</p>
</div>
<div class="mt-5 flex justify-center">
<div class="grid lg:w-[80vw] lg:grid-cols-4 grid-cols-2">
<div id="logoimg1" class="grid place-content-center"><img src="./img/sb.png" width="100" alt=""></div>
<div id="logoimg2" class="grid place-content-center"><img src="./img/espacesis.png" width="100" alt=""></div>
<div id="logoimg3" class="grid place-content-center"><img src="./img/newdevcom logo.png" width="100" alt=""></div>
<div id="logoimg4" class="grid place-content-center"><img src="./img/gdscudbl.png" width="170" alt=""></div>
</div>
</div>
</section>
<!-- Projet section -->
<section id="project_section" class="lg:container lg:mx-auto p-4 lg:p-6 mt-8 mb-8 lg:mb-16">
<div>
<div id="worktext" class="mb-8">
<p class="text-3xl text-center font-bold lg:text-5xl">Nos Récents <span class="text-orange-600">Projets</span></p>
<p class="text-center text-lg mb-8 mt-3 text-gray-500">jetez un oeil à nos récents travaux</p>
</div>
<div class="flex justify-center mt-8">
<div class="grid gap-4 mt-8 w-full lg:w-[85vw] lg:gap-6 lg:grid-cols-4">
<div id="work1" class="h-[40vh] rounded-3xl border overflow-hidden">
<img src="./img/work (1).png" class="h-full w-full object-cover" alt="">
</div>
<div id="work2" class="h-[40vh] rounded-3xl border overflow-hidden ">
<img src="./img/work (10).png" class="h-full w-full object-cover" alt="">
</div>
<div id="work3" class="h-[40vh] rounded-3xl border overflow-hidden">
<img src="./img/work (16).png" class="h-full w-full object-cover" alt="">
</div>
<div id="work4" class="h-[40vh] rounded-3xl border overflow-hidden">
<img src="./img/work (15).png" class="h-full w-full object-cover" alt="">
</div>
<div id="work5" class="h-[40vh] rounded-3xl border overflow-hidden">
<img src="./img/work (14).png" class="h-full w-full object-cover" alt="">
</div>
<div id="work6" class="h-[40vh] rounded-3xl border overflow-hidden">
<img src="./img/work (9).png" class="h-full w-full object-cover" alt="">
</div>
<div id="work7" class="h-[40vh] rounded-3xl border overflow-hidden">
<img src="./img/work (7).png" class="h-full w-full object-cover" alt="">
</div>
<div id="work8" class="h-[40vh] rounded-3xl border overflow-hidden">
<img src="./img/work (2).png" class="h-full w-full object-cover" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- Pricing section -->
<section id="pricing" class="lg:container lg:mx-auto p-4 lg:p-6 mt-8 mb-8 lg:mb-16">
<div>
<div id="pricingtext" class="mb-8">
<p class="text-3xl text-center font-bold lg:text-5xl">Des <span class="text-orange-600">Prix</span> Abordables</p>
<p class="text-center text-lg mb-8 mt-3 text-gray-500">Choisissez votre offre et commandez</p>
</div>
<div class="flex justify-center mt-8">
<div class="grid gap-4 mt-8 w-full lg:w-[85vw] lg:gap-6 md:grid-cols-2 lg:grid-cols-4">
<div id="pricing1" class="h-[60vh] rounded-3xl p-4 border flex flex-col justify-between relative">
<div>
<div class="flex flex-col items-center">
<h3 class="text-5xl font-bold">32 <span class="text-2xl">$</span></h3>
<p class="mt-1">Affiche Simple</p>
</div>
<div class="mt-4 border-t p-4">
<p><span><i class='bx bx-check'></i></span> Livraison après 12h</p>
<p><span><i class='bx bx-check'></i></span> Format au choix</p>
<p><span><i class='bx bx-check'></i></span> Design simple</p>
<p><span><i class='bx bx-check'></i></span> Modifications illimités</p>
</div>
</div>
<div class="">
<a href="" class="p-3 block text-center bg-orange-600 text-white rounded-2xl w-full">Commander</a href="">
</div>
</div>
<div id="pricing2" class="h-[60vh] rounded-3xl p-4 border flex flex-col justify-between">
<div>
<div class="flex flex-col items-center">
<h3 class="text-5xl font-bold">53 <span class="text-2xl">$</span></h3>
<p class="mt-1">Affiche Professionnelle</p>
</div>
<div class="mt-4 border-t p-4">
<p><span><i class='bx bx-check'></i></span> Livraison après 24h</p>
<p><span><i class='bx bx-check'></i></span> Format au choix</p>
<p><span><i class='bx bx-check'></i></span> Design complexe</p>
<p><span><i class='bx bx-check'></i></span> Modifications illimités</p>
</div>
</div>
<div class="">
<a href="" class="p-3 block text-center bg-orange-600 text-white rounded-2xl w-full">Commander</a href="">
</div>
</div>
<div id="pricing3" class="h-[60vh] rounded-3xl p-4 border flex flex-col justify-between">
<div>
<div class="flex flex-col items-center">
<h3 class="text-5xl font-bold">22 <span class="text-2xl">$</span></h3>
<p class="mt-1">Logo simple + charte graphique</p>
</div>
<div class="mt-4 border-t p-4">
<p><span><i class='bx bx-check'></i></span> Livraison après 24h</p>
<p><span><i class='bx bx-check'></i></span> charte graphique</p>
<p><span><i class='bx bx-check'></i></span> Présentation sur mockup</p>
<p><span><i class='bx bx-check'></i></span> 5 Modifications max</p>
<p><span><i class='bx bx-check'></i></span> Différents formats</p>
</div>
</div>
<div class=" flex items-end h-[14vh]">
<a href="" class="p-3 block text-center bg-orange-600 text-white rounded-2xl w-full">Commander</a href="">
</div>
</div>
<div id="pricing4" class="h-[60vh] rounded-3xl p-4 border flex flex-col justify-between">
<div>
<div class="flex flex-col items-center">
<h3 class="text-5xl font-bold">75 <span class="text-2xl">$</span></h3>
<p class="mt-1">Image de marque</p>
</div>
<div class="mt-4 border-t p-4">
<p><span><i class='bx bx-check'></i></span> Livraison après 48h</p>
<p><span><i class='bx bx-check'></i></span> Différents formats</p>
<p><span><i class='bx bx-check'></i></span> Affiches & logos</p>
<p><span><i class='bx bx-check'></i></span> Charte graphique</p>
<p><span><i class='bx bx-check'></i></span> présentation sur mockups</p>
<p><span><i class='bx bx-check'></i></span> Animation logo</p>
</div>
</div>
<div class=" flex items-end h-[18vh]">
<a href="" class="p-3 block text-center bg-orange-600 text-white rounded-2xl w-full">Commander</a href="">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dernier CTA -->
<section id="cta" class="mb-8 p-4 lg:p-0 lg:mb-16 flex justify-center">
<div id="ctabox" class="grid gap-4 place-content-center lg:border lg:w-[85vw] lg:h-[80vh] p-4 lg:p-6 rounded-3xl">
<div class="flex text-gray-900 flex-col items-center">
<h2 class="text-4xl lg:text-5xl lg:w-[70vw] text-center font-extrabold">Encore Hésitant ? <span class="text-orange-600">Réserve</span> un RDV pour parler de<span class="text-orange-600"> ton Projet</span> </h2>
<p class="text-center text-lg mt-8 lg:w-[40vw]">nous parlerons de tout ce qui concerne votre projet de design, conception logo et tout</p>
</div>
<div class="flex flex-col lg:flex-row mt-4 lg:items-center lg:justify-center lg:mt-8">
<a href="#pricing" class="block bg-gray-900 text-center p-3 text-white text-lg lg:p-4 px-7 rounded-full">Nos Tarifs</a>
<a href="#contact" class="block border mt-5 text-center p-3 lg:mt-0 lg:w-max font-medium border-orange-600 lg:ml-4 lg:p-4 px-7 rounded-full relative">
Prendre un RDV
</a>
</div>
</div>
</section>
<!-- Contact section -->
<section id="contact" class="flex flex-col lg:flex-row mt-8 mb-8 lg:mb-16 p-4 lg:p-6 lg:justify-around">
<div class="lg:w-[40vw] bg-orange-600/15 flex flex-col justify-around rounded-3xl p-5">
<h3 class="text-2xl lg:text-4xl font-bold text-center lg:text-left">Nous contacter pour prendre un <span class="text-orange-600">rendez-vous</span></h3>
<div class="mt-8 flex flex-col text-xl lg:text-2xl">
<a href="" class="flex items-center">
<span class="text-orange-600 mr-2 bg-orange-600/20 shadow-md p-2 rounded-full h-10 w-10 grid place-content-center"><i class='bx bxl-whatsapp'></i></span>
<span class="underline font-thin">0973387383</span>
</a>
<a href="" class="flex items-center mt-5">
<span class="text-orange-600 mr-2 bg-orange-600/20 shadow-md p-2 rounded-full h-10 w-10 grid place-content-center"><i class='bx bxl-instagram' ></i></span>
<span class="underline font-thin"> shoot_off</span>
</a>
<a href="" class="flex items-center mt-5">
<span class="text-orange-600 mr-2 bg-orange-600/20 shadow-md p-2 rounded-full h-10 w-10 grid place-content-center"><i class='bx bxl-linkedin'></i></span>
<span class="underline font-thin">shoot_off_agency</span>
</a>
</div>
</div>
<div class="flex justify-center">
<form action="" class="border rounded-lg mt-8 lg:mt-0 p-4 lg:w-[30vw]">
<div>
<input type="email" name="" placeholder="votre email" id="" class="border p-2 w-full rounded-lg outline-none focus:border-orange-600/70">
<textarea name="" placeholder="Votre message ici.." id="" cols="30" class="border mt-4 w-full outline-none focus:border-orange-600/70 p-2 rounded-lg" rows="10"></textarea>
<div class="mt-4">
<button type="submit" class="p-2 bg-orange-600 px-8 rounded-lg text-white">Envoyer</button>
</div>
</div>
</form>
</div>
</section>
<!-- Footer section -->
<section class="bg-orange-600 rounded-t-[2rem] lg:rounded-t-[3rem] p-4 lg:p-6">
<footer class="lg:container lg:h-[50vh] text-white flex flex-col justify-between lg:mx-auto p-4 lg:p-9">
<section class=" h-max flex flex-col lg:flex-row lg:justify-between ">
<div>
<h1 class="text-2xl lg:text-4xl font-extrabold ">Shoot Off.</h1>
</div>
<div class="lg:w-[70vw] mt-8 lg:mt-0 flex justify-center">
<ul class="grid grid-cols-2 gap-4 lg:gap-6 lg:grid-cols-3">
<li><a href="">Acceuil</a></li>
<li><a href="">Réalisation</a></li>
<li><a href="">Linkedin</a></li>
<li><a href="">Instagram</a></li>
</ul>
</div>
</section>
<section class=" flex flex-col lg:flex-row lg:justify-between border-t mt-4 lg:mt-3">
<p class="pt-6">© 2024 - Shoot off Agency - <a href="" class="underline">Mentions légales</a></p>
</section>
</footer>
</section>
</main>
<script src="https://unpkg.com/split-type"></script>
<script src="https://unpkg.com/@studio-freight/[email protected]/dist/lenis.min.js"></script>
<script src="./src/js/output.js"></script>
<script>
const lenis = new Lenis()
lenis.on('scroll', (e) => {
console.log(e)
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
</script>
</body>
</html>