diff --git a/news_layout/css/main.css b/news_layout/css/main.css index d80b568..59714d3 100644 --- a/news_layout/css/main.css +++ b/news_layout/css/main.css @@ -1 +1,95 @@ -/* Write your CSS here */ +body { + background-color: #eee; + font-family: 'Playfair Display', serif; +} + +h1 { + text-align: center; + font-size: 50px; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); +} + + +img { + width: 100%; + margin: 0; +} + +.column { + flex: 1; + flex-direction: column; +} + +@media screen and (min-width: 800px) { + .columns, + .column { + display: flex; + } +} + +.main-columns { + flex: 2; +} + +.nested-column { + flex: 2; +} + +.article { + flex: 1; + display: flex; + flex-direction: column; + flex: basis; + margin: 15px; + background-color: white; + box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .4); + border-radius: 5px; +} + +.article-image { + position: relative; + margin: 0; +} + +.article-image img { + width: 100%; + vertical-align: top; + border-top-right-radius: 5px; + border-top-left-radius: 5px; +} + +.article-body { + padding: 5px; + display: flex; + flex: 1; + flex-direction: column; +} + +.article-content { + flex: 1; +} + +@media screen and (min-width: 1000px) { + .first-article { + flex-direction: row; + } + + .first-article .article-body { + flex: 1; + } + + .first-article .article-image { + height: 300px; + order: 2; + padding-top: 0; + width: 400px; + } + + .main-column { + flex: 3; + } + + .nested-column { + flex: 2; + } +} diff --git a/news_layout/index.html b/news_layout/index.html index 1fcc87b..3d58cd7 100644 --- a/news_layout/index.html +++ b/news_layout/index.html @@ -4,8 +4,114 @@ Flexbox Layout + - + +

Flexbox New's!

+ +
+
+ +
+ +
+
+

Buenos Días

+

Praesent a nulla velit. Nulla sem nisi, pretium ut ex sit amet, porta maximus risus. Proin efficitur tellus quis ex scelerisque viverra.

+
Feb 2, 2017
+
+ +
+
+ +
+ +
+
+

Buenos Días

+

Praesent a nulla velit. Nulla sem nisi, pretium ut ex sit amet, porta maximus risus. Proin efficitur tellus quis ex scelerisque viverra.

+
Feb 2, 2017
+
+ +
+
+ +
+ +
+
+

Buenos Días

+

Praesent a nulla velit. Nulla sem nisi, pretium ut ex sit amet, porta maximus risus. Proin efficitur tellus quis ex scelerisque viverra.

+
Feb 2, 2017
+
+ + +
+ +
+
+

Buenos Días

+

Praesent a nulla velit. Nulla sem nisi, pretium ut ex sit amet, porta maximus risus. Proin efficitur tellus quis ex scelerisque viverra.

+
Feb 2, 2017
+
+ + +
+ +
+
+

Buenos Días

+

Praesent a nulla velit. Nulla sem nisi, pretium ut ex sit amet, porta maximus risus. Proin efficitur tellus quis ex scelerisque viverra.

+
Feb 2, 2017
+
+ +
+
+
+ +
+ +
+ +
+
+

Buenos Días

+

Praesent a nulla velit. Nulla sem nisi, pretium ut ex sit amet, porta maximus risus. Proin efficitur tellus quis ex scelerisque viverra.

+
Feb 2, 2017
+
+ + +
+ +
+
+

Buenos Días

+

Praesent a nulla velit. Nulla sem nisi, pretium ut ex sit amet, porta maximus risus. Proin efficitur tellus quis ex scelerisque viverra.

+
Feb 2, 2017
+
+ + +
+ +
+
+

Buenos Días

+

Praesent a nulla velit. Nulla sem nisi, pretium ut ex sit amet, porta maximus risus. Proin efficitur tellus quis ex scelerisque viverra.

+
Feb 2, 2017
+
+ + +
+ +
+
+

Buenos Días

+

Praesent a nulla velit. Nulla sem nisi, pretium ut ex sit amet, porta maximus risus. Proin efficitur tellus quis ex scelerisque viverra.

+ +
+ +
+