Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <!--logo-->
  <div id="logo">
the weptim times
  </div>
  <!--navbar-->
  <nav id="navbar">
    <ul>
      <li><a href="#in-the-news" class="active">news</a>  </li>
      <li>world </li>
      <li>tech </li>
      <li>business </li>
      <li>travel </li>
      <li>tourism </li>
      <li>science </li>
      <li>entertainment </li>
      <li>politics </li>
      <li>arts </li>
      <li>invetigations </li>
      <li>sports </li>
      <li>others </li>
      <li>books </li>
      <li>magazine </li>
      
      
    </ul>
  </nav>
  <!--header-showcase-->
  <header id="showcase">
    <section class="img-txt">
      <img src="https://images.pexels.com/photos/1693650/pexels-photo-1693650.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      <article>
        <p class="title"><a href="#">listen to recent podcast</a></p>
        <p class="lead">Lorem ipsum dolor sit amet nec euismod felis libero et ipsum</p>
      </article>
    </section>
        <section class="img-txt br">
      <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      <article>
        <p class="title"><a href="#">in her words</a></p>
        <p class="lead">Lorem ipsum dolor sit amet. nec euismod felis libero et ipsum</p>
      </article>
    </section>
        <section class="img-txt br">
      <img src="https://images.pexels.com/photos/102720/pexels-photo-102720.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      <article>
        <p class="title"><a href="#">get a confident news tip</a></p>
        <p class="lead">Lorem ipsum dolor sit amet nec euismod felis libero et ipsum</p>
      </article>
    </section>
     <section class="img-txt br">
      <img src="https://images.pexels.com/photos/302440/pexels-photo-302440.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      <article>
        <p class="title"><a href="#">write as a guest writer</a></p>
        <p class="lead"><a href="#">Lorem ipsum dolor sit amet nec euismod felis libero et ipsum</a></p>
      </article>
    </section>
  </header>
  <!--showcase-ends-here-->
<!-- in the news -->
    <section id="in-the-news">
      <main>
        <!--one-and-two-grid-->
        <section class="one-by-one">   
          <article>
        <h3 class="title"><a href="#">
White House Pressed Agency to Repudiate Forecasters Who Disputed Trump</a></h3>
        <p class="lead"><a href="#">Dan Bishop, a state senator, scored a victory in a special House election.</a></p>
<p class="lead"><a href="#">It demonstrated President Trump’s appeal with his political base, but also highlighted his party’s deepening unpopularity with suburban voters.</a></p>
            <small class="small"> 1h ago 983 comments</small>
      </article>
          <div>
            <video controls>
  <source src="https://player.vimeo.com/external/224889047.sd.mp4?s=5a330ba05788e44599a79c73bfb5422c6b55c4d9&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
            </video>
            </div>
        </section>
        <!-- one by one grid-->
        <section class="one-by-one">
          <article>
            <h3 class="title"><a href="#">Bolton’s Ouster Underscores the G.O.P.’s Foreign Policy Divide</a></h3>
        <p class="lead"><a href="#">The dismissal of John Bolton, the national security adviser, is the latest sign of a rift that pits hawkish conservatives against an anti-interventionist flank.</a></p>
            <small class="small">54m ago</small>
          </article>
          <article>
            <h3 class="title"><a href="#">President Trump called for the “Boneheads” at the Federal Reserve to cut interest rates below zero.</a></h3>
            <small class="small">32m ago501 comments</small>
   
          </article>
        </section>
        <!-- one-one-one-grids-->
        <section class="one-one-one">
          <article>
             <h3 class="title"><a href="#">With Trump Hungry for Credit, Advisers Brag About North Carolina Win</a></h3>
        <p class="lead"><a href="#">Officials on the president’s re-election campaign said Dan Bishop’s victory in North Carolina came thanks to President Trump, who told aides he wasn’t getting recognition he felt he deserved.</a></p>

            <small class="small">6m ago</small>
          </article>
          <img src="https://images.pexels.com/photos/1552173/pexels-photo-1552173.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <div>
          <p class="lead"><a href="#">Tonight’s debate: when it is, where to watch it and a look at the issues dividing the candidates.
</a></p>
        <small><a href="#">Elizabeth Warren and Joe Biden will finally debate. Here’s what to expect.</a></small>

          </div>      
        </section>
                <!--one-and-two-grid-->
        <section class="one-by-one">   
          <article>
            <h3><a href="#"> California Bill Makes App-Based Companies Treat Workers as Employees</a></h3>
<p class="lead"><a href="#">The state’s ride-hailing drivers, food-delivery couriers, janitors and others are set to be reclassified as employees and not contractors.</a></p>
            <p class="lead"><a href="#"> California Bill Makes App-Based Companies Treat Workers as Employees</a></p>

           <small class="small"> 3h ago830 comments</small>
      </article>
          <div>
            <img src="https://images.pexels.com/photos/1586034/pexels-photo-1586034.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            <div class="small">Supporters of a California bill that reclassifies contractors as employees outside the State Capitol in Sacramento, Calif. last month. Rich Pedroncelli/Associated Press</div>
            </div>
        </section>
         <!-- one by one grid-->
        <section class="one-by-one">
          <article>
            <h3 class="title"><a href="#">She Fled the 68th Floor. She’s Finally Dealing With 9/11 Trauma.</a></h3>
        
 <p class="lead"><a href="#">A woman who survived the Sept. 11, 2001, attacks had a foreclosure and two drunken-driving convictions before she was diagnosed with PTSD.</a></p>

          <small class="small">  13m ago 66 comments</small>
          </article>
          <article class="br">
            <h3><a href="#">Nursing Homes as a Breeding Ground for a Fatal Fungus</a></h3>
        <p>Drug-resistant germs prey on severely ill patients in skilled nursing facilities, a problem sometimes amplified by poor care and low staffing.</p>
          </article>

          <small class="small">Health 43m ago 70 comments</small>
        </section>
        <!-- one by one-->
        <section class="one-by-one">
          <article>
            <h3 class="lead"><a href="#">The Top 10 Candidates Meet: A Guide to Thursday’s Debate</a></h3>
            <p class="lead"><a href="#">The top Democrats will face off for the first time. Joe Biden and Elizabeth Warren will be at the center.</a></p>
         <small class="small">1h ago</small>
          </article>
          <article>
            <img src="https://images.pexels.com/photos/2770600/pexels-photo-2770600.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          </article>
        </section>
         <!-- one-one-one-grids-->
        <section class="one-one-one">
          <article>
             <h3 class="title"><a href="#">What Spy? Kremlin Mocks Aide Recruited by C.I.A. as a Nobody</a></h3>
        <p class="lead"><a href="#">The Russian news media have been working overtime to diminish the importance of a turncoat who the United States says helped expose 2016 election meddling.</a></p>
            

WorldSept. 11
          </article>
          <img src="https://images.pexels.com/photos/1619860/pexels-photo-1619860.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        <article>
            <h3 class="title"><a href="#">couple trkers ended up in an iran jail</a></h3>
        <p class="lead"><a href="#">A couple was on a once-in-a-lifetime journey from Australia to Britain. They documented it all on social media and a website, but then the posts suddenly stopped
</a></p>
          <small class="small">Middle East5h ago</small>
          </article>   
        </section>
           <!--one-and-two-grid-->
        <section class="one-and-two">  
          <div>
        <h3 style ="border-right:1px solid lightgrey" class="title"><a href="#">Tonight’s debate: when it is, where to watch it and a look at the issues dividing the candidates.
2m ago</a></h3>
          </div>
          <div>
        <h3 class="lead"><a href="#">Elizabeth Warren’s latest proposal to redistribute wealth calls for raising Social Security benefits by $200 a month.
          </a></h3>
            <small class="small">42m ago</small>
          </div>
        </section>
        <!-- two by one grid-->
        <section id="two-by-one" class="bb">
           <article>
    <h3 class="title" style ="border-right:1px solid lightgrey"><a href="#">A letter by corporate chiefs is the latest example of the business community’s stepping into a sensitive political area, our columnist writes.</a></h3>
          </article>
          <article>
            <h3 class="title"><a href="#">‘Simply Unacceptable’: 145 Executives Demand Action on Gun Violence</a></h3>
          </article>
        </section>
           <!-- one-one-one-grids-->
        <section class="one-one-one">
          <article>
             <h3 class="title"><a href="#">How Jewish Should the Jewish State Be? </a></h3>
        <p class="lead"><a href="#">Question Shadows Israeli Vote
The long-simmering conflict between Israel’s secular and religious Jews takes center stage in the national election on Tuesday.</a></p>
            <small class="small">3h ago 182 comments</small>
          </article>
          <img src="https://images.pexels.com/photos/2885919/pexels-photo-2885919.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        <article>
<small class="small">
  A letter by corporate chiefs is the latest example of the business community’s stepping into a sensitive political area, our columnist writes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis diam sem.</small>
          </article>   
        </section>
              <!--one-and-two-grid-->
        <section class="one-and-two">   
          <article>
        <h3 class="title"><a href="#">The Great Flood of 2019: A Look at a Slow-Motion Disaster</a></h3>
        <p class="lead"><a href="#">Extensive flooding throughout the Midwest and South this spring affected nearly 14 million people. An analysis shows how far it spread.</a></p>
          <small class="small">  8m ago</small>
      </article>
          <div>
            <img src="https://images.unsplash.com/photo-1545276070-ec815f01c6ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            <small class="small">
              Lorem ipsum dolor sit amet nec euismod felis libero et ipsum  Lorem ipsum dolor sit amet
              </small>
            </div>
        </section>
      </main>
      <aside class="br">
        <!-- opinion -->
        <div id="opinion">
          <h3>opinion<span class="span"> </span>
          <article style="border-bottom:1px solid lightgrey">
            <header class="article-header">
              <small class="small">john doe</small>
              <img src="https://images.unsplash.com/flagged/photo-1531889236320-35bcb7d1a5fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </header>
            <h3 class="title"><a href="#"> Let Trump Destroy Trump</a><h3>
<p class="small"><a href="#">The Democratic nominee, whoever it turns out to be, should use the president’s contortions and carrying on against him.</a></p>

            <small class="small"> 6m ago 1232 comments</small>
          </article>
             <section class="one-by-one">
          <article>
            <h3 class="title"><a href="#">A Strong Bipartisan Path to Tackle Gun Violence</a></h3>
        <p class="lead"><a href="#">A red flag law will reduce bloodshed and respect the rights of gun owners.,</a></p>           
          <small class="small">  6m ago 509 comments</small>
          </article>
          <article>
            <img src="https://images.pexels.com/photos/2770600/pexels-photo-2770600.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          </article  style="padding:1em 0;">
        </section>
           <!-- specific posts which are classified-->
             <section class="one-by-one">
               <main style="border">
                    <article>
            <header class="article-header">
              <small class="small">hulk hogan doe</small>
              <img src="https://images.unsplash.com/flagged/photo-1531889236320-35bcb7d1a5fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </header>
            <p class="title"><a href="#"> Elizabeth Warren’s Plan for Social Security Looks Smart</a></p>
          </article>
                  <article  style="padding:1em 0;">
            <header class="article-header">
               <small class="small">weptim</small>
              <img src="https://images.unsplash.com/flagged/photo-1531889236320-35bcb7d1a5fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </header>
                    <p class="title"><a href="#"> religous Crusaders at the Supreme Court’s Gates</a></p>
          </article>
                  <article style="padding:1em 0;">
            <header class="article-header">
              <small class="small">green latena</small>
              <img src="https://images.unsplash.com/flagged/photo-1531889236320-35bcb7d1a5fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </header>
            <p class="title"><ahref="#">‘We Never Moved Back to Kashmir, Because We Couldn’t’</a></p>
          </article>
                  <article>
            <header class="article-header">
              <small class="small">leo messi</small>
              <img src="https://images.unsplash.com/flagged/photo-1531889236320-35bcb7d1a5fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </header>
            <p class="title"> <ahref="#">Four Key Things You Should Know About Health Care</a></p>
          </article>
               </main>
               
               <aside class="br">
                  <article>
            <header class="article-header">
              <small class="small">who me</small>
            </header>
            <p class="title"><ahref="#">10 Candidates, No Weather Maps</a></p>
          </article>
                                   <article  style="padding:1em 0;">
            <header class="article-header">
              <small class="small">tupac shakur</small>
            </header>
            <p class="title"><ahref="#">Our Children Deserve Better</a></p>
          </article>
                                   <article  style="padding:1em 0;">
            <header class="article-header">
              <small class="small">mutuwa janet</small>
            </header>
            <p class="title"><ahref="#"> No One Saw America as Clearly as Robert Frank</a></p>
          </article>
              <article  style="padding:1em 0;">
            <header class="article-header">
              <small class="small">mutuwa janet</small>
            </header>
            <p class="title"> <ahref="#">You Call It the Gig Economy. California Calls It ‘Feudalism.’</a></p>
          </article>
               </aside>
        </section>
        </div>
          <!-- editors-pic-->
          <div class="editor-pic">
            <h3 class="title" style="padding:1em 0; text-transform:uppercase;">
              editors pic
            </h3>
            <section>
              <div>
            <img src="https://images.pexels.com/photos/2479312/pexels-photo-2479312.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                <small class="small">weptim for the weptim times</small>
              </div>
            <p class="title">anthony tang lets his guar down</p>
            <p class="lead"><a href="#"> After years of scrutiny over her career, relationships and setbacks, the movie star hopes the public sees another side in her memoir, “Inside Out.”</a></p>
<small class="small"> Books 43m ago</small>
            
            </section>
            <section>
            <div>
            <img src="https://images.pexels.com/photos/1583582/pexels-photo-1583582.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                <small class="small">weptim for the weptim times</small>
              </div>
            <p class="title">anthony tang lets his guar down</p>
            <p class="lead"><a href="#">There is little evidence that stays by military personnel at President Trump’s resort in Scotland are part of a scheme to enrich him. But they have raised ethical and political questions.
</a></p>
<small class="small"> 12m ago 70 comments</small>
            </section>
            <div class="bb">
            </div>
            <!-- one by one div-->
            <section class="one-by-one">
              <article>
                <h3 class="title"><a href="#">    
Administration to Finalize Rollback of Clean Water Protections    </a></h3>
                <p class="lead"><a href="#">  The regulation had placed limits on polluting chemicals that could be used near streams, wetlands and water bodies.</a>
</p>
                <small class="small">
                2h ago 792 comments
                </small>
              </article>
              <article>
                <img src="https://images.pexels.com/photos/1048035/pexels-photo-1048035.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
              </article>
            </section>
            <!-- one by one div-->
            <section class="one-by-one">
              <article>
                <h3 class="title"><a href="#">
                 fantasy footballer of 2019 who was your favourite
                  </a>
                </h3>
 <p> <a href="#">Saquon Barkley was the top pick, but quarterback choices were all over the map, ESPN data shows.,</a></p>
                <small class="small">The Upshot 36m ago </small>
              </article>
              <article>
                <img src="https://images.pexels.com/photos/2190159/pexels-photo-2190159.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
              </article>
            </section>
              <!-- one by one div-->
            <section class="one-by-one">
              <article>
                <h3 class="title"><a href="#">  He Wanted a Little Charm Downtown. Which Place Did He Choose?</a></h3>
              <p class="lead"><a href="#">
A first-time buyer hunts for a unique one-bedroom with a “homey vibe” for under $650,000. Is that possible below 14th Street?</a></p>

                <small class="small"> Real Estate19m ago</small>
              </article>
              <article>
                <img src="https://images.pexels.com/photos/1777479/pexels-photo-1777479.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
              </article>
            </section>
          </div>
      </aside>
    </section>
    <!-- in-other-news-->
          <!-- all its blog posts belong here-->
      <section id="in-other-news">
        <h3 style="text-transform:uppercase;">in other news</h3>
        <div class="grid">
          <article>
            <img src="https://images.pexels.com/photos/2246258/pexels-photo-2246258.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            <h3 class="title"><a href="#">
              Democrats in the House Are Split on Impeachment. That Could Come to a Head This Fall
              </a>
            </h3>
            <p><a href="#">For the first time in the 2020 Democratic primary, the top 10 candidates took the stage together Thursday night in Houston for a debate that focused on issues ranging from healthcare to gun violence to foreign policy</a></p>
            <small class="small">7hrs ago</small>
          </article>
          <main class="br">
              <!-- one by one div-->
            <section class="one-by-one">
              <article>
                <h3 class="title"><a href="#">
               An Open Letter (and a Rant) on Age Discrimination at Work
                  </a>
                </h3>
                <p class="lead"><a href="#">One writer, in his 50s, has applied to more than 100 jobs. And a second has had it up to her silver bob with younger colleagues’ condescension.</a></p>
                <small class="small">
                  7 hrs ago
                </small>

              </article>
              <article>
                <img src="https://images.pexels.com/photos/1083981/pexels-photo-1083981.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280">
              </article>
            </section>
                          <!-- one by one div-->
            <section class="one-by-one">
              <article>
                <h3 class="title"><a href="#">
                 Dior Finally Says No to Sauvage,
                  </a>
                </h3>
                <p class="lead">Why luxury fashion and cultural appropriation are on a collision course.</p>
                <small class="small">
                  7 hrs ago
                </small>
              </article>
              <article>
                <img src="https://images.pexels.com/photos/1368614/pexels-photo-1368614.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
              </article>
            </section>
                          <!-- one by one div-->
            <section class="one-by-one">
              <article>
                <h3 class="title"><a href="#">
                 Bahamas, Still Reeling, Braces for Tropical Storm Humberto
                  </a>
                </h3>
                <p class="lead">The Men Who Got Arrested Hoping to 'Storm Area 51' Say They Did Notice Those No Trespassing Signs</p>
                <small class="small">
                  7 hrs ago
                </small>
              </article>
              <article>
                <img src="https://images.pexels.com/photos/3008/drinks-supermarket-cans-beverage.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
              </article>
            </section>
          </main>
          <aside class="br">
            <h3 class="title"><a href="#">
              'The Worst Natural Disaster I've Ever Seen.' U.S. Search and Rescue Team Describes Hurricane Dorian's Impact on the Bahamas
              </a>
            </h3>
            <h3 class="title"><a href="#">
              The new storm is not expected to pack Hurricane Dorian’s destructive power, but it could complicate a difficult recovery.
            </h3>
            <h3 class="title"><a href="#">
             Here's What Protesters Were Shouting at Joe Biden During the Third Democratic Debate
              </a>
            </h3>
            <h3 class="title"><a href="#">
             This Comic Creator Hopes His Terrible Ideas for Producing Energy Will Inspire You to Think of Better Ones
              </a>
            </h3>
          </aside>
          
        </div>
      </section>
      <!-- end of in the news posts-->
      <!-- smarter living-->
        <!-- smart living post-->
      <section id="smarter-living">
        <h3 class="bleed">smarter living</h3>
          <article>
            <img src="https://images.pexels.com/photos/845242/pexels-photo-845242.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            <p class="title"><a href="#">
             Secure Your Digital Life in 7 (Easy) Days
              </a></p>
            <small class="small">Smarter Living Sept. 13</small>
          </article>
                    <article class="br">
            <img src="https://images.pexels.com/photos/207665/pexels-photo-207665.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            <p class="title"><a href="#">
              How to Help Your Child Succeed at School

              </a></p>
            <small class="small">Sept. 13</small>
          </article>
                    <article class="br" >
            <img src="https://images.pexels.com/photos/2174209/pexels-photo-2174209.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            <p class="title"><a href="#">
                If You Hate Floss, It’s O.K. to Try These Alternatives
              </a></p>
            <small class="small">Wirecutter Sept. 13</small>              
          </article>
                    <article class="br">
            <img src="https://images.pexels.com/photos/2096578/pexels-photo-2096578.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            <p class="title"><a href="#">
              How to Tackle Tough Drop-Offs
              </a></p>
            <small class="small">Aug. 29</small>
          </article>
                    <article class="br">
            <img src="https://images.pexels.com/photos/2074130/pexels-photo-2074130.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            <p class="title"><a href="#">
              How to Make Your Smartphone Last Longer
              </a></p>
            <small class="small">Smarter Living Sept. 13</small>
                      
          </article>
      </section>
      <!-- featured posts-->
      <section id="featured">
        <h3 class="bleed">featured</h3>
          <main>
            <div>
              <img src="https://images.pexels.com/photos/69903/pexels-photo-69903.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
            </div>
            <h3 class="title">
              <a href="#">
               ‘The Sound of Silence’ Review: Plenty to Hear, but What Does It Mean?
              </a>
            </h3>
            <p class="lead">
              <a href="#">
              Peter Sarsgaard and Rashida Jones star in a drama for your ears that brings big ideas but does more telling than showing.
            </a>
            </p>
            

            <small class="small">Movies 4h ago</small>
          </main>
          <!-- another side- of festured post-->
          <aside class="br">
             <section class="one-by-one">
              <article>
                <img src="https://images.pexels.com/photos/1667583/pexels-photo-1667583.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">  <h3 class="title"><a href="#">João Félix Is in a Hurry. So Is Everyone Else.</a></h3>
 <p class="lead"><a href="#">Félix has gone from Benfica’s academy to Cristiano Ronaldo’s heir apparent with dizzying speed. But how fast is too fast? </a></p>
                </article>
              <article class="br">
   <img src="https://images.pexels.com/photos/607812/pexels-photo-607812.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"><h3 class="title"><a href="#">Apple Is Set to Unveil New iPhones on Tuesday.</a></h3>
 <p class="lead"><a href="#">Apple is expected to unveil new iPhones and more during a Tuesday, Sept. 10 event at its Steve Jobs Theater, </a></p>
              </article>       
            </section>
            <section class="one-by-one">
              <article>
                <img src="https://images.pexels.com/photos/1935975/pexels-photo-1935975.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"><h3 class="title"><a href="#">One in Four of New York’s New Luxury Apartments Are Unsold</a></h3>
 <p class="lead"><a href="#">Here's What Young People All Over the World Say They Want Most in a Partner </a></p>
                </article>
              <article class="br">
                               <img src="https://images.pexels.com/photos/265685/pexels-photo-265685.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"><h3 class="title"><a href="#">House Inquiry Seeks Files, Some Personal, From Tech Executives</a></h3>
 <p class="lead"><a href="#">Lawmakers investigating Amazon, Apple, Facebook and Google  </a></p>
              </article>       
            </section>
          </aside>
      </section>
      <!-- discovery-->
      <section id="discovery">
        <h3 class="bleed">discovery</h3>
      <article>
        <img src="https://images.pexels.com/photos/606506/pexels-photo-606506.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                   <p class="title">
              <a href="#">
                Nunc rhoncus ex quam, vel cursus lectus lobortis eget. 
              </a>
            </p>
            <p class="lead">
              <a href="#">
                Nunc rhoncus ex quam, vel cursus lectus lobortis eget. Nunc rhoncus ex quam, vel cursus lectus lobortis
                Curabitur sagittis fringilla augue sit amet euismod.
            </a>
            </p>
        <small class="small">drugs sept 2019</small>
        </article>
        <article class="br">
                  <img src="https://images.pexels.com/photos/1282308/pexels-photo-1282308.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                   <h3 class="title">
              <a href="#">
                Who’s Missing From Breast Cancer Trials? Men, Says the F.D.A.
              </a>
            </h3>
            <p class="lead">
              <a href="#">
              Men do get breast cancer, but they account for fewer than 1 percent of patients and often receive inadequate care.
            </a>
            </p>
          <small class="small">health sept 2019</small>
        </article>
        <article class="br">
<div class="one-by-one">
  <article>
<h3 class="title"><a href="#">who is killing our environment</a></h3>
 <p class="lead"><a href="#">It Is Our Very Governments Who Are Killing the Earth.A Brazilian Indigenous Leader Speaks Out On Deforestation in the Amazon </a></p>
    <small class="small">tech sept 2019</small>
  </article>
      <img src="https://images.pexels.com/photos/459670/pexels-photo-459670.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          </div>
          <div class="one-by-one">
   <article>
<h3 class="title"><a href="#">Apple Is Set to Unveil New iPhones on Tuesday.</a></h3>
 <p class="lead"><a href="#">Apple is expected to unveil new iPhones and more during a Tuesday, Sept. 10 event at its Steve Jobs Theater, </a></p>
     <small class="small">tech sept 2019</small>
  </article>
      <img src="https://images.pexels.com/photos/607812/pexels-photo-607812.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          </div>
        </article>
      </section>
      <!-- most popular posts-->
      <section id="most-popular">
        <h3 class="bleed">most popular</h3>
           <article>
          <img src="https://images.pexels.com/photos/1559040/pexels-photo-1559040.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <h3 class="title"><a href="#">  An Open Letter (and a Rant) on Age Discrimination at Work </a></h3>
          <p class="lead"><a href="#">One writer, in his 50s, has applied to more than 100 jobs.</a></p>
        </article>
                <article class="br">
          <img src="https://images.pexels.com/photos/607812/pexels-photo-607812.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <h3 class="title"><a href="#"> Apple Is Set to Unveil New iPhones on Tuesday. </a></h3>
          <p class="lead"><a href="#">Apple is expected to unveil new iPhones and more during a Tuesday, Sept. 10 event at its Steve Jobs Theater,</a></p>                 
        </article>
                <article class="br">
          <img src="https://images.pexels.com/photos/459670/pexels-photo-459670.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <p class="title"><a href="#">   who is killing our environment</a></p>
          <p class="lead"><a href="#">It Is Our Very Governments Who Are Killing the Earth.A Brazilian Indigenous Leader Speaks Out On Deforestation in the Amazon</a></p>
        </article>
                <article class="br">
          <img src="https://images.pexels.com/photos/763398/pexels-photo-763398.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <p class="title"><a href="#"> The Great Flood of 2019: A Look at a Slow-Motion Disaster</a></p>
          <p class="lead"><a href="#">Extensive flooding throughout the Midwest and South this spring affected nearly 14 million people. An analysis shows how far it spread.</a></p>            
        </article>
         <article class="br">
                  <img src="https://images.pexels.com/photos/1368614/pexels-photo-1368614.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
          <h3 class="title"><a href="#"> Dior Finally Says No to Sauvage,</a></h3>
          <p class="lead"><a href="#">Why luxury fashion and cultural appropriation are on a collision course</a></p>
        </article>
 
      </section>
<!-- footer-->
      <footer id="main-footer">
        <h3 class="bleed">
          weptim times
        </h3>
        <ul>
          <h3>NEWS</h3>
          <li><a href="#">Home Page</a></li>
          <li><a href="#">World</a></li>
          <li><a href="#">Africa</a></li>
          <li><a href="#">Politics</a></li>
          <li><a href="#">Election</a></li>
          <li><a href="#">Kampala</a></li>
          <li><a href="#">Business</a></li>
          <li><a href="#">Tech</a></li>
          <li><a href="#">Science</a></li>
          <li><a href="#">Sports</a></li>            
        </ul>
                <ul>
          <h3>OPINION</h3>
          <li><a href="#">Today's Opinion</a></li>
          <li><a href="#">OP-ED Opinion</a></li>
          <li><a href="#">OP-ED columnist</a></li>
          <li><a href="#">Editorials</a></li>
          <li><a href="#">OP-ED contributors</a></li>
          <li><a href="#">Letters</a></li>
          <li><a href="#">Sunday review</a></li>
          <li><a href="#">Video</a></li>                   
        </ul>
                        <ul>
          <h3>ARTS</h3>
          <li><a href="#">Today's Arts</a></li>
          <li><a href="#">Art & Design</a></li>
          <li><a href="#">Books</a></li>
          <li><a href="#">Dance</a></li>
          <li><a href="#">Movies</a></li>
          <li><a href="#">Music</a></li>
          <li><a href="#">Pop Culture</a></li>
          <li><a href="#">Television</a></li>
          <li><a href="#">Theatre</a></li>
          <li><a href="#">Video:Arts</a></li>                            
        </ul>
                        <ul>
          <h3>LIVING</h3>
          <li><a href="#">Automobiles</a></li>
          <li><a href="#">Crossword</a></li>
          <li><a href="#">Education</a></li>
          <li><a href="#">Food</a></li>
          <li><a href="#">Health</a></li>
          <li><a href="#">Jobs</a></li>
          <li><a href="#">Magazine</a></li>
          <li><a href="#">Parenting</a></li>
          <li><a href="#">Real Estate</a></li>
          <li><a href="#">Style</a></li>                            
        </ul>
                        <ul>
          <h3>MORE</h3>
          <li><a href="#">Reader Center</a></li>
          <li><a href="#">WireCutter</a></li>
          <li><a href="#">Live Events</a></li>
          <li><a href="#">The Learning Network</a></li>
          <li><a href="#">Tools & Services</a></li>
          <li><a href="#">WireCutter</a></li>
          <li><a href="#">WireCutter</a></li>
          <li><a href="#">WireCutter</a></li>
          <li><a href="#">WireCutter</a></li>                
        </ul>
        <div class="br">
          <h3 class="title" style="text-transform:uppercase;">subscribe</h3>
          <h3>home delivery</h3>
          <h3>digital subscription</h3>
          <h3>crossword</h3>
          <small>email newsletter</small><br>
          <small>corporate subscription</small><br>
          <small>education rate</small><br>
          <hr style="color:lightgrey">
          <small>mobile applications</small><br>
          <small>replica edition</small><br>
          <small>espanol</small><br>
        </div>
      </footer>
      <footer style="display:flex; color:grey; justify-content:space-between; width:80%; margin:auto; justify-content:space-around;">
        <small>&copy; 2019</small><br>
        <small>The Weptim Times</small><br>
        <small> Contact Us</small><br>
        <small>Work with us</small><br>
        <small>Advertise</small><br>
        <small>PrivacyTerms  </small><br>
        <small>ServiceTerms</small><br>
        <small>SaleSite</small><br><br>
        <small> Map</small><br>
        <small>Help</small><br>
       <small> Subscriptions</small><br>
      </footer>
</body>
  </html>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Roboto|Rock+Salt&display=swap');
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html {
  scroll-behaviour:smooth;
}
body {
 width:90%;
  margin:auto; 
  font-family:"Times New Roman", Times,
    serif;
  background:#fff;
  color:#000;
  line-height:1.5;
  font-size:16px;
}
ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
a {
  color:#111;
  text-decoration:none;
}
.bb {
  border-bottom:1px solid lightgrey;
  margin:0 1em;
}
.br {
 border-left:1px solid #999;
  padding:0 1em;
}
h3 {
  line-height:1.3;
}
.title {
  font-weight:800;
  foint-size:1.3em;
}
.bleed {
  grid-column:1 / -1;
  padding:1em 0;
}
.lead {
  color:#333;
  font-size:1em;
  padding:0.5em 0;
}
.small {
  font-size:0.7em;
  color:grey;
  line-height:1.2;
}
img {
width:100%;
}
#logo {
  font-family: 'Rock Salt', cursive;
  border-bottom:1px solid lightgrey;
  text-align:center;
  font-size:2.5em;
  text-transform:uppercase;
  font-weight:bold;
  padding:.5em;
}
/*navbvar*/
#navbar {
  border-bottom:1px solid #000;
  font-size:0.79em;
}
#navbar ul{
  display:grid;
  grid-template-columns:repeat(15,1fr);
  text-align:center;
  text-transform:uppercase;
  padding:.5em 0;
}
.active {
  color:red;
  text-decoration:none;
  transition:1s all;
}
.active:hover {
color:#000;
text-decoration:underline;
}
/*showcase*/
#showcase {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid #000;
}
.img-txt {
  position:relative;
display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:1em 1em;
  margin:1em 0;
}
#showcase .br {
  border-left:1px solid lightgrey;
  padding:0 1em;
}
.img-txt p {
font-size:0.89em;
}
/* the major blog posts begin from here */
.container {
  dislay:grid;
  grid-template-columns:4fr 2fr;
}
/* in the news */
#in-the-news {
  display:grid;
  grid-template-columns:4fr 2fr;
  grid-gap:1em 1em;
  margin:1em 0;
}
/*1x2 grids*/
.one-and-two{
  display:grid;
  grid-template-columns:1fr 2fr;
  grid-gap:1em 1em;
  border-bottom:1px solid lightgrey;
  padding:1em 0;
}
.one-and-two img {
  height:350px;
}
/*1x2 grids*/
/*one-by-one*/
.one-by-one {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:1em 1em;
  padding:1em 0;
  border-bottom:1px solid lightgrey;
}
/*one-one-one-grids*/
.one-one-one {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:1em 1em;
  padding:1em 0;
  border-bottom:1px solid #000;
}
/* two by one grid */
#two-by-one {
display:grid;
  grid-template-columns:2fr 1fr;
  grid-gap:1em 1em;
  padding:1em 0;
}
/* opinion */
/* opinion post belong here*/
.article-header {
 display:grid;
  grid-template-columns:2fr 1fr;
  grid-gap:1em 1em;
}
.article-header h3 {
  color:lightgrey;
  font-weight:400;
  font-size:0.89em;
  text-transform:Capitalize;
}
.article-header img {
  border-radius:50%;
  width:50%;
}
/* editors pic */
.editor-pic > section {
  padding:1em;
}
.editor-pic > .one-by-one:last-child {
  border-bottom:none;
}
/* in other news */
#in-other-news {
  border-top:double 1px #111;
 margin:3em 0;
}
#in-other-news .grid{
display:grid;
  grid-template-columns:2fr 2fr 1fr;
}
#in-other-news .grid  article{
  text-align:center;
}
#in-other-news .br {
  border-color:lightgrey;
}
.grid main {
  margin-left:1em;
}
.grid main > .one-by-one:first-child {
padding-top:0;
}
.grid main > .one-by-one:last-child {
border:none;
}
.grid aside .title {
padding:1em 0;
  border-bottom:1px solid lightgrey;
}
.grid aside > .title:last-child {
border:none;
}

.grid aside > .title:first-child {
  padding-top:0;
}
/*smarter living*/
#smarter-living {
border-top: 1px double #111;
  margin:1em 0;
 display:grid;
grid-template-columns:repeat(5,1fr);
}
.smart-living article .br {
  border-left:1px solid lightgrey;
}
/* featured*/
#featured {
  border-top: 1px double #111;
  display:grid;
  grid-template-columns:3fr 2fr;
}
#featured main {
text-align:center;
}
#featured main img {
width:80%;
}
#featured main h3 {
font-size:2em;
}
#featured main p {
  font-size:1.5em;
}
#featured .br {
border-color:lightgrey;
}
#featured aside > p:first-child {
  color:#111;
}
#featured .one-by-one:first-child {
  padding-top:0;
  margin-top:0;
}
#featured .one-by-one:last-child {
 border:none;
}
/* most popular */
#most-popular {
  border-top: 1px double #111;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  padding:1em 0em;
}
#most-popular .br {
  border-color:lightgrey;
}
/*discovery*/
#discovery {
  border-top: 1px double #111;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:1em;
  padding:1em 0em;
}
#discovery .one-by-one:first-child {
  padding-top:0;
}
#discovery .one-by-one:last-child {
  border:none;
}
#discovery .br {
  border-color:lightgrey;
}
/* footer*/
#main-footer {
display:grid;
grid-template-columns:repeat(6,1fr);
  border-bottom:1px solid lightgrey;
  border-top:2px double grey;
  MARGIN:1em 0em;
  
}
#main-footer h3 {
  font-weight:bold;
  font-size:0.95em;
}
#main-header ul li {
  font-size:0.89em;
  text-transform:capitlize;
}
/* media queries */
@media screen and (max-width:500px) {
  #showcase {
    display:none;
  }
  .featured {
     grid-template-columns:1fr;
  }
  #most-popluar {
     grid-template-columns:1fr;
  }
  #discovery {
     grid-template-columns:1fr;
  } 
  .one-by-one {
     grid-template-columns:1fr;
  }
  .one-and-one {
     grid-template-columns:1fr;
  }
  .one-one-one {
     grid-template-columns:1fr;
  }
  #main-footer {
  grid-template-columns:1fr;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console