A Style guide for Project 01
.button-nav
<a href="#" class="button">Bubble Tea</a>
.in-textlink
<a href="#" class="in-textlink">Click to sign up.</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>
.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.
.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>
.main-nav
<ul class="main-nav" id="Main-nav">
<li><a href="#home">Home</a></li>
<li><a href="#home">Deals</a></li>
<li><a href="#home">Bubble Tea</a></li>
<li><a href="#home">Desserts</a></li>
<h1 class="h1-head">Boba & Pop Co.</h1>
<h2 class="h2-head">Choose Your Drink Base</h2>
<ol class="number-list">
<li> Regular Milk Tea</li>
<li> Rose Milk Tea</li>
<li> Jasmine Green Tea</li>
</ol>
<h2 class="h2-head">Choose Your Toppings</h1>
<ol class="number-list">
<li> Pearls</li>
<li> Jelly</li>
<li> Red Bean</li>
</ol>
<h3 class="h3-head">What Boba & Pop Co. Stand For.</h3>
<a href="#" class="in-textlink">About Us</a>
<p class="p-body">The company offers customers the ability to order a bubble tea of their choice in an easy to use format. The company gives the option to either have the bubble tea be delivered or picked up at the stores location. Boba & Pop Co. provides the option to skip lines and not have to worry about calling into the store to place an order for pick up or delivery. To customers it provides a hassle free, easy to use service to get great bubble tea. Boba & Pop Co. entices customers to purchase a product by offering reasonable prices and giving them variety. Also, by eliminating the need to wait in line to order it creates a more relaxed experience.</p>
The company offers customers the ability to order a bubble tea of their choice in an easy to use format. The company gives the option to either have the bubble tea be delivered or picked up at the stores location. Boba & Pop Co. provides the option to skip lines and not have to worry about calling into the store to place an order for pick up or delivery. To customers it provides a hassle free, easy to use service to get great bubble tea. Boba & Pop Co. entices customers to purchase a product by offering reasonable prices and giving them variety. Also, by eliminating the need to wait in line to order it creates a more relaxed experience.