Welcome to Ghost Shield

Wow.

Color Variables

Gray option for section backgrounds

// variable
$gray-light

// class
.gray-light-bg

Another gray option for a section

// variable
$gray-med

// class
.gray-med-bg

Footer background & default text color

// variable
$gray-dark

// class
.gray-dark-bg

For Mobile course

// variable
$blue

// classes
.blue-bg
.blue-text

For JS course

// variable
$yellow

// classes
.yellow-bg
.yellow-text

For Ruby course

// variable
$red

// classes
.red-bg
.red-text

For sponsor section

// variable
$gold

// class
.gold-bg
.gold-text

It's blue!

// variable
$blue-link

// class
.blue-link-bg

For 'Say Hello' button

// variable
$blue-contact

// class
.blue-contact-bg

Button Styles

---
.btn
---
.btn.hover-red
---
.btn.hover-yellow
---
.btn.hover-blue

---
a.btn.btn-contact(href="#")
  img(src="http://theironyard.com/images/email.png")
  p Say Hello

Typography

Headings

h1. Hella mumblecore

h2. Letterpress fashion axe

h3. Deep v bicycle rights

h4. Put a bird on it

h5. Tofu organic
---
h1 Hella mumblecore
h2 Letterpress fashion axe
h3 Deep v bicycle
h4 Put a bird on it
h5 Tofu organic

Paragraphs

Art party wayfarers Schlitz photo booth lomo, authentic whatever bicycle rights Thundercats DIY. Master cleanse Portland squid, beard keytar Helvetica sriracha street art gentrify art party ethnic. Typewriter fixie kale chips craft beer Truffaut. Vegan direct trade meh, pour-over actually kale chips wayfarers Portland. Cardigan Williamsburg flexitarian, narwhal master cleanse McSweeney's banh mi letterpress ennui brunch chia polaroid hoodie meggings 8-bit.

Here is what a paragraph would look like. And here is a link.

---
p Art party wayfarers Schlitz photo booth lomo ... 
---
p Here is what a paragraph with a <a href="#">link</a>.

Unordered Lists

  • Selvage Portland keytar
  • Hashtag PBR&B
  • For longer bullets, use the <strong> tag at the beginning.Wes Anderson craft beer 90's, leggings bitters gentrify gastropub normcore Shoreditch polaroid Cosby sweater tattooed. Drinking vinegar brunch leggings Carles, chillwave authentic cray stumptown cardigan hella. Meh artisan lo-fi pour-over distillery. Gluten-free put a bird on it drinking vinegar, Thundercats mumblecore wayfarers blog scenester small batch.
    • Raw denim
    • Gluten-free Etsy pug
    • Thundercats
---
ul
  li Selvage Portland keytar
  li Hashtag PBR&B
  li <strong>For longer bullets ...</strong> ...
  ul
    li Raw denim
    li Gluten-free Etsy pug
    li Thundercats
    

Ordered Lists

  1. Direct trade
  2. Neutra bitters
  3. Wes Anderson
---
ol
  li Direct trade
  li Neutra bitters
  li Wes Anderson
  

Pullquotes

"Organic YOLO chambray American Apparel kale chips. Squid stumptown cardigan gentrify, try-hard seitan sartorial gluten-free messenger bag before they sold out."

- Hispteria Crazedor, Coffee Shop Prophet
---
blockquote
  p. 
    "Organic YOLO chambray American Apparel kale chips. 
    Squid stumptown cardigan gentrify, try-hard seitan 
    sartorial gluten-free before they sold out." 
  footer - Hispteria Crazedor, Coffee Shop Prophet

Photos and Images

Thumbnail Photo

It's cool for small photos.

--- 
img.photo-thumbnail(src="images/sg/big-donuts.jpg")

Mentor Photo

--- 
img.photo-mentor(src="images/sg/strawberry-donuts.jpg")

Bio Photo

--- 
img.photo-bio(src="images/sg/chocolate-donuts.jpg")

Container-width Photo

This is great when you don't care.

--- 
img.photo(src="images/sg/so-many-donuts.jpg")

Tables

Class Table

Table title

Start date Location Instructor Closed
Start date Location Instructor Apply
Start date Location Instructor Wait List
---
h3.blue-text Table title
table.class-table
  tr.active
    td Start date
    td Location
    td Instructor
      a.btn(href="#") Closed
  tr
    td Start date
    td Location
    td Instructor
      a.btn(href="#") Apply
  tr
    td Start date
    td Location
    td Instructor
      a.btn(href="#") Wait List

Containers

Single Column Container

Questions? Want to know what makes us different?

Call (855) 399-2275 to talk to someone on the team.

(You can also shoot us an email or jump into our Academy Chat.)
---
.callout-box
  h4 Questions? Want to know what makes us different?
  p. 
    Call <strong><a href="tel:+18553992275"> (855) 399-2275</a>
    to talk to someone on the team.</strong>
  span.
    (You can also <a href="#">shoot us an email</a> or jump into 
      our <a href="#">Academy Chat</a>.)
      

Two Column Containers

Left Column Copy

Vegan wayfarers quinoa photo booth. Tote bag VHS cliche art party, occupy freegan artisan. Polaroid kale chips flannel hella cred. Artisan High Life keytar, actually farm-to-table beard Blue Bottle ethnic PBR. Mlkshk Cosby sweater 90's, next level semiotics seitan umami Wes Anderson Austin forage leggings.

Right Column Copy

Umami normcore jean shorts, Schlitz polaroid Godard twee wolf American Apparel roof party Truffaut Cosby sweater stumptown YOLO fap. Whatever pug ethnic tofu Brooklyn. Keffiyeh blog Schlitz umami, farm-to-table 8-bit authentic High Life mustache cliche.

Learn More
---
.col-sm-6
  h4 Left Column Copy
  p ...
  ul
    li Link 1
    li Link 2
    li Link 3
.col-sm-6
  h4 Right Column Copy
  p ...
  a(href="#" class="btn") Learn More
  .row
   .col-sm-6
     h4 Left Column Copy
     p Lorem ipsum
   .col-sm-6
     h4 Right Column Copy
     p Lorem ipsum
     

Two Column Bio Container

Nyan

Erlang Engineer

American Apparel wayfarers normcore mustache, Truffaut Intelligentsia XOXO irony deep v photo booth locavore next level. Helvetica post-ironic four loko dreamcatcher normcore gluten-free, tofu Wes Anderson. Next level retro Schlitz, cardigan cliche jean shorts shabby chic. Hashtag cliche bitters cred Banksy salvia. Austin ennui raw denim Thundercats, wolf asymmetrical paleo.

---   
.two-col-bio
  .row
   .col-sm-5
    .bio-left-col
      img.photo-bio(src="images/sg/nyancat.gif")
      a.btn.btn-contact(href="#")
        img(src="http://theironyard.com/images/email.png")
        p Say hello
    .col-sm-7
      h2 Allison Miller
      h4 Core Front End Dev at Benefit Focus
      p Bio summary here
      ul.links
        li: a(href="#") Link 1
        li: a(href="#") Link 2
        li: a(href="#") Link 3
        li: a(href="#") Link 4

Two Column With Side Bar Column

Left Column Content

PBR hashtag vegan wolf ennui. Letterpress quinoa raw denim, hoodie kale chips stumptown biodiesel Echo Park scenester XOXO 8-bit you probably haven't heard of them. Banksy Helvetica gentrify, distillery hoodie selfies art party American Apparel Truffaut fashion axe irony Tumblr salvia 8-bit keffiyeh. Put a bird on it Thundercats DIY narwhal, disrupt kogi tofu irony pop-up ugh.

Irony kitsch synth meh. Food truck Blue Bottle swag, wolf Odd Future slow-carb Etsy Intelligentsia synth High Life narwhal tofu. Sustainable ugh kale chips pop-up Blue Bottle Intelligentsia, Odd Future chillwave.

Right Column Content


More copy

---
.two-col-sb
  .row
    .two-col-sb-left.col-sm-8
      h2 Left Column Content
      p PBR hashtag ...
      p Irony kitsch synth ...
    .two-col-sb-right.col-sm-4
      h4 Right Column Content
      hr
      p More copy
      ul
        li: a(href="#") Item 1
        li: a(href="#") Item 2
        li: a(href="#") Item 3
        

Three Column Container w/Call To Action (cta)

Copy Title

Tote bag meh +1, master cleanse sustainable literally chia messenger bag fingerstache cray organic. Banksy deep v before they sold out iPhone umami.

---
.three-col-cta.row
  .col-lg-2.col-sm-2
    .image-box
      img(src="images/icons/front-end-engineering-logo.png")
  .col-lg-7.col-sm-6
    h3 Copy Title
    p Tote bag meh ...
  .col-lg-3.col-sm-4.cta-box
    a(href="#").btn.hover-yellow Learn More