From 2eb4a9e878b69cca1b9601be79b79864b3de8f5a Mon Sep 17 00:00:00 2001 From: Karle Durante Date: Thu, 18 Oct 2012 16:15:35 -0400 Subject: [PATCH] updating layout to latest comp. --- app/assets/stylesheets/application.scss | 45 +++++----- app/assets/stylesheets/home.scss | 108 ++++++++++++++++-------- app/views/home/_buy_now.html.erb | 31 +++++++ app/views/home/_design.html.erb | 10 +++ app/views/home/_goal.html.erb | 6 +- app/views/home/_intro.html.erb | 3 + app/views/home/_message.html.erb | 7 ++ app/views/home/index.html.erb | 64 +++----------- app/views/layouts/application.html.erb | 5 +- 9 files changed, 165 insertions(+), 114 deletions(-) create mode 100644 app/views/home/_buy_now.html.erb create mode 100644 app/views/home/_design.html.erb create mode 100644 app/views/home/_intro.html.erb create mode 100644 app/views/home/_message.html.erb 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 @@ +
+

Buy Now

+ + +
+ \ No newline at end of file diff --git a/app/views/home/_design.html.erb b/app/views/home/_design.html.erb new file mode 100644 index 0000000..01acc7d --- /dev/null +++ b/app/views/home/_design.html.erb @@ -0,0 +1,10 @@ +
+ <%= image_tag "shirt_design.jpg", :width => 500%> +
+ +
+ <%= image_tag "thumbnail.jpg", :width => 100, :class => 'thumbnail' %> + <%= image_tag "thumbnail.jpg", :width => 100, :class => 'thumbnail' %> + <%= image_tag "thumbnail.jpg", :width => 100, :class => 'thumbnail' %> + <%= image_tag "thumbnail.jpg", :width => 100, :class => 'thumbnail' %> +
\ No newline at end of file diff --git a/app/views/home/_goal.html.erb b/app/views/home/_goal.html.erb index 554d36e..c71a42d 100644 --- a/app/views/home/_goal.html.erb +++ b/app/views/home/_goal.html.erb @@ -4,9 +4,9 @@ shirts sold -
-

15

- days to go +
+

$600

+ dollars raised
diff --git a/app/views/home/_intro.html.erb b/app/views/home/_intro.html.erb new file mode 100644 index 0000000..5baa2c1 --- /dev/null +++ b/app/views/home/_intro.html.erb @@ -0,0 +1,3 @@ +

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

\ No newline at end of file diff --git a/app/views/home/_message.html.erb b/app/views/home/_message.html.erb new file mode 100644 index 0000000..839f454 --- /dev/null +++ b/app/views/home/_message.html.erb @@ -0,0 +1,7 @@ +

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

\ No newline at end of file diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 222c809..231d3e9 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,64 +1,28 @@
- +

Movember

Team Stachesquatch

-
-
- <%= image_tag "stachesquatch_2012.jpg", :width=> "620" %> -
+
+ <%= render :partial => 'design' %>
-
-

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

+
+ <%= render :partial => 'intro' %> + <%= render :partial => 'goal' %> + <%= render :partial => 'buy_now' %>
-
 
+
 
-
-

American Apparel Jersey T-Shirt

-
- <%= image_tag "shirt_design.jpg"%> -
+
About
- <%= image_tag "thumbnail.jpg"%> - <%= image_tag "thumbnail.jpg"%> - <%= image_tag "thumbnail.jpg"%> - <%= image_tag "thumbnail.jpg"%> +
+ <%= render :partial => 'message' %>
-
- - <%= render :partial => 'goal' %> - -
-
-

$20

-
-
-

Unisex T-Shirt

-
-
- -
-
-
-

$20

-
-
-

Ladies T-Shirt

-
-
- +
+
+ <%= image_tag "stachesquatch_2012.jpg", :width=> "525" %>
\ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index c77c981..7a26386 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -21,7 +21,10 @@
- +
+ + +