Interactive Elements

In-text link

CSS selector:

.intext-link

Sample code

<a class="intext-link" href="#">in text link</a>

Rendered element:

in text link

Navigation Link

CSS selector:

.button-nav

Sample code:

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

Rendered element:

Default Button

Submit/Reset Buttons

CSS selector:

.button-reset

Sample code

<button class="button-reset">my button</button>

Rendered element:

Text Input Field with Label

CSS selector:

.text-input

Sample code

<label for="myinput">My Label</label>
            <input class="text-input" id="myinput" type="text">

Rendered element:

My Label:

Check Box with Label

CSS selector:

.checkmark

Sample code

<label class="checkmarkContainer">CheckBox 1

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

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

          </label>

Rendered element:

Checkbox 1

Image as a Link

CSS selector:

.image-link

Sample code


            <div class="image-link">

            <a class="image-link" href="#">

            <img src="img/godofwar_cover.jpg" alt="god of war image">

            </a>

            </div>

Rendered element:

Text Elements

Headings

CSS selector:

.heading

Sample code


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

            <h2 class="heading">Heading 2</h2>

            <h3 class="heading">Heading 3</h3>

            <h4 class="heading">Heading 4</h4>

Rendered element:

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs

CSS selector:

.p-basic

Sample code

<p class="p-basic">This is a paragraph.</p>

Rendered element:

This is a paragraph.

Numbered Lists

CSS selector:

.num-list

Sample code

<ol class="num-list">

            <li>first</li>

            <li>second</li>

            </ol>

Rendered element:

First
Second

Combined Elements

Main Navigation

CSS selector:

.nav

Sample code

<ul class="nav">

              <a href="#">Home</a>

              <a href="#">Contact</a>

              </nav>

Rendered element:

Product/Service Listing

CSS selector:

.productList

Sample code


            <div class="blockProductList">

            <div class="productList">

              <a class="image-link" href="#">

              <img class="productList" src="img/fifa19_cover.jpg" alt="fifa 19 cover">

              <p class="productListText">FIFA 19</p>

              </a>

              </div>
              </div>

Rendered element:

FIFA 19

Payment Form

CSS selector:

.payment

Sample code


            <form class="payment">

            <label for="paymentinput">Credit Card Number:</label>

            <input class="text-input" type="text" id="paymentinput">

            <button class="button-reset" id="submitPayment">Submit</button>

            </form>

Rendered element:

Checkout Cart

CSS selector:

.cart

Sample code


            <ol class="cart">

            <li>Game One: $100</li>

            <li>Game Two: $80</li>

            </ol>

            <p>Total: $180</p>

Rendered element:

Game One: $100
Game Two: $80

Total: $180

Company

GameNow is a small digital video game company, dedicated to bringing a variety of games to everyone in a very easy way. We believe that game streaming is the future, and we are here to lead the charge.
Anyone with access to a web browser and control method would be able to play any game that we offer.
Streamed games don't require any expensive devices to run, thus lowering the barrier of entry. Also, there is no other company that specializes in streamed games across multiple platforms. The only existing services that offer this are platform exclusive, like Playstation Now, and other PC services like Steam. These services do not offer streamed games through the internet, only locally over your wifi network.

Branding

Fonts: Verdana, Geneva, sans-serif and "Lucida Sans Unicode", "Lucida Grande", sans-serif
Colors:
Purple rgb(112, 0, 204)

Blue rgb(2, 164, 252);

Black rgb(0, 0, 0)

White rgb(255, 255, 255)
Art Direction: Flat iconography. White background with black text, purple headings and blue interactions. Animated transitions to show changes of state.

Citations

Game covers are from Twitch
God of War Banner: LordGames
Nav Background: GiantBomb
Menu icon: Hamburger Icon