fancy pictures and shit

resources/public/base.css

@@ -1,10 +1,16 @@
 #content {
-  padding-top:80px;
-  min-height:1000px;
+  padding-top:60px;
+  min-height: 900px;
+}
+
+.logo {
+  margin-bottom:30px;
 }
 
 p {
+  font-family: 'Roboto', sans-serif;
   font-size: 20px !important;
+  padding-bottom:25px;
 }
 
 a {
@@ -16,8 +22,70 @@ a:hover {
   text-decoration: none !important;
 }
 
+.call-to-action {
+  margin-bottom: 40px;
+}
+
+.call-to-action .btn {
+  border:2px solid #FF6249;
+}
+
+.call-to-action .btn:hover {
+  border:2px solid #CF3219;
+}
+
+.call-to-action .btn span {
+  font-size: 14px;
+  padding-left:5px;
+}
+
+.tea-color {
+  min-height:200px;
+  color: #F1F1F1;
+}
+
+.tea-color .photo {
+  margin-top: 40px;
+  background: white;
+  padding: 15px 15px 40px 15px;
+  box-shadow: 2px 2px 2px #383838;
+  border-top: 1px solid #F1F1F1;
+  border-left: 1px solid #F1F1F1;
+}
+
+.green-tea {
+  background: #058262;
+}
+
+.green-tea .photo {
+  -ms-transform: rotate(6deg);
+  -webkit-transform: rotate(6deg);
+  transform: rotate(6deg);
+}
+
+.white-tea {
+  color: #131313;
+}
+
+.white-tea .photo {
+  -ms-transform: rotate(-10deg);
+  -webkit-transform: rotate(-10deg);
+  transform: rotate(-10deg);
+}
+
+.black-tea {
+  background: #131313;
+}
+
+.black-tea .photo {
+  -ms-transform: rotate(8deg);
+  -webkit-transform: rotate(8deg);
+  transform: rotate(8deg);
+  box-shadow: 2px 2px 2px #131313;
+}
+
 .footer {
-  border-top:2px solid #eee;
+  border-top:2px solid #FF6249;
   width:100%;
   padding:20px;
   background: #fafafa;
@@ -26,8 +94,9 @@ a:hover {
 
 .footer p {
   margin:0px;
+  padding-bottom: 10px;
 }
 
 .footer p a span {
-  font-size:24px;
+  font-size:30px;
 }

src/nates_nice_tea/views/layout.clj

@@ -9,28 +9,69 @@
       [:meta {:charset "utf-8"}]
       [:meta {:http-equiv "X-UA-Compatible" :content "IE=edge,chrome=1"}]
       [:meta {:name "viewport" :content "width=device-width, initial-scale=1, maximum-scale=1"}]
-      [:meta {:name "description" :content "Nate’s Nice Tea is brewed with tea leaves and spring water. The leaves come from around the world as different regions produce their own uniquely nuanced tea."}]
+      [:meta {:name "description" :content "Nate’s Nice Tea is brewed with tea leaves and spring water."}]
       [:meta {:name "keywords"
         :content (str title ",Nates Nice Tea,Subscription Tea,Monthly Tea,Tea,Green Tea,Black Tea,White Tea")}]
       [:meta {:name "author" :content "Jake Kring"}]
       [:title title]
       (include-css "/base.css")
       (include-css "/bootstrap.min.css")
-      (include-css "http://fonts.googleapis.com/css?family=Arvo")]
+      (include-css "http://fonts.googleapis.com/css?family=Roboto:300")]
     [:body
-      [:div {:id "content" :class "container"} body]
+      [:div {:id "content" :class "container-fluid"} body]
       [:div {:class "footer"}
         [:p
           [:a {:href "https://github.com/jkring/nates-nice-tea"}
             [:span "⚒  "] " in Oakland"]]]]))
 
-(defn home []
-  (common "Nate's Nice Tea"
-    [:div {:class "row"}
-      [:div {:class "col-md-3 col-md-offset-1 text-center" }
+(defn logo []
+  [:div {:class "row"}
+      [:div {:class "col-md-3 col-md-offset-1 text-center logo" }
         [:img {:src "../logo.png"}]]
       [:div {:class "col-md-6"}
-        [:p "Nate’s Nice Tea is brewed with tea leaves and spring water. The leaves come from around the world as different regions produce their own uniquely nuanced tea. A buttery white tea from China melts in your mouth while a brisk black tea from India tingles your tongue. The tea plant’s origin as well as the oxidation and processing of the picked leaf influence the flavors in each jar of Nate’s Nice Tea."]]]))
+        [:p
+          [:b "Nate’s Nice Tea"]
+          " is brewed with tea leaves and spring water. The leaves come from around the world as different regions produce their own uniquely nuanced tea. A buttery white tea from China melts in your mouth while a brisk black tea from India tingles your tongue. The tea plant’s origin as well as the oxidation and processing of the picked leaf influence the flavors in each jar of Nate’s Nice Tea."]]])
+
+(defn green []
+  [:div {:class "row tea-color green-tea"}
+    [:div {:class "col-md-6 col-md-offset-1"}
+      [:h1 "Green Tea"]
+      [:p "Lebowski ipsum yeah man, it really tied the room together. Dolor sit amet, consectetur adipiscing elit praesent ac. Life does not stop and start at your convenience, you miserable piece of shit. Magna justo pellentesque ac lectus. They're nihilists. Quis elit blandit fringilla a. They finally did it. They killed my fucking car. Ut turpis praesent felis ligula, malesuada suscipit malesuada non. Vee vant zat money, Lebowski. Ultrices non urna sed orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem."]]
+    [:div {:class "col-md-3 text-center"}
+      [:img {:class "photo" :src "../placeholder.png"}]]])
+
+(defn white []
+  [:div {:class "row tea-color white-tea"}
+    [:div {:class "col-md-3 col-md-offset-1 text-center"}
+        [:img {:class "photo" :src "../placeholder.png"}]]
+    [:div {:class "col-md-6"}
+      [:h1 {:class "text-right"} "White Tea"]
+      [:p "Lebowski ipsum yeah man, it really tied the room together. Dolor sit amet, consectetur adipiscing elit praesent ac. Life does not stop and start at your convenience, you miserable piece of shit. Magna justo pellentesque ac lectus. They're nihilists. Quis elit blandit fringilla a. They finally did it. They killed my fucking car. Ut turpis praesent felis ligula, malesuada suscipit malesuada non. Vee vant zat money, Lebowski. Ultrices non urna sed orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem."]]])
+
+(defn black []
+  [:div {:class "row tea-color black-tea"}
+    [:div {:class "col-md-6 col-md-offset-1"}
+      [:h1 "Black Tea"]
+      [:p "Lebowski ipsum yeah man, it really tied the room together. Dolor sit amet, consectetur adipiscing elit praesent ac. Life does not stop and start at your convenience, you miserable piece of shit. Magna justo pellentesque ac lectus. They're nihilists. Quis elit blandit fringilla a. They finally did it. They killed my fucking car. Ut turpis praesent felis ligula, malesuada suscipit malesuada non. Vee vant zat money, Lebowski. Ultrices non urna sed orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem."]]
+    [:div {:class "col-md-3 col-md-offset-1 text-center"}
+      [:img {:class "photo" :src "../placeholder.png"}]]])
+
+
+(defn call-to-action []
+  [:div {:class "row"}
+    [:div {:class "col-md-12 text-center call-to-action"}
+      [:a {:class "btn btn-lg" :role "button" :href "/order" }
+        "Order Nate's Nice Tea"
+        [:span {:class "glyphicon glyphicon-play" :aria-hidden "true" }]]]])
+
+(defn home []
+  (common "Nate's Nice Tea"
+    (logo)
+    (call-to-action)
+    (green)
+    (white)
+    (black)))
 
 (defn four-oh-four []
   (common "Page Not Found"