diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 9cebeff..8a20049 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -54,37 +54,32 @@ p { } .header { - background-color: $red; - color: $white; - height : 40px; + height : 50px; width: 100%; + border-bottom: 3px solid $orange; margin: 0 0 25px 0; -} -.logo { - padding: 10px; - margin-right: auto; margin-left: auto; width: 980px; -} + .inner_header { + padding: 10px; + margin-right: auto; margin-left: auto; width: 980px; + color: $orange; -.content { - margin-right: auto; margin-left: auto; width: 980px; -} + .logo { + width: 100px; + float: left; + } -.left_column { - width: 620px; - float: left; - margin-bottom: 20px; -} + .share { + width: 300px; + float: right; + text-align: right; + padding-right: 60px; + } -.right_column { - width: 300px; - float: left; - margin-left: 20px; - margin-bottom: 20px; + } } -.reset_columns { - clear: both; - margin: 10px 0 0 0; - height: 10px; + +.content { + margin-right: auto; margin-left: auto; width: 980px; } \ No newline at end of file diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss index 74ea47d..97ca133 100644 --- a/app/assets/stylesheets/home.scss +++ b/app/assets/stylesheets/home.scss @@ -1,14 +1,28 @@ @import "colors"; +.design_column { + width: 500px; + float: left; + margin-bottom: 20px; + margin-top: 15px; +} + +.intro_column { + width: 360px; + float: left; + margin-left: 40px; + margin-bottom: 20px; +} + .intro_graphic { margin-top: 1em; } .goal { - border-radius: 2px; - background-color: $grey; - padding: 20px; - margin: 30px 0 15px; + margin: 30px 0; + padding: 20px 0; + border-top: solid 1px $grey; + border-bottom: solid 1px $grey; h1, h2 { color: $brown; @@ -16,12 +30,11 @@ .sold { float: left; - width: 130px; + width: 180px; } - .days_left { + .progress { float: left; - margin-left: 35px; } .reset { @@ -29,26 +42,26 @@ } .meter { - margin: 20px 0 10px; + margin: 20px 0 5px; border-radius: 7px; - border: 2px solid $red; - background-color: $white; - height: 15px; + background-color: $grey; + height: 12px; .fill { background-color: $red; - border-radius: 3px; - height: 15px; + border-radius: 7px 0 0 7px; + height: 12px; } } } .buy { - border-radius: 2px; - background-color: $red; - padding: 1em; - margin: 15px 0; - color: $white; + border-radius: 4px; + background-color: $blue; + padding: 25px; + margin: 25px; + color: white; + text-align: center; &:hover { color: $dark_red; @@ -57,38 +70,63 @@ h1, h2 { color: $white; + font-size: 36px; + text-shadow: $grey 0.1em; &:hover { - color: $dark_red; + color: $grey; cursor: pointer; } } - .cost { - float: left; - width: 85px; - } - - .product { - float: left; - } - - .reset { - clear: both; - } - .purchase { text-align: center; } } - .shirt_design { text-align: center; display: block; - margin: 5px 0 20px 0 + margin: 5px 0; +} + +.thumbnails { + text-align: center; } .thumbnail { - padding: 0 5px 0 5px; + padding: 0 3px; + width: 110px; +} + +.reset_columns { + clear: both; + height: 5px; +} + +.about_header { + margin: 5px 0 0 0; + border-radius: 2px; + height: 20px; + width: 900px; + padding: 5px 15px; + font-size: 18px; + background-color: $orange; + color: $white; + font-weight: 300; + font-family: museo-slab,Tahoma,sans-serif; +} + +.about_column { + width: 360px; + float: left; + margin-bottom: 20px; + margin-top: 15px; +} + +.group_column { + width: 520px; + float: left; + margin-left: 40px; + margin-bottom: 20px; } \ No newline at end of file diff --git a/app/views/home/_buy_now.html.erb b/app/views/home/_buy_now.html.erb new file mode 100644 index 0000000..06dd0f0 --- /dev/null +++ b/app/views/home/_buy_now.html.erb @@ -0,0 +1,31 @@ +
It's Movember and time to make a difference.
+This year we are selling limited edition Tees to raise funds for men's health, specifically prostate and testicular cancer initiatives. With a purchase, you are not only supporting a great cause but you also get a really cool T-shirt.
+Thanks,
Team Stachesquatch
It's Movember and time to make a difference.
+ +Men's health is a cause we're passionate about. Our commitment is to grow a mustache for the month of November and by changing our appearance, raise vital awareness and funds men's health, specifically prostate and testicular cancer initiatives.
+ +This year we are selling a limited edition T-Shirt to raise funds. With a purchase, you are not only supporting a great cause, but you also get a really cool T-Shirt.
+ +Thanks,
- Team Stachesquach
It's Movember and time to make a difference.
- -Men's health is a cause we're passionate about. Our commitment is to grow a mustache for the month of November and by changing our appearance, raise vital awareness and funds men's health, specifically prostate and testicular cancer initiatives.
- -This year we are selling a limited edition T-Shirt to raise funds. With a purchase, you are not only supporting a great cause, but you also get a really cool T-Shirt.
- -Thanks,
- Team Stachesquach