Update landing page

cofacts · Mar 25, 2018 · 021d376 · 021d376
1 parent 164222f
commit 021d376
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 10 deletions.
diff --git a/static/img/giraffe.jpg b/static/img/giraffe.jpg
diff --git a/static/img/media/businesstoday.png b/static/img/media/businesstoday.png
diff --git a/static/img/media/ltn.png b/static/img/media/ltn.png
diff --git a/static/img/media/udn.png b/static/img/media/udn.png
diff --git a/static/img/recording-still.gif b/static/img/recording-still.gif
diff --git a/static/img/recording.mp4 b/static/img/recording.mp4
diff --git a/static/img/thumbnail.jpg b/static/img/thumbnail.jpg
diff --git a/static/index.css b/static/index.css
@@ -54,8 +54,39 @@ h2 {
   font-size: 3em;
   font-weight: 900;
 }
-.section-what {
-  padding-bottom: 0;
+.section-line {
+  padding: 0 40px;
+}
+.section-line .inner {
+  display: flex;
+  flex-flow: wrap;
+  justify-content: center;
+  align-items: flex-end;
+}
+.section-line .content {
+  padding: 40px 0;
+  min-width: 50%;
+  -webkit-flex: 1;
+  flex: 1;
+}
+.phone-container {
+  margin: 0 20px;
+  max-width: 100%;
+  width: 360px;
+  overflow: hidden;
+}
+.phone-container .phone-img {
+  width: 100%;
+  padding-bottom: 150%;
+  background: url("img/phone.png") top left;
+  background-size: cover;
+  position: relative;
+}
+.phone-container video {
+  position: absolute;
+  width: 78%;
+  left: 11%;
+  top: 14%;
 }
 .section-why {
   background: #fff url("img/cofacts-db-bg.jpg") bottom left no-repeat;
@@ -105,16 +136,13 @@ h2 {
   font-size: 0.9em;
   color: #555;
 }
+.section-contribute {
+  background: #fff url("img/giraffe.jpg") bottom right no-repeat;
+  background-size: 150px auto;
+}
 .section-footer a {
   color: #9be;
 }
-.phone-container {
-  overflow: hidden;
-  height: 400px;
-}
-.phone {
-  width: 100%;
-}
 .sep.gap-sm {
   margin: 15px 0;
 }

diff --git a/static/index.html b/static/index.html