-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (182 loc) · 11.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TailwindCSS</title>
<link rel="stylesheet" href="./src/css/estilos.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=Be+Vietnam+Pro:wght@400;500;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="font-principal">
<header class="">
<nav class="wrapper h-20 flex items-center justify-between w-[90%] ">
<a href="./" class="w-1/3 max-w-[140px]">
<img src="./src/imgs/logo.svg" alt="logo" class="w-full" />
</a>
<input type="checkbox" id="menu" class="peer hidden">
<label for="menu" class="bg-open-menu w-6 h-5 bg-cover bg-center cursor-pointer peer-checked:bg-colse-menu transition-all z-50 md:hidden "></label>
<div class="fixed inset-0 bg-gradient-to-b from-white/70 to-black/70 translate-x-full peer-checked:translate-x-0 transition-transform md:static md:bg-none md:translate-x-0 z-40">
<ul class="absolute inset-x-0 top-24 p-12 bg-white w-[90%] mx-auto rounded-md h-max text-center grid gap-6 font-bold text-dark-blue shadow-2xl md:w-max md:bg-transparent md:p-0 md:grid-flow-col md:static">
<li class="">
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Product</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Carrers</a>
</li>
<li>
<a href="#">Community</a>
</li>
</ul>
</div>
<a href="" class="button shadow-sm shadow-bright-red/30 hidden py-3 lg:block ">Get Started</a>
</nav>
<section class="wrapper grid gap-8 justify-items-center items-center pb-12 md:grid-cols-2">
<img src="./src/imgs/illustration-intro.svg" alt="imgane de inicio" class="w-full max-w-[400px] md:order-1">
<article class="text-center space-y-6 md:text-left md:space-y-8">
<h1 class="text-4xl font-bold text-very-dark-blue md:text-5xl"> Bring everyone together to buid better prodcuts
</h1>
<p class="text-dark-grayish-blue">
Manage makes if simple for software teams to plan day-to-day tasks while keeping the larger team goals in view
</p>
<a href="#" class="button mx-auto shadow-bright-red/30 md:mx-0 ">Get Started</a>
</article>
</section>
</header>
<figure class="absolute inset-0 overflow-hidden pointer-events-none ">
<img src="./src/imgs/bg-tablet-pattern.svg" alt="" class="absolute w-full -z-10 -top-28 -right-1/4 max-w-2xl md:-right-[2%]">
</figure>
<main class="">
<section class="wrapper text-center py-24 grid gap-12 md:grid-cols-2 md:text-left">
<article>
<h2 class="text-3xl font-bold text-very-dark-blue mb-6 md:text-4xl ">
What's different about Manage?
</h2>
<p class="text-dark-grayish-blue">
Mnage provides all the functionality yout team needs, without the complexity.
Our Software is tailor-made for modern digital product teams.
</p>
</article>
<div class="grid gap-12 ">
<article class="space-y-4 md:space-y-6">
<p class="bg-very-pale-red rounded-l-full font-bold flex items-center md:bg-transparent">
<span class="bg-bright-red text-white px-6 rounded-full py-2">
01
</span>
<span class="flex-1 p-2">
Track company-wide progress
</span >
</p>
<p class="text-dark-grayish-blue text-left ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et quo eos natus aliquid iure maxime unde tempore officia, beatae maiores doloremque quibusdam, tempora nisi laborum eius sapiente, distinctio sunt repellendus.
</p>
</article>
<article class="space-y-4 md:space-y-6">
<p class="bg-very-pale-red rounded-l-full font-bold flex items-center md:bg-transparent">
<span class="bg-bright-red text-white px-6 rounded-full py-2">
02
</span>
<span class="flex-1 p-2">
Advanced built-in reports
</span >
</p>
<p class="text-dark-grayish-blue text-left ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et quo eos natus aliquid iure maxime unde tempore officia, beatae maiores doloremque quibusdam, tempora nisi laborum eius sapiente, distinctio sunt repellendus.
</p>
</article>
<article class="space-y-4 md:space-y-6">
<p class="bg-very-pale-red rounded-l-full font-bold flex items-center md:bg-transparent">
<span class="bg-bright-red text-white px-6 rounded-full py-2">
03
</span>
<span class="flex-1 p-2">
Everything you need in one place
</span >
</p>
<p class="text-dark-grayish-blue text-left ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et quo eos natus aliquid iure maxime unde tempore officia, beatae maiores doloremque quibusdam, tempora nisi laborum eius sapiente, distinctio sunt repellendus.
</p>
</article>
</div>
</section>
<section class="wrapper text-center py-24 max-w-lg mx-auto md:max-w-xl">
<h2 class="text-3xl font-bold text-very-dark-blue md:text-4xl">
What they've said
</h2>
<div class="mt-24 mb-14">
<article class="bg-vary-light-gray pt-16 pb-12 px-4 relative">
<img src="./src/imgs/avatar-anisha.png" alt="imagen anisha" class="absolute w-24 aspect-square -top-12 inset-x-0 mx-auto">
<h3 class="text-xl mb-4 pt-2 font-bold text-very-dark-blue">
Anisha Prado
</h3>
<p class="text-dark-grayish-blue">
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam maiores incidunt cumque minus sapiente at tempora beatae earum repudiandae adipisci nemo dolorem sequi, quas culpa? Excepturi similique architecto quis impedit!"
</p>
</article>
</div>
<a href="#" class="button mx-auto shadow-xl shadow-bright-red/30">Get Started</a>
</section>
<section class="bg-bright-red font-bold">
<div class="wrapper py-24 text-center grid gap-6 md:grid-cols-2 md:justify-between md:items-center md:text-left">
<h2 class="text-4xl text-very-pale-red ">
Simplify how your team works today
</h2>
<a href="#" class="button text-bright-red bg-very-pale-red mx-auto md:mx-0 md:justify-self-end ">Get Started</a>
</div>
</section>
</main>
<figure class="absolute inset-0 overflow-hidden pointer-events-none ">
<img src="./src/imgs/bg-tablet-pattern.svg" alt="" class="absolute w-full -z-10 top-[40%] -right-[63%] max-w-2xl md:-left-1/4 md:top-[75%] ">
</figure>
<footer class="bg-very-dark-blue py-24 ">
<section class="wrapper grid gap-12 justify-items-center footer-area md:footer-area-md md:grid-cols-3 md:justify-items-stretch">
<form class="flex gap-4 w-full min-w-[100px] [grid-area:form] ">
<input type="email" placeholder="Updates in your inbox..." class="min-w-[50px] flex-1 rounded-full px-4">
<input type="submit" value="Go" class="py-3 px-8 bg-bright-red rounded-full text-very-pale-red cursor-pointer hover:opacity-75">
</form>
<nav class="grid grid-cols-[max-content_max-content] justify-between text-white w-4/5 gap-y-4 [grid-area:navigation] md:w-full ">
<a href="" class="hover:text-bright-red">Home</a>
<a href="" class="hover:text-bright-red">Pricing</a>
<a href="" class="hover:text-bright-red">Products</a>
<a href="" class="hover:text-bright-red">About Us</a>
<a href="" class="hover:text-bright-red">Careers</a>
<a href="" class="hover:text-bright-red">Comunity</a>
<a href="" class="hover:text-bright-red">Privacy Policy</a>
</nav>
<div class="flex flex-wrap gap-4 justify-between w-full [grid-area:social-media]">
<a href="#" class="">
<img src="./src/imgs/icon-facebook.svg" alt="img-Facebook" class="w-8 ">
</a>
<a href="#" class="">
<img src="./src/imgs/icon-youtube.svg" alt="img-youtube" class="w-8 ">
</a>
<a href="#">
<img src="./src/imgs/icon-twitter.svg" alt="img-twiter" class="w-8 ">
</a>
<a href="#">
<img src="./src/imgs/icon-pinterest.svg" alt="img-pinterest" class="w-8 ">
</a>
<a href="#">
<img src="./src/imgs/icon-instagram.svg" alt="img-instagram" class="w-8">
</a>
</div>
<a href="" class="[grid-area:logo]">
<img src="./src/imgs/logo-white.svg" alt="">
</a>
<p class="text-dark-grayish-blue text-center [grid-area:copy] md:text-right">
Copyright 2024.All Rights Reserved
</p>
</section>
</footer>
</body>
</html>