-
Notifications
You must be signed in to change notification settings - Fork 0
/
p3.html
189 lines (176 loc) · 11.1 KB
/
p3.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
<!DOCTYPE html>
<html lang="en">
<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">
<title>spectral</title>
<link rel="stylesheet" href="tailwind.min.css">
</head>
<body class="bg-gray-600">
<div class=" absolute md:fixed filter brightness-50 h-96">
<img src="images/banner2.jpg" alt="There's no image here" class="min-h-full min-w-full">
</div>
<div class="flex flex-col relative z-50 justify-center items-center h-96 md:h-screen space-y-5">
<h1 class="py-4 px-5 border-t-4 border-b-4 border-white text-white text-5xl font-semibold uppercase ">Spectral
</h1>
<h4 class="text-white w-80 text-center ">
Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br />
fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.
</h4>
<a href="#"
class="text-white bg-red-600 py-3 hover:bg-red-400 transition px-10 rounded uppercase text-sm space-y-10 ">activate</a>
</div>
<div class="flex flex-col relative z-50 bg-green-500 space-y-10 text-white justify-center items-center py-20 px-0">
<h1 class="text-2xl font-semibold md: w-1/2 border-b-2 border-gray-700 tracking-widest py-5">Arcu aliquet vel
lobortis ata nisl eget augue amet aliquet nisl cep donec</h1>
<p class="md:w-1/2 px-10">eget augue amet aliquet nisl cep donec</p>
<div class="flex flex-row px-10 space-x-20 py-10">
<div class="border border-gray-800 transform hover:scale-150 p-6 transform -rotate-45">
<div class="transform rotate-45">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
</div>
<div class="border border-gray-800 transform hover:scale-150 p-6 transform -rotate-45">
<div class="transform rotate-45">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
</div>
<div class="border border-gray-800 transform hover:scale-150 -100 p-6 transform -rotate-45">
<div class="transform rotate-45 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
</div>
<div class="flex flex-col relative z-50 md:flex-row bg-gray-800 border-b border-gray-400 text-white">
<div class="w-96">
<img src="images/spotlight03.jpg" class="md:h-80" alt="image is missing">
</div>
<div class="flex flex-col p-10 items-center justify-center space-y-8">
<div class="w-full">
<H1 class="text-3xl font-light">Welcome</H1>
</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla alias quam similique
consequatur doloremque perspiciatis omnis ad reprehenderit quae incidunt.</p>
</div>
</div>
<div class="flex flex-col relative z-50 md:flex-row-reverse bg-gray-800 border-b border-gray-400 text-white">
<div class="w-96">
<img src="images/spotlight03.jpg" class="md:h-80" alt="image is missing">
</div>
<div class="flex flex-col p-10 items-center justify-center space-y-8">
<div class="w-full">
<H1 class="text-3xl font-light">Welcome</H1>
</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla alias quam similique
consequatur doloremque perspiciatis omnis ad reprehenderit quae incidunt.</p>
</div>
</div>
<div class="flex flex-col bg-indigo-900 relative py-20 space-y-10 justify-center items-center z-50">
<h1 class="text-center text-white border-b-2 border-gray-700 uppercase text-3xl font-semibold">THE CONSUMER IS
NOW MOVING AROUND</h1>
<h4 class="text-white text-light">Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend
fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</h4>
<div class="my-2 "></div>
<div class="grid grid-cols-2 md:h-full bg-indigo-800 px-20 gap-2">
<div
class="bg-gray-800 text-white p-3 space-y-8 pb-20 text-center tracking-widest mr-10 m-10 justify-center text-align:left sm-w-28">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-28 mt-2 text-green-300" viewBox="0 0 20 20"
fill="currentColor">
<path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
<path
d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
</svg>
ARCU ACCUMSAN
<h4>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean
ligula consequat consequat.</h4>
</div>
<div
class="bg-gray-800 text-white p-3 space-y-8 pb-20 text-center tracking-widest mr-10 m-10 justify-center text-align:left sm-w-28">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-28 mt-2 text-green-300" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
ARCU ACCUMSAN
<h4>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean
ligula consequat consequat.</h4>
</div>
<div
class="bg-gray-800 text-white p-3 space-y-8 pb-20 text-center tracking-widest mr-10 m-10 justify-center text-align:left sm-w-28">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-28 mt-2 text-green-400" viewBox="0 0 20 20"
fill="currentColor">
<path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
<path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
<path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
</svg>
ARCU ACCUMSAN
<h4>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean
ligula consequat consequat.</h4>
</div>
<div
class="bg-gray-900 text-white p-3 space-y-8 pb-20 text-center tracking-widest mr-10 m-10 justify-center text-align:left sm-w-28">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-28 mt-2 text-green-300" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
ARCU ACCUMSAN
<h4>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean
ligula consequat consequat.</h4>
</div>
<div
class="bg-gray-800 text-white p-3 space-y-8 pb-20 text-center tracking-widest mr-10 m-10 justify-center text-align:left sm-w-28">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-28 mt-2 text-green-300" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
ARCU ACCUMSAN
<h4>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean
ligula consequat consequat.</h4>
</div>
<div
class="bg-gray-800 transform text-white p-3 space-y-8 pb-20 text-center tracking-widest mr-10 m-10 justify-center text-align:left sm-w-28">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-28 mt-2 text-green-300" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
ARCU ACCUMSAN
<h4>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean
ligula consequat consequat.</h4>
</div>
<div
class="bg-gray-500 text-3xl text-white justify-center items-center text-center ml-25 py-3 min-w-full w-">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing.</h1>
</div>
<div class="">
<a href="#"
class="bg-red-600 uppercase px-20 py-2 rounded text-1xl text-white ml-20 hover:bg-red-400">activate</a>
<br> <br>
</div>
</div>
<div class="text-white text-2xl text-light opacity-10">
© copyright mohamed 2021
</div>
</div>
</body>
</html>