.logo
img class="logo" src="img/bp_logo.jpg" alt="logo"</>
.font
id="font-text">The font used is "Lato".</>
.images-
img src="img/milktea.png" alt="milktea"</>
.nav-main-item
<a href="#" class="nav-main-item">Bubble Tea</a>
.in-textlink
<a href="#" class="in-textlink">Checkout</a>
.button-submit, .button-reset
<a href="#" class="button-submit">Submit</a>
<a href="#" class="button-reset">Reset</a>
.input-field
<form class="input-field">
Name:
<input type="text" name="firstname">
.h1-head
<h1 class="h1-head">H1 Head</h1>
.h2-head
<h2 class="h2-head">H2 Head</h2>
.h3-head
<h3 class="h3-head">H3 Head</h3>
.bullet-list
<ul class="bullet-list">
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li> Fusce eget viverra lacus, vel ornare libero.</li>
<li> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
</ul>
.number-list
<ol class="number-list">
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li> Fusce eget viverra lacus, vel ornare libero.</li>
<li> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
</ol>
.p-body
<p class="p-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget viverra lacus, vel ornare libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque fermentum rhoncus velit, eget porttitor nulla. Phasellus ac posuere ipsum. Proin lacinia maximus metus sit amet lobortis. Sed sed justo nec ante accumsan pulvinar. Etiam volutpat porttitor mauris, sed laoreet diam tincidunt sit amet. Aenean eget elit tellus.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget viverra lacus, vel ornare libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque fermentum rhoncus velit, eget porttitor nulla. Phasellus ac posuere ipsum. Proin lacinia maximus metus sit amet lobortis. Sed sed justo nec ante accumsan pulvinar. Etiam volutpat porttitor mauris, sed laoreet diam tincidunt sit amet. Aenean eget elit tellus.
.main-nav
<nav class="nav-main grid-row" id="nav-main">
<div class="grid-col-1of4">
<a href="" class="nav-main-item">About Us</a>
</div>
<div class="grid-col-1of4">
<a href="" class="nav-main-item">Deals</a>
</div>
<div class="grid-col-1of4">
<a href="" class="nav-main-item">Bubble Tea</a>
</div>
<div class="grid-col-1of4">
<a href="" class="nav-main-item">Your Stamps</a>
</div>
<h1 class="h1-head">Boba & Pop Co.</h1>
<nav class="nav-main grid-row" id="nav-main">
<div class="grid-col-1of4">
<a href="" class="nav-main-item">About Us</a>
</div>
<div class="grid-col-1of4">
<a href="" class="nav-main-item">Deals</a>
</div>
<div class="grid-col-1of4">
<a href="" class="nav-main-item">Bubble Tea</a>
</div>
<div class="grid-col-1of4">
<a href="" class="nav-main-item">Your Stamps</a>
</div>
<a href="#" class="in-textlink">About Us</a>
<p class="p-body">Bobba and Pop Co. got started when two college students from Vancouver, Canada came up with the idea of creating a place where people could go to make a custom order bubble tea drink. The inspiration came from many places only offering preset types of bubble tea with very little options to alter the bubble tea to better suit the needs and the tastes of customers.</p>
<h2 class="h2-head">Choose Your Drink Base</h2>
<ol class="number-list">
<li> Milk Tea</li>
<li> Green Tea</li>
<li> Black Tea</li>
</ol>
<h2 class="h2-head">Choose Your Toppings</h1>
<ol class="number-list">
<li> Pearls</li>
<li> Jelly</li>
<li> Sugar</li>
</ol>
Bobba and Pop Co. got started when two college students from Vancouver, Canada came up with the idea of creating a place where people could go to make a custom order bubble tea drink. The inspiration came from many places only offering preset types of bubble tea with very little options to alter the bubble tea to better suit the needs and the tastes of customers.