Style Guide

Interactive Elements Typography Hero Section Grid Contact Form Citations

Interactive Elements.

In Text Link

CSS Selector:

.navbar ul li a

Sample Code:

<a href = "index.html">
    my work </a>

Navigation Link

CSS Selector:

.button-6

Sample Code:

<button class="button-6">
    Button</button>

Submit/Reset Button

CSS Selector:

.button-6.submit/reset

Sample Code:

<button 
class="button-6.submit">
    Button</button>

Text Input

CSS Selector:

.sgGridForm input[type="text"]

Sample Code:

<input type="text">
ocean

Image as Link

CSS Selector:

.projectCard img

Sample Code:

<a href = "index.html">
  <img src = "img/bg1.jpg" 
  alt="ocean"></a>

Typography.

Heading 1

Inter is my favourite font for the web.

40px, 700

Heading 2

Inter is my favourite font for the web.

32px, 700

Heading 3

Inter is my favourite font for the web.

24px, 700

Heading 4

Inter is my favourite font for the web.

35px, 700

Paragraph

Inter is my favourite font for the web.

16px, 500

Hero Section.

burb_flow

Hero Image Caption

LOGO

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

down_arrow

Project Grid.

burbHero

Active Card

Time

Brief Description

See More >

burbHero

Not Active Card

Time

Brief Description

burbHero

Not Active Card

Time

Brief Description

Contact Form.

Send me a message and we can chat!

Citations.

https://freefrontend.com/css-image-effects/ https://www.w3schools.com/howto/howto_css_responsive_form.asp http://browserhacks.com/ https://cssgradient.io/ https://animate.style/ https://www.w3schools.com/js/js_htmldom_css.asp https://alvarotrigo.com/blog/change-css-javascript/ https://formsubmit.co/ https://www.youtube.com/watch?v=r4RQ38EoLds&t=2s https://fonts.google.com/specimen/Inter https://fontawesome.com/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/