diff --git a/news_layout/css/main.css b/news_layout/css/main.css index d80b568..8283b44 100644 --- a/news_layout/css/main.css +++ b/news_layout/css/main.css @@ -1 +1,90 @@ /* Write your CSS here */ +html { + background: green; +} +h1 { + color: white; + text-align: center; +} +@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; + /*align-self: flex-start;*/ + } + .first-article .article-img { + height: 300px; + order: 2; + padding-top: 0; + width: 400px; + } + .main-column { + flex: 3; + } + .nested-column { + flex: 2; + } +} +.column { + flex: 1; + flex-direction: column; + padding: 20px; +} +.column .main-column { + flex: 2; +} + +.nested-column { + flex-direction: row; +} +.nested-column .article { + justify-content: space-between; +} +.article { + flex: 1; + display: flex; + flex-direction: column; + flex-basis: auto; + background: white; + margin: 10px; + overflow: auto; +} +.article-body { + display: flex; + flex: 1; + flex-direction: column; + padding: 20px; + background: white; +} +.article-content { + flex: 1; +} +.first-article { + flex-direction: row; + align-self: flex-start; +} +.first-article .article-body { + flex: 1; +} +.first-article .article-img { + height: 300px; + order: 2; + padding-top: 0; + width: 400px; + margin: 0; +} + +.article img { + max-width: 100%; +} +figure { +margin: 0; +} diff --git a/news_layout/ga_logo_sm.png b/news_layout/ga_logo_sm.png new file mode 100644 index 0000000..9cbba70 Binary files /dev/null and b/news_layout/ga_logo_sm.png differ diff --git a/news_layout/img/pic1.jpg b/news_layout/img/pic1.jpg new file mode 100644 index 0000000..a5afb23 Binary files /dev/null and b/news_layout/img/pic1.jpg differ diff --git a/news_layout/img/pic2.jpg b/news_layout/img/pic2.jpg new file mode 100644 index 0000000..ed41d3f Binary files /dev/null and b/news_layout/img/pic2.jpg differ diff --git a/news_layout/img/pic3.jpg b/news_layout/img/pic3.jpg new file mode 100644 index 0000000..7058a54 Binary files /dev/null and b/news_layout/img/pic3.jpg differ diff --git a/news_layout/index.html b/news_layout/index.html index 1fcc87b..471bff6 100644 --- a/news_layout/index.html +++ b/news_layout/index.html @@ -1,11 +1,128 @@ + Flexbox Layout + - +
+

Juli's Travel Blog

+
+ + +
+
+ + +
+ +
+
+

+ Hello World +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque illo eum magnam quidem nihil accusamus reprehenderit quaerat itaque numquam iure libero tempora assumenda consectetur iusto, ab eveniet. Error, in. +

+
+ By Tom +
+
+ + + +
+ +
+ +
+
+

Hello World +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque illo eum magnam quidem nihil accusamus reprehenderit quaerat itaque numquam iure libero tempora assumenda consectetur iusto, ab eveniet. Error, in. +

+
+ By Tom +
+
+ + + +
+ +
+
+

Hello World +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque illo eum magnam quidem nihil accusamus reprehenderit quaerat itaque numquam iure libero tempora assumenda consectetur iusto, ab eveniet. Error, in. +

+
+ By Tom +
+
+ +
+ +
+ + +
+ +
+ +
+
+

Hello World +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque illo eum magnam quidem nihil accusamus reprehenderit quaerat itaque numquam iure libero tempora assumenda consectetur iusto, ab eveniet. Error, in. +

+
+ By Tom +
+
+ + + +
+ +
+
+

Hello World +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque illo eum magnam quidem nihil accusamus reprehenderit quaerat itaque numquam iure libero tempora assumenda consectetur iusto, ab eveniet. Error, in. +

+
+ By Tom +
+
+ + +
+ +
+
+

Hello World +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque illo eum magnam quidem nihil accusamus reprehenderit quaerat itaque numquam iure libero tempora assumenda consectetur iusto, ab eveniet. Error, in. +

+
+ +
+ + + + +
+