├── .github
    └── workflows
    │   └── linters.yml
├── .gitignore
├── LICENSE
├── README.md
├── images
    ├── article1_img.png
    ├── article2_img.jpg
    ├── article3_img.jpg
    ├── article4_img.png
    ├── article5_img.jpg
    ├── article6_img.jpg
    ├── article7_img.png
    ├── article8_img.jpg
    ├── cover-gradient.png
    ├── deals-ribbon.svg
    ├── desktop.png
    ├── google-logo.png
    ├── image-1.jpg
    ├── image-2.jpg
    ├── image-3.jpg
    ├── image-4.jpg
    ├── image-gradient.png
    ├── latest-pc1.jpg
    ├── latest-pc2.png
    ├── latest-pc3.png
    ├── latest-pc4.png
    ├── latest-pc5.png
    ├── latest-pc6.png
    ├── latest-pc7.png
    ├── latest-pc8.jpg
    ├── latest-pc9.png
    ├── latest_deal1.jpg
    ├── latest_deal2.jpg
    ├── latest_deal3.jpg
    ├── latest_deal4.jpg
    ├── latest_deal5.jpg
    ├── latest_deal6.jpg
    ├── latest_deal7.jpg
    ├── latest_deal8.jpg
    ├── logo-facebook.png
    ├── logo-instagram.png
    ├── logo-mail.png
    ├── logo-twiter.jpg
    ├── logo-youtube.jpg
    ├── logo_footer.png
    ├── logo_footer2.png
    ├── logo_mobile-nav.png
    ├── logo_rss.png
    ├── mobile-nav-logo.png
    ├── mobile-version.png
    ├── most-popular_img1.jpg
    ├── most-popular_img2.png
    ├── most-popular_img3.png
    ├── most-popular_img4.jpg
    ├── most-popular_img5.jpg
    ├── most-popular_img6.png
    ├── most-popular_img7.jpg
    ├── most-popular_img8.jpg
    ├── most-popular_img9.jpg
    ├── pinterest-logo.jpg
    ├── search-outline.svg
    ├── side-img2.png
    ├── side-img_1.jpg
    ├── tablet-version.png
    └── tnw.svg
├── index.html
└── styles.css


/.github/workflows/linters.yml:
--------------------------------------------------------------------------------
 1 | name: Linters
 2 | 
 3 | on: pull_request
 4 | 
 5 | env:
 6 |   FORCE_COLOR: 1
 7 | 
 8 | jobs:
 9 |   lighthouse:
10 |     name: Lighthouse
11 |     runs-on: ubuntu-18.04
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - uses: actions/setup-node@v1
15 |         with:
16 |           node-version: "12.x"
17 |       - name: Setup Lighthouse
18 |         run: npm install -g @lhci/cli@0.4.x
19 |       - name: Lighthouse Report
20 |         run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
21 |   webhint:
22 |     name: Webhint
23 |     runs-on: ubuntu-18.04
24 |     steps:
25 |       - uses: actions/checkout@v2
26 |       - uses: actions/setup-node@v1
27 |         with:
28 |           node-version: "12.x"
29 |       - name: Setup Webhint
30 |         run: |
31 |           npm install --save-dev hint@6.0.x
32 |           [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc
33 |       - name: Webhint Report
34 |         run: npx hint --telemetry=off .
35 |   stylelint:
36 |     name: Stylelint
37 |     runs-on: ubuntu-18.04
38 |     steps:
39 |       - uses: actions/checkout@v2
40 |       - uses: actions/setup-node@v1
41 |         with:
42 |           node-version: "12.x"
43 |       - name: Setup Stylelint
44 |         run: |
45 |           npm install --save-dev stylelint@13.3.x stylelint-scss@3.17.x stylelint-config-standard@20.0.x stylelint-csstree-validator
46 |           [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json
47 |       - name: Stylelint Report
48 |         run: npx stylelint "**/*.{css,scss}"


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | next-web.code-workspace


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Galiwango Ananiya  / Mohd Nayeem Shah
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Responsive Design 
 2 | ## Responsive Home Page of the Next Web home page
 3 | 
 4 | This repository contains a project which consists of a responsive clone of The Next Web home page.
 5 | 
 6 | ## Below are the screenshots of the completed project
 7 | 
 8 | ### Desktop Version
 9 | 
10 | ![screenshot](./images/desktop.png)
11 | 
12 | 
13 | ### Tablet Version
14 | 
15 | ![screenshot](./images/tablet-version.png)
16 | 
17 | 
18 | 
19 | ### Mobile Version
20 | 
21 | ![screenshot](./images/mobile-version.png)
22 | 
23 | 
24 | 
25 | ## Built With
26 | 
27 | - HTML
28 | - CSS
29 | - ionic icons
30 | - Google fonts
31 | 
32 | 
33 | ## Below is the Live link to th next web home page
34 | 
35 | [The Next Web home page Link](https://gango-anan.github.io/the-next-web-clone/.)
36 | 
37 | ## Getting Started
38 | 
39 | ### To run this project:
40 | - Install a web browser of your choice prefferably Google chrome or mozilla firefox.
41 | - Launch your webserver and
42 | - Copy the project files to the webserver folder
43 | - Open your browser and launch the index.html file
44 | - Thank you.
45 | 
46 | ## Authors
47 | 👨🏻‍💻 **Galiwango Ananiya**
48 | - GitHub: [@gango-anan](https://github.com/gango-anan)
49 | - Twitter: [@gango_anan](https://twitter.com/gango_anan)
50 | - LinkedIn: [@galiwango-ananiya](https://www.linkedin.com/public-profile/settings?trk=d_flagship3_profile_self_view_public_profile)
51 | 
52 | 
53 | 👨🏻‍💻 **Mohd Nayeem Shah**
54 | - GitHub: [@shahnaeem](https://github.com/shahnaeem)
55 | - Twitter: [@mohdnayeemshah1](https://twitter.com/MOHDNAYEEMSHAH1)
56 | - LinkedIn: [@mohd-nayeem-shah-97a590152](https://linkedin.com/in/mohd-nayeem-shah-97a590152)
57 | 
58 | ## 🤝 Contributing
59 | 
60 | Contributions, issues, and feature requests are welcome!
61 | 
62 | Feel free to check the [issues page](https://github.com/gango-anan/the-next-web-clone/issues).
63 | 
64 | 
65 | ## Show your support
66 | 
67 | Give a ⭐️ if you like this project!
68 | 
69 | ## Acknowledgments
70 | 
71 | - To make this project a success a lot of sources were used especially google, youtube, css trick website, MDN reference and above all the positive reviews from our respective standup teams, we would like to thank all those who authored the articles we used and a big thank you to our stand up teams.
72 | 
73 | ## 📝 License
74 | 
75 | This project is [MIT](https://github.com/gango-anan/the-next-web-clone/blob/master/LICENSE) licensed.
76 | 


--------------------------------------------------------------------------------
/images/article1_img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/article1_img.png


--------------------------------------------------------------------------------
/images/article2_img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/article2_img.jpg


--------------------------------------------------------------------------------
/images/article3_img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/article3_img.jpg


--------------------------------------------------------------------------------
/images/article4_img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/article4_img.png


--------------------------------------------------------------------------------
/images/article5_img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/article5_img.jpg


--------------------------------------------------------------------------------
/images/article6_img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/article6_img.jpg


--------------------------------------------------------------------------------
/images/article7_img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/article7_img.png


--------------------------------------------------------------------------------
/images/article8_img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/article8_img.jpg


--------------------------------------------------------------------------------
/images/cover-gradient.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/cover-gradient.png


--------------------------------------------------------------------------------
/images/deals-ribbon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path fill="#FC0" d="M80 0H0l80 80"/></svg>


--------------------------------------------------------------------------------
/images/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/desktop.png


--------------------------------------------------------------------------------
/images/google-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/google-logo.png


--------------------------------------------------------------------------------
/images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/image-1.jpg


--------------------------------------------------------------------------------
/images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/image-2.jpg


--------------------------------------------------------------------------------
/images/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/image-3.jpg


--------------------------------------------------------------------------------
/images/image-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/image-4.jpg


--------------------------------------------------------------------------------
/images/image-gradient.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/image-gradient.png


--------------------------------------------------------------------------------
/images/latest-pc1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest-pc1.jpg


--------------------------------------------------------------------------------
/images/latest-pc2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest-pc2.png


--------------------------------------------------------------------------------
/images/latest-pc3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest-pc3.png


--------------------------------------------------------------------------------
/images/latest-pc4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest-pc4.png


--------------------------------------------------------------------------------
/images/latest-pc5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest-pc5.png


--------------------------------------------------------------------------------
/images/latest-pc6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest-pc6.png


--------------------------------------------------------------------------------
/images/latest-pc7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest-pc7.png


--------------------------------------------------------------------------------
/images/latest-pc8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest-pc8.jpg


--------------------------------------------------------------------------------
/images/latest-pc9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest-pc9.png


--------------------------------------------------------------------------------
/images/latest_deal1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest_deal1.jpg


--------------------------------------------------------------------------------
/images/latest_deal2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest_deal2.jpg


--------------------------------------------------------------------------------
/images/latest_deal3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest_deal3.jpg


--------------------------------------------------------------------------------
/images/latest_deal4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest_deal4.jpg


--------------------------------------------------------------------------------
/images/latest_deal5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest_deal5.jpg


--------------------------------------------------------------------------------
/images/latest_deal6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest_deal6.jpg


--------------------------------------------------------------------------------
/images/latest_deal7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest_deal7.jpg


--------------------------------------------------------------------------------
/images/latest_deal8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/latest_deal8.jpg


--------------------------------------------------------------------------------
/images/logo-facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/logo-facebook.png


--------------------------------------------------------------------------------
/images/logo-instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/logo-instagram.png


--------------------------------------------------------------------------------
/images/logo-mail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/logo-mail.png


--------------------------------------------------------------------------------
/images/logo-twiter.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/logo-twiter.jpg


--------------------------------------------------------------------------------
/images/logo-youtube.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/logo-youtube.jpg


--------------------------------------------------------------------------------
/images/logo_footer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/logo_footer.png


--------------------------------------------------------------------------------
/images/logo_footer2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/logo_footer2.png


--------------------------------------------------------------------------------
/images/logo_mobile-nav.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/logo_mobile-nav.png


--------------------------------------------------------------------------------
/images/logo_rss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/logo_rss.png


--------------------------------------------------------------------------------
/images/mobile-nav-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/mobile-nav-logo.png


--------------------------------------------------------------------------------
/images/mobile-version.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/mobile-version.png


--------------------------------------------------------------------------------
/images/most-popular_img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/most-popular_img1.jpg


--------------------------------------------------------------------------------
/images/most-popular_img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/most-popular_img2.png


--------------------------------------------------------------------------------
/images/most-popular_img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/most-popular_img3.png


--------------------------------------------------------------------------------
/images/most-popular_img4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/most-popular_img4.jpg


--------------------------------------------------------------------------------
/images/most-popular_img5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/most-popular_img5.jpg


--------------------------------------------------------------------------------
/images/most-popular_img6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/most-popular_img6.png


--------------------------------------------------------------------------------
/images/most-popular_img7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/most-popular_img7.jpg


--------------------------------------------------------------------------------
/images/most-popular_img8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/most-popular_img8.jpg


--------------------------------------------------------------------------------
/images/most-popular_img9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/most-popular_img9.jpg


--------------------------------------------------------------------------------
/images/pinterest-logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/pinterest-logo.jpg


--------------------------------------------------------------------------------
/images/search-outline.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Search</title><path d='M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M338.29 338.29L448 448'/></svg>


--------------------------------------------------------------------------------
/images/side-img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/side-img2.png


--------------------------------------------------------------------------------
/images/side-img_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/side-img_1.jpg


--------------------------------------------------------------------------------
/images/tablet-version.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gango-anan/the-next-web-clone/afab33e3d4a5bdab84b71b8f7529b0512134806f/images/tablet-version.png


--------------------------------------------------------------------------------
/images/tnw.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 16"><path fill="#FFF" d="M34 16h-6v-5.2c0-.7-.3-1.3-.7-1.8L25 6.7c-.5-.4-1.1-.7-1.8-.7H22v10h-6V0h8.7c1.3 0 2.6.5 3.5 1.5l4.3 4.3c1 .9 1.5 2.2 1.5 3.5V16zM60 0v5.2c0 .7-.3 1.3-.7 1.8L57 9.3c-.5.5-1.1.7-1.8.7h-2.5c.8-.9 1.3-2.1 1.3-3.3V0h-6v5.2c0 .7-.3 1.3-.7 1.8L45 9.3c-.5.5-1.1.7-1.8.7H42V0h-6v16h8.7c1.3 0 2.6-.5 3.5-1.5l2.8-2.8V16h5.7c1.3 0 2.6-.5 3.5-1.5l4.3-4.3c1-.9 1.5-2.2 1.5-3.5V0h-6zM14 0H0v6h4v10h6V6h4"/></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>TNW</title>
  8 |   <link rel="stylesheet" href="styles.css">
  9 | </head>
 10 | <body>
 11 |   <!-- Navigation Area -->
 12 |   <header class="main-header">
 13 |     <div class="mobile-nav-medium">
 14 |       <img src="images/logo_mobile-nav.png" alt="logo" class="medium_img">
 15 |     </div>
 16 |     <nav class="main-nav">
 17 |       <ul class="main-nav__links1 ul-no-style">
 18 |         <li class="news"><a href="#">News</a></li>
 19 |         <li><a href="#">Events ▾</a></li>
 20 |         <li><a href="#">Business ▾</a></li>
 21 |         <li><a href="#">AMAs</a></li>
 22 |         <li><a href="#">Spaces</a></li>
 23 |         <li><a href="#">Terms & Conditions</a></li>
 24 |       </ul>
 25 |       <ul class="main-nav__links2 ul-no-style">
 26 |         <li><a href="#">About</a></li>
 27 |         <li><a href="#">Advertise</a></li>
 28 |         <li><a href="#">Jobs</a></li>
 29 |         <li><a href="#">Contact</a></li>
 30 |       </ul>
 31 |     </nav>
 32 |     <div class="lower-nav">
 33 |       <ul class="lower-nav_links ul-no-style">
 34 |         <li><a href="#">LATEST</a></li>
 35 |         <li><a href="#">HARD FORK</a></li>
 36 |         <li><a href="#">PLUGGED</a></li>
 37 |         <li><a href="#">README</a></li>
 38 |         <li><a href="#">GROWTH QUARTERS</a></li>
 39 |         <li><a href="#">SHIFT</a></li>
 40 |         <li><a href="#">NEURAL</a></li>
 41 |       </ul>
 42 |       <div class="lower-nav_search">
 43 |         <img src="images/search-outline.svg" alt="search">
 44 |       </div>
 45 |     </div>
 46 |     <div class="mobile-nav">
 47 |       <div class="mobile-nav_img">
 48 |         <!-- <img src="images/logo_mobile-nav.png" alt="logo"> -->
 49 |         <img src="images/mobile-nav-logo.png" alt="logo">
 50 |       </div>
 51 |       <div class="menu-search">
 52 |         <div class="search"><ion-icon name="search-sharp" class="search-ion"></ion-icon></div>
 53 |         <div class="menu"><ion-icon name="menu-sharp" class="menu-ion"></ion-icon></div>
 54 |       </div>
 55 |     </div>
 56 |   </header>
 57 | <!-- Main Section   -->
 58 |   <main class="main-content">
 59 |     <div class="main-section">
 60 |       <article class="main-article">
 61 |         <div class="logo">
 62 |           <img src="images/tnw.svg" alt="TNW Logo">
 63 |           <p><time datetime="2020-10-27">Tuesday — October 27, 2020</time></p>
 64 |         </div>
 65 |         <div class="main-article_description">
 66 |           <p class="main-p__font">PODIUM</p>
 67 |           <h2>Google still abuses its search monopoly in the EU — regulators wake up!</h2>
 68 |           <p class="gray-font">by <a href="#">Christian Kroll</a> 2 hours ago <ion-icon name="share-social"></ion-icon> 3</p>
 69 |         </div>
 70 |       </article>
 71 |       <div class="side-bar">
 72 |         <article class="side-bar_1">
 73 |           <h3 class="side-bar_details custom-font">Watch all TNW2020 talks on-demand</h3>
 74 |         </article>
 75 |         <article class="side-bar_2">
 76 |           <div class="side-bar_details">
 77 |             <p class="main-p__font">GEAR</p>
 78 |             <h3 class="custom-font">Freewrite Traveler review: A one-trick pony, but what a trick</h3>
 79 |             <p class="gray-font">by <a href="#">Callum Booth</a> 2 hours ago <ion-icon name="share-social"></ion-icon> 11</p>
 80 |           </div>
 81 |         </article>
 82 |       </div>
 83 |     </div>
 84 | <!-- Latest News Section     -->
 85 |     <section class="latest-news">
 86 |       <h2 class="latest-news_heading tnw-custom_font custom-font custom_hover"><a href="#">Latest news <ion-icon name="chevron-forward-outline"></ion-icon></a></h2>
 87 |       <article class="latest-news_article1 latest-news__set-margin disp-flex">
 88 |         <div class="latest-news_imgs-container">
 89 |           <a href="#"><img src="images/article1_img.png" alt="article" class="latest-news_imgs"></a>
 90 |         </div>
 91 |         <div class="latest-news__details">
 92 |           <h4><a href="#">Study: 40% of escooter riders are injured on their first ride</a></h4>
 93 |           <p class="latest-news__font"><a href="#">Cities Today</a> - 3 hours ago</p>
 94 |         </div>
 95 |       </article>
 96 |       <article class="latest-news_article2 latest-news__set-margin disp-flex">
 97 |         <div class="latest-news_imgs-container">
 98 |           <a href="#" class="latest-news_imgs-container"><img src="images/article2_img.jpg" alt="article" class="latest-news_imgs"></a>
 99 |         </div>
100 |         <div class="latest-news__details">
101 |           <h4><a href="#">Develop a robust email marketing strategy for Black Friday with the help of these seven courses</a></h4>
102 |           <p class="latest-news__font"><a href="#">TNW Deals</a> - 3 hours ago</p>
103 |         </div>
104 |       </article>
105 |       <article class="latest-news_article3 latest-news__set-margin disp-flex">
106 |         <div class="latest-news_imgs-container">
107 |           <a href="#"><img src="images/article3_img.jpg" alt="article" class="latest-news_imgs"></a>
108 |         </div>
109 |         <div class="latest-news__details">
110 |           <h4><a href="#">Oi, richy! If you’re going to buy a yacht, at least make it solar-powered</a></h4>
111 |           <p class="latest-news__font"><a href="#">Matthew Beedham</a> - 3 hours ago</p>
112 |         </div>
113 |       </article>
114 |       <article class="latest-news_article4 latest-news__set-margin disp-flex">
115 |         <div class="latest-news_imgs-container">
116 |           <a href="#"><img src="images/article4_img.png" alt="article" class="latest-news_imgs"></a>
117 |         </div>
118 |         <div class="latest-news__details">
119 |           <h4><a href="#">Microsoft unveils FREE app to create AI models without writing any code</a></h4>
120 |           <p class="latest-news__font"><a href="#">Thomas Macaulay</a> - 4 hours ago</p>
121 |         </div>
122 |       </article>
123 |       <article class="latest-news_article5 latest-news__set-margin disp-flex">
124 |         <div class="latest-news_imgs-container">
125 |           <a href="#"><img src="images/article5_img.jpg" alt="article" class="latest-news_imgs"></a>
126 |         </div>
127 |         <div class="latest-news__details">
128 |           <h4><a href="#">If you’ve got $32 for a gadget, buy Xiaomi’s Mi Band 5</a></h4>
129 |           <p class="latest-news__font"><a href="#">Ivan Mehta</a> - 5 hours ago</p>
130 |         </div>
131 |       </article>
132 |       <article class="latest-news_article6 latest-news__set-margin disp-flex">
133 |         <div class="latest-news_imgs-container">
134 |           <a href="#"><img src="images/article6_img.jpg" alt="article" class="latest-news_imgs"></a>
135 |         </div>
136 |         <div class="latest-news__details">
137 |           <h4><a href="#">What the hell is reinforcement learning and how does it work?</a></h4>
138 |           <p class="latest-news__font"><a href="#">Jair Ribeiro</a> - 6 hours ago</p>
139 |         </div>
140 |       </article>
141 |       <article class="latest-news_article7 latest-news__set-margin disp-flex">
142 |         <div class="latest-news_imgs-container">
143 |           <a href="#"><img src="images/article7_img.png" alt="article" class="latest-news_imgs"></a>
144 |         </div>
145 |         <div class="latest-news__details">
146 |           <h4><a href="#">Institutional bias and lower acceptance rates for women: Inside the AI conference review process</a></h4>
147 |           <p class="latest-news__font"><a href="#">Ben Dickson</a> - 6 hours ago</p>
148 |         </div>
149 |       </article>
150 |       <article class="latest-news_article8 latest-news__set-margin disp-flex">
151 |         <div class="latest-news_imgs-container">
152 |           <a href="#"><img src="images/article8_img.jpg" alt="article" class="latest-news_imgs"></a>
153 |         </div>
154 |         <div class="latest-news__details">
155 |           <h4><a href="#">Uber is being sued by drivers claiming to have been sacked by its algorithm</a></h4>
156 |           <p class="latest-news__font"><a href="#">Matthew Beedham</a> - 7 hours ago</p>
157 |         </div>
158 |       </article>
159 |     </section>
160 | <!-- Latest Funding Rounds     -->
161 |     <div class="latest-funding">
162 |       <div class="lastest-funding_title">
163 |         <h2 class="latest-funding_heading tnw-custom_font custom-font custom_hover"><a href="#">Latest funding rounds on Index.co <ion-icon class="ion-font_size" name="chevron-forward-outline"></ion-icon></a></h2>
164 |         <ul class="latest-funding_links tnw-custom_font">
165 |           <li><a href="#">Add info</a></li>
166 |           <li class="lastest-funding_custom-li"><a href="#">Get updates by email</a></li>
167 |           <li><a href="#">See more</a></li>
168 |         </ul>
169 |       </div>
170 |       <article class="latest-funding__article1">
171 |         <div class="latest-funding_img">
172 |           <img src="images/image-1.jpg" alt="">
173 |         </div>
174 |         <h4 class="heading-artcls latest__funding-font">GeneCast Biotechnology</h4>
175 |         <div class="price-series">
176 |           <p>$149M</p>
177 |           <p class="latest-funding-font">SERIES E</p>
178 |         </div>
179 |         <div class="latest-funding_details1">
180 |           <p class="latest-funding-font"><ion-icon name="pricetag"></ion-icon> Medical, +2</p>
181 |           <p class="latest-funding-font"><ion-icon name="briefcase"></ion-icon> China Renaissance, +4</p>
182 |         </div>
183 |         <div class="latest-funding_details2">
184 |           <p class="latest-funding-font">Chinese biotech firm Genecast secures $149m in Series E round <span class="latest-funding__on">on DealStreetAsia</span></p>
185 |         </div>
186 |       </article>
187 |       <article class="latest-funding__article2">
188 |           <div class="latest-funding_img">
189 |             <img src="images/image-2.jpg" alt="">
190 |           </div>
191 |           <h4 class="heading-artcls latest__funding-font">SafetyCulture</h4>
192 |           <div class="price-series">
193 |             <p>$35M</p>
194 |             <p class="latest-funding-font">SERIES C</p>
195 |           </div>
196 |           <div class="latest-funding_details1">
197 |             <p class="latest-funding-font"><ion-icon name="pricetag"></ion-icon> SaaS, +2</p>
198 |             <p class="latest-funding-font"><ion-icon name="briefcase"></ion-icon> Index Ventures</p>
199 |           </div>
200 |           <div class="latest-funding_details2">
201 |             <p class="latest-funding-font">
202 |               Australia's SafetyCulture raises a further $35m <span class="latest-funding__on">on AVCJ</span>
203 |             </p>
204 |           </div>
205 |       </article>
206 |       <article class="latest-funding__article3">
207 |           <div class="latest-funding_img">
208 |             <img src="images/image-3.jpg" alt="">
209 |           </div>
210 |           <h4 class="heading-artcls latest__funding-font">InVideo</h4>
211 |           <div class="price-series">
212 |             <p>$15M</p>
213 |             <p class="latest-funding-font">SERIES A</p>
214 |           </div>
215 |           <div class="latest-funding_details1">
216 |             <p class="latest-funding-font"><ion-icon name="pricetag"></ion-icon> Video</p>
217 |             <p class="latest-funding-font"><ion-icon name="briefcase"></ion-icon> Sequoia Capital India, +5</p>
218 |           </div>
219 |           <div class="latest-funding_details2">
220 |             <p class="latest-funding-font">
221 |               Video creation and editing platform InVideo raises $15 million <span class="latest-funding__on">on TechCrunch</span>
222 |             </p>
223 |           </div>
224 |       </article>
225 |       <article class="latest-funding__article4">
226 |           <div class="latest-funding_img">
227 |             <img src="images/image-4.jpg" alt="">
228 |           </div>
229 |           <h4 class="heading-artcls latest__funding-font">Jumbotail</h4>
230 |           <div class="price-series">
231 |             <p>$11M</p>
232 |             <p class="latest-funding-font">SERIES B</p>
233 |           </div>
234 |           <div class="latest-funding_details1">
235 |             <p class="latest-funding-font"><ion-icon name="pricetag"></ion-icon> Marketplaces, +2</p>
236 |             <p class="latest-funding-font"><ion-icon name="briefcase"></ion-icon> Nexus Venture Partners, +5</p>
237 |           </div>
238 |           <div class="latest-funding_details2">
239 |             <p class="latest-funding-font">
240 |               Indian marketplace Jumbotail raises $11m led by Canada's Heron Rock <span class="latest-funding__on">on DealStreetAsia</span>
241 |             </p>
242 |           </div>
243 |       </article>
244 |     </div>
245 | <!-- HARD FORK SECTION -->
246 |     <section class="hard-fork">
247 |       <h2 class="hard-fork_heading">HARD FORK</h2>
248 |       <article class="hard-fork_article1">
249 |         <span class="tnw-custom_font custom-font custom_hover"><a href="#">Hard Fork <ion-icon name="chevron-forward-outline" class="ion-font_size"></ion-icon></a></span>
250 |         <div class="hard-fork_most-popular1 hard-fork_most-popular">
251 |           <div class="most-popular_container">
252 |             <h5 class="popular__font main-p__font">MOST POPULAR</h5>
253 |             <p class="most-popular_font"><a href="#">Elon ‘own no home’ Musk sells Gene Wilder’s old pad — 5 properties to go</a></p>
254 |             <p class="latest-funding__on"><a href="#">David Canellis</a> - 1 day ago</p>
255 |           </div>
256 |         </div>
257 |         <div class="hard-fork__latest">
258 |           <div class="hard-fork__latest_title-container">
259 |             <h6 class="tnw-custom_font">LATEST</h6>
260 |             <p class="tnw-custom_font roboto-custom_font"><a href="#">Bitcoin rally sends world's top cryptocurrency ahead of gold and silver</a></p>
261 |           </div>
262 |           <div class="hard-fork__latest_img-container">
263 |             <a href="#"><img src="images/latest-pc1.jpg" alt="image"></a>
264 |           </div>
265 |         </div>
266 |         <ul class="hard-fork__list latest_custom-font">
267 |           <li><a href="#" >PayPal to support Bitcoin and other crypto — but merchants must use fiat</a></li>
268 |           <li><a href="#" >NY watchdog attacks Twitter over 'jarringly easy' Bitcoin scam hack</a></li>
269 |           <li><a href="#" >Disney wants Netflix's throne, and the Wall Street crowd is into it</a></li>
270 |           <li><a href="#" >Here's why the UK and US's crypto clampdowns won't stop Bitcoin trading</a></li>
271 |           <li><a href="#" >‘Mysterious’ billionaire cashes in $127M worth of Gates-backed pharma stock</a></li>
272 |         </ul>
273 |       </article>
274 |       <article class="hard-fork_article2">
275 |         <h3 class="tnw-custom_font custom-font custom_hover"><a href="#">Apps <ion-icon name="chevron-forward-outline" class="ion-font_size"></ion-icon></a></h3>
276 |         <div class="hard-fork_most-popular2 hard-fork_most-popular">
277 |           <div class="most-popular_container">
278 |             <h5 class="popular__font main-p__font">MOST POPULAR</h5>
279 |             <p class="most-popular_font"><a href="#">YouTube's mobile app gets several small tweaks to enhance the viewing experience</a></p>
280 |             <p class="latest-funding__on"><a href="#">Napier Lopez</a> - 20 hours ago</p>
281 |           </div>
282 |         </div>
283 |         <div class="hard-fork__latest">
284 |           <div class="hard-fork__latest_title-container">
285 |             <h6 class="tnw-custom_font">LATEST</h6>
286 |             <p class="tnw-custom_font roboto-custom_font"><a href="#">Praise Hephaestus! Microsoft Office iPad apps now have trackpad support</a></p>
287 |           </div>
288 |           <div class="hard-fork__latest_img-container hard-fork__latest_img-container2">
289 |             <a href="#"><img src="images/latest-pc2.png" alt="image"></a>
290 |           </div>
291 |         </div>
292 |         <ul class="hard-fork__list latest_custom-font">
293 |           <li><a href="#" >YouTube's mobile app gets several small tweaks to enhance the viewing experience</a></li>
294 |           <li><a href="#" >Why open ecosystems are the future of app development</a></li>
295 |           <li><a href="#" >RIP Quibi: Streaming service shuts down after less than a year</a></li>
296 |           <li><a href="#" >You can now grant access to Google Drive files directly from Gmail</a></li>
297 |           <li><a href="#" >Apple creates its own music video channel and… invents MTV?</a></li>
298 |         </ul>
299 |       </article>
300 |       <article class="hard-fork_article3">
301 |         <h3 class="tnw-custom_font custom-font custom_hover"><a href="#">Gear <ion-icon name="chevron-forward-outline" class="ion-font_size"></ion-icon></a></h3>
302 |         <div class="hard-fork_most-popular3 hard-fork_most-popular">
303 |           <div class="most-popular_container">
304 |             <h5 class="popular__font main-p__font">MOST POPULAR</h5>
305 |             <p class="most-popular_font"><a href="#">Freewrite Traveler review: A one-trick pony, but what a trick</a></p>
306 |             <p class="latest-funding__on"><a href="#">Callum Booth</a> - 2 hours ago</p>
307 |           </div>
308 |         </div>
309 |         <div class="hard-fork__latest">
310 |           <div class="hard-fork__latest_title-container">
311 |             <h6 class="tnw-custom_font">LATEST</h6>
312 |             <p class="tnw-custom_font roboto-custom_font"><a href="#">The Apple Watch design is already a classic — will it ever change?</a></p>
313 |           </div>
314 |           <div class="hard-fork__latest_img-container hard-fork__latest_img-container3">
315 |             <a href="#"><img src="images/latest-pc3.png" alt="image"></a>
316 |           </div>
317 |         </div>
318 |         <ul class="hard-fork__list latest_custom-font">
319 |           <li><a href="#" >The iPhone 12 Pro can measure people's height — here's how</a></li>
320 |           <li><a href="#" >Huawei's Mate 40 Pro looks like one of the best phones people won't buy</a></li>
321 |           <li><a href="#" >Moog built a super-fancy theremin to celebrate the instrument's 100th birthday</a></li>
322 |           <li><a href="#" >Hide your Kindle SHAME with this case that looks like a REAL book</a></li>
323 |           <li><a href="#" >Airbnb recruits ex-Apple design honcho Jony Ive</a></li>
324 |         </ul>
325 |       </article>
326 |       <article class="hard-fork_article4">
327 |         <h3 class="tnw-custom_font custom-font custom_hover"><a href="#">Tech <ion-icon name="chevron-forward-outline" class="ion-font_size"></ion-icon></a></h3>
328 |         <div class="hard-fork_most-popular4 hard-fork_most-popular">
329 |           <div class="most-popular_container">
330 |             <h5 class="popular__font main-p__font">MOST POPULAR</h5>
331 |             <p class="most-popular_font"><a href="#">What the hell is reinforcement learning and how does it work?</a></p>
332 |             <p class="latest-funding__on"><a href="#">Jair Ribeiro</a> - 6 hours ago</p>
333 |           </div>
334 |         </div>
335 |         <div class="hard-fork__latest">
336 |           <div class="hard-fork__latest_title-container">
337 |             <h6 class="tnw-custom_font">LATEST</h6>
338 |             <p class="tnw-custom_font roboto-custom_font"><a href="#">Study: 40% of escooter riders are injured on their first ride</a></p>
339 |           </div>
340 |           <div class="hard-fork__latest_img-container hard-fork__latest_img-container4">
341 |             <a href="#"><img src="images/latest-pc4.png" alt="image"></a>
342 |           </div>
343 |         </div>
344 |         <ul class="hard-fork__list latest_custom-font">
345 |           <li><a href="#" >What the hell is reinforcement learning and how does it work?</a></li>
346 |           <li><a href="#" >Institutional bias and lower acceptance rates for women: Inside the AI conference review process</a></li>
347 |           <li><a href="#" >How knowledge distillation compresses neural networks</a></li>
348 |           <li><a href="#" >EV sales in Europe are booming — how long can it last?</a></li>
349 |           <li><a href="#" >Here’s why developers are in love with functional programming</a></li>
350 |         </ul>
351 |       </article>
352 |       <article class="hard-fork_article5">
353 |         <h3 class="tnw-custom_font custom-font custom_hover"><a href="#">Creative <ion-icon name="chevron-forward-outline" class="ion-font_size"></ion-icon></a></h3>
354 |         <div class="hard-fork_most-popular5 hard-fork_most-popular">
355 |           <div class="most-popular_container">
356 |             <h5 class="popular__font main-p__font">MOST POPULAR</h5>
357 |             <p class="most-popular_font"><a href="#">Graphic design apps are now as fundamental as Excel — here's how non-designers get up to speed</a></p>
358 |             <p class="latest-funding__on"><a href="#">Alexis Ong</a> - 29 days ago</p>
359 |           </div>
360 |         </div>
361 |         <div class="hard-fork__latest">
362 |           <div class="hard-fork__latest_title-container">
363 |             <h6 class="tnw-custom_font">LATEST</h6>
364 |             <p class="tnw-custom_font roboto-custom_font"><a href="#">This real-world multiplayer game lets you spend other people’s money — really</a></p>
365 |           </div>
366 |           <div class="hard-fork__latest_img-container hard-fork__latest_img-container5">
367 |             <a href="#"><img src="images/latest-pc5.png" alt="image"></a>
368 |           </div>
369 |         </div>
370 |         <ul class="hard-fork__list latest_custom-font">
371 |           <li><a href="#" >Warzone is infinitely more fun without vehicles (even though it's just a bug)</a></li>
372 |           <li><a href="#" >The Winamp Skin Museum is a beautiful homage to an iconic piece of software</a></li>
373 |           <li><a href="#" >Why skin tone modifiers don't work for 🤝, explained by an emoji historian</a></li>
374 |           <li><a href="#" >Why you need Design Thinking and Proofs of Concept to level up your business</a></li>
375 |           <li><a href="#" >How an AI graphic designer convinced clients it was human</a></li>
376 |         </ul>
377 |       </article>
378 |       <article class="hard-fork_article6">
379 |         <h3 class="tnw-custom_font custom-font custom_hover"><a href="#">Podium <ion-icon name="chevron-forward-outline" class="ion-font_size"></ion-icon></a></h3>
380 |         <div class="hard-fork_most-popular6 hard-fork_most-popular">
381 |           <div class="most-popular_container">
382 |             <h5 class="popular__font main-p__font">MOST POPULAR</h5>
383 |             <p class="most-popular_font"><a href="#">Google still abuses its search monopoly in the EU — regulators wake up!</a></p>
384 |             <p class="latest-funding__on"><a href="#">Christian Kroll</a> - 2 hours ago</p>
385 |           </div>
386 |         </div>
387 |         <div class="hard-fork__latest">
388 |           <div class="hard-fork__latest_title-container">
389 |             <h6 class="tnw-custom_font">LATEST</h6>
390 |             <p class="tnw-custom_font roboto-custom_font"><a href="#">Mixed reality is perfect for our innate multitasking habits</a></p>
391 |           </div>
392 |           <div class="hard-fork__latest_img-container hard-fork__latest_img-container6">
393 |             <a href="#"><img src="images/latest-pc6.png" alt="image"></a>
394 |           </div>
395 |         </div>
396 |         <ul class="hard-fork__list latest_custom-font">
397 |           <li><a href="#" >6 big data blunders businesses should avoid</a></li>
398 |           <li><a href="#" >The AI landscape is shifting from 'data' to 'knowledge.' Here's why that matters</a></li>
399 |           <li><a href="#" >Disruptive fintech is our best bet to economic recovery post COVID-19</a></li>
400 |           <li><a href="#" >Tech in Latin America: An entrepreneur’s guide to June’s startup news</a></li>
401 |           <li><a href="#" >4 ways to improve your latest product’s landing page to guarantee conversion</a></li>
402 |         </ul>
403 |       </article>
404 |       <article class="hard-fork_article7">
405 |         <h3 class="tnw-custom_font custom-font custom_hover"><a href="#">Insights <ion-icon name="chevron-forward-outline" class="ion-font_size"></ion-icon></a></h3>
406 |         <div class="hard-fork_most-popular7 hard-fork_most-popular">
407 |           <div class="most-popular_container">
408 |             <h5 class="popular__font main-p__font">MOST POPULAR</h5>
409 |             <p class="most-popular_font"><a href="#">Uber is being sued by drivers claiming to have been sacked by its algorithm</a></p>
410 |             <p class="latest-funding__on"><a href="#">Matthew Beedham</a> - 7 hours ago</p>
411 |           </div>
412 |         </div>
413 |         <div class="hard-fork__latest">
414 |           <div class="hard-fork__latest_title-container">
415 |             <h6 class="tnw-custom_font">LATEST</h6>
416 |             <p class="tnw-custom_font roboto-custom_font"><a href="#">Agile marketing tips to grow your startup even faster</a></p>
417 |           </div>
418 |           <div class="hard-fork__latest_img-container hard-fork__latest_img-container7">
419 |             <a href="#"><img src="images/latest-pc7.png" alt="image"></a>
420 |           </div>
421 |         </div>
422 |         <ul class="hard-fork__list latest_custom-font">
423 |           <li><a href="#" >Elon ‘own no home’ Musk sells Gene Wilder’s old pad — 5 properties to go</a></li>
424 |           <li><a href="#" >EVs expected to cost as much as regular cars to make within 4 years</a></li>
425 |           <li><a href="#" >Your performance marketing KPIs are obsolete</a></li>
426 |           <li><a href="#" >This Dutch startup sells microdosing kits to boost productivity — so I did magic truffles for a month</a></li>
427 |           <li><a href="#" >Watch a VW ID.3 get smashed up in the name of safety</a></li>
428 |         </ul>
429 |       </article>
430 |       <article class="hard-fork_article8">
431 |         <h3 class="tnw-custom_font custom-font custom_hover"><a href="#">Launch <ion-icon name="chevron-forward-outline" class="ion-font_size"></ion-icon></a></h3>
432 |         <div class="hard-fork_most-popular8 hard-fork_most-popular">
433 |           <div class="most-popular_container">
434 |             <h5 class="popular__font main-p__font">MOST POPULAR</h5>
435 |             <p class="most-popular_font"><a href="#">I’ve fallen for the electric Hummer and I hate myself for it</a></p>
436 |             <p class="latest-funding__on"><a href="#">Matthew Beedham</a> - 6 days ago</p>
437 |           </div>
438 |         </div>
439 |         <div class="hard-fork__latest">
440 |           <div class="hard-fork__latest_title-container">
441 |             <h6 class="tnw-custom_font">LATEST</h6>
442 |             <p class="tnw-custom_font roboto-custom_font"><a href="#">Amazon's electric delivery vans made by Rivian are here, and they're pretty cute</a></p>
443 |           </div>
444 |           <div class="hard-fork__latest_img-container hard-fork__latest_img-container8">
445 |             <a href="#"><img src="images/latest-pc8.jpg" alt="image"></a>
446 |           </div>
447 |         </div>
448 |         <ul class="hard-fork__list latest_custom-font">
449 |           <li><a href="#" >This adorable little electric car is made of trash</a></li>
450 |           <li><a href="#" >Hyundai's first fuel cell-powered trucks arrive in Switzerland — bye bye, diesel</a></li>
451 |           <li><a href="#" >Lynk & Co.'s car sharing-owning scheme will never cost more than €500 a month</a></li>
452 |           <li><a href="#" >Lucid unveils the Air, its luxury EV with up to 517-miles of range costing as much as $169K</a></li>
453 |           <li><a href="#" >Say hello to SHIFT, our new publication about the future of mobility tech</a></li>
454 |         </ul>
455 |       </article>
456 |       <article class="hard-fork_article9">
457 |         <h3 class="tnw-custom_font custom-font custom_hover"><a href="#">Distract <ion-icon name="chevron-forward-outline" class="ion-font_size"></ion-icon></a></h3>
458 |         <div class="hard-fork_most-popular9 hard-fork_most-popular">
459 |           <div class="most-popular_container">
460 |             <h5 class="popular__font main-p__font">MOST POPULAR</h5>
461 |             <p class="most-popular_font"><a href="#">This app guesses your Myer-Briggs personality based on your Reddit history</a></p>
462 |             <p class="latest-funding__on"><a href="#">Mix</a> - 14 days ago</p>
463 |           </div>
464 |         </div>
465 |         <div class="hard-fork__latest">
466 |           <div class="hard-fork__latest_title-container">
467 |             <h6 class="tnw-custom_font">LATEST</h6>
468 |             <p class="tnw-custom_font roboto-custom_font"><a href="#">Pixar's 'Soul' will land on Disney+ Christmas day, no $30 fee required</a></p>
469 |           </div>
470 |           <div class="hard-fork__latest_img-container hard-fork__latest_img-container9">
471 |             <a href="#"><img src="images/latest-pc9.png" alt="image"></a>
472 |           </div>
473 |         </div>
474 |         <ul class="hard-fork__list ul-no-style latest_custom-font">
475 |           <li><a href="#">Call of Duty: Warzone Season 6 riddled with crashes and silly subway bugs</a></li>
476 |           <li><a href="#" >PSA: Call of Duty's Season 6 patch is 57GB — better start downloading it now</a></li>
477 |           <li><a href="#" >Report: Disney+ adds Nick Fury to its lineup of Marvel shows</a></li>
478 |           <li><a href="#" >Call of Duty: Warzone's new subway is everything we hoped the cargo train would be</a></li>
479 |           <li><a href="#" >The Lucid Air might have just beat Tesla’s Plaid Model S round Laguna Seca</a></li>
480 |         </ul>
481 |       </article>
482 |     </section>
483 | <!-- LATEST DEALS     -->
484 |     <section class="latest-deals">
485 |       <h2 class="latest-deals_top-heading">LATEST DEAL</h2>
486 |       <div class="latest-deal__heading">
487 |         <h3 class="tnw-custom_font custom-font custom_hover"><a href="#">Latest deals <ion-icon name="chevron-forward-outline" class="ion-font_size"></ion-icon></a></h3>
488 |         <p class="tnw-custom_font see-all__font "><a href="#">See all Deals</a></p>
489 |       </div>
490 |       <div class="latest__deal1 disp-flex deals-margin__bottom">
491 |         <div class="latest-deals_image custome-position">
492 |           <img src="images/latest_deal1.jpg" alt="deal">
493 |           <div class="deals-off">
494 |             <!-- <img src="images/deals-ribbon.svg" alt=""> -->
495 |             <span class="perc-off"><b>97&#37; OFF</b></span>
496 |           </div>
497 |         </div>
498 |         <div class="deal-details">
499 |           <p class="roboto-custom_font latest-deals-p"><a href="#">Degoo Premium: Lifetime 10TB Backup Plan</a></p>
500 |           <p class="latest-deals-p"><del>$3600</del> <ins>$99.99</ins></p>
501 |         </div>
502 |       </div>
503 |       <div class="latest__deal2 disp-flex deals-margin__bottom">
504 |         <div class="latest-deals_image">
505 |           <img src="images/latest_deal2.jpg" alt="deal">
506 |         </div>
507 |         <div class="deal-details">
508 |           <p class="roboto-custom_font latest-deals-p"><a href="#">The 2020 Adobe Graphic Design Certification School</a></p>
509 |           <p class="latest-deals-p"><del>$1497</del> <ins>$49</ins></p>
510 |         </div>
511 |       </div>
512 |       <div class="latest__deal3 disp-flex deals-margin__bottom">
513 |         <div class="latest-deals_image">
514 |           <img src="images/latest_deal3.jpg" alt="deal">
515 |         </div>
516 |         <div class="deal-details">
517 |           <p class="roboto-custom_font latest-deals-p"><a href="#">The Social Distancing Lifetime Subscription Bundle Ft. Rosetta Stone</a></p>
518 |           <p class="latest-deals-p"><del>$744</del> <ins>$199</ins></p>
519 |         </div>
520 |       </div>
521 |       <div class="latest__deal4 disp-flex deals-margin__bottom">
522 |         <div class="latest-deals_image">
523 |           <img src="images/latest_deal4.jpg" alt="deal">
524 |         </div>
525 |         <div class="deal-details">
526 |           <p class="roboto-custom_font latest-deals-p"><a href="#">The Complete Excel Excellence Bundle</a></p>
527 |           <p class="latest-deals-p"><del>$648</del> <ins>$39.99</ins></p>
528 |         </div>
529 |       </div>
530 |       <div class="latest__deal5 disp-flex deals-margin__bottom">
531 |         <div class="latest-deals_image">
532 |           <img src="images/latest_deal5.jpg" alt="deal">
533 |         </div>
534 |         <div class="deal-details">
535 |           <p class="roboto-custom_font latest-deals-p"><a href="#">The Lean Six Sigma Career Advancement Bundle</a></p>
536 |           <p class="latest-deals-p"><del>$2500</del> <ins>$39.99</ins></p>
537 |         </div>
538 |       </div>
539 |       <div class="latest__deal6 disp-flex deals-margin__bottom">
540 |         <div class="latest-deals_image">
541 |           <img src="images/latest_deal6.jpg" alt="deal">
542 |         </div>
543 |         <div class="deal-details">
544 |           <p class="roboto-custom_font latest-deals-p"><a href="#">FREE: Adobe Photoshop Diploma 4-Week Course</a></p>
545 |           <p class="latest-deals-p"><del>$95</del> <ins>$0</ins></p>
546 |         </div>
547 |       </div>
548 |       <div class="latest__deal7 disp-flex deals-margin__bottom">
549 |         <div class="latest-deals_image">
550 |           <img src="images/latest_deal7.jpg" alt="deal">
551 |         </div>
552 |         <div class="deal-details">
553 |           <p class="roboto-custom_font latest-deals-p"><a href="#">The Ultimate Python & Artificial Intelligence Certification Bundle</a></p>
554 |           <p class="latest-deals-p"><del>$1791</del> <ins>$39.9</ins></p>
555 |         </div>
556 |       </div>
557 |       <div class="latest__deal8 disp-flex deals-margin__bottom">
558 |         <div class="latest-deals_image">
559 |           <img src="images/latest_deal8.jpg" alt="deal">
560 |         </div>
561 |         <div class="deal-details">
562 |           <p class="roboto-custom_font latest-deals-p"><a href="#">Desklab Portable Touchscreen Monitor</a></p>
563 |           <p class="latest-deals-p"><del>$275</del> <ins>$248.95</ins></p>
564 |         </div>
565 |       </div>
566 |     </section>
567 |   </main>
568 |   <footer class="main-footer">
569 |     <div class="footer_top">
570 |       <ul class="footer-top_links1">
571 |         <li><a href="#"><img src="images/logo-facebook.png" alt="FB logo" class="footer_top-d_img"></a></li>
572 |         <li><a href="#"><img src="images/logo-twiter.jpg" alt="Twitter Logo" class="footer_top-d_img"></a></li>
573 |         <li><a href="#"><img src="images/logo-youtube.jpg" alt="Youtube logo" class="footer_top-d_img"></a></li>
574 |         <li><a href="#"><img src="images/logo-instagram.png" alt="Instagram" class="footer_top-d_img"></a></li>
575 |         <li><a href="#"><img src="images/pinterest-logo.jpg" alt="Pinterest" class="footer_top-d_img"></a></li>
576 |         <li><a href="#"><img src="images/logo_rss.png" alt="RSS" class="footer_top-d_img"></a></li>
577 |         <li><a href="#"><img src="images/logo-mail.png" alt="Email icon" class="footer_top-d_img"></a></li>
578 |       </ul>
579 |       <ul class="footer-top_links2 ul-no-style">   
580 |         <li><a href="#">EVENTS</a></li>
581 |         <li><a href="#">ABOUT</a></li>
582 |         <li><a href="#">ADVERTISE</a></li>
583 |         <li><a href="#">JOBS</a></li>
584 |         <li><a href="#">CONTACT</a></li>
585 |       </ul>
586 |     </div>
587 |     <div class="footer_bottom">
588 |       <img src="images/logo_footer2.png" alt="logo" class="footer_logo-img">
589 |       <p class="footer_bottom-p">&copy; 2006–2020 The Next Web B.V. Made with &lt;3 in Amsterdam. Powered by <span class="stack-path_font">STACKPATH</span></p>
590 |     </div>
591 |   </footer>
592 |   <script src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js"></script>
593 | </body>
594 | </html>


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
   1 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
   2 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
   3 | 
   4 | * {
   5 |   box-sizing: border-box;
   6 |   margin: 0;
   7 |   padding: 0;
   8 | }
   9 | 
  10 | html,
  11 | body {
  12 |   max-width: 100vw;
  13 |   font-size: 90%;
  14 | }
  15 | 
  16 | body {
  17 |   display: grid;
  18 |   grid-template-rows: 50px auto fit-content(16.25rem);
  19 |   grid-template-areas:
  20 |     "header-area"
  21 |     "main-area"
  22 |     "footer-area";
  23 | }
  24 | 
  25 | /* ***
  26 | Typography
  27 | ******* */
  28 | a {
  29 |   text-decoration: none;
  30 |   color: inherit;
  31 | }
  32 | 
  33 | .main-p__font {
  34 |   font-size: 1.2rem;
  35 | }
  36 | 
  37 | .roboto-custom_font {
  38 |   font-family: 'Roboto', sans-serif;
  39 |   font-weight: 900;
  40 |   font-size: 1.2rem;
  41 | }
  42 | 
  43 | .gray-font {
  44 |   text-decoration: none;
  45 |   font-weight: 500;
  46 |   color: #c0c0c0;
  47 |   font-size: 1.1rem;
  48 | }
  49 | 
  50 | .custom-font {
  51 |   font-family: 'Roboto', sans-serif;
  52 |   font-weight: 900;
  53 |   font-size: 1.3rem;
  54 | }
  55 | 
  56 | .most-popular_font {
  57 |   font-family: 'Roboto', sans-serif;
  58 |   color: white;
  59 |   font-size: 1.5rem;
  60 |   font-weight: 900;
  61 | }
  62 | 
  63 | .popular__font {
  64 |   color: #ebebeb;
  65 | }
  66 | 
  67 | .tnw-custom_font {
  68 |   color: #f42;
  69 | }
  70 | 
  71 | .ion-font_size {
  72 |   font-size: 1.5rem;
  73 | }
  74 | 
  75 | .latest-funding__on {
  76 |   color: #c0c0c0;
  77 |   font-size: 0.8rem;
  78 | }
  79 | 
  80 | .latest_custom-font {
  81 |   font-family: 'Roboto', sans-serif;
  82 |   font-size: 1.2rem;
  83 |   color: #837f7f;
  84 |   line-height: 1.5rem;
  85 | }
  86 | 
  87 | .latest__funding-font {
  88 |   font-family: 'Roboto', sans-serif;
  89 |   font-size: 1.2rem;
  90 |   font-weight: 600;
  91 |   color: #fff;
  92 | }
  93 | 
  94 | .latest-news h4 {
  95 |   font-size: 0.8rem;
  96 | }
  97 | 
  98 | .see-all__font {
  99 |   font-size: 1.3rem;
 100 | }
 101 | 
 102 | .hard-fork__latest h6 {
 103 |   font-size: 0.9rem;
 104 |   font-weight: 500;
 105 | }
 106 | 
 107 | .lower-nav_links a:hover {
 108 |   color: #202020;
 109 | }
 110 | 
 111 | .custom_hover a:hover {
 112 |   color: #202020;
 113 | }
 114 | 
 115 | .hard-fork__latest_title-container a:hover {
 116 |   text-decoration: underline;
 117 | }
 118 | 
 119 | .hard-fork__list a:hover {
 120 |   color: #202020;
 121 | }
 122 | 
 123 | .latest-deals a:hover,
 124 | .latest-news h4 a:hover {
 125 |   text-decoration: underline;
 126 |   color: #f42;
 127 | }
 128 | 
 129 | .latest-news p a:hover {
 130 |   color: #706c6c;
 131 | }
 132 | 
 133 | .latest-news__font {
 134 |   font-size: 0.8rem;
 135 |   color: #b6b1b1;
 136 | }
 137 | 
 138 | .latest-funding h4 {
 139 |   white-space: nowrap;
 140 |   overflow: hidden;
 141 |   text-overflow: ellipsis;
 142 | }
 143 | 
 144 | del {
 145 |   color: #c0c0c0;
 146 |   font-size: 1.1rem;
 147 | }
 148 | 
 149 | ins {
 150 |   text-decoration: none;
 151 |   color: #746e6e;
 152 |   font-size: 1.3rem;
 153 | }
 154 | 
 155 | .ul-no-style {
 156 |   list-style: none;
 157 | }
 158 | 
 159 | /* =======
 160 | Structure
 161 | ========== */
 162 | 
 163 | /* Header - Main Navigation */
 164 | .main-header {
 165 |   background-color: #fff;
 166 |   grid-area: header-area;
 167 | }
 168 | 
 169 | .mobile-nav-medium {
 170 |   display: none;
 171 | }
 172 | 
 173 | .main-nav {
 174 |   display: none;
 175 | }
 176 | 
 177 | .lower-nav {
 178 |   display: none;
 179 | }
 180 | 
 181 | .mobile-nav {
 182 |   display: flex;
 183 |   justify-content: space-between;
 184 | }
 185 | 
 186 | .mobile-nav_img {
 187 |   text-align: center;
 188 |   width: 120px;
 189 |   height: 50px;
 190 |   background-color: #000;
 191 | }
 192 | 
 193 | .menu-search {
 194 |   display: flex;
 195 |   align-items: center;
 196 |   justify-content: center;
 197 |   font-size: 24px;
 198 | }
 199 | 
 200 | .search {
 201 |   border-left: 0.5px solid #c0c0c0;
 202 |   border-right: 0.5px solid #c0c0c0;
 203 |   color: #c0c0c0;
 204 | }
 205 | 
 206 | .menu {
 207 |   color: #f42;
 208 | }
 209 | 
 210 | .search-ion,
 211 | .menu-ion {
 212 |   padding: 12px;
 213 | }
 214 | 
 215 | .lower-nav_search {
 216 |   width: 3.5rem;
 217 |   padding: 1rem;
 218 |   border-left: 1px solid #c0c0c0;
 219 |   text-align: center;
 220 | }
 221 | 
 222 | .lower-nav_search img {
 223 |   width: 100%;
 224 |   max-width: 1.5rem;
 225 | }
 226 | 
 227 | /* === Main Content Area === */
 228 | .main-content {
 229 |   grid-area: main-area;
 230 |   width: 100%;
 231 | }
 232 | 
 233 | .main-section {
 234 |   background-color: #e0e0e0;
 235 |   padding: 0.5rem 0.5rem 0;
 236 |   margin-bottom: 3rem;
 237 |   color: #fff;
 238 | }
 239 | 
 240 | .main-article {
 241 |   background-image: url("images/cover-gradient.png"), url("images/image-gradient.png"), url("images/google-logo.png");
 242 |   background-repeat: no-repeat, repeat, no-repeat;
 243 |   background-size: cover;
 244 |   background-position: left 0% top 20%, left 0% top 70%, 100%;
 245 |   max-height: 28.5rem;
 246 |   position: relative;
 247 |   min-height: 14rem;
 248 | }
 249 | 
 250 | .logo {
 251 |   display: none;
 252 | }
 253 | 
 254 | .logo img {
 255 |   width: 100%;
 256 |   max-width: 25rem;
 257 | }
 258 | 
 259 | .main-article_description {
 260 |   position: absolute;
 261 |   left: 1rem;
 262 |   bottom: 1rem;
 263 | }
 264 | 
 265 | .main-article_description h2 {
 266 |   font-family: 'Roboto', sans-serif;
 267 |   font-size: 1.5rem;
 268 | }
 269 | 
 270 | /*** Side Bar ***/
 271 | .side-bar {
 272 |   margin-top: 0.5rem;
 273 | }
 274 | 
 275 | .side-bar_1 {
 276 |   min-height: 14rem;
 277 |   position: relative;
 278 |   margin-bottom: 0.5rem;
 279 |   background-image: url("images/image-gradient.png"), url("images/side-img_1.jpg");
 280 |   background-repeat: no-repeat;
 281 |   background-size: cover;
 282 |   background-position: left 0% top 65%, 100%;
 283 |   background-origin: border-box;
 284 |   background-clip: border-box;
 285 | }
 286 | 
 287 | .side-bar_2 {
 288 |   min-height: 14rem;
 289 |   position: relative;
 290 |   background-image: url("images/image-gradient.png"), url("images/side-img2.png");
 291 |   background-repeat: no-repeat;
 292 |   background-size: cover;
 293 |   background-position: left 0% top 65%, 100%;
 294 |   background-origin: border-box;
 295 |   background-clip: border-box;
 296 | }
 297 | 
 298 | .side-bar_details {
 299 |   position: absolute;
 300 |   left: 1rem;
 301 |   bottom: 1rem;
 302 | }
 303 | 
 304 | /* Latest News Section */
 305 | .latest-news {
 306 |   width: 95%;
 307 |   margin: auto;
 308 | }
 309 | 
 310 | .latest-news_heading {
 311 |   margin: 2rem 0;
 312 | }
 313 | 
 314 | .latest-news p,
 315 | .latest-news h4 {
 316 |   width: 85%;
 317 |   padding: 0 0 1rem 1rem;
 318 | }
 319 | 
 320 | .latest-news__set-margin {
 321 |   margin: 0.5rem 0;
 322 | }
 323 | 
 324 | .latest-news_imgs {
 325 |   width: 100px;
 326 |   height: 100px;
 327 | }
 328 | 
 329 | /* === Latest Funding ==== */
 330 | .latest-funding {
 331 |   width: 95%;
 332 |   margin: auto;
 333 | }
 334 | 
 335 | .latest-funding_links {
 336 |   list-style-type: none;
 337 | }
 338 | 
 339 | .latest-funding_links li a:hover {
 340 |   color: #333232;
 341 | }
 342 | 
 343 | .lastest-funding_custom-li {
 344 |   line-height: 20px;
 345 | }
 346 | 
 347 | .latest-funding__article1 {
 348 |   grid-area: latest-funding_art1;
 349 |   background-color: #fffaf8;
 350 | }
 351 | 
 352 | .latest-funding_img {
 353 |   position: absolute;
 354 |   margin: 0.5rem;
 355 | }
 356 | 
 357 | .latest-funding_img img {
 358 |   width: 100%;
 359 |   max-width: 4rem;
 360 | }
 361 | 
 362 | .heading-artcls {
 363 |   background-color: #f42;
 364 |   padding: 1rem 0 1rem 5rem;
 365 | }
 366 | 
 367 | .price-series {
 368 |   background-color: #ffebe8;
 369 |   padding: 1rem;
 370 | }
 371 | 
 372 | .price-series p {
 373 |   padding-left: 4rem;
 374 | }
 375 | 
 376 | .price-series p:first-of-type {
 377 |   font-family: 'Roboto', sans-serif;
 378 | }
 379 | 
 380 | .latest-funding_details1 {
 381 |   border-bottom: 1px solid  #facec7;
 382 |   padding: 1rem;
 383 | }
 384 | 
 385 | .latest-funding_details2 {
 386 |   padding: 1rem;
 387 | }
 388 | 
 389 | .latest-funding-font {
 390 |   color: #808080;
 391 |   font-size: 0.9rem;
 392 | }
 393 | 
 394 | .latest-funding__article2 {
 395 |   grid-area: latest-funding_art2;
 396 |   background-color: #fffaf8;
 397 | }
 398 | 
 399 | .latest-funding__article3 {
 400 |   grid-area: latest-funding_art3;
 401 |   background-color: #fffaf8;
 402 | }
 403 | 
 404 | .latest-funding__article4 {
 405 |   grid-area: latest-funding_art4;
 406 |   background-color: #fffaf8;
 407 | }
 408 | 
 409 | /* =======Hard Fork Section====== */
 410 | .hard-fork {
 411 |   width: 95%;
 412 |   margin: auto;
 413 | }
 414 | 
 415 | .hard-fork_heading {
 416 |   display: none;
 417 | }
 418 | 
 419 | .hard-fork_most-popular {
 420 |   height: 17.25rem;
 421 |   position: relative;
 422 |   margin-top: 1rem;
 423 | }
 424 | 
 425 | .most-popular_container {
 426 |   padding-left: 1rem;
 427 |   padding-bottom: 1rem;
 428 |   position: absolute;
 429 |   left: 0;
 430 |   bottom: 0;
 431 |   text-align: left;
 432 |   line-height: 1.5rem;
 433 | }
 434 | 
 435 | .hard-fork_most-popular1 {
 436 |   background-image: url("images/most-popular_img1.jpg");
 437 |   background-size: cover;
 438 |   background-position: center;
 439 | }
 440 | 
 441 | .hard-fork_most-popular2 {
 442 |   background-image: url("images/image-gradient.png"), url("images/most-popular_img2.png");
 443 |   background-size: cover;
 444 |   background-position: left 0% top 65%, center;
 445 | }
 446 | 
 447 | .hard-fork_most-popular3 {
 448 |   background-image: url("images/image-gradient.png"), url("images/most-popular_img3.png");
 449 |   background-size: cover;
 450 |   background-position: left 0% top 65%, center;
 451 | }
 452 | 
 453 | .hard-fork_most-popular4 {
 454 |   background-image: url("images/image-gradient.png"), url("images/most-popular_img4.jpg");
 455 |   background-size: cover;
 456 |   background-position: left 0% top 65%, center;
 457 | }
 458 | 
 459 | .hard-fork_most-popular5 {
 460 |   background-image: url("images/image-gradient.png"), url("images/most-popular_img5.jpg");
 461 |   background-size: cover;
 462 |   background-position: left 0% top 65%, center;
 463 | }
 464 | 
 465 | .hard-fork_most-popular6 {
 466 |   background-image: url("images/image-gradient.png"), url("images/most-popular_img6.png");
 467 |   background-size: cover;
 468 |   background-position: left 0% top 65%, center;
 469 | }
 470 | 
 471 | .hard-fork_most-popular7 {
 472 |   background-image: url("images/image-gradient.png"), url("images/most-popular_img7.jpg");
 473 |   background-size: cover;
 474 |   background-position: left 0% top 65%, center;
 475 | }
 476 | 
 477 | .hard-fork_most-popular8 {
 478 |   background-image: url("images/image-gradient.png"), url("images/most-popular_img8.jpg");
 479 |   background-size: cover;
 480 |   background-position: left 0% top 65%, center;
 481 | }
 482 | 
 483 | .hard-fork_most-popular9 {
 484 |   background-image: url("images/image-gradient.png"), url("images/most-popular_img9.jpg");
 485 |   background-size: cover;
 486 |   background-position: left 0% top 65%, center;
 487 | }
 488 | 
 489 | .hard-fork__latest {
 490 |   background-color: #fff4f2;
 491 |   display: flex;
 492 |   justify-content: space-between;
 493 |   margin-top: 1.5px;
 494 | }
 495 | 
 496 | .hard-fork__latest_title-container {
 497 |   width: 70%;
 498 |   margin: auto;
 499 |   line-height: 1.1rem;
 500 | }
 501 | 
 502 | .hard-fork__latest_img-container img {
 503 |   width: 100%;
 504 |   max-width: 6rem;
 505 |   min-height: 7rem;
 506 |   vertical-align: bottom;
 507 | }
 508 | 
 509 | .hard-fork__list li {
 510 |   list-style: none;
 511 |   border-bottom: 1px solid #f5f3f3;
 512 |   padding-top: 0.5rem;
 513 |   padding-bottom: 0.5rem;
 514 | }
 515 | 
 516 | .hard-fork__list li a::before {
 517 |   content: "\2022";
 518 |   color: #f42;
 519 |   margin-right: 0.5rem;
 520 | }
 521 | 
 522 | /* Latest Deals Section */
 523 | .latest-deals {
 524 |   padding-top: 4rem;
 525 |   width: 95%;
 526 |   margin: auto;
 527 | }
 528 | 
 529 | .latest-deals_top-heading {
 530 |   display: none;
 531 | }
 532 | 
 533 | .latest-deal__heading {
 534 |   grid-area: ld-heading;
 535 |   display: flex;
 536 |   justify-content: space-between;
 537 |   margin-bottom: 1rem;
 538 | }
 539 | 
 540 | .latest-deals_image img {
 541 |   width: 100px;
 542 |   height: 100px;
 543 |   vertical-align: bottom;
 544 | }
 545 | 
 546 | .disp-flex {
 547 |   display: flex;
 548 | }
 549 | 
 550 | .deals-margin__bottom {
 551 |   margin-bottom: 1rem;
 552 | }
 553 | 
 554 | .deal-details {
 555 |   margin-left: 1rem;
 556 | }
 557 | 
 558 | .latest-deals-p {
 559 |   margin-top: 0.5rem;
 560 | }
 561 | 
 562 | .latest-deals_image {
 563 |   background-image: url("images/latest_deal1.jpg");
 564 |   background-position: cover;
 565 | }
 566 | 
 567 | .deals-off {
 568 |   display: none;
 569 | }
 570 | 
 571 | /* Footer */
 572 | .main-footer {
 573 |   grid-area: footer-area;
 574 |   margin-top: 10rem;
 575 | }
 576 | 
 577 | .footer_top {
 578 |   min-height: 10rem;
 579 |   background-color: rgb(19, 19, 19);
 580 |   display: flex;
 581 |   flex-direction: column;
 582 |   align-items: center;
 583 |   justify-content: center;
 584 | }
 585 | 
 586 | .footer-top_links1 {
 587 |   margin-bottom: 1rem;
 588 | }
 589 | 
 590 | .footer-top_links1 li {
 591 |   display: inline-block;
 592 |   padding: 0.2rem;
 593 | }
 594 | 
 595 | .footer_top-d_img {
 596 |   height: 2.2rem;
 597 |   width: 2.2rem;
 598 |   border-radius: 50%;
 599 | }
 600 | 
 601 | .footer-top_links2 li {
 602 |   display: inline-block;
 603 |   color: #8a8989;
 604 |   font-weight: 550;
 605 |   font-size: 0.7rem;
 606 | }
 607 | 
 608 | .footer_bottom {
 609 |   display: flex;
 610 |   align-items: center;
 611 |   justify-content: center;
 612 |   min-height: 6.25rem;
 613 |   background-color: rgb(0, 0, 0);
 614 |   text-align: center;
 615 | }
 616 | 
 617 | .footer_bottom-p {
 618 |   color: #8a8989;
 619 |   font-size: 0.5rem;
 620 |   font-weight: 550;
 621 | }
 622 | 
 623 | .stack-path_font {
 624 |   color: white;
 625 | }
 626 | 
 627 | .footer_logo-img {
 628 |   display: inline-block;
 629 |   width: 100%;
 630 |   max-width: 48px;
 631 | }
 632 | 
 633 | /* ===========
 634 | Media Queries
 635 | ============= */
 636 | @media (min-width: 768px) {
 637 |   html,
 638 |   body {
 639 |     font-size: 80%;
 640 |   }
 641 | 
 642 |   body {
 643 |     display: grid;
 644 |     grid-template-rows: 6.21rem auto fit-content(16.25rem);
 645 |     grid-template-areas:
 646 |       "."
 647 |       "main-area"
 648 |       "footer-area";
 649 |   }
 650 | 
 651 |   .gray-font {
 652 |     font-size: 0.8rem;
 653 |   }
 654 | 
 655 |   .latest-funding__on {
 656 |     color: #c0c0c0;
 657 |     font-size: 0.8rem;
 658 |   }
 659 | 
 660 |   .main-header {
 661 |     background-color: #fff;
 662 |     width: 100%;
 663 |     position: fixed;
 664 |     left: 0;
 665 |     top: 0;
 666 |     z-index: 10;
 667 |   }
 668 | 
 669 |   .mobile-nav-medium {
 670 |     width: 13%;
 671 |     display: unset;
 672 |     float: left;
 673 |   }
 674 | 
 675 |   .medium_img {
 676 |     width: 100%;
 677 |     height: 6.21rem;
 678 |     vertical-align: bottom;
 679 |   }
 680 | 
 681 |   .main-nav {
 682 |     background-color: rgb(0, 0, 0);
 683 |     color: #fff;
 684 |     display: flex;
 685 |     justify-content: space-between;
 686 |     align-items: center;
 687 |     padding: 0.5rem 1rem;
 688 |     float: right;
 689 |     width: 87%;
 690 |   }
 691 | 
 692 |   .lower-nav {
 693 |     padding-left: 0.8rem;
 694 |     display: flex;
 695 |     justify-content: space-between;
 696 |     align-items: center;
 697 |     border: solid #c0c0c0 1px;
 698 |     float: right;
 699 |     width: 87%;
 700 |   }
 701 | 
 702 |   .mobile-nav {
 703 |     display: none;
 704 |   }
 705 | 
 706 |   .main-nav__links1 li,
 707 |   .main-nav__links2 li,
 708 |   .lower-nav_links li {
 709 |     display: inline-block;
 710 |     padding: 0.2rem;
 711 |   }
 712 | 
 713 |   .main-nav__links1 li,
 714 |   .main-nav__links1 a,
 715 |   .main-nav__links2 li,
 716 |   .main-nav__links2 a,
 717 |   .lower-nav_links li,
 718 |   .lower-nav_links a {
 719 |     text-decoration: none;
 720 |     color: #808080;
 721 |     font-size: 0.8rem;
 722 |     font-weight: 600;
 723 |   }
 724 | 
 725 |   .main-nav__links1 a:hover,
 726 |   .main-nav__links2 a:hover,
 727 |   .main-article_description a:hover,
 728 |   .side-bar_details a:hover {
 729 |     color: #fff;
 730 |   }
 731 | 
 732 |   .main-section {
 733 |     display: flex;
 734 |   }
 735 | 
 736 |   .main-article {
 737 |     width: 70%;
 738 |     display: flex;
 739 |     flex-direction: column;
 740 |     justify-content: space-between;
 741 |   }
 742 | 
 743 |   .logo {
 744 |     display: none;
 745 |   }
 746 | 
 747 |   .main-article_description h2 {
 748 |     font-family: 'Roboto', sans-serif;
 749 |     font-size: 3rem;
 750 |     margin-bottom: 2.5rem;
 751 |   }
 752 | 
 753 |   .side-bar {
 754 |     width: 30%;
 755 |     margin-left: 0.5rem;
 756 |     margin-top: 0;
 757 |     display: flex;
 758 |     flex-direction: column;
 759 |   }
 760 | 
 761 |   /* ==Latest News == */
 762 |   .latest-news h4 {
 763 |     font-size: 0.9rem;
 764 |     margin-top: 0.5rem;
 765 |   }
 766 | 
 767 |   .latest-news__set-margin {
 768 |     margin: 0;
 769 |   }
 770 | 
 771 |   .latest-news {
 772 |     display: grid;
 773 |     grid-gap: 1rem;
 774 |     grid-template-columns: repeat(3, 1fr);
 775 |     grid-template-rows: repeat(4, auto);
 776 |     grid-template-areas:
 777 |       "heading heading heading"
 778 |       "article1_area article2_area article3_area"
 779 |       "article4_area article5_area article6_area"
 780 |       "article7_area article8_area .";
 781 |   }
 782 | 
 783 |   .latest-news_heading {
 784 |     grid-area: heading;
 785 |   }
 786 | 
 787 |   .latest-news_article1 {
 788 |     grid-area: article1_area;
 789 |   }
 790 | 
 791 |   .latest-news_article2 {
 792 |     grid-area: article2_area;
 793 |   }
 794 | 
 795 |   .latest-news_article3 {
 796 |     grid-area: article3_area;
 797 |   }
 798 | 
 799 |   .latest-news_article4 {
 800 |     grid-area: article4_area;
 801 |   }
 802 | 
 803 |   .latest-news_article5 {
 804 |     grid-area: article5_area;
 805 |   }
 806 | 
 807 |   .latest-news_article6 {
 808 |     grid-area: article6_area;
 809 |   }
 810 | 
 811 |   .latest-news_article7 {
 812 |     grid-area: article7_area;
 813 |   }
 814 | 
 815 |   .latest-news_article8 {
 816 |     grid-area: article8_area;
 817 |   }
 818 | 
 819 |   .latest-news p,
 820 |   .latest-news h4 {
 821 |     width: 100%;
 822 |     padding-left: 0;
 823 |   }
 824 | 
 825 |   .latest-news_imgs {
 826 |     width: 100%;
 827 |     max-width: 284px;
 828 |     height: auto;
 829 |   }
 830 | 
 831 |   /* ==Latest Funding== */
 832 |   .custom-font {
 833 |     font-size: 1.8rem;
 834 |   }
 835 | 
 836 |   .latest-funding {
 837 |     margin: 4rem auto;
 838 |     display: grid;
 839 |     grid-gap: 1rem;
 840 |     grid-template-columns: repeat(3, 1fr);
 841 |     grid-template-rows: repeat(3, auto);
 842 |     grid-template-areas:
 843 |       "latest-funding_title latest-funding_title latest-funding_title"
 844 |       "latest-funding_art1 latest-funding_art2 latest-funding_art3"
 845 |       "latest-funding_art4 . .";
 846 |   }
 847 | 
 848 |   .lastest-funding_title {
 849 |     grid-area: latest-funding_title;
 850 |     display: flex;
 851 |     justify-content: space-between;
 852 |     align-items: center;
 853 |   }
 854 | 
 855 |   .latest-funding_links li {
 856 |     display: inline-block;
 857 |     margin: 0 0.2rem;
 858 |   }
 859 | 
 860 |   .lastest-funding_custom-li {
 861 |     border-left: 1.5px solid #f42;
 862 |     border-right: 1.5px solid #f42;
 863 |     padding: 0 0.6rem;
 864 |   }
 865 | 
 866 |   /* **Hard Fork** */
 867 |   .latest_custom-font {
 868 |     font-size: 0.9rem;
 869 |   }
 870 | 
 871 |   .most-popular_font {
 872 |     font-size: 1.3rem;
 873 |   }
 874 | 
 875 |   .main-p__font {
 876 |     font-size: 0.7rem;
 877 |   }
 878 | 
 879 |   .roboto-custom_font {
 880 |     font-family: 'Roboto', sans-serif;
 881 |     font-weight: 900;
 882 |     font-size: 0.9rem;
 883 |   }
 884 | 
 885 |   .hard-fork {
 886 |     display: grid;
 887 |     grid-gap: 1rem;
 888 |     grid-template-columns: repeat(2, 1fr);
 889 |     grid-template-rows: repeat(6, auto);
 890 |     grid-template-areas:
 891 |       "hard-fork_heading hard-fork_heading"
 892 |       "hard-fork__artcl1-area hard-fork__artcl2-area"
 893 |       "hard-fork__artcl3-area hard-fork__artcl4-area"
 894 |       "hard-fork__artcl5-area hard-fork__artcl6-area"
 895 |       "hard-fork__artcl7-area hard-fork__artcl8-area"
 896 |       "hard-fork__artcl9-area .";
 897 |   }
 898 | 
 899 |   .hard-fork_heading {
 900 |     grid-area: hard-fork_heading;
 901 |   }
 902 | 
 903 |   .hard-fork_article1 {
 904 |     grid-area: hard-fork__artcl1-area;
 905 |   }
 906 | 
 907 |   .hard-fork_article2 {
 908 |     grid-area: hard-fork__artcl2-area;
 909 |   }
 910 | 
 911 |   .hard-fork_article3 {
 912 |     grid-area: hard-fork__artcl3-area;
 913 |   }
 914 | 
 915 |   .hard-fork_article4 {
 916 |     grid-area: hard-fork__artcl4-area;
 917 |   }
 918 | 
 919 |   .hard-fork_article5 {
 920 |     grid-area: hard-fork__artcl5-area;
 921 |   }
 922 | 
 923 |   .hard-fork_article6 {
 924 |     grid-area: hard-fork__artcl6-area;
 925 |   }
 926 | 
 927 |   .hard-fork_article7 {
 928 |     grid-area: hard-fork__artcl7-area;
 929 |   }
 930 | 
 931 |   .hard-fork_article8 {
 932 |     grid-area: hard-fork__artcl8-area;
 933 |   }
 934 | 
 935 |   .hard-fork_article9 {
 936 |     grid-area: hard-fork__artcl9-area;
 937 |   }
 938 | 
 939 |   /* Latest Deals */
 940 |   del {
 941 |     font-size: 0.7rem;
 942 |   }
 943 | 
 944 |   ins {
 945 |     font-size: 0.9rem;
 946 |   }
 947 | 
 948 |   .latest-deals {
 949 |     padding-top: 4rem;
 950 |     margin: auto;
 951 |     display: grid;
 952 |     grid-gap: 1rem;
 953 |     grid-template-columns: repeat(3, 1fr);
 954 |     grid-template-rows: repeat(5, auto);
 955 |     grid-template-areas:
 956 |       "top-head top-head top-head"
 957 |       "ld-heading ld-heading ld-heading"
 958 |       "latest_deal1-area latest_deal2-area latest_deal3-area"
 959 |       "latest_deal4-area latest_deal5-area latest_deal6-area"
 960 |       "latest_deal7-area latest_deal8-area .";
 961 |   }
 962 | 
 963 |   .latest-deals_top-heading {
 964 |     grid-area: top-head;
 965 |   }
 966 | 
 967 |   .latest-deal__heading {
 968 |     grid-area: ld-heading;
 969 |     display: flex;
 970 |     justify-content: space-between;
 971 |   }
 972 | 
 973 |   .latest__deal1 {
 974 |     grid-area: latest_deal1-area;
 975 |   }
 976 | 
 977 |   .latest__deal2 {
 978 |     grid-area: latest_deal2-area;
 979 |   }
 980 | 
 981 |   .latest__deal3 {
 982 |     grid-area: latest_deal3-area;
 983 |   }
 984 | 
 985 |   .latest__deal4 {
 986 |     grid-area: latest_deal4-area;
 987 |   }
 988 | 
 989 |   .latest__deal5 {
 990 |     grid-area: latest_deal5-area;
 991 |   }
 992 | 
 993 |   .latest__deal6 {
 994 |     grid-area: latest_deal6-area;
 995 |   }
 996 | 
 997 |   .latest__deal7 {
 998 |     grid-area: latest_deal7-area;
 999 |   }
1000 | 
1001 |   .latest__deal8 {
1002 |     grid-area: latest_deal8-area;
1003 |   }
1004 | 
1005 |   .disp-flex {
1006 |     display: unset;
1007 |   }
1008 | 
1009 |   .latest-deals_image img {
1010 |     width: 100%;
1011 |     max-width: 284px;
1012 |     height: auto;
1013 |   }
1014 | 
1015 |   .deals-margin__bottom {
1016 |     margin-bottom: 0;
1017 |   }
1018 | 
1019 |   .deal-details {
1020 |     margin-left: 0;
1021 |   }
1022 | 
1023 |   .custome-position {
1024 |     position: relative;
1025 |   }
1026 | 
1027 |   .deals-off {
1028 |     display: unset;
1029 |     width: 40%;
1030 |     max-width: 100px;
1031 |     height: 60%;
1032 |     max-height: 100px;
1033 |     background-image: url("images/deals-ribbon.svg");
1034 |     background-size: cover;
1035 |     position: absolute;
1036 |     right: 0;
1037 |     top: 0;
1038 |     overflow: hidden;
1039 |   }
1040 |   
1041 |   .perc-off {
1042 |     display: inline-block;
1043 |     transform: rotateZ(45deg) translateX(32px) translateY(8px);
1044 |     transform-origin: center;
1045 |   }
1046 | 
1047 |   /* Main Footer */
1048 |   .footer_bottom p {
1049 |     font-size: 0.7rem;
1050 |   }
1051 | 
1052 |   .footer_bottom {
1053 |     display: flex;
1054 |     align-items: center;
1055 |     justify-content: center;
1056 |     min-height: 6.25rem;
1057 |     background-color: rgb(0, 0, 0);
1058 |   }
1059 | }
1060 | 
1061 | @media (min-width: 1024px) {
1062 |   html,
1063 |   body {
1064 |     font-size: 16px;
1065 |   }
1066 | 
1067 |   .logo {
1068 |     display: flex;
1069 |     justify-content: space-between;
1070 |     padding: 1.5rem;
1071 |   }
1072 | 
1073 |   .mobile-nav-medium {
1074 |     display: none;
1075 |   }
1076 | 
1077 |   .main-nav,
1078 |   .lower-nav {
1079 |     float: none;
1080 |     width: 100%;
1081 |   }
1082 | 
1083 |   /* Latest News */
1084 |   .latest-news {
1085 |     width: 88%;
1086 |     grid-template-columns: repeat(4, minmax(0, 17.75rem));
1087 |     grid-template-rows: repeat(3, auto);
1088 |     grid-template-areas:
1089 |       "heading heading heading heading"
1090 |       "article1_area article2_area article3_area article4_area"
1091 |       "article5_area article6_area article7_area article8_area";
1092 |   }
1093 | 
1094 |   /* Latest Funding */
1095 |   .latest-funding {
1096 |     width: 88%;
1097 |     grid-template-columns: repeat(4, minmax(0, 17.75rem));
1098 |     grid-template-rows: repeat(2, auto);
1099 |     grid-template-areas:
1100 |       "latest-funding_title latest-funding_title latest-funding_title latest-funding_title"
1101 |       "latest-funding_art1 latest-funding_art2 latest-funding_art3 latest-funding_art4";
1102 |   }
1103 | 
1104 |   /* Hard Fork */
1105 |   .hard-fork {
1106 |     width: 88%;
1107 |     grid-template-columns: repeat(3, 1fr);
1108 |     grid-template-rows: repeat(4, auto);
1109 |     grid-template-areas:
1110 |       "hard-fork_heading hard-fork_heading hard-fork_heading"
1111 |       "hard-fork__artcl1-area hard-fork__artcl2-area hard-fork__artcl3-area"
1112 |       "hard-fork__artcl4-area hard-fork__artcl5-area hard-fork__artcl6-area"
1113 |       "hard-fork__artcl7-area hard-fork__artcl8-area hard-fork__artcl9-area";
1114 |   }
1115 | 
1116 |   /* Latest Deals */
1117 | 
1118 |   .latest-deals {
1119 |     width: 88%;
1120 |     grid-template-columns: repeat(4, minmax(0, 17.75rem));
1121 |     grid-template-rows: repeat(3, auto);
1122 |     grid-template-areas:
1123 |       "top-head top-head top-head top-head"
1124 |       "ld-heading ld-heading ld-heading ld-heading"
1125 |       "latest_deal1-area latest_deal2-area latest_deal3-area latest_deal4-area"
1126 |       "latest_deal5-area latest_deal6-area latest_deal7-area latest_deal8-area";
1127 |   }
1128 | 
1129 |   /* Main Footer */
1130 |   .footer_bottom p {
1131 |     font-size: 0.7rem;
1132 |   }
1133 | 
1134 |   .footer_bottom {
1135 |     display: flex;
1136 |     align-items: center;
1137 |     justify-content: center;
1138 |     min-height: 6.25rem;
1139 |     background-color: rgb(0, 0, 0);
1140 |   }
1141 | }
1142 | 


--------------------------------------------------------------------------------