Stylist Desktop Landing

index.jade

body#bootstrap-overrides
  header#layout-header
    a(href="http://www.threadgenius.co", target="_blank")
      img(src="https://s3.amazonaws.com/threadgenius-web-assets/icon-small.png").logo
  //TODO - add sidebar as needed for extensibility
  //TODO - extract main into a section if parallax is going to be sought after
  main#layout-main.container
    //TODO make text slightly longer by expanding container or widening col
    .row
      h5.col-xs-8.col-xs-offset-4.blurb
        | Stylist is your personal fashion expert powered by <a> Thread Genius’ </a> machine learning algorithms.
    form(action="#InstagramAPI")
      .row
        .col-xs-5.col-xs-offset-4
          input(type="text", placeholder="Instagram username").input-lg.form-control
  footer#layout-footer

style.sass

/*** Variables ***/
$golden-ratio: 1.618
$body-copy-size: 20px
$text-color: #EEEEEE
$modular-scale: $golden-ratio
$top-bottom-size: 130px
/*** Utilities **/
@function pow($number, $exponent)
  $value: 1
  @if $exponent > 0
    @for $i from 1 through $exponent
      $value: $value * $number
  @else if $exponent < 0 
    @for $i from 1 through -$exponent
      $value : $value / $number
  @return $value

/*** Base ***/
//Declare all header tags using modular scale
// For Reference:
   Given: 1280 Screen and $body-copy-size: 20px
   p: 20px 1em
   h6: 32.36px == 1em * (modularscale)**1 == 1.618 em
   h5: 52.358px == 1em * (modularscale)**2  == 2.618 em
   h4: 84.716px == 1em * (modularscale)**3 == 4.236 em


@for $i from 1 through 6
  h#{$i}
    font-size: $body-copy-size * pow($modular-scale, (7 - $i))
h1, 
h2, 
h3, 
h4, 
h5, 
h6
  font-family: futura,
  color: $text-color
p
  extend h1
  font-size: 20px
a
  text-decoration: underline
  display: inline
  
/*** Layout ***/
#layout-header
  position: fixed
  width: 100%
  height: $top-bottom-size
  //border: 1px solid yellow
#layout-footer
  //TODO take away later
  display: none
  @extend #layout-header
  background-color: red
  opacity: 0.5
body::before
  //TODO theres gotta be a better way to do a full page background
  position: fixed
  content: ""
  left: 0
  right: 0
  background: url(http://res.cloudinary.com/dlzngjsza/image/upload/v1471647937/fashion-1_rofbqz.jpg) no-repeat center center fixed
  background-size: cover
  width: 100%
  height: 100%
  filter: brightness(47%)
/*** MODULES ***/
.blurb
  line-height: 1.3
  margin-top: $top-bottom-size
  //border: 1px solid yellow
  letter-spacing: 0.1em //100 in typographic tools
  //text-align right or left?

//Inputs
//Input Module - Bootstrap Override 
#bootstrap-overrides input
  font-family: "open sans"
  letter-spacing: 0.05em
  margin-top: 10px
  color: $text-color
  border-radius: 0
  //background-color: transparent
  padding-left: 0
  border: none
  border-bottom: solid 3px white
  float: left
  background: url("http://res.cloudinary.com/dlzngjsza/image/upload/e_grayscale/v1471897485/instagram-photo-camera-logo-outline_sfwa47.png") no-repeat 5px
  background-size: 30px 30px
  padding-left: 45px
  &:focus, &:active
    background: url("http://res.cloudinary.com/dlzngjsza/image/upload/v1471897485/instagram-photo-camera-logo-outline_sfwa47.png") no-repeat 5px
    background-size: 30px 30px

::placeholder
  color: $text-color

//Logo
.logo
  opacity: 0.27
  height: 67px
  width: 67px
  position: relative
  top: 32px
  left: 32px
  transition: all 0.5s ease-in-out
  &:hover
    opacity: 1

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

stylist-desktop-landing.markdown

Stylist Desktop Landing

A Pen by Stephen Huh on CodePen.

License.