API tools faq
paste
victorumeh

news website wireframe

victorumeh
Feb 14th, 2022 (edited)
150
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Responsive Image Slider With Next And Previous Buttons</title>
  7.     <link rel="stylesheet" href="styles.css" />
  8.     <link
  9.      rel="stylesheet"
  10.      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
  11.    />
  12.   </head>
  13.   <body>
  14.     <div class="container">
  15.       <header-1>
  16.         <a href="#" class="logo">Vick<span>Tor</span></a>
  17.         <nav>
  18.           <ul>
  19.             <li>
  20.               <form class="srch-logo" action="/action_page.php">
  21.                 <button type="submit" class="searchButton">
  22.                   <i class="fa fa-search"></i>
  23.                 </button>
  24.                 <input
  25.                  type="text"
  26.                  class="searchSpace"
  27.                  placeholder="Search.."
  28.                  name="search"
  29.                />
  30.               </form>
  31.             </li>
  32.             <li><a href="#" class="login">Login</a></li>
  33.             <li class="demacator">|</li>
  34.             <li><a href="#" class="help">Help</a></li>
  35.           </ul>
  36.         </nav>
  37.       </header-1>
  38.       <div class="hero">
  39.         <div class="slider">
  40.           <div class="slide active">
  41.             <a
  42.              href="https://punchng.com/second-niger-bridge-named-after-buhari-not-jonathan-bashir-ahmad/"
  43.            >
  44.               <img
  45.                src="https://cdn.punchng.com/wp-content/uploads/2022/02/10181514/Goodluck-Jonathan-Bashir-Ahmad-Muhammadu-Buhari.jpg"
  46.                alt=""
  47.              />
  48.               <div class="info">
  49.                 <h2>Second Niger Bridge</h2>
  50.                 <p>
  51.                   Second Niger Bridge named after Buhari, not Jonathan – Bashir
  52.                   Ahmad
  53.                 </p>
  54.               </div></a
  55.            >
  56.           </div>
  57.           <div class="slide">
  58.             <a
  59.              href="http://saharareporters.com/2022/02/09/buhari-orders-query-petroleum-agency-nmdpra-boss-over-circulation-adulterated-fuel"
  60.            >
  61.               <img
  62.                src="http://saharareporters.com/sites/default/files/styles/normal_medium/public/Farouk-Ahmed-1062x598_1.jpg?itok=Ux5KokWe"
  63.                alt=""
  64.              />
  65.               <div class="info">
  66.                 <h2>Fuel Adutration</h2>
  67.                 <p>
  68.                   Buhari Orders Query For Petroleum Agency, NMDPRA Boss Over
  69.                   Circulation Of Adulterated Fuel
  70.                 </p>
  71.               </div>
  72.             </a>
  73.           </div>
  74.           <div class="slide">
  75.             <a
  76.              href="https://www.vanguardngr.com/2022/02/those-behind-importation-of-substandard-fuel-must-be-held-accountable-buhari-vows/"
  77.            >
  78.               <img
  79.                src="https://cdn.vanguardngr.com/wp-content/uploads/2022/02/FUEL-SCARCITY.jpg?width=578&auto_optimize=medium"
  80.                alt=""
  81.              />
  82.               <div class="info">
  83.                 <h2>Buhari – Adultrated Fuel</h2>
  84.                 <p>
  85.                   Those behind importation of substandard fuel must be held
  86.                   accountable, Buhari vows
  87.                 </p>
  88.               </div>
  89.             </a>
  90.           </div>
  91.           <div class="slide">
  92.             <a
  93.              href="http://saharareporters.com/2022/02/10/asari-dokubo-slams-obasanjo-allegedly-backing-ipob-insults-yoruba-leaders-encouraging"
  94.            >
  95.               <img
  96.                src="http://saharareporters.com/sites/default/files/styles/normal_medium/public/Olusegun-Obasanjo%20%283%29.jpeg?itok=AlAfvOw9"
  97.                alt=""
  98.              />
  99.               <div class="info">
  100.                 <h2>Asari | Obasanjor</h2>
  101.                 <p>
  102.                   Asari Dokubo Slams Obasanjo For Allegedly Backing IPOB,
  103.                   Insults Yoruba Leaders For Encouraging Nnamdi Kanu
  104.                 </p>
  105.               </div>
  106.             </a>
  107.           </div>
  108.           <div class="slide">
  109.             <a
  110.              href="https://www.nta.ng/news/politics/20220126-apc-national-chair-denies-zoning/"
  111.            >
  112.               <img
  113.                src="https://www.nta.ng/wp-content/uploads/2022/01/mai-Mala-Buni-APC2-650x433.jpg"
  114.                alt=""
  115.              />
  116.               <div class="info">
  117.                 <h2>APC Zoning</h2>
  118.                 <p>APC National Chair Denies Zoning</p>
  119.               </div>
  120.             </a>
  121.           </div>
  122.           <div class="navigation">
  123.             <i class="fas fa-chevron-left prev-btn"></i>
  124.             <i class="fas fa-chevron-right next-btn"></i>
  125.           </div>
  126.           <div class="navigation-visibility">
  127.             <div class="slide-icon active"></div>
  128.             <div class="slide-icon"></div>
  129.             <div class="slide-icon"></div>
  130.             <div class="slide-icon"></div>
  131.             <div class="slide-icon"></div>
  132.           </div>
  133.         </div>
  134.       </div>
  135.       <section class="first">
  136.         <div class="main">
  137.           <div class="box-1">
  138.             <div class="box-1-img">
  139.               <a
  140.                href="https://punchng.com/adulterated-fuel-buhari-orders-service-providers-to-compensate-aggrieved-consumers/"
  141.              >
  142.                 <img
  143.                  src="https://cdn.punchng.com/wp-content/uploads/2021/05/13164331/President-Muhammadu-Buhari.jpg"
  144.                  alt=""
  145.                />
  146.               </a>
  147.             </div>
  148.             <div class="content">
  149.               <p class="date">Monday 12 January 2022</p>
  150.               <a
  151.                href="https://punchng.com/adulterated-fuel-buhari-orders-service-providers-to-compensate-aggrieved-consumers/"
  152.              >
  153.                 <h2 class="article-title">Adulterated fuel</h2>
  154.                 <p class="article-cont">
  155.                   The President, Major General Muhammadu Buhari (retd.), on
  156.                   Thursday, directed service providers to fully disclose
  157.                   relevant information concerning the consumption of their
  158.                   products and compensate dissatisfied consumers as proper
  159.                   redress for their complaints......
  160.                 </p>
  161.               </a>
  162.             </div>
  163.           </div>
  164.           <div class="box-2">
  165.             <p class="lastes-news">Latest news</p>
  166.           </div>
  167.           <div class="box-3">
  168.             <div class="content1">
  169.               <p class="date">Monday 20 January 2022</p>
  170.               <h2 class="news-article-title">Zamfara Governor’s defection</h2>
  171.               <a
  172.                href="https://www.nta.ng/news/20220209-court-dismisses-suit-on-zamfara-governors-defection/"
  173.                ><img
  174.                  src="https://www.nta.ng/wp-content/uploads/2020/09/court-mobile-400x300.jpeg"
  175.                  alt="img"
  176.                />
  177.                 <p>
  178.                   The presiding Judge, Justice Aminu Baffa Aliyu ruled that the
  179.                   court lacks jurisdiction to entertain the case. The presiding
  180.                   Judge, Justice Aminu Baffa Aliyu ruled...
  181.                 </p></a
  182.              >
  183.             </div>
  184.             <div class="content2">
  185.               <p class="date">Monday 23 January 2022</p>
  186.               <h2 class="news-article-title">Senate & Electoral Act</h2>
  187.              <a
  188.                href="https://www.nta.ng/news/politics/20220119-senate-reconsiders-and-passes-electoral-act//"
  189.                ><img
  190.                  src="https://www.nta.ng/wp-content/uploads/2022/01/vlcsnap-2022-01-19-16h13m23s906.png"
  191.                  alt="img"
  192.                />
  193.                <p>
  194.                  The Senate has reconsidered and passed the electoral Act
  195.                  amendment Bill 2010 which now provides that the decision for
  196.                  mode of party primaries should be reserved for Political
  197.                  Parties...
  198.                </p></a
  199.              >
  200.            </div>
  201.          </div>
  202.          <div class="box-4">
  203.            <div class="content4">
  204.              <p class="date">Monday 20 January 2022</p>
  205.              <h2 class="news-article-title">ECOWAS Summit</h2>
  206.              <a
  207.                href="https://www.nta.ng/news/diplomacy/20220203-president-delegates-osinbajo-to-ecowas-extraordinary-summit-on-political-situation-in-burkina-faso-mali-and-guinea/"
  208.                ><img
  209.                  src="https://www.nta.ng/wp-content/uploads/2018/03/Osinbajo.jpg"
  210.                  alt="img"
  211.                />
  212.                <p>
  213.                  Vice President Yemi Osinbajo, SAN, departs Abuja this morning
  214.                  for Accra, Ghana to represent Nigeria at an Extraordinary
  215.                  Summit of the ECOWAS Authority of Heads of State and
  216.                  Government deliberating today on the political situation in
  217.                  Burkina Faso, Mali and Guinea.
  218.                </p></a
  219.              >
  220.            </div>
  221.            <div class="content5">
  222.              <p class="date">Monday 20 January 2022</p>
  223.              <h2 class="news-article-title">APC Denies Zoning</h2>
  224.              <a
  225.                href="https://www.nta.ng/news/politics/20220126-apc-national-chair-denies-zoning/"
  226.                ><img
  227.                  src="https://www.nta.ng/wp-content/uploads/2022/01/mai-Mala-Buni-APC.jpg"
  228.                  alt=""
  229.                />
  230.                <p>
  231.                  The Chairman of the All Progressives Congress Caretaker and
  232.                  Extraordinary Convention Planning Committee, Governor Mai Mala
  233.                  Buni says the party has not taken any decision at any fora on
  234.                  anything relating to zoning of offices.
  235.                </p></a
  236.              >
  237.            </div>
  238.          </div>
  239.          <div class="employees">
  240.            <ul class="emp">
  241.              <li class="follow">EMPLOYEES YOU FOLLOW</li>
  242.              <li class="employ">ALL AMPLOYEES</li>
  243.  
  244.              <li class="empsrch">
  245.                <input type="text" placeholder="SEARCH EMPLOYEES" />
  246.              </li>
  247.            </ul>
  248.          </div>
  249.          <div class="emplyoyeesMain">
  250.            <div class="box">
  251.              <div class="emp">
  252.                <img
  253.                  src="https://ied.eu/wp-content/uploads/2016/12/office-worker.png"
  254.                  alt=""
  255.                />
  256.              </div>
  257.              <div class="emp">
  258.                <img
  259.                  src="images/christina-wocintechchat-com-0Zx1bDv5BNY-unsplash.jpg"
  260.                  alt=""
  261.                />
  262.              </div>
  263.              <div class="emp">
  264.                <img
  265.                  src="images/christina-wocintechchat-com-SJvDxw0azqw-unsplash.jpg"
  266.                  alt=""
  267.                />
  268.              </div>
  269.              <div class="emp">
  270.                <img
  271.                  src="images/christina-wocintechchat-com-wKtu9VLr5JM-unsplash.jpg"
  272.                  alt=""
  273.                />
  274.              </div>
  275.            </div>
  276.          </div>
  277.        </div>
  278.        <div class="section2-container">
  279.          <div class="fprojects">
  280.            <p class="fp">FEATURED PROJECTS</p>
  281.            <p class="viewAll">VIEW ALL</p>
  282.          </div>
  283.  
  284.          <div class="section2a">
  285.            <div class="projectName1">
  286.              <a href="https://www.second-river-niger-bridge.com/">
  287.                <img
  288.                  src="https://cdn.pmnewsnigeria.com/wp-content/uploads/2021/07/Second-Niger-Bridge-completion-time-set-at-2022.jpg"
  289.                  alt=""
  290.                />
  291.                <h3 class="projectName">Second Niger Bridge</h3>
  292.                <p class="projectNameContent">
  293.                  The Second Niger Bridge is a key national infrastructure, with
  294.                  immense socio-economic benefits for the contiguous states and
  295.                  indeed the entire nation.
  296.                </p></a
  297.              >
  298.            </div>
  299.            <div class="projectName1">
  300.              <a
  301.                href="https://guardian.ng/news/fg-approves-470m-for-execution-of-abuja-water-project/"
  302.              >
  303.                <img
  304.                  src="https://guardian.ng/wp-content/uploads/2017/05/Abuja-water-project.jpg"
  305.                  alt=""
  306.                />
  307.                <h3 class="projectName">Abuja Water Project</h3>
  308.                <p class="projectNameContent">
  309.                  The Minister of Federal Capital Territory, Malam Muhammed
  310.                  Bello, said on Saturday that the Federal Government has
  311.                  approved 470 million dollars...
  312.                </p></a
  313.              >
  314.            </div>
  315.            <div class="projectName1">
  316.              <a
  317.                href="https://africa-energy-portal.org/news/katsina-wind-farm-makes-headway-nigerias-abandoned-projects"
  318.              >
  319.                <img
  320.                  src="https://africa-energy-portal.org/sites/default/files/2021-03/Katsina-wind-farm-Nigeria.-Source-VERGNET.jpg"
  321.                  alt=""
  322.                />
  323.                <h3 class="projectName">Kastsina Wind Turbine</h3>
  324.                <p class="projectNameContent">
  325.                  Eng. Saleh Mamman, the minister of power in the Federal
  326.                  Government, confirmed that the wind project, which is set for
  327.                  commissioning...
  328.                </p></a
  329.              >
  330.            </div>
  331.            <div class="section2b">
  332.              <div class="fprojects">
  333.                <p class="fp">FEATURED PROJECTS</p>
  334.                <p class="viewAll">VIEW ALL</p>
  335.              </div>
  336.              <div class="documentbox">
  337.                <div class="box">
  338.                  <div class="vick">
  339.                    <img
  340.                      src="https://alexis.lindaikejisblog.com/photos/shares/6209ffaee6db3.jpg"
  341.                      alt=""
  342.                    />
  343.                    <a
  344.                      href="https://www.lindaikejisblog.com/2022/2/20-kidnap-victims-rescued-by-security-operatives-in-niger-state.html"
  345.                      ><p class="docName">Document Name</p></a
  346.                    >
  347.                  </div>
  348.                  <div class="vick">
  349.                    <img
  350.                      src="https://alexis.lindaikejisblog.com/photos/shares/620a049220d93.jpeg"
  351.                      alt=""
  352.                    />
  353.                    <a
  354.                      href="https://www.lindaikejisblog.com/2022/2/asuu-to-go-on-one-month-warning-strike.html"
  355.                      ><p class="docName">Document Name</p>
  356.                    </a>
  357.                  </div>
  358.                  <div class="vick">
  359.                    <img
  360.                      src="https://alexis.lindaikejisblog.com/photos/shares/6209fae426760.jpg"
  361.                      alt=""
  362.                    />
  363.                    <a
  364.                      href="https://www.lindaikejisblog.com/2022/2/11-people-taking-part-in-midnight-beach-ritual-drowned-by-massive-tidal-waves.html"
  365.                      ><p class="docName">Document Name</p></a
  366.                    >
  367.                  </div>
  368.                  <div class="vick">
  369.                    <img
  370.                      src="https://alexis.lindaikejisblog.com/photos/shares/620a039c954b8.jpg"
  371.                      alt=""
  372.                    />
  373.                    <a
  374.                      href="https://www.lindaikejisblog.com/2022/2/lizzo-reveals-she-has-a-cooche-piercing-and-would-love-to-do-playboy.html"
  375.                      ><p class="docName">Document Name</p></a
  376.                    >
  377.                  </div>
  378.                </div>
  379.                <div class="box">
  380.                  <div class="vick">
  381.                    <img
  382.                      src="https://www.lindaikejisblog.com/photos/shares/thumbs/620a2f9391335.jpg"
  383.                      alt=""
  384.                    />
  385.                    <a
  386.                      href="https://www.lindaikejisblog.com/2022/2/kris-jenner-files-trademark-for-kardashian-jenner-productions.html"
  387.                      ><p class="docName">Document Name</p></a
  388.                    >
  389.                  </div>
  390.                  <div class="vick">
  391.                    <img
  392.                      src="https://www.lindaikejisblog.com/photos/shares/thumbs/620a211daef47.jpeg"
  393.                      alt=""
  394.                    />
  395.                    <a
  396.                      href="https://www.lindaikejisblog.com/2022/2/does-this-one-even-have-sense-at-all-footballer-jude-ighalos-wife-sonia-slams-actress-oma-nnadi-after-she-asked-who-takes-a-one-year-old-to-school.html"
  397.                      ><p class="docName">Document Name</p>
  398.                    </a>
  399.                  </div>
  400.                  <div class="vick">
  401.                    <img
  402.                      src="https://www.lindaikejisblog.com/photos/shares/thumbs/620a326a3226f.jpg"
  403.                      alt=""
  404.                    />
  405.                    <a
  406.                      href="https://www.lindaikejisblog.com/2022/2/asuu-declares-minister-of-communication-and-digital-economy-isa-pantamis-professorship-illegal-futo-vc-and-others-to-be-sanctioned.html"
  407.                      ><p class="docName">Document Name</p></a
  408.                    >
  409.                  </div>
  410.                  <div class="vick">
  411.                    <img
  412.                      src="https://www.lindaikejisblog.com/photos/shares/thumbs/620a2df4b3511.jpg"
  413.                      alt=""
  414.                    />
  415.                    <a
  416.                      href="https://www.lindaikejisblog.com/2022/2/9-year-old-boy-leads-his-classmates-to-protest-after-school-officials-removed-chocolate-milk-from-lunch-menu-video.html"
  417.                      ><p class="docName">Document Name</p></a
  418.                    >
  419.                  </div>
  420.                </div>
  421.                <div class="box">
  422.                  <div class="vick">
  423.                    <img
  424.                      src="https://www.lindaikejisblog.com/photos/shares/thumbs/620a2c7b23841.jpeg"
  425.                      alt=""
  426.                    />
  427.                    <a
  428.                      href="https://www.lindaikejisblog.com/2022/2/filmmaker-tchidi-chikere-shares-video-as-he-wishes-his-mystery-lover-a-happy-valentine.html"
  429.                      ><p class="docName">Document Name</p></a
  430.                    >
  431.                  </div>
  432.                  <div class="vick">
  433.                    <img
  434.                      src="https://www.lindaikejisblog.com/photos/shares/thumbs/620a3473b6bc4.PNG"
  435.                      alt=""
  436.                    />
  437.                    <a
  438.                      href="https://www.lindaikejisblog.com/2022/2/chinese-diplomat-claims-tennis-player-peng-shuai-is-too-tall-and-strong-to-have-been-sexually-assaulted.html"
  439.                      ><p class="docName">Document Name</p>
  440.                    </a>
  441.                  </div>
  442.                  <div class="vick">
  443.                    <img
  444.                      src="https://www.lindaikejisblog.com/photos/shares/thumbs/620a35cb13b08.png"
  445.                      alt=""
  446.                    />
  447.                    <a
  448.                      href="https://www.lindaikejisblog.com/2022/2/journalist-rents-a-billboard-to-appreciate-her-husband-on-valentine.html"
  449.                      ><p class="docName">Document Name</p></a
  450.                    >
  451.                  </div>
  452.                  <div class="vick">
  453.                    <img
  454.                      src="https://www.lindaikejisblog.com/photos/shares/thumbs/620a32961bec5.jpeg"
  455.                      alt=""
  456.                    />
  457.                    <a
  458.                      href="https://www.lindaikejisblog.com/2022/2/teachers-in-nigeria-need-mental-evaluation-laura-ikeji-kanu.html"
  459.                      ><p class="docName">Document Name</p></a
  460.                    >
  461.                  </div>
  462.                </div>
  463.              </div>
  464.              <div class="fFprojects">
  465.                <p class="fp">FEATURED VIDEOS</p>
  466.                <p class="viewAll">VIEW ALL</p>
  467.              </div>
  468.              <div class="videoCont">
  469.                <video width="500" controls>
  470.                  <source
  471.                    src="images/Video of President Buhari Live in Ogun State.mp4"
  472.                    type="video/mp4"
  473.                  />
  474.                </video>
  475.              </div>
  476.            </div>
  477.          </div>
  478.        </div>
  479.      </section>
  480.      <div class="copyright">
  481.        <p>Copyright VictorUmeh, Inc 2022 - All Rights Reserved</p>
  482.      </div>
  483.    </div>
  484.    <script src="script.js"></script>
  485.  </body>
  486. </html>
  487.  
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!