diff --git a/news_layout/css/main.css b/news_layout/css/main.css index d80b568..6aed286 100644 --- a/news_layout/css/main.css +++ b/news_layout/css/main.css @@ -1 +1,64 @@ -/* Write your CSS here */ +/*General styling */ +body { + font-family: "Arimo", sans-serif; +} + +h2 { + font-size: 30pt; +} + +p { + color: #444444; +} + +footer { + color: #666666; + text-align: right; +} +.column { + background-color: #fdfdfd; +} + +.article { + background-color: #B9DEFB; + margin: 10px; + padding: 20px; + box-shadow: 0 3px 3px 0 #888888; + line-height: 150%; +} + +/* Flex spacing */ +.columns { + display: flex; +} + +.column { + display: flex; + flex-direction: column; + flex: 1; +} + +.main-column { + flex: 2; +} + +.article { + display: flex; + flex-direction: column; + flex: 1; +} + +.article-body { + flex: 1; +} + +.nested-column { + flex: 2; +} + +@media screen and (max-width: 900px) { + .column, .columns { + display: block; + } +} + diff --git a/news_layout/index.html b/news_layout/index.html index 1fcc87b..09fa86d 100644 --- a/news_layout/index.html +++ b/news_layout/index.html @@ -3,9 +3,64 @@ Flexbox Layout + - +
+
+ +
+

Hello World

+

Before they sold out blue bottle occupy try-hard. Selvage occaecat chia consectetur non aesthetic mixtape cray small batch viral veniam. Pitchfork kogi taxidermy roof party forage iceland magna farm-to-table. Godard umami microdosing cloud bread ex irure DIY cray try-hard tilde marfa taiyaki sartorial sunt. Aute adipisicing godard XOXO microdosing dolor seitan church-key knausgaard. Deep v organic yr williamsburg DIY vice in ugh cardigan ad.

+
0 comments
+
+ +
+
+
+

Once Upon a Time

+

Duis farm-to-table fam tote bag cold-pressed semiotics. Bespoke slow-carb taxidermy church-key pabst. Tumeric cornhole bicycle rights gentrify velit. Vice gochujang meh tumeric live-edge, four loko fingerstache. Veniam intelligentsia poutine cloud bread irure kitsch vinyl marfa locavore. Ethical lyft poke, flexitarian etsy blog hella chicharrones glossier cornhole green juice pok pok.

+
0 comments
+
+
+
+
+

Over the Hills

+

Pitchfork fixie et, woke celiac nostrud nulla umami glossier coloring book. Chia dolor leggings sriracha sint.

+
0 comments
+
+
+

And Far Away

+

Vegan you probably haven't heard of them vinyl, man braid 8-bit fugiat vice single-origin coffee intelligentsia microdosing wolf helvetica.

+
0 comments
+
+
+
+ + +
+
+ +
+

Cool Stuff

+

Kitsch chillwave leggings aesthetic. Commodo four loko distillery af umami, dreamcatcher dolore yr. Non asymmetrical 8-bit food truck bushwick thundercats anim ut live-edge reprehenderit. Food truck XOXO bitters, viral locavore do pop-up la croix jianbing authentic blue bottle sed. Tofu ut ennui, crucifix irure bespoke gentrify narwhal subway tile consectetur voluptate.

+
0 comments
+
+ +
+

Three's Company

+

Photo booth kinfolk cloud bread, biodiesel pariatur brunch dolore squid brooklyn succulents. Helvetica activated charcoal aesthetic, occupy officia affogato cold-pressed freegan culpa hot chicken salvia snackwave. Mumblecore id cillum crucifix edison bulb vape taiyaki fingerstache et microdosing subway tile hashtag. Tumblr green juice man braid blue bottle keffiyeh deserunt anim cupidatat normcore tumeric.

+
0 comments
+
+ +
+

That's All, Folks

+

Poke ugh humblebrag id cillum skateboard activated charcoal thundercats banh mi post-ironic butcher leggings. Typewriter skateboard aliqua try-hard af art party occaecat ad selfies. Chia 3 wolf moon dolor narwhal, gentrify in adaptogen. XOXO YOLO street art laboris, sustainable consectetur aute subway tile literally air plant everyday carry typewriter swag qui.

+ +
+ +
+