first commit
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
{/* NAVBAR */}
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<a href="" className="font-bold text-gray-700 text-2xl"> OpenTable </a>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button
|
||||
className="bg-blue-400 text-white border p-1 px-4 rounded mr-3"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* NAVBAR */}
|
||||
<main>
|
||||
{/* HEADER */}
|
||||
<div className="h-64 bg-gradient-to-r from-[#0f1f47] to-[#5f6984] p-2">
|
||||
<div className="text-center mt-10">
|
||||
<h1 className="text-white text-5xl font-bold mb-2">
|
||||
Find your table for any occasion
|
||||
</h1>
|
||||
{/* SEARCH BAR */}
|
||||
<div className="text-left text-lg py-3 m-auto flex justify-center">
|
||||
<input
|
||||
className="rounded mr-3 p-2 w-[450px]"
|
||||
type="text"
|
||||
placeholder="State, city or town"
|
||||
/>
|
||||
<button className="rounded bg-red-600 px-9 py-2 text-white">
|
||||
Let's go
|
||||
</button>
|
||||
</div>
|
||||
{/* SEARCH BAR */}
|
||||
</div>
|
||||
</div>
|
||||
{/* HEADER */} {/* CARDS */}
|
||||
<div className="py-3 px-36 mt-10 flex flex-wrap justify-center">
|
||||
{/* CARD */}
|
||||
<div
|
||||
className="w-64 h-72 m-3 rounded overflow-hidden border cursor-pointer"
|
||||
>
|
||||
<img
|
||||
src="https://resizer.otstatic.com/v2/photos/wide-huge/2/31852905.jpg"
|
||||
alt=""
|
||||
className="w-full h-36"
|
||||
/>
|
||||
<div className="p-1">
|
||||
<h3 className="font-bold text-2xl mb-2">Milestones Grill</h3>
|
||||
<div className="flex items-start">
|
||||
<div className="flex mb-2">*****</div>
|
||||
<p className="ml-2">77 reviews</p>
|
||||
</div>
|
||||
<div className="flex text-reg font-light capitalize">
|
||||
<p className=" mr-3">Mexican</p>
|
||||
<p className="mr-3">$$$$</p>
|
||||
<p>Toronto</p>
|
||||
</div>
|
||||
<p className="text-sm mt-1 font-bold">Booked 3 times today</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* CARD */}
|
||||
</div>
|
||||
{/* CARDS */}
|
||||
</main>
|
||||
</main>
|
||||
</main>
|
||||
@@ -0,0 +1,89 @@
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
{/* NAVBAR */}
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<a href="" className="font-bold text-gray-700 text-2xl">
|
||||
{" "} OpenTable{" "}
|
||||
</a>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button
|
||||
className="bg-blue-400 text-white border p-1 px-4 rounded mr-3"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* NAVBAR END */}
|
||||
<div className="border-t h-screen">
|
||||
<div className="py-9 w-3/5 m-auto">
|
||||
{/* HEADER */}
|
||||
<div>
|
||||
<h3 className="font-bold">You're almost done!</h3>
|
||||
<div className="mt-5 flex">
|
||||
<img
|
||||
src="https://images.otstatic.com/prod1/49153814/2/medium.jpg"
|
||||
alt=""
|
||||
className="w-32 h-18 rounded"
|
||||
/>
|
||||
<div className="ml-4">
|
||||
<h1 className="text-3xl font-bold">
|
||||
Aiāna Restaurant Collective
|
||||
</h1>
|
||||
<div className="flex mt-3">
|
||||
<p className="mr-6">Tues, 22, 2023</p>
|
||||
<p className="mr-6">7:30 PM</p>
|
||||
<p className="mr-6">3 people</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* HEADER */} {/* FORM */}
|
||||
<div className="mt-10 flex flex-wrap justify-between w-[660px]">
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="First name"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Last name"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Phone number"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Email"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Occasion (optional)"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-3 w-80 mb-4"
|
||||
placeholder="Requests (optional)"
|
||||
/>
|
||||
<button
|
||||
className="bg-red-600 w-full p-3 text-white font-bold rounded disabled:bg-gray-300"
|
||||
>
|
||||
Complete reservation
|
||||
</button>
|
||||
<p className="mt-4 text-sm">
|
||||
By clicking “Complete reservation” you agree to the OpenTable Terms
|
||||
of Use and Privacy Policy. Standard text message rates may apply.
|
||||
You may opt out of receiving text messages at any time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
@@ -0,0 +1,168 @@
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
{/* NAVBAR */}
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<a href="" className="font-bold text-gray-700 text-2xl">
|
||||
{" "} OpenTable{" "}
|
||||
</a>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button
|
||||
className="bg-blue-400 text-white border p-1 px-4 rounded mr-3"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* NAVBAR */} {/* HEADER */}
|
||||
<div className="h-96 overflow-hidden">
|
||||
<div
|
||||
className="bg-center bg-gradient-to-r from-[#0f1f47] to-[#5f6984] h-full flex justify-center items-center"
|
||||
>
|
||||
<h1 className="text-7xl text-white captitalize text-shadow text-center">
|
||||
Milestones Grill (Toronto)
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
{/* HEADER */} {/* DESCRIPTION PORTION */}
|
||||
<div className="flex m-auto w-2/3 justify-between items-start 0 -mt-11">
|
||||
<div className="bg-white w-[70%] rounded p-3 shadow">
|
||||
{/* RESAURANT NAVBAR */}
|
||||
<nav className="flex text-reg border-b pb-2">
|
||||
<a href="" className="mr-7"> Overview </a>
|
||||
<a href="" className="mr-7"> Menu </a>
|
||||
</nav>
|
||||
{/* RESAURANT NAVBAR */} {/* TITLE */}
|
||||
<div className="mt-4 border-b pb-6">
|
||||
<h1 className="font-bold text-6xl">Milesstone Grill</h1>
|
||||
</div>
|
||||
{/* TITLE */} {/* RATING */}
|
||||
<div className="flex items-end">
|
||||
<div className="ratings mt-2 flex items-center">
|
||||
<p>*****</p>
|
||||
<p className="text-reg ml-3">4.9</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-reg ml-4">600 Reviews</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* RATING */} {/* DESCRIPTION */}
|
||||
<div className="mt-4">
|
||||
<p className="text-lg font-light">
|
||||
The classics you love prepared with a perfect twist, all served up
|
||||
in an atmosphere that feels just right. That’s the Milestones
|
||||
promise. So, whether you’re celebrating a milestone, making the most
|
||||
of Happy Hour or enjoying brunch with friends, you can be sure that
|
||||
every Milestones experience is a simple and perfectly memorable one.
|
||||
</p>
|
||||
</div>
|
||||
{/* DESCRIPTION */} {/* IMAGES */}
|
||||
<div>
|
||||
<h1 className="font-bold text-3xl mt-10 mb-7 border-b pb-5">
|
||||
5 photos
|
||||
</h1>
|
||||
<div className="flex flex-wrap">
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/3/41701449.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701450.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701452.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701453.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="w-56 h-44 mr-1 mb-1"
|
||||
src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701454.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* IMAGES */} {/* REVIEWS */}
|
||||
<div>
|
||||
<h1 className="font-bold text-3xl mt-10 mb-7 borber-b pb-5">
|
||||
What 100 people are saying
|
||||
</h1>
|
||||
<div>
|
||||
{/* REVIEW CARD */}
|
||||
<div className="border-b pb-7 mb-7">
|
||||
<div className="flex">
|
||||
<div className="w-1/6 flex flex-col items-center">
|
||||
<div
|
||||
className="rounded-full bg-blue-400 w-16 h-16 flex items-center justify-center"
|
||||
>
|
||||
<h2 className="text-white text-2xl">MJ</h2>
|
||||
</div>
|
||||
<p className="text-center">Micheal Jordan</p>
|
||||
</div>
|
||||
<div className="ml-10 w-5/6">
|
||||
<div className="flex items-center">
|
||||
<div className="flex mr-5">*****</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<p className="text-lg font-light">
|
||||
Laurie was on top of everything! Slow night due to the
|
||||
snow storm so it worked in our favor to have more one on
|
||||
one with the staff. Delicious and well worth the money.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* REVIEW CARD */}
|
||||
</div>
|
||||
</div>
|
||||
{/* REVIEWS */}
|
||||
</div>
|
||||
<div className="w-[27%] relative text-reg">
|
||||
<div className="fixed w-[15%] bg-white rounded p-3 shadow">
|
||||
<div className="text-center border-b pb-2 font-bold">
|
||||
<h4 className="mr-7 text-lg">Make a Reservation</h4>
|
||||
</div>
|
||||
<div className="my-3 flex flex-col">
|
||||
<label htmlFor="">Party size</label>
|
||||
<select name="" className="py-3 border-b font-light" id="">
|
||||
<option value="">1 person</option>
|
||||
<option value="">2 people</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex flex-col w-[48%]">
|
||||
<label htmlFor="">Date</label>
|
||||
<input type="text" className="py-3 border-b font-light w-28" />
|
||||
</div>
|
||||
<div className="flex flex-col w-[48%]">
|
||||
<label htmlFor="">Time</label>
|
||||
<select name="" id="" className="py-3 border-b font-light">
|
||||
<option value="">7:30 AM</option>
|
||||
<option value="">9:30 AM</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<button
|
||||
className="bg-red-600 rounded w-full px-4 text-white font-bold h-16"
|
||||
>
|
||||
Find a Time
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* DESCRIPTION PORTION */} {/* RESERVATION CARD PORTION */} {/* RESERVATION
|
||||
CARD PORTION */}
|
||||
</main>
|
||||
</main>
|
||||
@@ -0,0 +1,61 @@
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
{/* NAVBAR */}
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<a href="" className="font-bold text-gray-700 text-2xl">
|
||||
{" "} OpenTable{" "}
|
||||
</a>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button
|
||||
className="bg-blue-400 text-white border p-1 px-4 rounded mr-3"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* NAVBAR */} {/* HEADER */}
|
||||
<div className="h-96 overflow-hidden">
|
||||
<div
|
||||
className="bg-center bg-gradient-to-r from-[#0f1f47] to-[#5f6984] h-full flex justify-center items-center"
|
||||
>
|
||||
<h1 className="text-7xl text-white captitalize text-shadow text-center">
|
||||
Milestones Grill (Toronto)
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
{/* HEADER */} {/* DESCRIPTION PORTION */}
|
||||
<div className="flex m-auto w-2/3 justify-between items-start 0 -mt-11">
|
||||
<div className="bg-white w-[100%] rounded p-3 shadow">
|
||||
{/* RESAURANT NAVBAR */}
|
||||
<nav className="flex text-reg border-b pb-2">
|
||||
<a href="" className="mr-7"> Overview </a>
|
||||
<a href="" className="mr-7"> Menu </a>
|
||||
</nav>
|
||||
{/* RESAURANT NAVBAR */} {/* MENU */}
|
||||
<main className="bg-white mt-5">
|
||||
<div>
|
||||
<div className="mt-4 pb-1 mb-1">
|
||||
<h1 className="font-bold text-4xl">Menu</h1>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-between">
|
||||
{/* MENU CARD */}
|
||||
<div className=" border rounded p-3 w-[49%] mb-3">
|
||||
<h3 className="font-bold text-lg">Surf and Turf</h3>
|
||||
<p className="font-light mt-1 text-sm">
|
||||
A well done steak with lobster and rice
|
||||
</p>
|
||||
<p className="mt-7">$80.00</p>
|
||||
</div>
|
||||
{/* MENU CARD */}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{/* MENU */}
|
||||
</div>
|
||||
</div>
|
||||
{/* DESCRIPTION PORTION */}
|
||||
</main>
|
||||
</main>
|
||||
@@ -0,0 +1,100 @@
|
||||
<main className="bg-gray-100 min-h-screen w-screen">
|
||||
<main className="max-w-screen-2xl m-auto bg-white">
|
||||
{/* NAVBAR */}
|
||||
<nav className="bg-white p-2 flex justify-between">
|
||||
<a href="" className="font-bold text-gray-700 text-2xl">
|
||||
{" "} OpenTable{" "}
|
||||
</a>
|
||||
<div>
|
||||
<div className="flex">
|
||||
<button
|
||||
className="bg-blue-400 text-white border p-1 px-4 rounded mr-3"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button className="border p-1 px-4 rounded">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* HEADER */}
|
||||
<div className="bg-gradient-to-r to-[#5f6984] from-[#0f1f47] p-2">
|
||||
<div className="text-left text-lg py-3 m-auto flex justify-center">
|
||||
<input
|
||||
className="rounded mr-3 p-2 w-[450px]"
|
||||
type="text"
|
||||
placeholder="State, city or town"
|
||||
/>
|
||||
<button className="rounded bg-red-600 px-9 py-2 text-white">
|
||||
Let's go
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex py-4 m-auto w-2/3 justify-between items-start">
|
||||
{/* SEARCH SIDE BAR */}
|
||||
<div className="w-1/5">
|
||||
<div className="border-b pb-4">
|
||||
<h1 className="mb-2">Region</h1>
|
||||
<p className="font-light text-reg">Toronto</p>
|
||||
<p className="font-light text-reg">Ottawa</p>
|
||||
<p className="font-light text-reg">Montreal</p>
|
||||
<p className="font-light text-reg">Hamilton</p>
|
||||
<p className="font-light text-reg">Kingston</p>
|
||||
<p className="font-light text-reg">Niagara</p>
|
||||
</div>
|
||||
<div className="border-b pb-4 mt-3">
|
||||
<h1 className="mb-2">Cuisine</h1>
|
||||
<p className="font-light text-reg">Mexican</p>
|
||||
<p className="font-light text-reg">Italian</p>
|
||||
<p className="font-light text-reg">Chinese</p>
|
||||
</div>
|
||||
<div className="mt-3 pb-4">
|
||||
<h1 className="mb-2">Price</h1>
|
||||
<div className="flex">
|
||||
<button className="border w-full text-reg font-light rounded-l p-2">
|
||||
$
|
||||
</button>
|
||||
<button
|
||||
className="border-r border-t border-b w-full text-reg font-light p-2"
|
||||
>
|
||||
$$
|
||||
</button>
|
||||
<button
|
||||
className="border-r border-t border-b w-full text-reg font-light p-2 rounded-r"
|
||||
>
|
||||
$$$
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* SEARCH SIDE BAR */}
|
||||
<div className="w-5/6">
|
||||
{/* RESAURANT CAR */}
|
||||
<div className="border-b flex pb-5">
|
||||
<img
|
||||
src="https://images.otstatic.com/prod1/49153814/2/medium.jpg"
|
||||
alt=""
|
||||
className="w-44 rounded"
|
||||
/>
|
||||
<div className="pl-5">
|
||||
<h2 className="text-3xl">Aiāna Restaurant Collective</h2>
|
||||
<div className="flex items-start">
|
||||
<div className="flex mb-2">*****</div>
|
||||
<p className="ml-2 text-sm">Awesome</p>
|
||||
</div>
|
||||
<div className="mb-9">
|
||||
<div className="font-light flex text-reg">
|
||||
<p className="mr-4">$$$</p>
|
||||
<p className="mr-4">Mexican</p>
|
||||
<p className="mr-4">Ottawa</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-red-600">
|
||||
<a href="">View more information</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* RESAURANT CAR */}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
Reference in New Issue
Block a user