-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (89 loc) · 7.26 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<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;
}
html[data-theme='light'] {
--background-color: #fff;
--text-color: #121416d8;
--link-color: #543fd7;
}
</Style>
</head>
<body class="bg-gradient-to-b from-blue-100 to white" style="background-color: #ffffff !important;" 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>
<div class="hero min-h-screen ">
<div class="hero-content flex-col lg:flex-row-reverse overflow-hidden">
<img src="hero.png" class="max-w-sm rounded-lg shadow-lg" />
<div class="text-gray-600">
<h1 class="text-5xl font-bold">Upload. Select. Generate.</h1>
<p class="py-6"><i>Can't find what to wear today, that's where Mixeo comes into play</i></p>
<a href="DASHBOARD.html"> <button class="btn glass drop-shadow-sm text-gray-500">Get Started</button></a>
</div>
</div>
</div>
<div class="py-16 drop-shadow overflow-hidden">
<div class="container m-auto px-6 space-y-8 text-gray-500 md:px-12">
<div><span class="text-gray-600 text-lg font-semibold">Main features</span>
<h2 class="mt-4 text-2xl text-gray-900 font-bold md:text-4xl">A technology-first approach to fashion <br class="lg:block" hidden> and clothing</h2>
</div>
<div class="mt-16 grid border divide-x divide-y rounded-xl overflow-hidden sm:grid-cols-1 md-grid-cols-2 lg:divide-y-0 lg:grid-cols-3 xl:grid-cols-3">
<div class="relative bg-gradient-to-r from-blue-200 to-blue-100 transition hover:z-[1] hover:shadow-2xl">
<div class="relative p-8 space-y-8"><img src="https://www.reshot.com/preview-assets/icons/CL8RZWG6DV/full-cart-CL8RZWG6DV.svg" class="w-10" width="512" height="512" alt="burger illustration">
<div class="space-y-2">
<h5 class="text-xl text-gray-800 font-medium transition group-hover:text-blue-600">Mixeo Store</h5>
<p class="text-sm text-gray-600">The Mixeo Store is an online shop where you can get branded clothing at discounted prices</p><br><br><br>
</div><a href="store.html" class="flex justify-between items-center group-hover:text-blue-600"><span class="text-sm">Read more</span><span class="-translate-x-4 opacity-0 text-2xl transition duration-300 group-hover:opacity-100 group-hover:translate-x-0">→</span></a>
</div>
</div>
<div class="relative group bg-blue-100 transition hover:z-[1] hover:shadow-2xl">
<div class="relative p-8 space-y-8"><img src="https://www.reshot.com/preview-assets/icons/VLUBDHNJPZ/recycle-VLUBDHNJPZ.svg" class="w-10" width="512" height="512" alt="burger illustration">
<div class="space-y-2">
<h5 class="text-xl text-gray-800 font-medium transition group-hover:text-blue-600">Recycle ' em </h5>
<p class="text-sm text-gray-600">You can deliver your used clothing to a recycling facility with government certification so that it can be turned into new items and sold in the neighbourhood markets.</p><br><br>
</div><a href="recycle.html" class="flex justify-between items-center group-hover:text-blue-600"><span class="text-sm">Read more</span><span class="-translate-x-4 opacity-0 text-2xl transition duration-300 group-hover:opacity-100 group-hover:translate-x-0">→</span></a>
</div>
</div>
<div class="relative group bg-gradient-to-r from-blue-100 to-blue-200 transition hover:z-[1] hover:shadow-2xl">
<div class="relative p-8 space-y-8"><img src="https://www.reshot.com/preview-assets/icons/ZRPJNH793Y/store-ZRPJNH793Y.svg" class="w-10" width="512" height="512" alt="burger illustration">
<div class="space-y-2">
<h5 class="text-xl text-gray-800 font-medium transition group-hover:text-blue-600">Mixeo Thrift</h5>
<p class="text-sm text-gray-600">The Mixeo Thrift is an online consignment store where you can get used clothing at incredibly low prices without consciously thinking about the quality because every item is put through an 18-step cleaning and quality testing procedure before it leaves the warehouse.</p>
</div><a href="thrift.html" class="flex justify-between items-center group-hover:text-blue-600"><span class="text-sm">Read more</span><span class="-translate-x-4 opacity-0 text-2xl transition duration-300 group-hover:opacity-100 group-hover:translate-x-0">→</span></a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>