diff --git a/.DS_Store b/.DS_Store index bfe5ec3..7d558bf 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..07b5ebe 100644 --- a/news_layout/css/main.css +++ b/news_layout/css/main.css @@ -1 +1,118 @@ /* Write your CSS here */ +header{ + text-align: left; + background-color: rgba(156, 12, 10, .7); + border-bottom: solid rgba(150, 150, 150, 0.7); +} + +h1{ + margin-top: 0; + margin-right: 10px; + padding: 2px auto; +} + +h2{ + margin: 40px auto; + +} + +.sup{ + + position: relative; + top: -0.5em; + font-size: 50%; +} + +body{ + background-color: rgba(9,9,9,.8); + margin: 0px auto; + font-family: 'Roboto', sans-serif; +} + +img{ + max-width: 90%; + max-height: 90%; +} + +.columns { + display: flex; +} + +.column{ + margin: 10px; + flex-direction: column; + display: flex; + flex: 1; + flex-basis: auto; +} + +p{ + text-align: center; + text-align: justify; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; +} + +div figure{ + max-width: 90%; + border-left: solid rgba(150, 150, 150, 0.7); + border-bottom: solid rgba(150, 150, 150, 0.7); + border-top: thin rgba(150, 150, 150, 0.7); + background-color: rgba(156, 12, 10, .7); + padding: 10px; + color: rgba(0, 0, 0, 0.5); + flex: 1; + +} + +.column footer{ + font-size: 70%; + align-items: flex-end; + flex: 1; +} + + +.column .bottom-right{ + float: right; +} + +.column .bottom-left{ + float: left; +} + +.article-body{ + flex: 1; +} +@media only screen and (max-width: 865px) { + .columns, .column{ + display: flex; + } + body{ + float: none; + display: flex; + flex-direction: column; + } + + figure .article-body{ + max-height: 0px; + } + + header{ + transition: .2s; + text-align: center; + } + + footer p{ + margin: 0 auto; + } + .column .bottom-right{ + float: none; + margin: 0 auto; + } + + .column .bottom-left{ + float: none; + margin: 0 auto; + } +} diff --git a/news_layout/index.html b/news_layout/index.html index 1fcc87b..6a3dc17 100644 --- a/news_layout/index.html +++ b/news_layout/index.html @@ -4,8 +4,111 @@ Flexbox Layout + +
+

Headline

+
+ +
+
+
+

Article Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+

Sept. 16, 2017
By: J.G. Lowe

+
+
+ +
+
+

Article Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+

Sept. 16, 2017
By: J.G. Lowe

+
+
+ +
+
+

Article Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+
+ +
+
+
+

Article Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+

Sept. 16, 2017
By: J.G. Lowe

+
+
+ +
+
+

Article Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+
+ +
+
+
+

Article Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+

Sept. 16, 2017
By: J.G. Lowe

+
+
+ +
+
+

Article Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+

Sept. 16, 2017
By: J.G. Lowe

+
+
+ +
+
+

Article Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+
+ +
+
+
+

Article Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+

Sept. 16, 2017
By: J.G. Lowe

+
+
+ +
+
+

Article Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+
+