API tools faq
paste
Tayo69

news360 html

Tayo69
Feb 9th, 2022 (edited)
378
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.17 KB | None | 0 0
raw download clone embed print report
  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.     <link href="style.css" rel="stylesheet" />
  8.     <link href="css/all.min.css" rel="stylesheet" />
  9.     <link href="css/fontawesome.min.css" rel="stylesheet" />
  10.     <title>NEWSPAPER WEBSITE</title>
  11.   </head>
  12.   <body>
  13.     <header>
  14.       <div class="logo">
  15.         <a href="featured"
  16.          >NEWS<span class="span1">3</span><span class="span2">6</span
  17.          ><span class="span3">0</span></a
  18.        >
  19.       </div>
  20.       <div class="header-right">
  21.         <div class="search-box">
  22.           <a class="search-btn">
  23.             <i class="fa-solid fa-magnifying-glass"></i>
  24.           </a>
  25.           <input
  26.            class="search-text"
  27.            type="text"
  28.            name="box"
  29.            placeholder="SEARCH"
  30.          />
  31.         </div>
  32.         <div class="help">
  33.           <a href="#">LOGIN</a><span>|</span>
  34.           <a href="#">HELP</a>
  35.         </div>
  36.       </div>
  37.     </header>
  38.     <div class="container">
  39.       <div class="featured">
  40.         <div class="featured-text">
  41.           <h1>Virtual Reality Offers New Exciting Avenue</h1>
  42.           <p>
  43.             As VR technology matures, integrators are in a prime position to
  44.             enter a burgeoning market waiting for a breakthrough of consumer
  45.             interest beyond established sectors like gaming.
  46.           </p>
  47.         </div>
  48.       </div>
  49.       <div class="navigation">
  50.         <div>
  51.           <li>
  52.             <ul>
  53.               <a href="#"><h2>Sports</h2></a>
  54.             </ul>
  55.             <ul>
  56.               <a href="#">Football</a>
  57.             </ul>
  58.             <ul>
  59.               <a href="#">Basketball</a>
  60.             </ul>
  61.             <ul>
  62.               <a href="#">Tennis</a>
  63.             </ul>
  64.             <ul>
  65.               <a href="#">Motorsport</a>
  66.             </ul>
  67.             <ul>
  68.               <a href="#">Cricket</a>
  69.             </ul>
  70.           </li>
  71.         </div>
  72.         <div>
  73.           <li>
  74.             <ul>
  75.               <a href="#"><h2>Politics</h2></a>
  76.             </ul>
  77.             <ul>
  78.               <a href="#">Nigerians Decides</a>
  79.             </ul>
  80.             <ul>
  81.               <a href="#">Matters Arising</a>
  82.             </ul>
  83.             <ul>
  84.               <a href="#">Democracy Today</a>
  85.             </ul>
  86.             <ul>
  87.               <a href="#">World News</a>
  88.             </ul>
  89.             <ul>
  90.               <a href="#">All Out Politics</a>
  91.             </ul>
  92.           </li>
  93.         </div>
  94.         <div>
  95.           <li>
  96.             <ul>
  97.               <a href="#"><h2>Health</h2></a>
  98.             </ul>
  99.             <ul>
  100.               <a href="#">The Doctors Nigeria</a>
  101.             </ul>
  102.             <ul>
  103.               <a href="#">Health Digest</a>
  104.             </ul>
  105.             <ul>
  106.               <a href="#">Healthline with Aproko Doctor</a>
  107.             </ul>
  108.             <ul>
  109.               <a href="#">Covid-19</a>
  110.             </ul>
  111.             <ul>
  112.               <a href="#">World Health Organization</a>
  113.             </ul>
  114.             <ul>
  115.               <a href="#">Public Health</a>
  116.             </ul>
  117.           </li>
  118.         </div>
  119.         <div>
  120.           <li>
  121.             <ul>
  122.               <a href="#"><h2>Technology</h2></a>
  123.             </ul>
  124.             <ul>
  125.               <a href="#">Gadgets</a>
  126.             </ul>
  127.             <ul>
  128.               <a href="#">Telecoms</a>
  129.             </ul>
  130.             <ul>
  131.               <a href="#">Social Media</a>
  132.             </ul>
  133.             <ul>
  134.               <a href="#">Gaming</a>
  135.             </ul>
  136.             <ul>
  137.               <a href="#">Technological Skills</a>
  138.             </ul>
  139.             <ul>
  140.               <a href="#">Virtual Reality</a>
  141.             </ul>
  142.           </li>
  143.         </div>
  144.         <div>
  145.           <li>
  146.             <ul>
  147.               <a href="#"><h2>Business</h2></a>
  148.             </ul>
  149.             <ul>
  150.               <a href="#">Cryptocurrency</a>
  151.             </ul>
  152.             <ul>
  153.               <a href="#">Energy</a>
  154.             </ul>
  155.             <ul>
  156.               <a href="#">Aviation</a>
  157.             </ul>
  158.             <ul>
  159.               <a href="#">Capital Market</a>
  160.             </ul>
  161.             <ul>
  162.               <a href="#">Industry</a>
  163.             </ul>
  164.             <ul>
  165.               <a href="#">Business News</a>
  166.             </ul>
  167.           </li>
  168.         </div>
  169.       </div>
  170.       <div class="article-title">
  171.         <div class="box-1">
  172.           <img class="article-image" src="btc.jpg" />
  173.           <h4 class="style">EXCLUSIVE</h4>
  174.           <div class="first-text">
  175.             <h4>Thursday 27, January 2022</h4>
  176.             <a href="#"><h2>Bitcoin Price Surges</h2></a>
  177.             <p>
  178.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
  179.               saepe nobis mollitia dolorum adipisci delectus itaque deleniti
  180.               tempore autem incidunt.
  181.             </p>
  182.           </div>
  183.         </div>
  184.         <div class="latest"><h4>LATEST NEWS</h4></div>
  185.         <div class="box-2">
  186.           <div class="box-top">
  187.             <div class="box-top-left">
  188.               <h4>Wednesday 9, February 2022</h4>
  189.               <a href="#"><h2>Netflix Stocks Rises</h2></a>
  190.               <img class="news-image" src="netflix.jpg" />
  191.               <p>
  192.                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit,
  193.                 corporis.
  194.               </p>
  195.             </div>
  196.             <div class="box-top-right">
  197.               <h4>Tuesday 1, February 2022</h4>
  198.               <a href="#"><h2>Chess in Slums</h2></a>
  199.               <img class="news-image" src="chess.jpg" />
  200.               <p>
  201.                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit,
  202.                 corporis.
  203.               </p>
  204.             </div>
  205.           </div>
  206.           <div class="box-down">
  207.             <div class="box-down-left">
  208.               <h4>Tuesday 8, February 2022</h4>
  209.               <a href="#"><h2>Barcelona vs Real Madrid</h2></a>
  210.               <img class="news-image" src="barcelona.jpg" />
  211.               <p>
  212.                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit,
  213.                 corporis.
  214.               </p>
  215.             </div>
  216.             <div class="box-down-right">
  217.               <h4>Monday 7, February 2022</h4>
  218.               <a href="#"><h2>Armed Forces Recruitment</h2></a>
  219.               <img class="news-image" src="soldiers.jpg" />
  220.               <p>
  221.                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit,
  222.                 corporis.
  223.               </p>
  224.             </div>
  225.           </div>
  226.         </div>
  227.         <div class="employees">
  228.           <a><h4 class="emp-text">EMPLOYEES YOU FOLLOW</h4></a>
  229.           <a><h4>ALL EMPLOYEES</h4></a>
  230.           <a><h4>SEARCH EMPLOYEES</h4></a>
  231.         </div>
  232.         <div class="profile">
  233.           <img class="profile-pic" src="red.jpg" />
  234.           <img class="profile-pic" src="red.jpg" />
  235.           <img class="profile-pic" src="red.jpg" />
  236.           <img class="profile-pic" src="red.jpg" />
  237.           <img class="profile-pic" src="red.jpg" />
  238.           <img class="profile-pic" src="red.jpg" />
  239.           <img class="profile-pic" src="red.jpg" />
  240.         </div>
  241.       </div>
  242.       <div class="projects">
  243.         <div class="project-top">
  244.           <h4>FEATURED PROJECTS</h4>
  245.           <h4>VIEW ALL</h4>
  246.         </div>
  247.         <div class="project-middle">
  248.           <img class="project-image" src="pexels.jpg" alt="fruits" />
  249.           <div class="project-text">
  250.             <a href="#"><h3>Election Protests</h3></a>
  251.             <p>
  252.               Lorem ipsum dolor sit amet consectetur adipisicing elit.
  253.               Architecto exercitationem, tempora libero totam inventore esse.
  254.             </p>
  255.           </div>
  256.         </div>
  257.         <div class="project-middle">
  258.           <img class="project-image" src="protest.jpg" alt="protest" />
  259.           <div class="project-text">
  260.             <a href="#"><h3>Nigerians Decides</h3></a>
  261.             <p>
  262.               Lorem ipsum dolor sit amet consectetur adipisicing elit.
  263.               Architecto exercitationem, tempora libero totam inventore esse.
  264.             </p>
  265.           </div>
  266.         </div>
  267.         <div class="project-middle">
  268.           <img class="project-image" src="football.jpg" alt="football" />
  269.           <div class="project-text">
  270.             <a href="#"><h3>World Cup Qualifiers</h3></a>
  271.             <p>
  272.               Lorem ipsum dolor sit amet consectetur adipisicing elit.
  273.               Architecto exercitationem, tempora libero totam inventore esse.
  274.             </p>
  275.           </div>
  276.         </div>
  277.         <div class="project-top-two">
  278.           <h4>NEWEST DOCUMENTS</h4>
  279.           <h4>VIEW ALL</h4>
  280.         </div>
  281.         <div class="documents">
  282.           <div class="cities">
  283.             <i class="fa-solid fa-6x fa-file-lines"></i>
  284.             <h4>Paris</h4>
  285.           </div>
  286.           <div class="cities">
  287.             <i class="fa-solid fa-6x fa-file-lines"></i>
  288.             <h4>London</h4>
  289.           </div>
  290.           <div class="cities">
  291.             <i class="fa-solid fa-6x fa-file-lines"></i>
  292.             <h4>Bulgaria</h4>
  293.           </div>
  294.           <div class="cities">
  295.             <i class="fa-solid fa-6x fa-file-lines"></i>
  296.             <h4>Rome</h4>
  297.           </div>
  298.           <div class="cities">
  299.             <i class="fa-solid fa-6x fa-file-lines"></i>
  300.             <h4>Dubai</h4>
  301.           </div>
  302.           <div class="cities">
  303.             <i class="fa-solid fa-6x fa-file-lines"></i>
  304.             <h4>Florence</h4>
  305.           </div>
  306.           <div class="cities">
  307.             <i class="fa-solid fa-6x fa-file-lines"></i>
  308.             <h4>Spain</h4>
  309.           </div>
  310.           <div class="cities">
  311.             <i class="fa-solid fa-6x fa-file-lines"></i>
  312.             <h4>Tokyo</h4>
  313.           </div>
  314.           <div class="cities">
  315.             <i class="fa-solid fa-6x fa-file-lines"></i>
  316.             <h4>Moscow</h4>
  317.           </div>
  318.           <div class="cities">
  319.             <i class="fa-solid fa-6x fa-file-lines"></i>
  320.             <h4>Istanbul</h4>
  321.           </div>
  322.           <div class="cities">
  323.             <i class="fa-solid fa-6x fa-file-lines"></i>
  324.             <h4>Amsterdam</h4>
  325.           </div>
  326.           <div class="cities">
  327.             <i class="fa-solid fa-6x fa-file-lines"></i>
  328.             <h4>New York</h4>
  329.           </div>
  330.         </div>
  331.         <div class="project-top-two">
  332.           <h4>FEATURED VIDEOS</h4>
  333.           <h4>VIEW ALL</h4>
  334.         </div>
  335.         <video
  336.          src="transparent text.mp4"
  337.          controls
  338.          alt="video meant to be played"
  339.        ></video>
  340.       </div>
  341.     </div>
  342.     <footer>
  343.       <div class="last-text">
  344.         <h4>&copy;NEWS360, Inc2022. All Rights Reserved.</h4>
  345.         <div>
  346.           <i class="fa-brands fa-facebook"></i>
  347.           <i class="fa-brands fa-instagram"></i>
  348.           <i class="fa-brands fa-twitter"></i>
  349.         </div>
  350.       </div>
  351.     </footer>
  352.   </body>
  353. </html>
  354.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!