diff --git a/news_layout/css/main.css b/news_layout/css/main.css index d80b568..a037bc9 100644 --- a/news_layout/css/main.css +++ b/news_layout/css/main.css @@ -1 +1,133 @@ -/* Write your CSS here */ +html { + background: purple; + font-size: 16px; +} + +body { + color: white; + font-family: "Verdana", "Arial", sans-serif; + font-size: 12px; + line-height: 1.4; +} + +a { + text-decoration: none; +} + +div, h2, p, figure { + margin: 0; + padding: 0; +} + +.header { + color: black; + font-size: 20px; + padding: 40px 0 20px; + text-align: center; +} + +.header h1 { + font-size: 40px; + font-weight: bold; +} + +.header h2 a { + color: white; + font-size: 20px; +} + +.main { + margin: 0 auto; + max-width: 1040px; + padding: 12px; +} + +.column { + flex: 1; + flex-direction: column; +} + +.article { + background: white; + color: black; + display: flex; + flex: 1; + flex-direction: column; + flex-basis: auto; + margin: 10px; +} + +.article-image { + background: #eee; + display: block; + padding-top: 75%; + position: relative; + width:100%; +} + +.article-image img { + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} + + +.article-body { + display: flex; + flex: 1; + flex-direction: column; + padding: 20px; +} + +.article-title { + color: #333; + flex-shrink: 0; + font-size: 20px; +} + +.article-content { + flex: 1; + margin-top: 5px; +} + +.article-info { + display: flex; + font-size: 12px; + 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: 300px; + order: 2; + padding-top: 0; + width: 400px; + } + + .main-column { + flex: 3; + } + + .nested-column { + flex: 2; + } +} diff --git a/news_layout/images/cactus.JPG b/news_layout/images/cactus.JPG new file mode 100644 index 0000000..56c2a73 Binary files /dev/null and b/news_layout/images/cactus.JPG differ diff --git a/news_layout/images/close_up.JPG b/news_layout/images/close_up.JPG new file mode 100644 index 0000000..d3a7a8b Binary files /dev/null and b/news_layout/images/close_up.JPG differ diff --git a/news_layout/images/outside.JPG b/news_layout/images/outside.JPG new file mode 100644 index 0000000..e79af3b Binary files /dev/null and b/news_layout/images/outside.JPG differ diff --git a/news_layout/images/walking.JPG b/news_layout/images/walking.JPG new file mode 100644 index 0000000..b9eb8ca Binary files /dev/null and b/news_layout/images/walking.JPG differ diff --git a/news_layout/index.html b/news_layout/index.html index 1fcc87b..9c53174 100644 --- a/news_layout/index.html +++ b/news_layout/index.html @@ -2,10 +2,101 @@ - Flexbox Layout + Fabulous Feline Gazette - +
+

Fabulous Feline Gazette

+
+ +
+
+ +
+ outside at sunset +
+
+

+ Beautiful Weather +

+

+ 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 Crazy Cat Lady + 0 comments +
+
+
+ +
+ +
+ +
+ Exploring local flora +
+
+

Understanding Cat Behaviors

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mre ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. +

+
+ By Cat + 2 comments +
+
+
+ +
+

Hello Cat World

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Rmel orem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. +

+ +
+
+
+