From f7ee29878a28b7a222628a0bf4263e24e12b0143 Mon Sep 17 00:00:00 2001 From: Matt Heck Date: Fri, 3 Mar 2017 01:47:29 -0600 Subject: [PATCH 1/2] homework for March second --- news_layout/css/main.css | 128 ++++++++++++++++++++++++++++++- news_layout/index.html | 158 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 283 insertions(+), 3 deletions(-) diff --git a/news_layout/css/main.css b/news_layout/css/main.css index d80b568..2ebac73 100644 --- a/news_layout/css/main.css +++ b/news_layout/css/main.css @@ -1 +1,127 @@ -/* Write your CSS here */ +html { + background-color: #485468; +} + +a { + text-decoration: none; +} + +div, h2, p, figure { + margin: 0; + padding: 0; +} + +.header { + color: white; + padding 40px 0 20px + text-align: center; +} + +.header h1 { + font-size: 40px + font-weight: bold; +} + +.header h2 a { + border-bottom: 1px solid + color: white; + font-size: 20px +} + +.header h2 a:hover { + border-bottom-color: white; + opacity:1; +} + +.main { + margin: 0 auto; + max-width: 1040px; + padding: 10px; +} + +.column { + flex: 1; + flex-direction: column; +} + +.article { + background: white; + color: #666; + display: flex; + flex: 1; + flex-direction: column; + flex-basis: auto; + margin: 10px +} + +.article-image img { + display: block; + height: 100%; + left: 0; + position: relative; + top: 0; + width: 100%; +} + +.article-image.is-16by9 { + padding-top: 20%; +} + +.article-body { + display: flex; + flex: 1; + flex-direction: column; + padding: 20px; +} + +.article-title { + color: #333; + flex-shrink: 0; + font-size: 1.4em; + font-weight: 200; +} + +.article-content { + flex: 1; + margin-top: 5px; +} + +.article-info { + display: flex; + font-size: 2em; + justify-content: space-between; + margin-top: 10px; +} + + +@media screen and (min-width: 800px) { + .columns, + .column { + display: flex; + } +} + +@media screen and (min-width: 1000px) { + .first-article { + flex-direction: row; + } + + .first-article .article-body { + flex: 1; + } + + .first-article .article-image { + height: 100px; + order: 2; + padding-top: 0; + width: 50px; + } + + .main-column { + flex: 3; + } + + .nested-column { + flex: 2; + } +} diff --git a/news_layout/index.html b/news_layout/index.html index 1fcc87b..94dbdb0 100644 --- a/news_layout/index.html +++ b/news_layout/index.html @@ -2,10 +2,164 @@ - Flexbox Layout + news layout +
+

Michigan

+

Michigan is the best state in the whole country

+
+
+
+ +
+ Turnip Rock +
+
+

+ YO +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros. +

+
+ by dude + 50 comments +
+
+ +
+
+ +
+ lake +
+
+

+ SUP +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. +

+
+ by dude + 69 comments +
+ +
+
+ +
+ water +
+
+

+ wassah duh +

+

+ stuff goes in here +

+
+ by me + 69 comments +
+
+ +
+
+

+ marhaba +

+

+ so much content, the best content +

+
+ by a dog + 1938 comments +
+
+
+
+
+ +
+ +
+ Turnip Rock +
+
+

+ YO +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros. +

+
+ by dude + 50 comments +
+
+ +
+
+ +
+ lake +
+
+

+ SUP +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. +

+
+ by dude + 69 comments +
+ +
+
+ +
+ water +
+
+

+ wassah duh +

+

+ stuff goes in here +

+
+ by me + 69 comments +
+
+ +
+
+

+ marhaba +

+

+ so much content, the best content +

+
+ by a dog + 1938 comments +
+
+
+
+ +
+ - + From bb0cee0d3defc035288c43689fde3da8345b716e Mon Sep 17 00:00:00 2001 From: Matt Heck Date: Fri, 3 Mar 2017 08:53:48 -0600 Subject: [PATCH 2/2] flexbox news homework complete --- .DS_Store | Bin 6148 -> 6148 bytes news_layout/index.html | 8 ++++---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.DS_Store b/.DS_Store index bfe5ec3e19bfed1a3c6afd7a646beee2847ce58a..515695f4933e3ed694fb885b9fff3885d4aa998c 100644 GIT binary patch delta 43 zcmZoMXfc@J&&a$nU^gQp^JX3<6GqOI;^ds9{QMlo$vjL_n;n>!uxw`M_{$Ff65|Yp delta 34 qcmZoMXfc@J&&aefU^nAr0}+

by dude - 69 comments + 50 comments
@@ -63,7 +63,7 @@

by me - 69 comments + 50 comments
@@ -119,7 +119,7 @@

by dude - 69 comments + 50 comments
@@ -137,7 +137,7 @@