-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·223 lines (223 loc) · 11.1 KB
/
index.html
File metadata and controls
executable file
·223 lines (223 loc) · 11.1 KB
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
<!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" />
<title>tangent的小窝</title>
<script src="https://mat1.gtimg.com/qqcdn/test/tailwindcss3.0.23.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Overpass:wght@200;300;400;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="font-sans text-gray-700 antialiased bg-white">
<div class="h-24 z-50 relative container mx-auto px-6 grid grid-cols-3">
<div x-data="{showMenu: false}" class="flex items-center">
<button x-on:click="showMenu = true">
<svg
class="w-8 h-8 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<div x-show="showMenu" class="fixed inset-0 w-full h-full bg-white z-50 text-yellow-900" style="display: none">
<div
class="container h-full mx-auto px-6 py-8 relative z-10 flex flex-col items-center justify-center text-2xl uppercase font-bold tracking-widest space-y-6"
>
<button x-on:click="showMenu = false" class="absolute top-0 left-0 mt-8 ml-6">
<svg
class="w-8 h-8"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
</button>
<a href="/" class="inline-block border-b-4 border-transparent hover:border-yellow-900">Home</a>
<a href="/pages/about-us" class="inline-block border-b-4 border-transparent hover:border-yellow-900"
>About</a
>
<a href="/blog" class="inline-block border-b-4 border-transparent hover:border-yellow-900">Blog</a>
<a href="/contact" class="inline-block border-b-4 border-transparent hover:border-yellow-900">Contact</a>
</div>
<div class="absolute inset-0 w-full h-full bg-yellow-900 bg-opacity-20"></div>
</div>
</div>
<div class="flex items-center justify-center">
<a href="/" class="text-white uppercase font-bold text-2xl tracking-widest">impulse</a>
</div>
<div class="flex items-center justify-end">
<a href="/contact"
><svg
class="w-8 h-8 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
></path></svg
></a>
</div>
</div>
<div class="w-full h-24 bg-yellow-900 bg-opacity-95 absolute top-0 left-0"></div>
<div class="-mt-24 relative w-full py-12 px-12 bg-yellow-900">
<div class="relative z-10 text-center py-24 md:py-48">
<h1 class="text-white text-center text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-display font-bold mb-12">
tangent的小窝
</h1>
<a
href="#"
class="inline-block bg-yellow-800 text-white uppercase text-sm tracking-widest font-heading px-8 py-4"
>Read the blog</a
>
</div>
<div
class="relative z-10 mx-auto max-w-4xl flex justify-between uppercase text-white font-heading tracking-widest text-sm"
>
<a href="/pages/about-us" class="border-b border-white">Find out more</a>
<a href="/contact" class="border-b border-white">Get in touch</a>
</div>
<img
src="https://images.unsplash.com/photo-1490129375591-2658b3e2ee50?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2244&q=80"
class="w-full h-full absolute inset-0 object-cover opacity-70"
/>
</div>
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="bg-white p-12 md:p-24 flex justify-end items-center">
<a href="/blog/this-is-latest-post/"
><img
src="https://images.unsplash.com/photo-1501631259223-89d4e246ed23?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1960&q=80"
class="w-full max-w-md"
/></a>
</div>
<div class="bg-gray-100 p-12 md:p-24 flex justify-start items-center">
<div class="max-w-md">
<div class="w-24 h-2 bg-yellow-800 mb-4"></div>
<h2 class="font-display font-bold text-2xl md:text-3xl lg:text-4xl mb-6">
孤帆明灭宦游处
</h2>
<p class="font-light text-gray-600 text-sm md:text-base mb-6 leading-relaxed">
林断山明竹隐墙，乱蝉衰草小池塘。翻空白鸟时时见，照水红蕖细细香。
</p>
<a
href="/blog/this-is-latest-post/"
class="inline-block border-2 border-yellow-800 font-light text-yellow-800 text-sm uppercase tracking-widest py-3 px-8 hover:bg-yellow-800 hover:text-white"
>Read more</a
>
</div>
</div>
</div>
<div class="flex flex-wrap bg-black">
<a
href="/categories/sandy-beaches/"
class="bg-black relative w-full md:w-auto md:flex-1 flex items-center justify-center h-72 font-heading text-white uppercase tracking-widest hover:opacity-75"
><div class="relative z-10">燕子飞时</div>
<img
src="https://images.unsplash.com/photo-1528855275993-0f4a23fedd62?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
class="absolute inset-0 w-full h-full object-cover opacity-50"
/> </a
><a
href="/categories/forest-trials/"
class="bg-black relative w-full md:w-auto md:flex-1 flex items-center justify-center h-72 font-heading text-white uppercase tracking-widest hover:opacity-75"
><div class="relative z-10">绿水人家绕</div>
<img
src="https://images.unsplash.com/photo-1449495169669-7b118f960251?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80"
class="absolute inset-0 w-full h-full object-cover opacity-50"
/> </a
><a
href="/categories/city-streets/"
class="bg-black relative w-full md:w-auto md:flex-1 flex items-center justify-center h-72 font-heading text-white uppercase tracking-widest hover:opacity-75"
><div class="relative z-10">天涯何处无芳草</div>
<img
src="https://images.unsplash.com/uploads/1411070807173e4d6762d/f84a3a01?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
class="absolute inset-0 w-full h-full object-cover opacity-50"
/></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="bg-white p-12 md:p-24 flex justify-start items-center">
<a href="/blog/my-third-big-post/"
><img
src="https://images.unsplash.com/photo-1521145239174-279dc2227166?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
class="w-full max-w-md"
/></a>
</div>
<div class="md:order-first bg-gray-100 p-12 md:p-24 flex justify-end items-center">
<div class="max-w-md">
<div class="w-24 h-2 bg-yellow-800 mb-4"></div>
<h2 class="font-display font-bold text-2xl md:text-3xl lg:text-4xl mb-6">轻云微月</h2>
<p class="font-light text-gray-600 text-sm md:text-base mb-6 leading-relaxed">
轻云微月二更酒醒渐月华收练孤馆灯青云山擒锦忆往事万千
</p>
<a
href="/blog/my-third-big-post/"
class="inline-block border-2 border-yellow-800 font-light text-yellow-800 text-sm uppercase tracking-widest py-3 px-8 hover:bg-yellow-800 hover:text-white"
>Read more</a
>
</div>
</div>
</div>
<div class="relative w-full py-12 px-12">
<div class="relative z-10 text-center py-12 md:py-24">
<h1 class="text-white text-center text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-display font-bold mb-6">
此生飘荡何时歇
</h1>
<p class="text-white mb-10 text-base md:text-lg font-bold">
一尊酒黄河侧无限事从头说世事无穷劳生有限似此区区长鲜欢
</p>
<a
href="/pages/about-us"
class="inline-block bg-yellow-800 text-white uppercase text-sm tracking-widest font-heading px-8 py-4"
>Find out more</a
>
</div>
<img
src="https://images.unsplash.com/photo-1503516459261-40c66117780a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1949&q=80"
class="w-full h-full absolute inset-0 object-cover"
/>
</div>
<div
class="bg-gray-900 text-white text-opacity-40 font-semibold uppercase text-xs tracking-widest bg-opacity-80 px-12"
>
<div class="container mx-auto grid grid-cols-1 lg:grid-cols-4 gap-12 text-center lg:text-left py-24">
<div><div class="text-white opacity-50 text-4xl font-display">impulse</div></div>
<div>
<div class="font-display text-white uppercase text-sm tracking-widest mb-6">More info</div>
<a href="#" class="block mb-4">About</a> <a href="#" class="block mb-4">Info</a>
<a href="#" class="block mb-4">FAQ</a>
</div>
<div>
<div class="font-display text-white uppercase text-sm tracking-widest mb-6">Helpful Links</div>
<a href="#" class="block mb-4">About</a> <a href="#" class="block mb-4">Info</a>
<a href="#" class="block mb-4">FAQ</a>
</div>
<div>
<div class="font-display text-white uppercase text-sm tracking-widest mb-6">Find out more</div>
<a href="#" class="block mb-4">About</a> <a href="#" class="block mb-4">Info</a>
<a href="#" class="block mb-4">FAQ</a>
</div>
</div>
<div
class="text-sm lg:text-base text-center font-heading font-light tracking-widest uppercase text-white opacity-75 pb-24"
>
<a class="text-color" href="https://beian.miit.gov.cn" target="_blank">京ICP备16009364号-1</a>
</div>
</div>
</body>
</html>