Skip to content

Commit 0b30d74

Browse files
solygambassolygambas
committed
add finished navbar and readme
1 parent c9fb116 commit 0b30d74

File tree

6 files changed

+253
-23
lines changed

6 files changed

+253
-23
lines changed

‎README.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
1-
# Tailwind CSS
1+
# Ninja Food - Tailwind CSS
22

33
A recipe website to understand Tailwind CSS basics.
44

5+
<p align="center">
6+
<img src="screenshot.png">
7+
</p>
8+
9+
## Features
10+
11+
- setting up Tailwind CSS for development mode.
12+
- handling fonts, colors, margin, padding and borders.
13+
- extending theme colors and customizing font with tailwind.config.js.
14+
- using flexbox, grid and responsive classes.
15+
- reusing classes for cards, badges and buttons with @apply directive.
16+
- displaying icons from Heroicons.
17+
- building a responsive navbar.
18+
- adding effects and transitions on hover.
19+
520
Based on [Tailwind CSS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw) by Shaun Pelling - The Net Ninja (2020).

‎public/index.html

Lines changed: 180 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,107 @@
77
<title>Food Ninja</title>
88
</head>
99
<body class="text-gray-600 font-body">
10-
<div class="">
11-
<div class="">
12-
<nav>
13-
<div class="">
10+
<div class="grid md:grid-cols-3 lg:grid-cols-4">
11+
<div class="md:col-span-1 md:flex md:justify-end">
12+
<nav class="text-right">
13+
<div class="flex justify-between items-center">
1414
<h1 class="font-bold uppercase p-4 border-b border-gray-100">
15-
<a href="/">Food Ninja</a>
15+
<a href="/" class="hover:text-gray-700">Food Ninja</a>
1616
</h1>
17+
<div class="px-4 cursor-pointer md:hidden" id="burger">
18+
<svg
19+
class="w-6"
20+
xmlns="http://www.w3.org/2000/svg"
21+
fill="none"
22+
viewBox="0 0 24 24"
23+
stroke="currentColor"
24+
>
25+
<path
26+
stroke-linecap="round"
27+
stroke-linejoin="round"
28+
stroke-width="2"
29+
d="M4 6h16M4 12h16M4 18h16"
30+
/>
31+
</svg>
32+
</div>
1733
</div>
18-
<ul>
19-
<li class="text-gray-700 font-bold">
20-
<a href="#"><span>Home</span></a>
34+
<ul class="text-sm mt-6 hidden md:block" id="menu">
35+
<li class="text-gray-700 font-bold py-1">
36+
<a
37+
href="#"
38+
class="px-4 flex justify-end border-r-4 border-primary"
39+
><span>Home</span>
40+
<svg
41+
class="w-5 ml-2"
42+
xmlns="http://www.w3.org/2000/svg"
43+
fill="none"
44+
viewBox="0 0 24 24"
45+
stroke="currentColor"
46+
>
47+
<path
48+
stroke-linecap="round"
49+
stroke-linejoin="round"
50+
stroke-width="2"
51+
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
52+
/>
53+
</svg>
54+
</a>
2155
</li>
22-
<li>
23-
<a href="#"><span>About</span></a>
56+
<li class="py-1">
57+
<a href="#" class="px-4 flex justify-end border-r-4 border-white"
58+
><span>About</span>
59+
<svg
60+
class="w-5 ml-2"
61+
xmlns="http://www.w3.org/2000/svg"
62+
fill="none"
63+
viewBox="0 0 24 24"
64+
stroke="currentColor"
65+
>
66+
<path
67+
stroke-linecap="round"
68+
stroke-linejoin="round"
69+
stroke-width="2"
70+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
71+
/>
72+
</svg>
73+
</a>
2474
</li>
25-
<li>
26-
<a href="#"><span>Contact</span></a>
75+
<li class="py-1">
76+
<a href="#" class="px-4 flex justify-end border-r-4 border-white"
77+
><span>Contact</span>
78+
<svg
79+
class="w-5 ml-2"
80+
xmlns="http://www.w3.org/2000/svg"
81+
fill="none"
82+
viewBox="0 0 24 24"
83+
stroke="currentColor"
84+
>
85+
<path
86+
stroke-linecap="round"
87+
stroke-linejoin="round"
88+
stroke-width="2"
89+
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"
90+
/>
91+
</svg>
92+
</a>
2793
</li>
2894
</ul>
2995
</nav>
3096
</div>
31-
<main class="px-16 py-6">
97+
<main
98+
class="bg-gray-100 px-16 py-6 md:col-span-2 lg:col-span-3 min-h-screen"
99+
>
32100
<div class="flex justify-center md:justify-end">
33-
<a href="#" class="text-primary">Log in</a>
34-
<a href="#" class="text-primary ml-2">Sign up</a>
101+
<a
102+
href="#"
103+
class="btn text-primary border-primary md:border-2 hover:bg-primary hover:text-white transition ease-out duration-500"
104+
>Log in</a
105+
>
106+
<a
107+
href="#"
108+
class="btn text-primary border-primary md:border-2 hover:bg-primary hover:text-white transition ease-out duration-500 ml-2"
109+
>Sign up</a
110+
>
35111
</div>
36112
<header>
37113
<h2 class="text-gray-700 text-6xl font-semibold">Recipes</h2>
@@ -41,12 +117,89 @@ <h3 class="text-2xl font-semibold">For Ninjas</h3>
41117
<h4 class="font-bold mt-12 pb-2 border-b border-gray-200">
42118
Latest Recipes
43119
</h4>
44-
<div class="mt-8">
45-
<div class="">
46-
<img src="img/stew.jpg" alt="stew" />
47-
<div class="">
48-
<span>5 Bean Chilli Stew</span>
49-
<span>Recipe by Mario</span>
120+
<div class="mt-8 grid lg:grid-cols-3 gap-10">
121+
<div class="card hover:shadow-lg">
122+
<img
123+
src="img/stew.jpg"
124+
alt="stew"
125+
class="w-full h-32 sm:h-48 object-cover"
126+
/>
127+
<div class="m-4">
128+
<span class="font-bold">5 Bean Chilli Stew</span>
129+
<span class="block text-gray-500 text-sm">Recipe by Mario</span>
130+
</div>
131+
<div class="badge">
132+
<svg
133+
class="w-5 inline-block"
134+
xmlns="http://www.w3.org/2000/svg"
135+
fill="none"
136+
viewBox="0 0 24 24"
137+
stroke="currentColor"
138+
>
139+
<path
140+
stroke-linecap="round"
141+
stroke-linejoin="round"
142+
stroke-width="2"
143+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
144+
/>
145+
</svg>
146+
<span>25 mins</span>
147+
</div>
148+
</div>
149+
<div class="card hover:shadow-lg">
150+
<img
151+
src="img/noodles.jpg"
152+
alt="noodles"
153+
class="w-full h-32 sm:h-48 object-cover"
154+
/>
155+
<div class="m-4">
156+
<span class="font-bold">Veg Noodles</span>
157+
<span class="block text-gray-500 text-sm">Recipe by Mario</span>
158+
</div>
159+
<div class="badge">
160+
<svg
161+
class="w-5 inline-block"
162+
xmlns="http://www.w3.org/2000/svg"
163+
fill="none"
164+
viewBox="0 0 24 24"
165+
stroke="currentColor"
166+
>
167+
<path
168+
stroke-linecap="round"
169+
stroke-linejoin="round"
170+
stroke-width="2"
171+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
172+
/>
173+
</svg>
174+
<span>15 mins</span>
175+
</div>
176+
</div>
177+
<div class="card hover:shadow-lg">
178+
<img
179+
src="img/curry.jpg"
180+
alt="curry"
181+
class="w-full h-32 sm:h-48 object-cover"
182+
/>
183+
<div class="m-4">
184+
<span class="font-bold">Tofu Curry</span>
185+
<span class="block text-gray-500 text-sm">Recipe by Mario</span>
186+
</div>
187+
<div class="badge">
188+
<svg
189+
class="w-5 inline-block"
190+
xmlns="http://www.w3.org/2000/svg"
191+
fill="none"
192+
viewBox="0 0 24 24"
193+
stroke="currentColor"
194+
>
195+
<path
196+
stroke-linecap="round"
197+
stroke-linejoin="round"
198+
stroke-width="2"
199+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
200+
/>
201+
</svg>
202+
<span>30 mins</span>
50203
</div>
51204
</div>
52205
</div>
@@ -57,10 +210,15 @@ <h4 class="font-bold mt-12 pb-2 border-b border-gray-200">
57210
<!-- cards -->
58211
</div>
59212
<div class="flex justify-center">
60-
<div class="bg-secondary-100 text-secondary-200">Load more</div>
213+
<div
214+
class="btn bg-secondary-100 text-secondary-200 hover:shadow-inner transform hover:scale-125 hover:bg-opacity-50 transition ease-out duration-300"
215+
>
216+
Load more
217+
</div>
61218
</div>
62219
</div>
63220
</main>
64221
</div>
222+
<script src="index.js"></script>
65223
</body>
66224
</html>

‎public/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const burger = document.getElementById("burger");
2+
const menu = document.getElementById("menu");
3+
4+
burger.addEventListener("click", () => menu.classList.toggle("hidden"));

‎public/styles.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31701,6 +31701,47 @@ video {
3170131701
animation: bounce 1s infinite;
3170231702
}
3170331703

31704+
.card {
31705+
--tw-bg-opacity: 1;
31706+
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
31707+
border-radius: 0.25rem;
31708+
overflow: hidden;
31709+
position: relative;
31710+
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
31711+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
31712+
}
31713+
31714+
.badge {
31715+
--tw-bg-opacity: 1;
31716+
background-color: rgba(226, 226, 213, var(--tw-bg-opacity));
31717+
border-radius: 9999px;
31718+
font-weight: 700;
31719+
font-size: 0.75rem;
31720+
line-height: 1rem;
31721+
margin-top: 0.5rem;
31722+
margin-left: 0.5rem;
31723+
padding: 0.5rem;
31724+
position: absolute;
31725+
top: 0px;
31726+
--tw-text-opacity: 1;
31727+
color: rgba(136, 56, 131, var(--tw-text-opacity));
31728+
text-transform: uppercase;
31729+
}
31730+
31731+
.btn {
31732+
border-radius: 9999px;
31733+
cursor: pointer;
31734+
font-weight: 700;
31735+
font-size: 0.75rem;
31736+
line-height: 1rem;
31737+
padding-top: 0.5rem;
31738+
padding-bottom: 0.5rem;
31739+
padding-left: 0.75rem;
31740+
padding-right: 0.75rem;
31741+
text-transform: uppercase;
31742+
letter-spacing: 0.05em;
31743+
}
31744+
3170431745
@media (min-width: 640px){
3170531746
.sm\:container{
3170631747
width: 100%;

‎screenshot.png

140 KB
Loading

‎src/styles.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,15 @@
33
@tailwind base;
44
@tailwind components;
55
@tailwind utilities;
6+
7+
.card {
8+
@apply bg-white rounded overflow-hidden shadow-md relative;
9+
}
10+
11+
.badge {
12+
@apply bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded-full p-2 absolute top-0 ml-2 mt-2;
13+
}
14+
15+
.btn {
16+
@apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider;
17+
}

0 commit comments

Comments
 (0)