wdi-atx-12 · Miguelwoluba · Sep 15, 2017
diff --git a/news_layout/css/main.css b/news_layout/css/main.css
@@ -1 +1,160 @@
 /* Write your CSS here */
+body {
+  background-color: #3cb371;
+  color: #666666;
+  font-family: 'Open Sans', sans-serif;
+padding: 50px 50px 50px 50px;
+}
+
+h1 {
+  color: white;
+  text-align: center;
+}
+li a {
+  text-decoration: none;
+  font-family: 'Open Sans', sans-serif;
+  color: yellow;
+  font-size: 25px;
+  padding: 5px;
+}
+li {
+  text-decoration: none;
+  list-style: none;
+  display: inline-flex;
+}
+
+nav {
+
+  display: flex;
+  flex-direction: row;
+  background-color: #2f4f4f;
+}
+.columns {
+  display: flex;
+}
+
+.column {
+  flex: 1;
+}
+
+.main-column {
+  flex: 2;
+}
+.column {
+  display: flex;
+  flex-direction: column; /* Makes the articles stacked vertically */
+}
+
+.article {
+  flex: 1; /* Stretches the articles to fill up the remaining space */
+}
+.article {
+  display: flex;
+  flex-direction: column;
+  flex-basis: auto; /* sets initial element size based on its contents  */
+}
+
+.article-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.article-content {
+  flex: 1; /* This will make the content fill up the remaining space, and thus push the information bar at the bottom */
+}
+.article {
+  font-family: 'Open Sans', sans-serif;
+  text-decoration: none;
+  background-color: #f8f5f2;
+  box-shadow: 0 2px 7px rgba(0, 39, 32, 0.6);
+  margin: 5px;
+}
+.nested-column {
+  flex: 2;
+}
+
+.first-article {
+  flex-direction: row;
+}
+
+.first-article .article-body {
+  flex: 1;
+}
+
+.first-article .article-image {
+  height: 300px;
+  order: 2;
+  padding-top: 0;
+  width: 400px;
+}
+@media screen and (max-width: 950px) {
+  .first-article {
+    flex-direction: row;
+  }
+
+  .first-article .article-body {
+    flex: 1;
+  }
+
+  .first-article .article-image {
+
+  }
+
+  .main-column {
+    flex: 3;
+  }
+
+  .nested-column {
+    flex: 2;
+  }
+}
+.columns {
+  flex-direction: column;
+}
+.article-image img {
+  width: 100%;
+  vertical-align: top;
+  }
+
+.article-body {
+  padding: 15px;
+  color: #546e7a;
+}
+
+.article-title {
+  margin: 0;
+  color: #f57c00; /* #263238; */
+  font-family: 'Open Sans', sans-serif;
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+
+.article-content {
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+.article-info {
+  font-size: 14px;
+  font-style: italic;
+}
+
+.third {
+  padding-left: 20px;
+}
+li:hover {
+  background-color: yellow;
+  color: purple;
+}
+
+
+
+
+
+
+
+
+
+
diff --git a/news_layout/css/normalize.min.css b/news_layout/css/normalize.min.css
diff --git a/news_layout/images/photo-1.jpg b/news_layout/images/photo-1.jpg
diff --git a/news_layout/images/photo-3.jpg b/news_layout/images/photo-3.jpg
diff --git a/news_layout/images/photo-4.jpg b/news_layout/images/photo-4.jpg
diff --git a/news_layout/images/photo-5.jpg b/news_layout/images/photo-5.jpg
diff --git a/news_layout/images/photo-6.jpg b/news_layout/images/photo-6.jpg
diff --git a/news_layout/images/photo-7.jpg b/news_layout/images/photo-7.jpg
diff --git a/news_layout/index.html b/news_layout/index.html
@@ -4,8 +4,97 @@
     <meta charset="utf-8">
     <title>Flexbox Layout</title>
     <link rel="stylesheet" href="css/main.css">
+    <link href="css/normalize.min.css" rel="stylesheet">
   </head>
   <body>
   <!-- Starter File -->
+      <header>
+      <nav>
+        <ul>
+          <li><a href="#" title="">HTML</a></li>
+          <li><a href="#" title="">CSS</a></li>
+          <li><a href="#" title="">RESULT</a></li>
+        </ul>
+      </nav>
+        <h1>The Envato Tuts+ Report</h1>
+      </header><!-- /header -->
+
+        <div class="columns">
+            <div class="column main-column">
+              <!--2/3 column-->
+              <a class="article first-article">
+                      <figure class="article-image">
+                        <img src="images/photo-7.jpg">
+                      </figure>
+                          <div class="article-body">
+                                <h2 class="article-title">
+                                  <!-- title --> Nullus in verba
+                                </h2>
+                                  <p class="article-content">
+                                  <!-- content -->
+                                  Bespoke laborum unicorn crucifix, direct trade flannel pariatur green juice est vape post-ironic. Umami hella ut, tousled mollit 90's laborum 3 wolf moon. Tempor vegan VHS, enamel pin raclette subway tile church-key actually. Retro photo booth subway tile, kickstarter tumblr mixtape irure hot chicken keffiyeh. Sartorial offal lomo tote bag butcher deep v affogato authentic mlkshk 3 wolf moon. Gochujang etsy tacos, air plant chia kickstarter shaman viral forage ethical authentic portland. Hell of velit actually typewriter nostrud, vexillologist organic aesthetic hoodie four loko. Man braid activated charcoal chambray, mlkshk dolore thundercats nostrud tumeric synth. Vape mumblecore VHS listicle truffaut woke kale chips intelligentsia ramps eiusmod mollit fugiat. Do coloring book selfies, keytar mumblecore in sint eiusmod plaid freegan lorem pok pok. Green juice la croix cray kitsch, PBR&B hashtag gentrify echo park. Skateboard cliche bitters, vexillologist street art trust fund drinking vinegar.
+                                  </p>
+                            <footer class="article-info">
+                              <!-- information --> By Miguel Mejia 2017
+                            </footer>
+                          </div>
+              </a>
+              </div>
+                  <div class="column nested-column">
+                    <!--1/3 column-->
+                        <a class="article second-article">
+                              <figure class="article-image">
+                                <img src="images/photo-5.jpg">
+                              </figure>
+                                  <div class="article-body">
+                                      <h2 class="article-title">
+                                        <!-- title -->
+                                        Deferor hospes
+                                      </h2>
+                                        <p class="article-content">
+                                          <!-- content -->
+                                          Polaroid hashtag esse raw denim consequat aliqua humblebrag ipsum, quis enim tattooed proident kitsch echo park. Sriracha fingerstache pinterest glossier minim. Before they sold out freegan pitchfork, disrupt raw denim artisan listicle iPhone enim master cleanse ad waistcoat chicharrones. Butcher fanny pack hell of reprehenderit single-origin coffee kitsch umami. Celiac air plant chambray, vegan ex forage veniam coloring book. Banjo lo-fi sint, biodiesel small batch wayfarers skateboard put a bird on it aute single-origin coffee godard. Labore occupy chia qui taxidermy hot chicken sriracha, enim vaporware franzen neutra. Succulents fanny pack blue bottle, knausgaard retro in humblebrag squid man bun. Voluptate duis adipisicing 3 wolf moon vice meggings blog. Nulla commodo prism banjo tattooed helvetica. Quinoa poutine etsy 8-bit mumblecore in duis. Elit excepteur pitchfork et fanny pack man bun hammock blog post-ironic woke craft beer ea. Ipsum shoreditch hoodie nisi est sed labore ad tote bag cupidatat biodiesel offal.
+                                        </p>
+                                    <footer class="article-info">
+                                      <!-- information -->
+                                      By Miguel Mejia 2017
+                                    </footer>
+                                </div>
+                        </a>
+                  </div>
+                    <div class="columns">
+                      <div class="column">
+                        <a class="article">
+                        <figure class="article-image">
+                        <img src="images/photo-6.jpg">
+                        </figure>
+                          <!-- Article content -->
+                          <p class="third">
+                          Nisi forage id cray. Shaman locavore man bun freegan keffiyeh polaroid dreamcatcher iPhone air plant la croix messenger bag jean shorts neutra taxidermy franzen. Helvetica schlitz kogi humblebrag fanny pack normcore biodiesel af. Succulents nostrud messenger bag incididunt microdosing kinfolk culpa shabby chic selfies id taxidermy. Trust fund forage vegan sriracha, lorem la croix selvage small batch cornhole ut pariatur leggings before they sold out. Heirloom excepteur health goth slow-carb. Yr id nisi banjo air plant offal. Dolore literally 8-bit, godard dolore ut banjo PBR&B four loko twee. Voluptate austin eiusmod, DIY tilde kinfolk readymade typewriter biodiesel. Fam exercitation tumblr church-key, adaptogen meggings waistcoat scenester YOLO hell of nulla velit occupy.
+                          </p>
+                        </a>
+                      </div>
+
+                              <div class="column">
+                                <a class="article">
+                                  <!-- Article content -->
+                                  <h4>konichiwa</h4>
+                                  helo nojdfnjcsjcndihjalblvkcn skjnbclfkhvbl fbvln lfhkvbleahkbv
+                                </a>
+                                <a class="article">
+                                  <!-- Article content -->
+                                  <h4>konichiwa</h4>
+                                   <p>lcnas dc sdkjbvlsnc slcahhvbjlhsv n lsnbvljhb lnhvblfvbh</p>
+                                </a>
+                                <a class="article">
+                                  <!-- Article content -->
+                                  <h4>konichiwa</h4>
+                                  <p>jibovjalnsdkjncofdhvbldkndljvhfvdbhlafdvjbnl cnbdfhjavb</p>
+                                </a>
+                              </div>
+                    </div>
+
+        </div>
+
   </body>
 </html>