-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
HTML & CSS Project: Based On Navigation Design
- Loading branch information
Showing
14 changed files
with
1,586 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <title>FreshDeals</title> | ||
| <link rel="stylesheet" type="text/css" href="resources/css/reset.css"> | ||
| <link rel="stylesheet" type="text/css" href="resources/css/base.css"> | ||
| <link rel="stylesheet" type="text/css" href="resources/css/about.css"> | ||
| <link href="https://fonts.googleapis.com/css?family=PT+Serif:700" rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
|
|
||
| <!-- Header --> | ||
|
|
||
| <header> | ||
| <div class="image-container"> | ||
| <a href="index.html"><img src="resources/img/logo.svg"></a> | ||
| </div> | ||
| <div class="search-bar"> | ||
| <input type="text" name="search" placeholder="Search for items"> | ||
| <a href="" class="button"><img src="resources/img/search.svg"></a> | ||
| </div> | ||
| <a href="" class="button cart">Cart <img src="resources/img/cart.svg"></a> | ||
| </header> | ||
| <nav> | ||
| <a href="deals.html">Today's Deals</a> | ||
| <a href="bestsellers.html">Bestsellers</a> | ||
| <a href="about.html">About Us</a> | ||
| <a href="sell.html">Sell</a> | ||
| <a href="#">Help</a> | ||
| </nav> | ||
|
|
||
| <!-- About Section --> | ||
|
|
||
| <div id="main" class="about"> | ||
| <h1>FreshDeals</h1> | ||
| <div class="information"> | ||
| <h3>About FreshDeals</h3> | ||
| <p> | ||
| Most of our users ask us, why are you called FreshDeals? We like to chuckle at that question because | ||
| it seems so obvious to us. The freshest deals at the freshest prices. Simple as that. We were | ||
| founded on this belief and it helps guide every decision we make day in and day out. | ||
| </p> | ||
| <p> | ||
| Well there's one other reason we're called FreshDeals: our fearless founders. We were created as a | ||
| pop-and-pop shop in 1912 by two young entrepeneurs: Johnny Fresh and Punxutawney Deal. Since those | ||
| days, we've scaled to serve organic ingredients to the entire world. Though Johnny and Punx no | ||
| longer run FreshDeals, we are commited to keeping their dream alive. We hope you've enjoyed your | ||
| experiences with FreshDeals over the past decades. We're excited to show you how much more we can do | ||
| as we continue to grow! | ||
| </p> | ||
| <div class="join"> | ||
| <h3>Join Our Team</h3> | ||
| <a href="jobs.html" class="button">View Our Job Listings</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Footer --> | ||
|
|
||
| <footer> | ||
| <img src="resources/img/logo.svg"> | ||
| <div class="links"> | ||
| <h4>Get to know us</h4> | ||
| <a href="#">About us</a> | ||
| <a href="jobs.html">Jobs</a> | ||
| <a href="#">Investor relations</a> | ||
| <a href="#">Link</a> | ||
| </div> | ||
| <div class="links"> | ||
| <h4>Make money with us</h4> | ||
| <a href="sell.html">Sell on FreshDeals</a> | ||
| <a href="#">Become a vendor</a> | ||
| <a href="#">Fundraiser events</a> | ||
| <a href="#">Community outreach</a> | ||
| </div> | ||
| <div class="links"> | ||
| <h4>Help</h4> | ||
| <a href="#">Contact us</a> | ||
| <a href="#">Conditions of use</a> | ||
| <a href="#">Report a problem</a> | ||
| <a href="#">Privacy Policy</a> | ||
| </div> | ||
| </footer> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <title>FreshDeals</title> | ||
| <link rel="stylesheet" type="text/css" href="resources/css/reset.css"> | ||
| <link rel="stylesheet" type="text/css" href="resources/css/base.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
|
|
||
| <!-- Header --> | ||
|
|
||
| <header> | ||
| <div class="image-container"> | ||
| <a href="index.html"><img src="resources/img/logo.svg"></a> | ||
| </div> | ||
| <div class="search-bar"> | ||
| <input type="text" name="search" placeholder="Search for items"> | ||
| <a href="" class="button"><img src="resources/img/search.svg"></a> | ||
| </div> | ||
| <a href="" class="button cart">Cart <img src="resources/img/cart.svg"></a> | ||
| </header> | ||
| <nav> | ||
| <a href="deals.html">Today's Deals</a> | ||
| <a href="bestsellers.html">Bestsellers</a> | ||
| <a href="about.html">About Us</a> | ||
| <a href="sell.html">Sell</a> | ||
| <a href="#">Help</a> | ||
| </nav> | ||
|
|
||
| <!-- Bestsellers List Section --> | ||
|
|
||
| <div id="main" class="product-list-section"> | ||
| <h2>Bestsellers</h2> | ||
| <div class="product-list"> | ||
| <a href="#" class="product-item"> | ||
| <div class="image-container"> | ||
| <img src="resources/img/haricot.png"> | ||
| </div> | ||
| <div class="description"> | ||
| <h3>Haricot Verts</h3> | ||
| <span class="price">$1.99/each</span> | ||
| </div> | ||
| </a> | ||
| <a href="#" class="product-item"> | ||
| <div class="image-container"> | ||
| <img src="resources/img/salmon.png"> | ||
| </div> | ||
| <div class="description"> | ||
| <h3>Wild Salmon</h3> | ||
| <span class="price">$14.99/each</span> | ||
| </div> | ||
| </a> | ||
| <a href="#" class="product-item"> | ||
| <div class="image-container"> | ||
| <img src="resources/img/garlic.png"> | ||
| </div> | ||
| <div class="description"> | ||
| <h3>Garlic</h3> | ||
| <span class="price">$.25/each</span> | ||
| </div> | ||
| </a> | ||
| <a href="#" class="product-item"> | ||
| <div class="image-container"> | ||
| <img src="resources/img/grapes.png"> | ||
| </div> | ||
| <div class="description"> | ||
| <h3>Red Grapes</h3> | ||
| <span class="price">$1.99/each</span> | ||
| </div> | ||
| </a> | ||
| <a href="#" class="product-item"> | ||
| <div class="image-container"> | ||
| <img src="resources/img/pie.png"> | ||
| </div> | ||
| <div class="description"> | ||
| <h3>Pumpkin Pie</h3> | ||
| <span class="price">$9.99/each</span> | ||
| </div> | ||
| </a> | ||
| <a href="#" class="product-item"> | ||
| <div class="image-container"> | ||
| <img src="resources/img/waffles.png"> | ||
| </div> | ||
| <div class="description"> | ||
| <h3>Belgian Waffles</h3> | ||
| <span class="price">$2.89/each</span> | ||
| </div> | ||
| </a> | ||
| <a href="#" class="product-item"> | ||
| <div class="image-container"> | ||
| <img src="resources/img/cheese.png"> | ||
| </div> | ||
| <div class="description"> | ||
| <h3>Artisan Cheese Plate</h3> | ||
| <span class="price">$10.99/each</span> | ||
| </div> | ||
| </a> | ||
| <a href="#" class="product-item"> | ||
| <div class="image-container"> | ||
| <img src="resources/img/steak.png"> | ||
| </div> | ||
| <div class="description"> | ||
| <h3>Filet Mignon</h3> | ||
| <span class="price">$15.99/each</span> | ||
| </div> | ||
| </a> | ||
| <a href="#" class="product-item"> | ||
| <div class="image-container"> | ||
| <img src="resources/img/bagels.png"> | ||
| </div> | ||
| <div class="description"> | ||
| <h3>Bagels</h3> | ||
| <span class="price">$.99/each</span> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <a href="#" class="button">View All</a> | ||
| </div> | ||
|
|
||
| <!-- Footer --> | ||
|
|
||
| <footer> | ||
| <img src="resources/img/logo.svg"> | ||
| <div class="links"> | ||
| <h4>Get to know us</h4> | ||
| <a href="#">About us</a> | ||
| <a href="jobs.html">Jobs</a> | ||
| <a href="#">Investor relations</a> | ||
| <a href="#">Link</a> | ||
| </div> | ||
| <div class="links"> | ||
| <h4>Make money with us</h4> | ||
| <a href="sell.html">Sell on FreshDeals</a> | ||
| <a href="#">Become a vendor</a> | ||
| <a href="#">Fundraiser events</a> | ||
| <a href="#">Community outreach</a> | ||
| </div> | ||
| <div class="links"> | ||
| <h4>Help</h4> | ||
| <a href="#">Contact us</a> | ||
| <a href="#">Conditions of use</a> | ||
| <a href="#">Report a problem</a> | ||
| <a href="#">Privacy Policy</a> | ||
| </div> | ||
| </footer> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <title>FreshDeals</title> | ||
| <link rel="stylesheet" type="text/css" href="resources/css/reset.css"> | ||
| <link rel="stylesheet" type="text/css" href="resources/css/base.css"> | ||
| <link rel="stylesheet" type="text/css" href="resources/css/index.css"> | ||
| <link rel="stylesheet" type="text/css" href="resources/css/breadcrumb.css"> | ||
| <link rel="stylesheet" type="text/css" href="resources/css/styled-breadcrumb.css"> | ||
| <link href="https://fonts.googleapis.com/css?family=PT+Serif:700" rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
|
|
||
| <!-- Header --> | ||
|
|
||
| <header> | ||
| <div class="image-container"> | ||
| <a href="index.html"><img | ||
| src="https://s3.amazonaws.com/codecademy-content/courses/ui-breadcrumbs/logo.svg"></a> | ||
| </div> | ||
| <div class="search-bar"> | ||
| <input type="text" name="search" placeholder="Search for items"> | ||
| <a href="" class="button"><img | ||
| src="https://s3.amazonaws.com/codecademy-content/courses/ui-breadcrumbs/search.svg"></a> | ||
| </div> | ||
| <a href="" class="button cart">Cart <img | ||
| src="https://s3.amazonaws.com/codecademy-content/courses/ui-breadcrumbs/cart.svg"></a> | ||
| </header> | ||
|
|
||
| <!-- Breadcrumbs Section --> | ||
| <ul class="breadcrumb"> | ||
| <li class="location"><a href="#">Shop</a></li> | ||
| <li class="location"><a href="#">Groceries</a></li> | ||
| <li class="location"><a href="#">Blueberries</a></li> | ||
| <li class="attribute"><a href="#">Organic</a></li> | ||
| </ul> | ||
|
|
||
| <!-- Hero Section --> | ||
|
|
||
| <div id="main" class="landing"> | ||
| <div class="blueberry hero"> | ||
| <h2>Organic Blueberries - $3.99/each</h2> | ||
| <p>These blueberries are grown at a sustainable farm in the pacific northwest.</p> | ||
| <p>This superfood is a great addition to any pancake or dessert.</p> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <!-- Footer --> | ||
|
|
||
| <footer> | ||
| <img src="https://s3.amazonaws.com/codecademy-content/courses/ui-breadcrumbs/logo.svg"> | ||
| <div class="links"> | ||
| <h4>Get to know us</h4> | ||
| <a href="#">About us</a> | ||
| <a href="jobs.html">Jobs</a> | ||
| <a href="#">Investor relations</a> | ||
| <a href="#">Link</a> | ||
| </div> | ||
| <div class="links"> | ||
| <h4>Make money with us</h4> | ||
| <a href="sell.html">Sell on FreshDeals</a> | ||
| <a href="#">Become a vendor</a> | ||
| <a href="#">Fundraiser events</a> | ||
| <a href="#">Community outreach</a> | ||
| </div> | ||
| <div class="links"> | ||
| <h4>Help</h4> | ||
| <a href="#">Contact us</a> | ||
| <a href="#">Conditions of use</a> | ||
| <a href="#">Report a problem</a> | ||
| <a href="#">Privacy Policy</a> | ||
| </div> | ||
| </footer> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.