Skip to content

Lesson-19 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
plainsight16 wants to merge 21 commits into
base: master
Choose a base branch
from
Open

Lesson-19 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
35d5cab
lesson-1
iamshaunjp May 19, 2020
f1a322d
lesson-2
iamshaunjp May 19, 2020
a1f9c61
lesson-3
iamshaunjp May 19, 2020
1ab4df6
lesson-4
iamshaunjp May 19, 2020
e0fae8f
lesson-5
iamshaunjp May 19, 2020
66b5927
lesson-6
iamshaunjp May 19, 2020
6883243
lesson-7
iamshaunjp May 19, 2020
83e434d
lesson-8
iamshaunjp May 19, 2020
15fa8c8
lesson-9
iamshaunjp May 19, 2020
7ed0d35
lesson-10
iamshaunjp May 19, 2020
339dd34
lesson-11
iamshaunjp May 19, 2020
e846ff1
lesson-12
iamshaunjp May 19, 2020
ab56a5e
lesson-13
iamshaunjp May 19, 2020
45fcb8d
lesson-14
iamshaunjp May 19, 2020
cc9400c
lesson-15
iamshaunjp May 19, 2020
f4d3483
lesson-15
iamshaunjp May 19, 2020
4b61d96
lesson-16
iamshaunjp May 19, 2020
8d2afff
lesson-17
iamshaunjp May 19, 2020
a014541
lesson-18
iamshaunjp May 19, 2020
b55b4fa
lesson-19
iamshaunjp May 19, 2020
560bca1
changed file directory for index.html
plainsight16 Nov 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions README.md
View file
Open in desktop

This file was deleted.

143 changes: 143 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./public/styles.css">
</head>
<body class="text-gray-600 font-body">

<div class="grid md:grid-cols-3">
<div class="md:col-span-1 md:flex md:justify-end">
<nav class="text-right">
<div class="flex justify-between items-center">
<h1 class="font-bold uppercase p-4 border-b border-gray-100">
<a href="/" class="hover:text-gray-700 tracking-widest">Food Ninja</a>
</h1>
<div class="px-4 cursor-pointer md:hidden" id="burger">
<svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
</div>
</div>
<ul class="text-sm mt-6 hidden md:block" id="menu">
<li class="text-gray-700 font-bold py-1">
<a href="#" class="block px-4 flex justify-end border-r-4 border-primary">
<span>Home</span>
<svg class="w-5 ml-2" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path 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"></path></svg>
</a>
</li>
<li class="py-1">
<a href="#" class="block px-4 flex justify-end border-r-4 border-white">
<span>About</span>
<svg class="w-5 ml-2" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
</a>
</li>
<li class="py-1">
<a href="#" class="block px-4 flex justify-end border-r-4 border-white">
<span>Contact</span>
<svg class="w-5 ml-2" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path 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>
</li>
</ul>
</nav>
</div>

<main class="px-16 py-6 md:col-span-2 bg-gray-100">
<div class="flex justify-center md:justify-end">
<a href="#" class="btn text-primary border-primary md:border-2 hover:bg-primary hover:text-white transition ease-out duration-500">Log in</a>
<a href="#" class="btn text-primary ml-2 border-primary md:border-2 hover:bg-primary hover:text-white transition ease-out duration-500">Sign up</a>
</div>

<header class="mt-4">
<h2 class="text-gray-700 text-6xl font-semibold leading-none tracking-wider">Recipes</h2>
<h3 class="text-2xl font-semibold tracking-wider">For Ninjas</h3>
</header>

<div>
<h4 class="font-bold pb-2 mt-12 border-b border-gray-200">Latest Recipes</h4>

<div class="mt-8 grid lg:grid-cols-3 gap-10">
<!-- cards go here -->
<div class="card hover:shadow-lg">
<img src="./public/img/stew.jpg" alt="stew" class="h-32 sm:h-48 w-full object-cover">
<div class="m-4">
<span class="font-bold">5 Bean Chili Stew</span>
<span class="block text-gray-500 text-sm">Recipe by Mario</span>
</div>
<div class="badge">
<svg class="inline-block w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>25 mins</span>
</div>
</div>
<div class="card hover:shadow-lg">
<img src="./public/img/noodles.jpg" alt="noodles" class="h-32 sm:h-48 w-full object-cover">
<div class="m-4">
<span class="font-bold">Veg Noodles</span>
<span class="block text-gray-500 text-sm">Recipe by Mario</span>
</div>
<div class="badge">
<svg class="inline-block w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>25 mins</span>
</div>
</div>
<div class="card hover:shadow-lg">
<img src="./public/img/curry.jpg" alt="curry" class="h-32 sm:h-48 w-full object-cover">
<div class="m-4">
<span class="font-bold">Tofu Curry</span>
<span class="block text-gray-500 text-sm">Recipe by Mario</span>
</div>
<div class="badge">
<svg class="inline-block w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>25 mins</span>
</div>
</div>
</div>

<h4 class="font-bold pb-2 mt-12 border-b border-gray-200">Most Popular</h4>

<div class="mt-8 grid lg:grid-cols-3 gap-10">
<!-- cards go here -->
<div class="card hover:shadow-lg">
<img src="./public/img/stew.jpg" alt="stew" class="h-32 sm:h-48 w-full object-cover">
<div class="m-4">
<span class="font-bold truncate block">5 Bean Chili Stew with Feta Cheese</span>
<span class="block text-gray-500 text-sm">Recipe by Mario</span>
</div>
<div class="badge">
<svg class="inline-block w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>25 mins</span>
</div>
</div>
<div class="card hover:shadow-lg">
<img src="./public/img/noodles.jpg" alt="noodles" class="h-32 sm:h-48 w-full object-cover">
<div class="m-4">
<span class="font-bold">Veg Noodles</span>
<span class="block text-gray-500 text-sm">Recipe by Mario</span>
</div>
<div class="badge">
<svg class="inline-block w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>25 mins</span>
</div>
</div>
<div class="card hover:shadow-lg">
<img src="./public/img/curry.jpg" alt="curry" class="h-32 sm:h-48 w-full object-cover">
<div class="m-4">
<span class="font-bold">Tofu Curry</span>
<span class="block text-gray-500 text-sm">Recipe by Mario</span>
</div>
<div class="badge">
<svg class="inline-block w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>25 mins</span>
</div>
</div>
</div>
</div>

<div class="mt-12 flex justify-center">
<div class="btn bg-secondary-100 text-secondary-200 inline-block hover:shadow-inner transform hover:scale-125 hover:bg-opacity-50 transition ease-out duration-300">Load more</div>
</div>
</main>
</div>

<script src="./public/index.js"></script>
</body>
</html>
Loading