index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TNW</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

</head>

<body>
    <main>

        <header class="main-header">
            <!-- this should be fixed to the top -->
            <nav class="navbar">
                <div class="navtnw hide">
                    <!-- do not display when mobile -->
                    <ul class="navtnw-items">
                        <li id="news"><a href="#">News</a></li>
                        <li><a href="#">TNW2020</a></li>
                        <li><a href="#">Business ▾</a></li>
                        <li><a href="#">AMAs</a></li>
                        <li><a href="#">Space</a></li>
                        <li><a href="#">Terms & Conditions</a></li>
                    </ul>
                    <ul class="navtnw-items">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Advertise</a></li>
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>

                <!-- <div class="menu"> THIS IS USEFUL TO APPLY FLEXBOX IN MOBILE VERSION BUT BAD WHEN TRYING TO GRID FOR TABLET AND DESKTOP VERSIOIN, TO FIX!!-->

                <div class="logo" id="navbar-logo">
                    <a href="#"><img src="./assets/images/tnw.svg" alt="The next web logo"></a>
                </div>

                <div class="nav-sections">
                    <ul class="nav-sections-list-1 hide">
                        <li><a href="#">Latest</a></li>
                        <li><a href="#">Hard Fork</a></li>
                        <li><a href="#">Plugged</a></li>
                        <li><a href="#">Fundamentals</a></li>
                        <li><a href="#">Readme</a></li>
                        <li class="hide hide-tablet"><a href="#">Growth Quarters</a></li>
                        <li class="hide hide-tablet"><a href="#">Neural</a></li>

                    </ul>
                    <ul class="nav-sections-list-2">
                        <li class="search">
                            <a href="#"><img src="./assets/images/magnifying-glass.png" alt="Magnifying glass icon"></a>
                        </li>
                        <li class="ham-menu">
                            <a href="#">
                                <span></span>
                                <span></span>
                                <span></span>
                            </a>
                        </li>
                        <li class="hide hide-tablet tnw2020"><img src="./assets/images/tnw2020.svg" alt="TNW2020"></li>
                        <li class="hide hide-tablet kicks">Kicks off in</li>
                        <li class="hide hide-tablet kicks"><a href="#">112</a></li>
                        <li class="hide hide-tablet kicks">days</li>
                        <li class="hide hide-tablet"><button type="button">Join Us</button></li>
                    </ul>
                </div>
                <!-- </div> -->
            </nav>
            <div class="yellow-band">
                <a href="#">Did you know we have a TECH FESTIVAL? Check it out →</a>
            </div>
        </header>

        <div class="cover">
            <article class="cover-item cover-wide">
                <div class="cover-image img-cover-01"></div>
                <a class="cover-link" id="cover-gradient" href="#"></a>
                <div class="hide hide-tablet" id="big-cover-logo"><img src="images/tnw.svg" alt=""></div>
                <div class="hide hide-tablet" id="cover-date">
                    <p>Wednesday — February 26, 2020 TECH
                    </p>
                </div>

                <header class="cover-header">
                    <span><a class="white" href="#">INSIGHTS</a></span>
                    <h3><a class="white main-cover-h3" href="#">UN will use AI to learn what people want from peace
                            deals</a>
                    </h3>
                    <ul>
                        <li>by <a class="s-gray" href="#">Thomas Macaulay</a>&nbsp;</li>
                        <li>4 hours ago&nbsp;</li>
                        <li>11</li>
                    </ul>
                </header>
            </article>
            <article class="cover-item">
                <div class="cover-image img-cover-02"></div>
                <a class="cover-link" href="#"></a>
                <header class="cover-header">
                    <span><a class="white" href="#"></a></span>
                    <h3><a class="white cover-h3" href="#">UK police are using AI to predict who could become violent
                            criminals</a></h3>
                    <ul>
                        <li>by <a class="s-gray" href="#">Thomas Macaulay</a>&nbsp;</li>
                        <li>1 hours ago&nbsp;</li>
                        <li>0</li>
                    </ul>
                </header>
            </article>
            <article class="cover-item">
                <div class="cover-image img-cover-03"></div>
                <a class="cover-link" href="#"></a>
                <header class="cover-header">
                    <span><a class="white" href="#">INSIGHTS</a></span>
                    <h3><a class="white cover-h3" href="#">Scientists discovered a new way to fight anbibiotic-resistant
                            bacteria</a></h3>
                    <ul>
                        <li>by <a class="s-gray" href="#">The Conversation</a>&nbsp;</li>
                        <li>2 hours ago&nbsp;</li>
                        <li>1</li>
                    </ul>
                </header>
            </article>
        </div>

        <div class="wrapper">
            <section class="news">
                <header>
                    <h2><a class="m-orange" href="#">Latest news ></a></h2>
                </header>

                <div class="news-body">
                    <article>
                        <a class="img img-news-01" href="#"></a>
                        <div>
                            <h4><a class="s-black" href="#">I hate Apple for making me shake my MacBook like a
                                    chump</a></h4>
                            <ul class="gray">
                                <li><a href="#" class="gray">Thomas Macaulay</a></li>
                                <li>&nbsp; &#8226; &nbsp;</li>
                                <li> 1 hour ago</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-news-02" href="#"></a>
                        <div>
                            <h4><a class="s-black" href="#">3 ways AI is transforming the insurance industry </a></h4>
                            <ul class="gray">
                                <li><a href="#" class="gray">Ben Dickson</a></li>
                                <li>&nbsp; &#8226; &nbsp;</li>
                                <li> 8 hours ago</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-news-03" href="#"></a>
                        <div>
                            <h4><a class="s-black" href="#">Yes, coders still need to know Java. If you need a
                                    refresher, consider this training </a></h4>
                            <ul class="gray">
                                <li><a href="#" class="gray">TNW Deals</a></li>
                                <li>&nbsp; &#8226; &nbsp;</li>
                                <li> 9 hours ago</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-news-04" href="#"></a>
                        <div>
                            <h4><a class="s-black" href="#">Don't miss Vimeo, Giphy, and Snapchat at TNW2020</a></h4>
                            <ul class="gray">
                                <li><a href="#" class="gray">Hannah Saunders</a></li>
                                <li>&nbsp; &#8226; &nbsp;</li>
                                <li> 6 hour ago</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-news-05" href="#"></a>
                        <div>
                            <h4><a class="s-black" href="#">Hasbro announces 7 new D&D games starting with Baldur's
                                    Gate 3</a></h4>
                            <ul class="gray">
                                <li><a href="#" class="gray">Tristan Greene</a></li>
                                <li>&nbsp; &#8226; &nbsp;</li>
                                <li>10 minutes ago</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-news-06" href="#"></a>
                        <div>
                            <h4><a class="s-black" href="#">This AI suitcase could help visually-impaired people to
                                    travel</a></h4>
                            <ul class="gray">
                                <li><a href="#" class="gray">Thomas Macaulay</a></li>
                                <li>&nbsp; &#8226; &nbsp;</li>
                                <li>4 hours ago</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-news-07" href="#"></a>
                        <div>
                            <h4><a class="s-black" href="#">US: Allow tech giants to opt out of new global tax scheme,
                                    or face tariffs</a></h4>
                            <ul class="gray">
                                <li><a href="#" class="gray">David Canellis</a></li>
                                <li>&nbsp; &#8226; &nbsp;</li>
                                <li>10 hours ago</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-news-08" href="#"></a>
                        <div>
                            <h4><a class="s-black" href="#">I hate Apple for making me shake my MacBook like a
                                    chump</a></h4>
                            <ul class="gray">
                                <li><a href="#" class="gray">Thomas Macaulay</a></li>
                                <li>&nbsp; &#8226; &nbsp;</li>
                                <li> 1 hour ago</li>
                            </ul>
                        </div>
                    </article>
                </div>
            </section>

            <section class="funding-rounds">
                <header>
                    <h2><a class="m-orange" href="#">Latest funding rounds on Index.co ></a></h2>
                </header>
                <div class="funding-links">
                    <a class="funding-link m-orange" href="#">See more</a>
                    <a class="funding-link m-orange" href="#">Get updates by email</a>
                    <a class="funding-link m-orange" href="#">Add info</a>
                </div>

                <div class="rounds-wrapper">
                    <div class="rounds-item">
                        <div class="rounds-item-content">
                            <a href="">
                                <img src="./assets/images/rounds-01.png" alt="Ultrasense image">
                                <h3>UltraSense Systems</h3>
                                <div>
                                    <h4>$20M</h4>
                                    <p>SERIES B</p>
                                </div>
                            </a>
                        </div>
                        <div class="rose">
                            <div class="border-bottom">
                                <a href="#">Artiman Venture, +5</a>
                            </div>
                            <a href="#">UltraSence Raises $20 Million To Grow Its Ultrasound Sensor Technologies<span>
                                    on Pulse 2.0</span></a>
                        </div>
                    </div>
                    <div class="rounds-item">
                        <div class="rounds-item-content">
                            <a href="">
                                <img src="./assets/images/rounds-02.jfif" alt="PetPlate logo">
                                <h3>PetPlate</h3>
                                <div>
                                    <h4>$9M</h4>
                                    <p>SERIES A</p>
                                </div>
                            </a>
                        </div>
                        <div class="rose">
                            <div class="border-bottom">
                                <a href="#">Pets</a>
                                <a href="#">301 INC, +5</a>
                            </div>
                            <a href="#">Pet Plate Raises $9M in Series a Funding on FinSMEs<span> on Pulse
                                    2.0</span></a>
                        </div>
                    </div>
                    <div class="rounds-item">
                        <div class="rounds-item-content">
                            <a href="">
                                <img src="./assets/images/rounds-03.jfif" alt="Rechspert.io logo">
                                <h3>Techspert.io</h3>
                                <div>
                                    <h4>$3.8M</h4>
                                    <p>SERIES A</p>
                                </div>
                            </a>
                        </div>
                        <div class="rose">
                            <div class="border-bottom">
                                <a href="#">Artificial Intelligence</a>
                                <a href="#">Cambridge Angels, +2</a>
                            </div>
                            <a href="#">Techspert.io Raises $3.76M in Series A Funding on FinSMEs<span> on Pulse
                                    2.0</span></a>
                        </div>
                    </div>
                    <div class="rounds-item round-hidden">
                        <div class="rounds-item-content">
                            <a href="">
                                <img src="./assets/images/rounds-04.jfif" alt="Rechspert.io logo">
                                <h3>Techspert.io</h3>
                                <div>
                                    <h4>$3.8M</h4>
                                    <p>SERIES A</p>
                                </div>
                            </a>
                        </div>
                        <div class="rose">
                            <div class="border-bottom">
                                <a href="#">Artificial Intelligence</a>
                                <a href="#">Cambridge Angels, +2</a>
                            </div>
                            <a href="#">Techspert.io Raises $3.76M in Series A Funding on FinSMEs<span> on Pulse
                                    2.0</span></a>
                        </div>
                    </div>
                </div>
            </section>

            <section class="sections">
                <div class="section">
                    <h2><a class="m-orange" href="#">Apps ></a></h2>
                    <ul>
                        <li>
                            <article class="cover-item">
                                <div class="section-image img-section-app"></div>
                                <a class="section-link cover-link" href="#"></a>
                                <header class="cover-header">
                                    <span>MOST POPULAR</span>
                                    <h3><a class="s-white" href="#">No spoilers: How to mute words and phrases on
                                            Twitter</a></h3>
                                    <ul>
                                        <li>Rachel Kaser</li>
                                        <li>&nbsp; &#8226; &nbsp;</li>
                                        <li>2 days ago</li>
                                    </ul>
                                </header>
                            </article>
                        </li>
                        <li>
                            <article class="sections-latest">
                                <header class="header-rose">
                                    <h4>LATEST</h4>
                                    <h3><a class="s-orange" href="#">How to find that one Instagram filter everyone
                                            else is using</a></h3>
                                </header>
                                <a class="img section-latest-01" href=""></a>
                            </article>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Twitter tests labeling and correcting 'harmfully misleading' tweets by
                                    politicians</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">TikTok addict? Slow your scroll with time limit settings</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Google removes 'nearly 600' apps from the Play Store over annoying ads</a>
                            </h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Apple reportedly 'considering' allowing you to set your own default
                                    apps</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">How to use Twitter's new 'Continue Thread' feature</a></h4>
                        </li>
                    </ul>
                </div>

                <div class="section">
                    <h2><a class="m-orange" href="#">Gear ></a></h2>
                    <ul>
                        <li>
                            <article class="cover-item">
                                <div class="section-image img-section-gear"></div>
                                <a class="section-link cover-link" href="#"></a>
                                <header class="cover-header">
                                    <span>MOST POPULAR</span>
                                    <h3><a class="s-white" href="#">No spoilers: How to mute words and phrases on
                                            Twitter</a></h3>
                                    <ul>
                                        <li>Rachel Kaser</li>
                                        <li>&nbsp; &#8226; &nbsp;</li>
                                        <li>2 days ago</li>
                                    </ul>
                                </header>
                            </article>
                        </li>
                        <li>
                            <article class="sections-latest">
                                <header class="header-rose">
                                    <h4>LATEST</h4>
                                    <h3><a class="s-orange" href="#">How to find that one Instagram filter everyone
                                            else is using</a></h3>
                                </header>
                                <a class="img section-latest-02" href=""></a>
                            </article>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Twitter tests labeling and correcting 'harmfully misleading' tweets by
                                    politicians</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">TikTok addict? Slow your scroll with time limit settings</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Google removes 'nearly 600' apps from the Play Store over annoying ads</a>
                            </h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Apple reportedly 'considering' allowing you to set your own default
                                    apps</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">How to use Twitter's new 'Continue Thread' feature</a></h4>
                        </li>
                    </ul>
                </div>

                <div class="section">
                    <h2><a class="m-orange" href="#">Tech ></a></h2>
                    <ul>
                        <li>
                            <article class="cover-item">
                                <div class="section-image img-section-tech"></div>
                                <a class="section-link cover-link" href="#"></a>
                                <header class="cover-header">
                                    <span>MOST POPULAR</span>
                                    <h3><a class="s-white" href="#">No spoilers: How to mute words and phrases on
                                            Twitter</a></h3>
                                    <ul>
                                        <li>Rachel Kaser</li>
                                        <li>&nbsp; &#8226; &nbsp;</li>
                                        <li>2 days ago</li>
                                    </ul>
                                </header>
                            </article>
                        </li>
                        <li>
                            <article class="sections-latest">
                                <header class="header-rose">
                                    <h4>LATEST</h4>
                                    <h3><a class="s-orange" href="#">How to find that one Instagram filter everyone
                                            else is using</a></h3>
                                </header>
                                <a class="img section-latest-03" href=""></a>
                            </article>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Twitter tests labeling and correcting 'harmfully misleading' tweets by
                                    politicians</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">TikTok addict? Slow your scroll with time limit settings</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Google removes 'nearly 600' apps from the Play Store over annoying ads</a>
                            </h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Apple reportedly 'considering' allowing you to set your own default
                                    apps</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">How to use Twitter's new 'Continue Thread' feature</a></h4>
                        </li>
                    </ul>
                </div>

                <div class="section">
                    <h2><a class="m-orange" href="#">Creative ></a></h2>
                    <ul>
                        <li>
                            <article class="cover-item">
                                <div class="section-image img-section-creative"></div>
                                <a class="section-link cover-link" href="#"></a>
                                <header class="cover-header">
                                    <span>MOST POPULAR</span>
                                    <h3><a class="s-white" href="#">No spoilers: How to mute words and phrases on
                                            Twitter</a></h3>
                                    <ul>
                                        <li>Rachel Kaser</li>
                                        <li>&nbsp; &#8226; &nbsp;</li>
                                        <li>2 days ago</li>
                                    </ul>
                                </header>
                            </article>
                        </li>
                        <li>
                            <article class="sections-latest">
                                <header class="header-rose">
                                    <h4>LATEST</h4>
                                    <h3><a class="s-orange" href="#">How to find that one Instagram filter everyone
                                            else is using</a></h3>
                                </header>
                                <a class="img section-latest-04" href=""></a>
                            </article>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Twitter tests labeling and correcting 'harmfully misleading' tweets by
                                    politicians</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">TikTok addict? Slow your scroll with time limit settings</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Google removes 'nearly 600' apps from the Play Store over annoying ads</a>
                            </h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Apple reportedly 'considering' allowing you to set your own default
                                    apps</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">How to use Twitter's new 'Continue Thread' feature</a></h4>
                        </li>
                    </ul>
                </div>

                <div class="section">
                    <h2><a class="m-orange" href="#">Podium ></a></h2>
                    <ul>
                        <li>
                            <article class="cover-item">
                                <div class="section-image img-section-podium"></div>
                                <a class="section-link cover-link" href="#"></a>
                                <header class="cover-header">
                                    <span>MOST POPULAR</span>
                                    <h3><a class="s-white" href="#">No spoilers: How to mute words and phrases on
                                            Twitter</a></h3>
                                    <ul>
                                        <li>Rachel Kaser</li>
                                        <li>&nbsp; &#8226; &nbsp;</li>
                                        <li>2 days ago</li>
                                    </ul>
                                </header>
                            </article>
                        </li>
                        <li>
                            <article class="sections-latest">
                                <header class="header-rose">
                                    <h4>LATEST</h4>
                                    <h3><a class="s-orange" href="#">How to find that one Instagram filter everyone
                                            else is using</a></h3>
                                </header>
                                <a class="img section-latest-05" href=""></a>
                            </article>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Twitter tests labeling and correcting 'harmfully misleading' tweets by
                                    politicians</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">TikTok addict? Slow your scroll with time limit settings</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Google removes 'nearly 600' apps from the Play Store over annoying ads</a>
                            </h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Apple reportedly 'considering' allowing you to set your own default
                                    apps</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">How to use Twitter's new 'Continue Thread' feature</a></h4>
                        </li>
                    </ul>
                </div>

                <div class="section">
                    <h2><a class="m-orange" href="#">Insights ></a></h2>
                    <ul>
                        <li>
                            <article class="cover-item">
                                <div class="section-image img-section-insights"></div>
                                <a class="section-link cover-link" href="#"></a>
                                <header class="cover-header">
                                    <span>MOST POPULAR</span>
                                    <h3><a class="s-white" href="#">No spoilers: How to mute words and phrases on
                                            Twitter</a></h3>
                                    <ul>
                                        <li>Rachel Kaser</li>
                                        <li>&nbsp; &#8226; &nbsp;</li>
                                        <li>2 days ago</li>
                                    </ul>
                                </header>
                            </article>
                        </li>
                        <li>
                            <article class="sections-latest">
                                <header class="header-rose">
                                    <h4>LATEST</h4>
                                    <h3><a class="s-orange" href="#">How to find that one Instagram filter everyone
                                            else is using</a></h3>
                                </header>
                                <a class="img section-latest-06" href=""></a>
                            </article>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Twitter tests labeling and correcting 'harmfully misleading' tweets by
                                    politicians</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">TikTok addict? Slow your scroll with time limit settings</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Google removes 'nearly 600' apps from the Play Store over annoying ads</a>
                            </h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Apple reportedly 'considering' allowing you to set your own default
                                    apps</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">How to use Twitter's new 'Continue Thread' feature</a></h4>
                        </li>
                    </ul>
                </div>

                <div class="section">
                    <h2><a class="m-orange" href="#">Launch ></a></h2>
                    <ul>
                        <li>
                            <article class="cover-item">
                                <div class="section-image img-section-launch"></div>
                                <a class="section-link cover-link" href="#"></a>
                                <header class="cover-header">
                                    <span>MOST POPULAR</span>
                                    <h3><a class="s-white" href="#">No spoilers: How to mute words and phrases on
                                            Twitter</a></h3>
                                    <ul>
                                        <li>Rachel Kaser</li>
                                        <li>&nbsp; &#8226; &nbsp;</li>
                                        <li>2 days ago</li>
                                    </ul>
                                </header>
                            </article>
                        </li>
                        <li>
                            <article class="sections-latest">
                                <header class="header-rose">
                                    <h4>LATEST</h4>
                                    <h3><a class="s-orange" href="#">How to find that one Instagram filter everyone
                                            else is using</a></h3>
                                </header>
                                <a class="img section-latest-07" href=""></a>
                            </article>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Twitter tests labeling and correcting 'harmfully misleading' tweets by
                                    politicians</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">TikTok addict? Slow your scroll with time limit settings</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Google removes 'nearly 600' apps from the Play Store over annoying ads</a>
                            </h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Apple reportedly 'considering' allowing you to set your own default
                                    apps</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">How to use Twitter's new 'Continue Thread' feature</a></h4>
                        </li>
                    </ul>
                </div>

                <div class="section">
                    <h2><a class="m-orange" href="#">Distract ></a></h2>
                    <ul>
                        <li>
                            <article class="cover-item">
                                <div class="section-image img-section-distract"></div>
                                <a class="section-link cover-link" href="#"></a>
                                <header class="cover-header">
                                    <span>MOST POPULAR</span>
                                    <h3><a class="s-white" href="#">No spoilers: How to mute words and phrases on
                                            Twitter</a></h3>
                                    <ul>
                                        <li>Rachel Kaser</li>
                                        <li>&nbsp; &#8226; &nbsp;</li>
                                        <li>2 days ago</li>
                                    </ul>
                                </header>
                            </article>
                        </li>
                        <li>
                            <article class="sections-latest">
                                <header class="header-rose">
                                    <h4>LATEST</h4>
                                    <h3><a class="s-orange" href="#">How to find that one Instagram filter everyone
                                            else is using</a></h3>
                                </header>
                                <a class="img section-latest-08" href=""></a>
                            </article>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Twitter tests labeling and correcting 'harmfully misleading' tweets by
                                    politicians</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">TikTok addict? Slow your scroll with time limit settings</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Google removes 'nearly 600' apps from the Play Store over annoying ads</a>
                            </h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">Apple reportedly 'considering' allowing you to set your own default
                                    apps</a></h4>
                        </li>
                        <li class="sections-headline">
                            <h4><a href="#">How to use Twitter's new 'Continue Thread' feature</a></h4>
                        </li>
                    </ul>
                </div>
            </section>

            <section class="deals news">
                <header>
                    <h2><a class="m-orange" href="#">Latest deals ></a></h2>
                    <a href="#">See all Deals</a>
                </header>
                <div class="deals-container">
                    <article>
                        <a class="img img-deal-01" href="#"></a>
                        <div class="discount">
                            <div>96% off</div>
                        </div>
                        <div>
                            <h4><a class="s-black" href="#">The Ultimate Cisco Networking Expert Certification Training
                                    Bundle</a></h4>
                            <ul class="gray">
                                <li class="gray line-through">$1405</li>
                                <li>&nbsp; &nbsp;</li>
                                <li class="soft-black">$31</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-deal-02" href="#"></a>
                        <div class="discount">
                            <div>98% off</div>
                        </div>
                        <div>
                            <h4><a class="s-black" href="#">The complete Adobe CC Training Bundle</a></h4>
                            <ul class="gray">
                                <li class="gray line-through">$673</li>
                                <li>&nbsp; &nbsp;</li>
                                <li class="soft-black">$29</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-deal-03" href="#"></a>
                        <div>
                            <h4><a class="s-black" href="#">Learn How to Draw Freebie Bundle</a></h4>
                            <ul class="gray">
                                <li class="gray line-through">$0</li>
                                <li>&nbsp; &nbsp;</li>
                                <li class="soft-black">$0</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-deal-04" href="#"></a>
                        <div class="discount">
                            <div>90% off</div>
                        </div>
                        <div>
                            <h4><a class="s-black" href="#">The Complete AWS Dev & Ops Certification Training
                                    Bundle</a></h4>
                            <ul class="gray">
                                <li class="gray line-through">$796</li>
                                <li>&nbsp; &nbsp;</li>
                                <li class="soft-black">$29.96</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-deal-05" href="#"></a>
                        <div class="discount">
                            <div>96% off</div>
                        </div>
                        <div>
                            <h4><a class="s-black" href="#">Design.ai Logomaker Premiun Plan</a></h4>
                            <ul class="gray">
                                <li class="gray line-through">$99</li>
                                <li>&nbsp; &nbsp;</li>
                                <li class="soft-black">$18.99</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-deal-06" href="#"></a>
                        <div class="discount">
                            <div>80% off</div>
                        </div>
                        <div>
                            <h4><a class="s-black" href="#">The 2020 Complete Digital Copywriting Master Class
                                    Bundle</a></h4>
                            <ul class="gray">
                                <li class="gray line-through">$699.90</li>
                                <li>&nbsp; &nbsp;</li>
                                <li class="soft-black">$38.99</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-deal-07" href="#"></a>
                        <div class="discount">
                            <div>94% off</div>
                        </div>
                        <div>
                            <h4><a class="s-black" href="#">The 2020 AWS Big Data Specialty Certification Prep
                                    Cuourse</a></h4>
                            <ul class="gray">
                                <li class="gray line-through">$295</li>
                                <li>&nbsp; &nbsp;</li>
                                <li class="soft-black">$29.99</li>
                            </ul>
                        </div>
                    </article>
                    <article>
                        <a class="img img-deal-08" href="#"></a>
                        <div class="discount">
                            <div>98% off</div>
                        </div>
                        <div>
                            <h4><a class="s-black" href="#">The Complete Python Certification Bootcamp Bundle</a></h4>
                            <ul class="gray">
                                <li class="gray line-through">$2030</li>
                                <li>&nbsp; &nbsp;</li>
                                <li class="soft-black">$34.99</li>
                            </ul>
                        </div>
                    </article>
                </div>
            </section>
        </div>

    </main>

    <footer>
        <div class="footer-links">
            <div class="footer-wrapper">
                <ul class="footer-links-social">
                    <!-- maybe the i classes are not necessary -->
                    <li>
                        <a href="#"><img src="./assets/images/facebook.svg" alt="Facebook logo"></a>
                    </li>
                    <li>
                        <a href="#"><img src="./assets/images/twitter.svg" alt="Twitter logo"></a>
                    </li>
                    <li>
                        <a href="#"><img src="./assets/images/youtube.svg" alt="YouTube logo"></a>
                    </li>
                    <li>
                        <a href="#"><img src="./assets/images/instagram.svg" alt="Instagram logo"></a>
                    </li>
                    <li>
                        <a href="#"><img src="./assets/images/pinterest.svg" alt="Pinterest logo"></a>
                    </li>
                    <li>
                        <a href="#"><img src="./assets/images/rrss.svg" alt="RRSS image"></a>
                    </li>
                    <li>
                        <a href="#"><img src="./assets/images/email.svg" alt="Email image"></a>
                    </li>
                </ul>
                <ul class="footer-links-menu">
                    <li><a href="#">EVENTS</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">ADVERTISE</a></li>
                    <li><a href="#">JOBS</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-legal">
            <div class="footer-bottom">
                <span>
                    <a href="#"><img id="tnw-logo" src="./assets/images/tnw.svg" alt="TNW"></a>&copy; 2006-2020 The Next Web
                    B.V.
                </span>
                <span>Made with <b id="love">♥</b> in Amsterdam.</span>
                <span>Powered by<a href="#"><img id="stackpath" src="./assets/images/stackpath.svg" alt="STACKPATH"></a></span>
            </div>
        </div>
    </footer>
</body>

</html>