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 +
+
+ + +
+
+ +
+ Sparrow +
+
+

Sparrow

+

+ 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 Crazy Cat Lady + 0 comments +
+
+ +
+
+ +
+ Going outside on a walk +
+
+

Taking Your Human on a Walk

+

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

+
+ 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. +

+ +
+ +
+