-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhow.html
85 lines (84 loc) · 9.03 KB
/
how.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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<Style>
@import url('https://fonts.googleapis.com/css2?family=Raleway: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&display=swap');
body{
font-family: 'Raleway', sans-serif;
}
</Style>
</head>
<body class="bg-gradient-to-b from-blue-100 to white " id="body">
<header>
<nav class="fixed w-full relative">
<div class="container m-auto px-6 md:px-12 lg:px-6">
<div class="flex flex-wrap items-center justify-between py-6 gap-6 md:py-4 md:gap-0">
<div class="w-full flex justify-between lg:w-auto"><a href="index.html" aria-label="logo"><img src="logo.png" class="w-24" alt="mixeo logo" width="144" height="48"></a>
<button aria-label="hamburger" id="hamburger" class="w-10 h-10 mr-2 block md:hidden">
<div aria-hidden="true" id="line" class="inset-0 w-6 h-0.5 mt-2 m-auto rounded bg-gray-500 transtion duration-300"></div>
<div aria-hidden="true" id="line2" class="inset-0 w-6 h-0.5 mt-2 m-auto rounded bg-gray-500 transtion duration-300"></div>
</button></div>
<div id="menu" class="w-full md:flex md:items-center md:w-auto md:space-y-0 md:p-0 md:flex-nowrap hidden">
<div class="block w-full lg:items-center lg:flex ">
<ul class="space-y-6 pb-6 tracking-wide font-medium text-gray-600 lg:pb-0 lg:pr-6 lg:items-center lg:flex lg:space-y-0">
<li><a href="index.html" class="block md:px-3"><span>Home</span></a></li>
<li><a href="about.html" class="block md:px-3" id="link"><span>About Us</span></a></li>
<li><a href="how.html" class="block md:px-3"><span>How it works</span></a></li>
</ul>
<ul class="border-t space-y-2 pt-2 lg:space-y-0 lg:space-x-2 lg:pt-0 lg:pl-2 lg:border-t-0 lg:border-l lg:items-center lg:flex">
<li><a href="sign.html"><button type="button" title="Start buying" class="w-full py-3 px-6 rounded-full text-center transition focus:bg-sky-100 sm:w-max"><span class="block text-cyan-600 font-semibold"> Sign in </span></button></a></li>
<li><a href="DASHBOARD.html"><button type="button" title="Start buying" class="w-full py-3 px-6 rounded-full text-center transition bg-cyan-500 hover:bg-cyan-600 hover:border-cyan-900 hover:border-10 focus:bg-sky-600 sm:w-max"><span class="block text-white font-semibold"> Try it Now </span></button></a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header><br><br><br><br>
<section class="py-6 text-gray-900">
<div class="container mx-auto flex flex-col justify-around p-4 text-center md:p-10 lg:flex-row">
<div class="flex flex-col justify-center lg:text-left">
<p class="mb-1 text-sm font-medium tracking-widest uppercase text-blue-600">Get the app now and cut the hassle. </p>
<h1 class="py-2 text-4xl font-extrabold ">Be the real you.</h1>
</div>
<div class="flex flex-col items-center justify-center flex-shrink-0 mt-6 space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 lg:ml-4 lg:mt-0 lg:justify-end"><button class="inline-flex items-center px-6 py-3 rounded-lg bg-blue-900 text-gray-50"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current w-7 h-7 text-gray-50">
<path d="M 5.4160156 2.328125 L 12.935547 10.158203 C 13.132547 10.363203 13.45925 10.363203 13.65625 10.158203 L 15.179688 8.5742188 C 15.405688 8.3392188 15.354312 7.956875 15.070312 7.796875 C 11.137313 5.571875 6.2620156 2.811125 5.4160156 2.328125 z M 3.140625 2.8476562 C 3.055625 3.0456562 3 3.2629063 3 3.5039062 L 3 20.591797 C 3 20.788797 3.044375 20.970625 3.109375 21.140625 L 11.576172 12.324219 C 11.762172 12.131219 11.762172 11.826813 11.576172 11.632812 L 3.140625 2.8476562 z M 17.443359 9.2578125 C 17.335484 9.2729375 17.233297 9.32375 17.154297 9.40625 L 15.015625 11.632812 C 14.829625 11.825812 14.829625 12.130219 15.015625 12.324219 L 17.134766 14.529297 C 17.292766 14.694297 17.546141 14.729188 17.744141 14.617188 C 19.227141 13.777188 20.226563 13.212891 20.226562 13.212891 C 20.725562 12.909891 21.007 12.443547 21 11.935547 C 20.992 11.439547 20.702609 10.981938 20.224609 10.710938 C 20.163609 10.676937 19.187672 10.124359 17.763672 9.3183594 C 17.664172 9.2623594 17.551234 9.2426875 17.443359 9.2578125 z M 13.296875 13.644531 C 13.165875 13.644531 13.034047 13.696328 12.935547 13.798828 L 5.4746094 21.566406 C 6.7566094 20.837406 11.328781 18.249578 15.050781 16.142578 C 15.334781 15.981578 15.386156 15.599281 15.160156 15.363281 L 13.65625 13.798828 C 13.55775 13.696328 13.427875 13.644531 13.296875 13.644531 z"></path>
</svg><span class="flex flex-col items-start ml-4 leading-none"><span class="mb-1 text-xs">GET IT ON</span><span class="font-semibold title-font">Google Play</span></span></button><button class="inline-flex items-center px-5 py-3 rounded-lg bg-blue-900 text-gray-50"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fill-current w-7 h-7 text-gray-50">
<path d="M 44.527344 34.75 C 43.449219 37.144531 42.929688 38.214844 41.542969 40.328125 C 39.601563 43.28125 36.863281 46.96875 33.480469 46.992188 C 30.46875 47.019531 29.691406 45.027344 25.601563 45.0625 C 21.515625 45.082031 20.664063 47.03125 17.648438 47 C 14.261719 46.96875 11.671875 43.648438 9.730469 40.699219 C 4.300781 32.429688 3.726563 22.734375 7.082031 17.578125 C 9.457031 13.921875 13.210938 11.773438 16.738281 11.773438 C 20.332031 11.773438 22.589844 13.746094 25.558594 13.746094 C 28.441406 13.746094 30.195313 11.769531 34.351563 11.769531 C 37.492188 11.769531 40.8125 13.480469 43.1875 16.433594 C 35.421875 20.691406 36.683594 31.78125 44.527344 34.75 Z M 31.195313 8.46875 C 32.707031 6.527344 33.855469 3.789063 33.4375 1 C 30.972656 1.167969 28.089844 2.742188 26.40625 4.78125 C 24.878906 6.640625 23.613281 9.398438 24.105469 12.066406 C 26.796875 12.152344 29.582031 10.546875 31.195313 8.46875 Z"></path>
</svg><span class="flex flex-col items-start ml-4 leading-none"><span class="mb-1 text-xs">Download on the</span><span class="font-semibold title-font">App Store</span></span></button></div>
</div>
</section>
<div class="py-16 ">
<div class="container m-auto px-6 text-gray-600 md:px-12 xl:px-6">
<div class="space-y-6 md:space-y-0 md:flex md:gap-6 lg:items-center lg:gap-12">
<div class="md:5/12 lg:w-5/12"><video src="MIXEO_final.mov" controls alt="image" loading="lazy" width="490" height="590"><!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/OWdQzbrQdUc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> --></div>
<div class="md:7/12 lg:w-6/12">
<h2 class="text-2xl text-blue-900 font-bold md:text-4xl">How it works ?</h2>
<p class="mt-6 text-gray-600">Our cutting-edge software uses artificial intelligence and machine learning to analyse your fashion tastes and create new ensembles by mixing and combining various pieces of apparel. Mixeo’s advanced machine learning capabilities adapt to your clothing preferences and generate the outfits that you love.</p>
</div>
</div>
</div>
</div>
<section class="p-4 lg:p-8 text-gray-800">
<div class="container mx-auto space-y-12">
<div class="flex flex-col overflow-hidden rounded-md shadow-sm lg:flex-row"><img src="https://www.pcworld.pl/g1/news/thumb/3/4/345584" alt="" class="h-80 bg-gray-500 aspect-video">
<div class="flex flex-col justify-center flex-1 p-6 bg-gray-50"><span class="text-xs uppercase text-gray-600">Buy New Clothes at Affordable Prices</span>
<h3 class="text-3xl font-bold">Mixeo Store</h3>
<p class="my-6 text-gray-600">Want to buy new clothes without having to spend much while not compromising on quality too. Mixeo Store is the place for you.</p>
</div>
</div>
<div class="flex flex-col overflow-hidden rounded-md shadow-sm lg:flex-row-reverse"><img src="https://cdn.shopify.com/s/files/1/0269/9644/1191/files/Secondhand_Shopping_2048x2048.jpg?v=1628535295" alt="" class="h-80 bg-gray-500 aspect-video">
<div class="flex flex-col justify-center flex-1 p-6 bg-gray-50"><span class="text-xs uppercase text-gray-600">Sell or Buy your old clothes</span>
<h3 class="text-3xl font-bold">Mixeo Thrift</h3>
<p class="my-6 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aliquam possimus quas, error esse quos.</p>
</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>