diff --git a/.DS_Store b/.DS_Store index bfe5ec3..515695f 100644 Binary files a/.DS_Store and b/.DS_Store differ 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..7588b57 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 + 50 comments +
+ +
+
+ +
+ water +
+
+

+ wassah duh +

+

+ stuff goes in here +

+
+ by me + 50 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 + 50 comments +
+ +
+
+ +
+ water +
+
+

+ wassah duh +

+

+ stuff goes in here +

+
+ by me + 50 comments +
+
+ +
+
+

+ marhaba +

+

+ so much content, the best content +

+
+ by a dog + 1938 comments +
+
+
+
+ +
+ - +