The Book Worm Branding

Colors

Rendered element:

Primary: HEX#FD5F60
Shade: HEX#DC4748
Use: Primary Brand
CSS: color-p1
CSS: color-p1s

Primary: HEX#5BAFE4
Shade: HEX#4596CA
Use: Primary Brand
CSS: color-p2
CSS: color-p2s

Primary: HEX#7CD86E
Shade: HEX#6ABC5E
Use: Acent
CSS: color-a1
CSS: color-a1s

Primary: HEX#FFDC5B
Shade: HEX#EBC63E
Use: Acent
CSS: color-a2
CSS: color-a2s

Primary: HEX#434342;
Shade: HEX#1D1D1B;
Use: Neutral
CSS: color-n1
CSS: color-n1s

Primary: HEX#A7A7A7
Shade: HEX#F2F2F2
Use: Neutral
CSS: color-n2
CSS: color-n2s

CSS selector:

.color-swatch //create new color block

.color-item-top //create top rounded swatch

.color-item-bottom //create bottom rounded swatch

.flex-container-color // container for colours

.flex-item-color // item for colours

.color-p1 //primary red

.color-p1s //primary red shade

.color-p2 //primary blue

.color-p2s //primary blue shade

.color-a1 //acent green

.color-a1s //acent green shade

.color-a2 //acent yellow

.color-a2s //acent yellow shade

.color-n1 //neutral dark grey

.color-n1s //netural black grey

.color-n2 //netural light grey

.color-n2s //neutral white grey

Sample code:


        <div class="flex-container-color"></div>


        <div class="color-swatch flex-item-color">

        <div class="color-item-top color-p1"></div>

        <div class="color-item-bottom color-p1s"></div>

        <div class="colour-label">

        <p>Primary: HEX#FD5F60<br>

              Shade: HEX#DC4748<br>

              Use: Primary Brand<br>

              CSS: color-p1<br>

              CSS: color-p1s<br>

            </p>

          </div>

        </div>

Logo Variation

Rendered element:

CSS selector:

.logo-item

.flex-container-brand

.flex-item-brand

Sample code:


        <div class="logo-item flex-container-brand">

          <img class="logo-item flex-item-brand" src="img/logo-red.svg" alt="The Book Work Logo Red">

          <img class="logo-item flex-item-brand" src="img/logo-blue.svg" alt="The Book Work Logo Blue">

          <img class="logo-item flex-item-brand" src="img/logo-green.svg" alt="The Book Work Logo Green">

          <img class="logo-item flex-item-brand" src="img/logo-yellow.svg" alt="The Book Work Logo Yellow">

          <img class="logo-item flex-item-brand" src="img/logo-grey.svg" alt="The Book Work Logo Grey">

        </div>

Brand Imagery

Rendered element:

CSS selector:

.brand-item

.brand-pattern

.flex-container-brand

Sample code:


        <div class="brand-item flex-container-brand">
          

            <img class="brand-item" src="img/worm-imagery/worm-swiggle-red.svg" alt="Worm Mascot Swiggle Red">

            <img class="brand-item" src="img/worm-imagery/worm-straight-red.svg" alt="Worm Mascot Straight Red">

            <img class="brand-item" src="img/worm-imagery/worm-curve-red.svg" alt="Worm Mascot Curve Red">

  
            <img class="brand-item" src="img/worm-imagery/worm-swiggle-blue.svg" alt="Worm Mascot Swiggle Blue">

            <img class="brand-item" src="img/worm-imagery/worm-straight-blue.svg" alt="Worm Mascot Straight Blue">

            <img class="brand-item" src="img/worm-imagery/worm-curve-blue.svg" alt="Worm Mascot Curve Blue">

  
            <img class="brand-item" src="img/worm-imagery/worm-swiggle-green.svg" alt="Worm Mascot Swiggle Green">

            <img class="brand-item" src="img/worm-imagery/worm-straight-green.svg" alt="Worm Mascot Straight Green">

            <img class="brand-item" src="img/worm-imagery/worm-curve-green.svg" alt="Worm Mascot Curve Green">

  
            <img class="brand-item" src="img/worm-imagery/worm-swiggle-yellow.svg" alt="Worm Mascot Swiggle Yellow">

            <img class="brand-item" src="img/worm-imagery/worm-straight-yellow.svg" alt="Worm Mascot Straight Yellow">

            <img class="brand-item" src="img/worm-imagery/worm-curve-yellow.svg" alt="Worm Mascot Curve Yellow">

  
            <img class="brand-item" src="img/worm-imagery/worm-swiggle-grey.svg" alt="Worm Mascot Swiggle Grey">

            <img class="brand-item" src="img/worm-imagery/worm-straight-grey.svg" alt="Worm Mascot Straight Grey">

            <img class="brand-item" src="img/worm-imagery/worm-curve-grey.svg" alt="Worm Mascot Curve Grey">

          </div>
  
          



          <div class="brand-pattern">
          

          <img src="img/pattern.svg" alt="Geometric Brand Pattern">
          

          </div>

Target Audience & Brainstorm

Interactive Elements

In-text link

Rendered element:

This is an example

This is a paragraph element. It is a long established fact that a reader will be distracted by the readable content of a page when looking This is an example . The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

CSS selector:

.in-txt-link

Sample code:

<a class="in-txt-link" href="#" target="_blank">This is an example</a>

Basic Button Link

Rendered element:

Default Button

CSS selector:

.btn-basic

Sample code:

<a href="#" class="button-basic">Default Button</a>

Add Cart Button Link

Rendered element:

Add to Cart

CSS selector:

.btn-add-cart

Sample code:


        <a class="btn-add-cart" href="#">
          Add to Cart
          <img class="icon" src="img/Icons/cart.svg" alt="shopping cart icon">
        </a>

Navigation Link

Rendered element:

Default Nav

CSS selector:

.button-nav

Sample code:

<a href="#" class="txt-nav">Default Nav</a>

Submit/Reset Buttons

Rendered element:

CSS selector:

.btn-submit

.btn-reset

Sample code:

<input class="btn-submit" type="submit" value="Submit"> <input class="btn-reset" type="reset" value="Reset">

Text Input Field with Label

Rendered element:

CSS selector:

label

input[type=text]

Sample code:

     
        <div class="flex-container-payment">
          <div class="flex-item-lg">
            <form method="post" action="#">
            <label for="label">Label:<label>
            <input type="text" id="label" name="label" placeholder="placeholder">
            </form>
          </div>
        </div>

Radio Button with Label

Rendered element:

CSS selector:

.form-radio-label

Sample code:


        <form method="post" action="#"> 


          <input type="radio" id="option 1" name="example" value="1">

          <label class="form-radio-label" for="option 1">Option 1</label><br>

          <input type="radio" id="option 2" name="example" value="2">

          <label class="form-radio-label" for="option 2">Option 2</label><br>

          <input type="radio" id="other" name="example" value="other">

          <label class="form-radio-label" for="other">Other</label><br>


          </form>

Filter Checkboxes with Label

Rendered element:

CSS selector:

.form-check-container

.checkmark

.form-check-container input

.form-check-container:hover input ~ .checkmark

.form-check-container input:checked ~ .checkmark

.checkmark:after

.form-check-container input:checked ~ .checkmark:after

.form-check-container .checkmark:after

Sample code:

     
        <form method="post" action="#">

          <h4>Please select an option:</h4>


          <label class="form-check-container">0-2 years

            <input type="checkbox" checked="checked">

            <span class="checkmark"></span>

          </label>

          
          <label class="form-check-container">3-5 years

            <input type="checkbox">

            <span class="checkmark"></span>

          </label>
          
          <label class="form-check-container">6-8 years

            <input type="checkbox">

            <span class="checkmark"></span>

          </label>
          
          <label class="form-check-container">9-12 years

            <input type="checkbox">

            <span class="checkmark"></span>

          </label>
        </form>

Drop Down Menu with Label

Rendered element:

Quantity:

CSS selector:

.form-drop-down

Sample code:

<label for="quantity">Choose a size:</label>


          <select class="form-drop-down" name="quantity" id="quantity">

          <option value="1">1l</option>

          <option value="2">2</option>

          <option value="3">3</option>

          <option value="4">4</option>

          </select>

Image as a Link

Rendered element:

The day you begin by By Jacqueline Woodson & Rafael Lopez

CSS selector:

.img-link

Sample code:

<a href="https://pixabay.com/photos/puppies-puppy-pup-dog-dachshund-3687656/" target="_blank"> <img class="img-link" src="img/puppies.jpg" alt="Two cute puppies wrestling"> </a>

Text Elements

Headings

Rendered element:

This is a h1 heading

Font-Dosis, Style-normal, weight-bold, size-5rem

This is a h2 heading

Font-Dosis, Style-normal, weight-bold, size-2.5rem

This is a h3 heading

Font-Dosis, Style-normal, weight-300, size-2.2rem

This is a h4 heading

Font-Dosis, Style-normal, weight-500, size-2rem

This is a h5 heading

Font-Open Sans, Style-normal, weight-bold, size-2.2rem

This is a product listing book title

Font-Dosis, Style-normal, weight-600, size-1.5rem

This is a product listing book author

Font-Dosis, Style-normal, weight-500, size-1.3rem

This is a product price listing $25.99

Font-Dosis, Style-normal, weight-600, size-1.5rem

CSS selectors:

.txt-h1 //page title

.txt-h2 //bold sub-section

.txt-h3 //regular sub-section

.txt-h4 //small subtitle

.txt-h5 //body paragraph title

.product-list-title" //product listing book author

.product-list-author //product listing book author

.product-list-price //product price listing

Sample code:

<h1>This is a h1 heading</h1> <h2>This is a h2 heading</h2> <h3>This is a h3 heading</h3> <h4>This is a h4 heading</h4> <h5>This is a h5 heading</h5> <a class="product-list-title" href="#">This is a product listing book title</a> <a class="product-list-author" href="#">This is a product listing book author</a> <h5 class="product-list-price">This is a product price listing $25.99</h5>

Paragraphs

Rendered element:

This is a paragraph element. It is a long established fact that a reader will be distracted by the readable content of a page when looking. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

CSS selector:

flex-container

flex-item-lg

Sample code:


          <div class="flex-container">

            <p class="flex-item-lg">This is a paragraph element.</p>

          </div>

Numbered Lists

Rendered element:

list item a
list item b
list item c

CSS selectors:

.ol-li

Sample code:


          <ol>

          

            <li class="ol-li">list item a</li>

            <li class="ol-li">list item b</li>

            <li class="ol-li">list item c</li>

          

          </ol>

Unordered Lists

Rendered element:

list item
list item
list item

CSS selectors:

.txt-ul

.txt-ul-li

Sample code:


          <ul>

          

            <li class="ul-li">list item</li>

            <li class="ul-li">list item</li>

            <li class="ul-li">list item</li>

          

          </ul>

Combined Elements

Main Navigation

Rendered element:

CSS selector:

.txt-nav

.flex-container-nav

.flex-item-nav

.txt-nav

Sample code:


          <header id="flex-container-nav">


          <div class="flex-item-xsm">

          <img id="nav-logo" src="img/logo-header.svg" alt="The Book Work Logo">

              </div>

        
              <nav id="flex-item-nav">

              <a class="txt-nav" href="">Books</a>

              <a class="txt-nav" href="">Events</a>

              <a class="txt-nav" href="">About</a>

              <a class="txt-nav" href="">Contact</a>

              <a class="txt-nav" href=""><img id="nav-cart" src="img/Icons/nav-cart.svg" alt="cart icon"></a>

              </nav>

        
              </header>

Aside Filter Menu

Rendered element:

CSS selector:

.aside-filter

.flex-item-lg

.aside-form

.form-check-container

.checkmark

Sample code:


          <aside class="aside-filter flex-item-lg">

          <form class="aside-form" method="post" action="#">

          <h4>Please select an option:</h4>

          <label class="form-check-container">0-2 years
          <input type="checkbox" checked="checked">

          <span class="checkmark"></span>

          </label>

              
          <label class="form-check-container">3-5 years
          <input type="checkbox">

          <span class="checkmark"></span>

          </label>

              
          <label class="form-check-container">6-8 years
          <input type="checkbox">

          <span class="checkmark"></span>

          </label>

              
          <label class="form-check-container">9-12 years
          <input type="checkbox">

          <span class="checkmark"></span>

          </label>

          </form>

          </aside>

Product/Service Listing

Rendered element:

The Day You Begin By Jacqueline Woodson

$25.99

Add to Cart

CSS selector:

.product-list-title

.product-list-author

.product-list-rating

.product-list-review

.product-list-price

.btn-add-cart

.icon

Sample code:


          <div class="flex-container-products">

            
            <section class="flex-item-product">

              <a href="https://www.penguinrandomhouse.com/books/299104/the-day-you-begin-by-jacqueline-woodson-illustrated-by-rafael-lopez/"
                target="_blank">

                <img class="product-img-link" src="img/sample-book.jpg"
                  alt="The day you begin by By Jacqueline Woodson & Rafael Lopez">

                  </a>


                  <a class="product-list-title" href="#">The Day You Begin</a>

                  <a class="product-list-author" href="#">By Jacqueline Woodson</a>


                  <div>

                  <img class="product-list-rating" src="img/Icons/rating.svg" alt="Four and a half starts out of 5">

                  </div>


                  <h5 class="product-list-price">$25.99</h5>

                  <a class="btn-add-cart" href="#">Add to Cart<img class="icon" src="img/Icons/cart.svg"
                    alt="shopping cart icon"></a>

              </section>

            </div>

Payment Form

Rendered element:

Billing Address

Full Name Email Address City

State

Zip

Payment

Accepted Cards

Visa

MasterCard

Debit

Name on Card Credit card number Exp Month

Exp Year

CVV

Shipping Address same as Billing

CSS selector:

.flex-container-payment

.flex-item-payment-75

.payment-form-background

.flex-item-payment-50

.form-radio-label

.btn-submit

.flex-item-payment-25

.element-bottom

.class="price"

.btn-basic

Sample code:


          <section class="flex-container-payment">

          <div class="flex-item-payment-75">

          <div class="payment-form-background">

          <form action="/action.php">

          

            <div class="flex-container-payment">

            <section class="flex-item-payment-50 ">

              <h3>Billing Address</h3>

              <label for="fname">Full Name</label>

              <input type="text" id="fname" name="firstname" placeholder="John M. Doe">

              <label for="email">Email</label>

              <input type="text" id="email" name="email" placeholder="john@example.com">

              <label for="adr">Address</label>

              <input type="text" id="adr" name="address" placeholder="542 W. 15th Street">

              <label for="city">City</label>

              <input type="text" id="city" name="city" placeholder="New York">

              

              <div class="flex-container-payment">

              <div class="flex-item-payment-50 ">

                <label for="state">State</label>

                <input type="text" id="state" name="state" placeholder="NY">

              </div>

              <div class="flex-item-payment-50 ">

                <label for="zip">Zip</label>

                <input type="text" id="zip" name="zip" placeholder="10001">

              </div>

              </div>

            </section>

            

            <section class="flex-item-payment-50 ">

            <h3>Payment</h3>

              <label for="fname">Accepted Cards</label>

              <div class="flex-container">

              <div>

                <input class="form-radio-btn" type="radio" id="visa" name="payment type" value="visa">

                <label class="form-radio-label" for="visa">Visa</label>


              </div>

      
              <div>

                <input class="form-radio-btn" type="radio" id="mastercard" name="payment type" value="mastercard">

                <label class="form-radio-label" for="mastercard">MasterCard</label>


              </div>

      
              <div>

                <input class="form-radio-btn" type="radio" id="debit" name="payment-type" value="debit">

                <label class="form-radio-label" for="debit">Debit</label>


              </div>

              </div>


              <label for="cname">Name on Card</label>

                <input type="text" id="cname" name="cardname" placeholder="John More Doe">

                <label for="ccnum">Credit card number<label>

                <input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">

                <label for="expmonth">Exp Month</label>

                <input type="text" id="expmonth" name="expmonth" placeholder="September">

                <div class="flex-container-payment">

                <div class="flex-item-payment-50 ">

                <label for="expyear">Exp Year</label>

                <input type="text" id="expyear" name="expyear" placeholder="2018">

              </div>

              <div class="flex-item-payment-50 ">

                <label for="cvv">CVV</label>

                <input type="text" id="cvv" name="cvv" placeholder="352">

              </div>

              </div>

            </section>

                      
            </div>

            <label class="form-check-container">Shipping Address same as Billing
            <input type="checkbox" checked="checked">

            <span class="checkmark"></span>

            </label>

            <input class="btn-submit" type="submit" value="Continue to checkout">

          </form>

          </div>

          </div>

          

          <aside class="flex-item-payment-25">

            <div class="payment-form-background">

              <h3 class="element-bottom">Total</h3>

              <h5>Sub-Total: <span class="price">$50.62</span></h5>

              <h5>Taxes: <span class="price">$5.63</span></h5>

              <h5>Delivery: <span class="price">FREE</span></h5>

              <a href="#" class="btn-basic">Confirm Order</a>

            </div>

            </aside>

            </section>

Checkout Cart

Rendered element:

The Day You Begin By Jacqueline Woodson

$25.99

Quantity: Delete

The Day You Begin By Jacqueline Woodson

$25.99

Quantity: Delete

Total: 72.54

Proceed to Checkout

CSS selector:

.flex-container

.flex-item-sm

.checkout-img-link

.flex-item-lg

.product-list-title

.product-list-author

.form-drop-down

.btn-submit

.btn-add-cart

Sample code:


            
            <div class="flex-container">

            <div class="flex-item-sm">

              <a href="https://www.penguinrandomhouse.com/books/299104/the-day-you-begin-by-jacqueline-woodson-illustrated-by-rafael-lopez/" target="_blank">

                  <img class="checkout-img-link" src="img/sample-book.jpg" alt="The day you begin by By Jacqueline Woodson & Rafael Lopez">
                  </a>

              <div>

  
              <div class="flex-item-lg">

                <a class="product-list-title" href="#">The Day You Begin</a>

                <a class="product-list-author" href="#">By Jacqueline Woodson</a>

    
                <h5 class="product-list-price">$25.99</h5>

    
                <label for="quantity">Quantity:</label>

                <select class="form-drop-down" name="quantity" id="quantity">

                <option value="1">1</option>

                <option value="2">2<option>

                <option value="3">3</option>

                <option value="4">4</option>

                <option value="4">5</option>

                            </select>

                            <a class="btn-submit" href="#">Delete</a>

    
                            </div>

  
                </div>

  
            
            <div class="flex-container">

            <div class="flex-item-sm">

            <a href="https://www.penguinrandomhouse.com/books/299104/the-day-you-begin-by-jacqueline-woodson-illustrated-by-rafael-lopez/" target="_blank">

                <img class="checkout-img-link" src="img/sample-book.jpg" alt="The day you begin by By Jacqueline Woodson & Rafael Lopez">
                </a>

              <div>

  
              <div class="flex-item-lg">

              <a class="product-list-title" href="#">The Day You Begin</a>

              <a class="product-list-author" href="#">By Jacqueline Woodson</a>

  
              <h5 class="product-list-price">$25.99</h5>

  
              <label for="quantity">Quantity:</label>

              <select class="form-drop-down" name="quantity" id="quantity">

              <option value="1">1</option>

              <option value="2">2<option>

              <option value="3">3</option>

              <option value="4">4</option>

              <option value="4">5</option>

                          </select>
                          <a class="btn-submit" href="#">Delete</a>

  
                          </div>

  
              </div>

  
              <h2>Total: 72.54</h2>

              <a class="btn-add-cart" href="#">Proceed to Checkout</a>

Order Summary

Rendered element:

Order Summary

The Day You Begin By Jacqueline Woodson

$25.99

Quantity: Delete

The Day You Begin By Jacqueline Woodson

$25.99

Quantity: Delete

Sub-total: $55.90

CSS selector:

.flex-container-order-sum

.payment-form-background

.flex-container

.flex-item-nav

.flex-item-cart

.btn-submit

.checkout-img-link

.form-drop-down

.product-section

.h4-no-margin

Sample code:


          <section class="flex-container-order-sum">

          <div class="payment-form-background">

          <h3>Order Summary</h3>

          <div class="flex-container-order-sum">

          

              
              <div class="flex-container">

              <div class="flex-item-cart">

              <a href="https://www.penguinrandomhouse.com/books/299104/the-day-you-begin-by-jacqueline-woodson-illustrated-by-rafael-lopez/"
                  target="_blank">

                  <img class="checkout-img-link" src="img/sample-book.jpg" alt="The day you begin by By Jacqueline Woodson & Rafael Lopez">

                  </a>

                  </div>

          
                  <div class="flex-item-lg">

                  <a class="product-list-title" href="#">The Day You Begin</a>

                  <a class="product-list-author" href="#">By Jacqueline Woodson</a>

          
                  <h5 class="product-list-price">$25.99</h5>

          
                  <label for="b1-quantity">Quantity:</label>

                  <select class="form-drop-down" name="quantity" id="b1-quantity">

                    <option value="1">1</option>

                    <option value="2">2</option>

                    <option value="3">3</option>

                    <option value="4">4</option>

                    <option value="4">5</option>

                  </select>

                  <a class="btn-submit" href="#">Delete</a>

                  </div>

                  </div>


                  


          
              
              <div class="flex-container">

              <div class="flex-item-cart">

              <a href="https://www.penguinrandomhouse.com/books/299104/the-day-you-begin-by-jacqueline-woodson-illustrated-by-rafael-lopez/"
                  target="_blank">

                  <img class="checkout-img-link" src="img/sample-book.jpg" alt="The day you begin by By Jacqueline Woodson & Rafael Lopez">

                  </a>

                  </div>

          
                  <div class="flex-item-lg">

                  <a class="product-list-title" href="#">The Day You Begin</a>

                  <a class="product-list-author" href="#">By Jacqueline Woodson</a>

          
                  <h5 class="product-list-price">$25.99<h5>

          
                  <label for="b2-quantity">Quantity:</label>

                  <select class="form-drop-down" name="quantity" id="b2-quantity">

                  <option value="1">1<option>

                  <option value="2">2</option>

                  <option value="3">3</option>

                  <option value="4">4</option>

                  <option value="4">5</option>

                            </select>

                            <a class="btn-submit" href="#">Delete</a>

                            <div>

                            </div>

            <div>

            
            <div>

            <div class="product-section"></div>

            <h4 class="h4-no-margin">Sub-total: $55.90</h4>

            </div>

          <div>

          </section>

          </div>

Featured Book

Rendered element:

Feature Book of the Month

The Day You Begin By Jacqueline Woodson

National Book Award winner Jacqueline Woodson and two-time Pura Belpré Illustrator Award winner Rafael López have teamed up to create a poignant, yet heartening book about finding courage to connect, even when you feel scared and alone.

Learn More

CSS selector:

.flex-container-feature

.feature-background

.flex-item-feature-img

.flex-item-feature-txt

.product-list-title

.product-list-author

.btn-basic

Sample code:


            <section class="flex-container-feature">

            <div class="flex-container-feature feature-background">

            <div class="flex-item-feature-img">

            <a href="#" target="_blank">

            <img class="feature-img-link" src="img/sample-book.jpg" alt="The day you begin by By Jacqueline Woodson & Rafael Lopez">
            </a>

            </div>

        
            <div class="flex-item-feature-txt">

            <h3>Feature Book of the Month</h3>

            <a class="product-list-title" href="#">The Day You Begin</a>

            <a class="product-list-author" href="#">By Jacqueline Woodson</a>

            <p>

                    National Book Award winner Jacqueline Woodson and two-time Pura Belpré Illustrator Award winner Rafael López have teamed up to create a poignant, yet heartening book about finding courage to connect, even when you feel scared and alone.
                    </p>

                    <a class="btn-basic" href="#">Learn More</a>

                    </div>

                    </div>

                    </section>

Order Summary

Rendered element:

CSS selector:

.footer-basic

.footer-list-inline

.footer-list-inline-item

Sample code:


            <div class="footer-basic">

              <footer>

                <ul class="footer-list-inline">

                  <li class="footer-list-inline-item"><a href="">Books</a></li>

                  <li class="footer-list-inline-item"><a href="">Events</a></li>

                  <li class="footer-list-inline-item"><a href="">About</a></li>

                  <li class="footer-list-inline-item"><a href="">Contact</a></li>

                
                  <li class="footer-list-inline-item"><a href="index.html">Style Guide</a></li>

                  <li class="footer-list-inline-item"><a href="product-list-template.html">Product Template</a></li>

                  <li class="footer-list-inline-item"><a href="checkout-template.html">Checkout Template</a></li>

                </ul>

                <p class="copyright">The Book Worm © 2021</p>

              </footer>

            </div>

Citations

Edgar Tolentino (Designer). Pablo Impallari (Designer). (2011). Dosis [Font]. Retrieved from https://fonts.google.com/specimen/Dosis?preview.text_type=custom#standard-styles
Matteson, Steve. Designer. 2011. Open Sans [Font]. Retrieved from https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Open+Sans
Helmine Serban (Professor) (2021). Lecture Slides and Example Code.
Alyssa Lalani (Student) (2021) All Brand Imagery [Image (svg)]
Freepik. (Designer). (n.d). Shopping Cart [Icon (svg)]. Retrieved from https://www.flaticon.com/free-icon/shopping-cart_1170627?term=cart&page=1&position=10&page=1&position=10&related_id=1170627&origin=search.
w3schools. (Tutorials). (n.d). CSS Google Fonts [tutorial]. Retrieved from https://www.w3schools.com/css/css_font_google.asp.
Pete LePage & Rachel Andrew. (Designers). (2019). Responsive Web Basics. Retrieved from https://web.dev/responsive-web-design-basics/.
w3schools. (Tutorials). (n.d). HTML links [tutorial]. Retrieved from https://www.w3schools.com/html/html_links.asp.
w3schools. (Tutorials). (n.d). HTML Entities [tutorial]. Retrieved from https://www.w3schools.com/html/html_entities.asp.
w3schools. (Tutorials). (n.d). HTML Forms [tutorial]. Retrieved from https://www.w3schools.com/html/html_forms.asp.
w3schools. (Tutorials). (n.d). Tag Input [tutorial]. Retrieved from https://www.w3schools.com/tags/tag_input.asp.
w3schools. (Tutorials). (n.d). Tag Input Radio [tutorial]. Retrieved from https://www.w3schools.com/tags/att_input_type_radio.asp.
w3schools. (Tutorials). (n.d). HTML Forms [tutorial]. Retrieved from https://www.w3schools.com/html/html_forms.asp.
w3schools. (Tutorials). (n.d). CSS Custom Checkbox [tutorial & example]. Retrieved from https://www.w3schools.com/howto/howto_css_custom_checkbox.asp.
w3schools. (Tutorials). (n.d). HTML Image as Link [tutorial]. Retrieved from https://www.w3schools.com/html/html_images.asp.
Jacqueline Woodson (Author). Rafael Lopez. (Illustrator). (2018). The Day You Begin [Image & Book]. Retrieved from https://www.penguinrandomhouse.ca/books/299104/the-day-you-begin-by-jacqueline-woodson-illustrated-by-rafael-lopez/9780399246531.
w3schools. (Tutorials). (n.d). HTML Lists [tutorial]. Retrieved from https://www.w3schools.com/html/html_lists.asp.
w3schools. (Tutorials). (n.d). Checkout Order Form [tutorial & example]. Retrieved from https://www.w3schools.com/howto/howto_css_checkout_form.asp.
Ayooluwa Isaiah. (Software Developer). (2020). How to build a Navigation Bar with CSS Flexbox [tutorial & example]. Retrieved from https://freshman.tech/flexbox-navbar/.
css-tricks. (Tutorials). (2018). Flex Basis [tutorial & example]. Retrieved from https://css-tricks.com/almanac/properties/f/flex-basis/.
Levin Mejia. (Designer). (2017). Designing A Product Page Layout with Flexbox [tutorial & example]. Retrieved from https://css-tricks.com/designing-a-product-page-layout-with-flexbox/.
css-tricks. (Tutorials). (2017). Flexbox Page Layout [tutorial & example]. Retrieved from https://css-tricks.com/designing-a-product-page-layout-with-flexbox/.
w3schools. (Tutorials). (n.d). CSS Full Bleed [tutorial]. Retrieved from https://css-tricks.com/full-bleed/.
Stephanie Eckles. (Developer). (2020). Icon Button CSS Styling Guide [tutorial & example]. Retrieved from https://moderncss.dev/icon-button-css-styling-guide.
Shay Howe. (Designer). (n.d). Building Forms [tutorial & example]. Retrieved from https://learn.shayhowe.com/html-css/building-forms/.
w3schools. (Tutorials). (n.d). CSS Placeholder [tutorial]. Retrieved from https://www.w3schools.com/howto/howto_css_placeholder.asp.
Daniel Dubois. (Designer). (2020). Best Footer HTML & CSS [tutorial & example]. Retrieved from https://www.web-eau.net/blog/10-best-footer-html-css-snippets.