Navigation Button

CSS selector:

.topnavlink

.currentpage

Sample code:


        <a href="merchandise.html" class="topnavlink"><span class="currentpage">SHOP</span>

Rendered element:

SHOP

In-text link

CSS selector:

a: hover

.capitalize

Sample code:


        <a href="merchandise.html" class="capitalize">SEE MORE</a>

Rendered element:

Submit Buttons

CSS selector:

.submitbutton

.submitbutton:hover

Sample code:


         <a href="merchandise.html"><div class="submitbutton">SUBMIT</div></a>

Rendered element:

SUBMIT

Text Input Fields

CSS selector:

.contactform

.forminput

Sample code:


              <div class="contactform">

                <form>

                  <input type="text" name="email" class="forminput" placeholder="your email">

                </form>

              </div>

Rendered element:

Item Thumbnails

CSS selector:

.col-3of9

.event_container

.text

Sample code:


          <div class="col-3of9"><a href="page.html">

          <div id="thumbnail_image">

          <div class="event_container">

          <p class="text">

            Text goes here

          </p>

          </div>

          </div>

          </a>

          </div>

Rendered element:

LEAGUE OF LEGENDS

THE WITCHER 3

MINECRAFT

Headings

CSS Selector:

.herotext

Sample code:


        <h1 class="herotext">Heading 1</h1>

        <h1>Heading 2</h1>

Rendered Element:

Heading 1

Heading 2

Paragraphs

CSS Selector:

.row

.col-3of9

Sample code:


          <div class="row"> 

            <div class="col-3of9"> 

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nulla et massa malesuada dictum eget at urna. Cras ac lacus nec dolor viverra iaculis. Phasellus non leo erat. Praesent condimentum sem sit amet nunc viverra, in sagittis nunc dapibus.</p>

            </div>

          </div>

Rendered Element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nulla et massa malesuada dictum eget at urna. Cras ac lacus nec dolor viverra iaculis. Phasellus non leo erat. Praesent condimentum sem sit amet nunc viverra, in sagittis nunc dapibus.

Bulleted Lists

CSS Selector:

ul.productinfo

Sample code:


            <ul class="productinfo">

              <li>List item 1</li>

              <li>List item 2</li>

              <li>List item 3</li>

            </ul>

Rendered Element:

List item 1
List item 2
List item 3

Main Navigation

CSS selector:

.topnavwrapper

.topnavlink

.topiconwrapper

.currentpage

a:hover

Sample code:



          <div class="topnavwrapper">
            <a href="merchandise.html" class="topnavlink"><span class="currentpage">MERCH>/span></a>
            <a href="events.html" class="topnavlink">EVENTS</a>
            <a href="about.html" class="topnavlink">ABOUT</a>
            <div class="topiconwrapper">
              <a href="cart.html"><img src="images/cart.jpg" class="topnavlink" alt="Cart/Your current items"></a>
              <a href="login.html"><img src="images/account.jpg" class="topnavlink" alt="Account/login icon"></a>
            </div>
          </div>

Rendered Element:

MERCH EVENTS ABOUT

Product Listing

CSS Selector:

.col-6of9

.mainwalletimage

.flexcontainer

.productlistingmain

.productimagemain

.productlisting

.productimagewallet

.col-3of9

.walletinfo

.iteminfo

.walletheading

.price

.ulwallet

.itemdetails

Sample code:




        <div class="row">

          <div class="col-6of9 mainwalletimage">

            <div class="flexcontainer">


              <div class="productlistingmain">

                <img src="images/wallet1.jpg" class="productimagemain" alt="Uncharted 4 Bi-Fold Wallet - main image">

              </div>

            </div>

          </div>

      
          <div class="col-3of9 walletinfo">

            <div class="iteminfo">

              <h1 class="walletheading">UNCHARTED 4 BI-FOLD WALLET</h1>


              <hr>


              <span class="price">$24.99</span>


              <ul class="ulwallet">

                <li>Features an Uncharted design from the popular video game series</li>

                <li>Includes note/card slots and coin pocket</li>

                <li>High quality design and materials</li>

                <li>Officially licensed</li>

              </ul>


            <p class="itemdetails">Size: 10 cm</p>

            <p class="itemdetails">Color: Beige</p>

            <p class="itemdetails">Material: Leather, suede</p>


          </div>

        </div>

Rendered Element:

UNCHARTED 4 BI-FOLD WALLET

$24.99

Features an Uncharted design from the popular video game series
Includes note/card slots and coin pocket
High quality design and materials
Officially licensed

Size: 10 cm

Color: Beige

Material: Leather, suede

ADD TO CART

BUY

Website Grid Structure

CSS selector:

.col-3of9

.col-6of9

.col-9of9

Sample code:


          <div class="row">

            <div class="col-3of9"></div>

          </div>

Rendered Element:

Column 9 of 9

Column 6 of 9

Column 3 of 9

Style Guide

Reset Merchandise Website

Navigation Button

CSS selector:

Sample code:

Rendered element:

In-text link

CSS selector:

Sample code:

Rendered element:

Submit Buttons

CSS selector:

Sample code:

Rendered element:

Text Input Fields

CSS selector:

Sample code:

Rendered element:

Item Thumbnails

CSS selector:

Sample code:

Rendered element:

Headings

CSS Selector:

Sample code:

Rendered Element:

Heading 1

Heading 2

Paragraphs

CSS Selector:

Sample code:

Rendered Element:

Bulleted Lists

CSS Selector:

Sample code:

Rendered Element:

Main Navigation

CSS selector:

Sample code:

Rendered Element:

Product Listing

CSS Selector:

Sample code:

Rendered Element:

UNCHARTED 4 BI-FOLD WALLET

Website Grid Structure

CSS selector:

Sample code:

Rendered Element: