<a class="button-default" href="#">Default Button</a>
<a class="button-alternate" href="#">Alternate Button</a>
<p>In a paragraph, what a < a href="#">in text link</a> would look like.</p>
.nav-button, nav-sectin
<div class="grid-col-1of4-nav nav-button">
<a id="nav-button-shop2" class="nav-section" href="#">Shop</a>
</div>
form-input-section, .form-contact-id, .form-contact, .form-button-submit
<form id="form-contact-id" class="form-contact" method="post" action="#">
<div class="form-input-section">
<label for="form-name">Full Name</label>
<input type="text" id="form-name" placeholder="John Smith">
</div>
<div class="form-input-section">
<label for="form-subject">Subject</label>
<input type="text" id="form-subject" placeholder="Customer service/ returns/ order ect">
</div>
<div class="form-input-section">
<label for="form-message">Message</label>
<textarea id="form-message" placeholder="Type here""></textarea>
</div>
<div class="form-input-section">
<input class="form-button-submit" type="submit" value="Submit your comment">
</div>
</form>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
Bacon ipsum dolor amet tail andouille corned beef pork frankfurter kielbasa jerky. Cow cupim chuck, meatball pig bacon brisket tail biltong ribeye shoulder capicola turducken picanha turkey. Shank ball tip sausage short ribs corned beef doner prosciutto jerky ham hock burgdoggen meatball. Porchetta meatloaf pastrami prosciutto salami. Meatloaf prosciutto pork, shoulder tri-tip tongue spare ribs tail.
<p>Bacon ipsum dolor amet tail andouille corned beef pork frankfurter kielbasa jerky. Cow cupim chuck, meatball pig bacon brisket tail biltong ribeye shoulder capicola turducken picanha turkey. Shank ball tip sausage short ribs corned beef doner prosciutto jerky ham hock burgdoggen meatball. Porchetta meatloaf pastrami prosciutto salami. Meatloaf prosciutto pork, shoulder tri-tip tongue spare ribs tail.</p>
List item
List item
List item
<ul>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
</ul>
List item
List item
List item
<ol>
<li><p>List item</p></li>
<li><p>List item</p></li>
<li><p>List item</p></li>
</ol>
.nav, .nav-button, .nav-image, .grid-col-1of4-nav, .nav-section
<nav id="nav-items">
<div id="nav">
<div class="grid-row">
<div class=".grid-col-1of1-nav nav-button" id="nav-button-Home">
<a class="nav-section" href="index.html">Home</a>
</div>
<div class="grid-col-1of4-nav nav-button">
<a id="nav-button-shop" class="nav-section" href="product-list.html">Shop</a>
</div>
<div class="grid-col-1of4-nav nav-button">
<a id="nav-button-about" class="nav-section" href="about-us.html">About</a>
</div>
<div class="grid-col-6of6 nav-image">
<a id="logo" class="nav-section" href="index.html">
<figure class="logo-img">
<img id="img-logo" class="align-center" src="img/logo-big.png" alt="kaffee logo" height="73" width="189">
</figure>
</a>
</div>
<div class="grid-col-1of4-nav nav-button">
<a id="nav-button-contact" class="nav-section" href="contact.html">Contact</a>
</div>
<div class="grid-col-1of4-nav nav-button">
<div class="grid-col-1of2-nav ">
<a id="nav-button-cart" class="nav-section-sign-in" href="sign-in.html">Log In</a>
</div>
<div class="grid-col-1of2-nav">
<a href="cart.html" class="nav-cart"><img src="img/cart-24.png" class="cart-icon" alt="Cart Icon"></a>
</div>
</div>
<div class="grid-col-1of1-nav ">
<a href="cart.html" class="nav-cart-2"><img src="img/cart-24.png" class="cart-icon-2" alt="Cart Icon"></a>
</div>
</div>
</div>
</nav>
<div class="grid-row">
<div class="grid-col-10of10">.grid-col-10of10</div>
<div class="grid-col-1of2">.grid-col-1of2</div>
<div class="grid-col-1of2">.grid-col-1of2</div>
<div class="grid-col-1of4">.grid-col-1of4</div>
<div class="grid-col-1of4">.grid-col-1of4</div>
<div class="grid-col-1of4">.grid-col-1of4</div>
<div class="grid-col-1of4">.grid-col-1of4</div>
</div>
.crid-col-1of4, .product, .product-list-item, .img-button, .product-img
<div class="grid-row">
<div class="grid-col-1of4 product">
<div class="product-list-item">
<a class="img-button" href="product-details.html">
<figure>
<img class="product-img" src="img/rainy.jpg" alt="product image">
<h3>Vancouver Rain</h3>
</figure>
<h3 class="product-des">rich with a dark cocoa texture</h3>
<h3 class="text-brown">$27</h3>
</a>
</div>
</div>
<div class="grid-col-1of4 product">
<div class="product-list-item">
<a class="img-button" href="product-details.html">
<figure>
<img class="product-img" src="img/zombie.jpg" alt="product image">
<h3>Zombie Tired</h3>
</figure>
<h3 class="product-des">lively roast with a crisp finish</h3>
<h3 class="text-brown">$27</h3>
</a>
</div>
</div>
<div class="grid-col-1of4 product">
<div class="product-list-item">
<a class="img-button" href="product-details.html">
<figure>
<img class="product-img" src="img/lazy.jpg" alt="product image">
<h3>Lazy Sunday</h3>
</figure>
<h3 class="product-des">soft, mellow and flavorful</h3>
<h3 class="text-brown">$27</h3>
</a>
</div>
</div>
<div class="grid-col-1of4 product">
<div class="product-list-item">
<a class="img-button" href="product-details.html">
<figure>
<img class="product-img" src="img/sweet.jpg" alt="product image">
<h3>Sweet Craving</h3>
</figure>
<h3 class="product-des">notes of caramelized sugar</h3>
<h3 class="text-brown">$27</h3>
</a>
</div>
</div>
</div>