-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (173 loc) · 10.2 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
<!doctype html>
<html data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><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=Lobster&display=swap" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<title>Awesome</title>
<link rel="shortcut icon" type="image/png" href="https://img.icons8.com/nolan/64/fire-heart.png">
<link rel="stylesheet" href="style.min.css">
</head>
<body class="bg-gray-100">
<header x-data="{mobilenavOpen: false}" class="md:navbar sticky top-0 z-50 md:flex items-center justify-between [&>*]:px-8 bg-gray-800 text-white">
<div class="flex items-center justify-between h-20">
<logo>
<a href="#" class="flex items-center gap-1">
<img class="h-10 -mt-1" src="https://img.icons8.com/nolan/64/fire-heart.png" alt="fire-heart"/>
<span>Awesome</span>
</a>
</logo>
<mobile-icon class="md:hidden">
<a @click="mobilenavOpen = !mobilenavOpen" class="h-12 w-12 flex items-center justify-center cursor-pointer select-none hover:bg-gray-700 rounded-lg">
<img x-show="!mobilenavOpen" class="w-6 h-6 select-none" src="https://img.icons8.com/material-outlined/24/ffffff/menu--v1.png" alt="menu--v1"/>
<img x-show="mobilenavOpen" x-cloak class="w-6 h-6 select-none" src="https://img.icons8.com/ios-glyphs/30/ffffff/delete-sign.png" alt="delete-sign"/>
</a>
</mobile-icon>
</div>
<nav x-show="mobilenavOpen" x-cloak class="text-sm md:!block bg-gray-800 h-screen w-screen md:h-auto md:w-auto -mt-20 md:mt-0 absolute md:relative z-[-1]"
x-transition:enter="duration-500 ease-out"
x-transition:enter-start="opacity-0 -translate-y-96 scale-80"
x-transition:enter-end="transition opacity-100 translate-y-0 scale-100 delay-150"
>
<ul class="flex items-center gap-2 navitems flex-col md:flex-row gap-8 md:gap-0 justify-center h-full -translate-y-10 md:translate-y-0 ">
<li><a href="#">Home</a></li>
<li ><a href="#">Create Post</a></li>
<li x-data="{ dropdownOpen: false }" class="relative">
<a @click="dropdownOpen = !dropdownOpen" @click.away="dropdownOpen = false" class="cursor-pointer select-none" >
<img class="h-8 rounded-full object-cover" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
Jack
<img x-bind:class="dropdownOpen ? 'transition rotate-180 duration-300': 'transition delay-100 duration-300'" class="w-4" src="https://img.icons8.com/cfcfcf/ios-glyphs/30/expand-arrow--v1.png" alt="expand-arrow--v1"/>
</a>
<div x-show="dropdownOpen" x-cloak class="absolute right-0 bg-white text-black shadow rounded-lg w-40 p-2 z-20"
x-transition:enter="duration-300 ease-out"
x-transition:enter-start="opacity-0 -translate-y-5 scale-90"
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
>
<ul class="hoverlist [&>li>a]:justify-end">
<li><a href="">My Profile</a></li>
<li><a href="">Log Out</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<hero class="grid bg-gray-700 text-white text-center bg-cover bg-center bg-[url('assets/16142509342_6880339b53_k.jpg')] z-10 relative" >
<div class="overlay bg-gray-800 bg-opacity-50 w-full h-full "></div>
<div class="overlay py-24 px-10">
<h1 class="titleBlip">Awesome Photos and Captions</h1>
<p class="text-lg font-bold mb-5">Share your favourite Photos from Flickr and add a great caption</p>
<a class="btn bg-primary text-white hover:bg-primaryhover hover:text-black border-none" href="#">Get Started</a>
</div>
</hero>
<content x-data="{ mobilesidebarOpen: false }" class="grid grid-cols-3 max-w-7xl mx-auto mt-6 pb-8">
<mobile-sidebar-nav @click="mobilesidebarOpen = !mobilesidebarOpen" class="md:hidden col-span-full mx-auto mb-6 z-10 relative">
<a class="flex items-center cursor-pointer select-none font-bold hover:bg-gray-200 rounded-lg p-3">
<span>Categories</span>
<img x-bind:class="mobilesidebarOpen && 'transition duration-300 rotate-180 delay-150'" class="w-6 ml-1.5" src="https://img.icons8.com/plumpy/24/expand-arrow.png" alt="expand-arrow"/>
</a>
</mobile-sidebar-nav>
<main class="col-span-full md:col-span-2 mx-[5%] md:mx-[10%] order-2 md:order-1 ">
<article class="card card-normal bg-base-100 shadow-xl">
<div class="card-body h-14 px-4 flex-row items-center justify-between">
<h3 class="card-title text-lg font-bold w-[50%] truncate">Little Meow</h3>
<div class="text-sm text-gray-500">photo @ <a href="#" target="_blank" class="hover:underline">Jack Smart</a></div>
</div>
<figure><img class="w-full h-[35rem] rounded-sm object-cover object-top " src="assets/meow.jpg" alt="Cool Caat" /></figure>
<div class="p-4 pb-2">
<a href="#" class="flex items-center gap-1 mb-4">
<img class="w-8 h-8" src="https://img.icons8.com/ios/50/happy--v1.png" alt="happy--v1"/>
<span class="font-bold hover:underline">Fafali</span>
</a>
<p class="text-5xl mb-10 px-4 lobster">Lil Meow be cooking!<br>Purr...</p>
<div class="flex items-center gap-2 text-sm mt-5 mb-5 meowtags">
<a href="#">Animals</a>
<a href="#">Cute</a>
</div>
<div class="flex items-center justify-between text-sm px-2 mb-5 ">
<a href="#" class="font-bold hover:underline">Comments<span class="font-light text-gray-500 ml-2">3</span></a>
<div class="flex items-center gap-4 [&>a:hover]:underline">
<div class="flex items-center gap-1">
<img class="w-5 -mt-1" src="https://img.icons8.com/nolan/64/fire-heart.png">1</div>
<a href="#">Like</a>
<a href="#">Edit</a>
<a href="#">Delete</a>
</div>
</div>
</div>
</article>
</main>
<aside x-show="mobilesidebarOpen" x-cloak class="md:!block col-span-full md:col-span-1 mx-[5%] md:mr-[20%] order-1 md:order-2 "
x-transition:enter="duration-300 ease-out"
x-transition:enter-start="opacity-0 -mt-96"
x-transition:enter="opacity-100 mt-0"
>
<section class="card card-normal bg-base-100 shadow-xl p-4 ">
<h2 class="">Categories</h2>
<ul class="hoverlist">
<li class="highlight"><a href="">
<img class="iconify" src="https://img.icons8.com/ios/50/night-landscape.png" alt="night-landscape"/> <span class="font-bold text-sm">Landscape</span>
</a></li>
<li><a href="">
<img class="iconify" src="https://img.icons8.com/ios/50/men-age-group-4.png" alt="men-age-group-4"/> <span class="font-bold text-sm">People</span>
</a></li>
<li><a href="">
<img class="iconify" src="https://img.icons8.com/cotton/64/dog--v6.png" alt="dog--v6"/>
<span class="font-bold text-sm">Animals</span>
</a></li>
<li><a href="">
<img class="iconify" src="https://img.icons8.com/ios/50/modern-art.png" alt="modern-art"/>
<span class="font-bold text-sm">Abstract</span>
</a></li>
<li><a href="">
<img class="iconify" src="https://img.icons8.com/ios-filled/50/black-and-white.png" alt="black-and-white"/>
<span class="font-bold text-sm">Black & White</span>
</a></li>
</ul>
</section>
<section class="card card-normal bg-base-100 shadow-xl p-4 mt-6">
<h2 class="">Top Photos</h2>
<ul class="hoverlist">
<li><a href="">
<div class="avatar mr-3">
<div class="w-8 rounded">
<img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" alt="Tailwind-CSS-Avatar-component" />
</div>
</div>
<img class="w-6 h-6 rounded-full object-cover mr-0.5" src="https://img.icons8.com/ios/50/a9a9a9/happy--v1.png" alt="happy--v1"/>
<span class="font-bold text-sm mr-1">Amy</span>
<span class="text-sm font-light text-gray-500">{10 likes}</span>
</a></li>
<li><a href="">
<div class="avatar mr-3">
<div class="w-8 rounded">
<img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" alt="Tailwind-CSS-Avatar-component" />
</div>
</div>
<img class="w-6 h-6 rounded-full object-cover mr-0.5" src="https://img.icons8.com/ios/50/a9a9a9/happy--v1.png" alt="happy--v1"/>
<span class="font-bold text-sm mr-1">Nathan</span>
<span class="text-sm font-light text-gray-500">{4 likes}</span>
</a></li>
</ul>
</section>
<section class="card card-normal bg-base-100 shadow-xl p-4 mt-6">
<h2 class="">Top Caption</h2>
<ul class="hoverlist">
<li><a href="">
<img class="w-8 h-8 rounded-full object-cover mr-1" src="https://img.icons8.com/ios/50/a9a9a9/happy--v1.png" alt="happy--v1"/>
<span class="font-bold text-sm mr-1">Amy</span>
<span class="text-sm font-light text-gray-500">{10 likes}</span>
</a></li>
<li><a href="">
<img class="w-8 h-8 rounded-full object-cover mr-1" src="https://img.icons8.com/ios/50/a9a9a9/happy--v1.png" alt="happy--v1"/>
<span class="font-bold text-sm mr-1">Nathan</span>
<span class="text-sm font-light text-gray-500">{4 likes}</span>
</a></li>
</ul>
</section>
</aside>
</content>
</body>
</html>