API tools faq
paste
Advertisement
BurningWreck

Bootstrap template

BurningWreck
Feb 27th, 2023 (edited)
1,551
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.  
  8.   <title>BZap! Toys - Index</title>
  9.   <meta content="" name="description">
  10.   <meta content="" name="keywords">
  11.  
  12.   <!-- Favicons -->
  13.   <link href="assets/img/favicon.png" rel="icon">
  14.   <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  15.  
  16.   <!-- Google Fonts -->
  17.   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
  18.  
  19.   <!-- Vendor CSS Files -->
  20.   <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  21.   <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  22.   <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  23.   <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  24.   <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  25.   <!-- Template Main CSS File -->
  26.   <link href="assets/css/style.css" rel="stylesheet">
  27.  
  28. </head>
  29.  
  30. <body>
  31.  
  32.   <!-- ======= Header ======= -->
  33.   <header id="header" class="fixed-top d-flex align-items-center">
  34.     <div class="container d-flex justify-content-between">
  35.  
  36.       <div class="logo">
  37.         <a href="index.html"><img src="assets/img/logo.png" alt="BZap Toys logo" class="img-fluid"></a>
  38.       </div>
  39.  
  40.       <nav id="navbar" class="navbar">
  41.         <ul>
  42.           <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
  43.           <li><a class="nav-link scrollto" href="#about">About</a></li>
  44.           <li><a class="nav-link scrollto" href="#portfolio">Gallery</a></li>
  45.           <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
  46.         </ul>
  47.         <i class="bi bi-list mobile-nav-toggle"></i>
  48.       </nav><!-- .navbar -->
  49.  
  50.     </div>
  51.   </header><!-- #header -->
  52.  
  53.   <!-- ======= Hero Section ======= -->
  54.   <section id="hero" class="clearfix">
  55.     <div class="container" data-aos="fade-up">
  56.  
  57.       <div class="hero-img" data-aos="zoom-out" data-aos-delay="200">
  58.         <img src="assets/img/hero-img.svg" alt="" class="img-fluid">
  59.       </div>
  60.  
  61.       <div class="hero-info" data-aos="zoom-in" data-aos-delay="100">
  62.         <h2>Header<br>about<br>the business</h2>
  63.         <div>
  64.           <a href="#about" class="btn-get-started scrollto">Get Started</a>
  65.  
  66.         </div>
  67.       </div>
  68.  
  69.     </div>
  70.   </section><!-- End Hero Section -->
  71.  
  72.   <main id="main">
  73.  
  74.     <!-- ======= About Section ======= -->
  75.     <section id="about">
  76.       <div class="container" data-aos="fade-up">
  77.  
  78.         <header class="section-header">
  79.           <h3>About XXX</h3>
  80.           <p>Subheader</p>
  81.         </header>
  82.  
  83.         <div class="row about-container">
  84.  
  85.           <div class="col-lg-6 content order-lg-1 order-2">
  86.             <p>
  87.               Line line line
  88.             </p>
  89.  
  90.             <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
  91.               <div class="icon"><i class="bi bi-rocket-takeoff"></i></div>
  92.               <h4 class="title"><a href="">Eiusmod Tempor</a></h4>
  93.               <p class="description">Another line</p>
  94.             </div>
  95.  
  96.             <div class="icon-box" data-aos="fade-up" data-aos-delay="200">
  97.                     <div class="icon"><i class="bi bi-robot"></i></div>
  98.                 <h4 class="title"><a href="">Magni Dolores</a></h4>
  99.                 <p class="description">Another line</p>
  100.             </div>
  101.  
  102.             <div class="icon-box" data-aos="fade-up" data-aos-delay="300">
  103.               <div class="icon"><i class="bi bi-lightning"></i></div>
  104.               <h4 class="title"><a href="">Dolor Sitema</a></h4>
  105.               <p class="description">Test text</p>
  106.             </div>
  107.  
  108.           </div>
  109.  
  110.           <div class="col-lg-6 background order-lg-2" data-aos="zoom-in">
  111.             <img src="assets/img/about-img.svg" class="img-fluid" alt="">
  112.           </div>
  113.         </div>
  114.  
  115.         <div class="row about-extra">
  116.           <div class="col-lg-6" data-aos="fade-right">
  117.             <img src="assets/img/about-extra-2.svg" class="img-fluid" alt="">
  118.           </div>
  119.           <div class="col-lg-6 pt-5 pt-lg-0" data-aos="fade-left">
  120.             <h4>Header</h4>
  121.             <p>
  122.               text text text
  123.             </p>
  124.           </div>
  125.         </div>
  126.  
  127.         <div class="row about-extra">
  128.           <div class="col-lg-6 order-1 order-lg-2" data-aos="fade-left">
  129.             <img src="assets/img/about-extra-1.svg" class="img-fluid" alt="">
  130.           </div>
  131.  
  132.           <div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1" data-aos="fade-right">
  133.             <h4>Header</h4>
  134.             <p>
  135.               test text
  136.             </p>
  137.             <p>
  138.               test text
  139.             </p>
  140.           </div>
  141.         </div>
  142.       </div>
  143.     </section><!-- End About Section -->
  144.  
  145.  
  146.     <!-- ======= Portfolio Section ======= -->
  147.     <section id="portfolio" class="clearfix">
  148.       <div class="container" data-aos="fade-up">
  149.  
  150.         <header class="section-header">
  151.           <h3 class="section-title">Project Gallery</h3>
  152.         </header>
  153.  
  154.        <!-- <div class="row" data-aos="fade-up" data-aos-delay="100"> -->
  155.          <!-- <div class="col-lg-12">
  156.          </div> -->
  157.        <!-- </div> -->
  158.  
  159.         <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
  160.  
  161.           <div class="col-lg-4 col-md-6 portfolio-item filter-web">
  162.             <div class="portfolio-wrap">
  163.               <img src="assets/img/portfolio/web3.jpg" class="img-fluid" alt="">
  164.               <div class="portfolio-info">
  165.                 <h4><a href="portfolio-details.html">Web 3</a></h4>
  166.                 <p>Web</p>
  167.                 <div>
  168.                   <a href="assets/img/portfolio/web3.jpg" class="portfolio-lightbox link-preview" data-gallery="portfolioGallery" title="Web 3"><i class="bi bi-plus"></i></a>
  169.                   <a href="portfolio-details.html" class="link-details" title="More Details"><i class="bi bi-link"></i></a>
  170.                 </div>
  171.               </div>
  172.             </div>
  173.           </div>
  174.  
  175.           <div class="col-lg-4 col-md-6 portfolio-item filter-app">
  176.             <div class="portfolio-wrap">
  177.               <img src="assets/img/portfolio/app2.jpg" class="img-fluid" alt="">
  178.               <div class="portfolio-info">
  179.                 <h4><a href="portfolio-details.html">App 2</a></h4>
  180.                 <p>App</p>
  181.                 <div>
  182.                   <a href="assets/img/portfolio/app2.jpg" class="portfolio-lightbox link-preview" data-gallery="portfolioGallery" title="App 2"><i class="bi bi-plus"></i></a>
  183.                   <a href="portfolio-details.html" class="link-details" title="More Details"><i class="bi bi-link"></i></a>
  184.                 </div>
  185.               </div>
  186.             </div>
  187.           </div>
  188.  
  189.           <div class="col-lg-4 col-md-6 portfolio-item filter-card">
  190.             <div class="portfolio-wrap">
  191.               <img src="assets/img/portfolio/card2.jpg" class="img-fluid" alt="">
  192.               <div class="portfolio-info">
  193.                 <h4><a href="portfolio-details.html">Card 2</a></h4>
  194.                 <p>Card</p>
  195.                 <div>
  196.                   <a href="assets/img/portfolio/card2.jpg" class="portfolio-lightbox link-preview" data-gallery="portfolioGallery" title="Card 2"><i class="bi bi-plus"></i></a>
  197.                   <a href="portfolio-details.html" class="link-details" title="More Details"><i class="bi bi-link"></i></a>
  198.                 </div>
  199.               </div>
  200.             </div>
  201.           </div>
  202.  
  203.           <div class="col-lg-4 col-md-6 portfolio-item filter-web">
  204.             <div class="portfolio-wrap">
  205.               <img src="assets/img/portfolio/web2.jpg" class="img-fluid" alt="">
  206.               <div class="portfolio-info">
  207.                 <h4><a href="portfolio-details.html">Web 2</a></h4>
  208.                 <p>Web</p>
  209.                 <div>
  210.                   <a href="assets/img/portfolio/web2.jpg" class="portfolio-lightbox link-preview" data-gallery="portfolioGallery" title="Web 2"><i class="bi bi-plus"></i></a>
  211.                   <a href="portfolio-details.html" class="link-details" title="More Details"><i class="bi bi-link"></i></a>
  212.                 </div>
  213.               </div>
  214.             </div>
  215.           </div>
  216.  
  217.           <div class="col-lg-4 col-md-6 portfolio-item filter-app">
  218.             <div class="portfolio-wrap">
  219.               <img src="assets/img/portfolio/app3.jpg" class="img-fluid" alt="">
  220.               <div class="portfolio-info">
  221.                 <h4><a href="portfolio-details.html">App 3</a></h4>
  222.                 <p>App</p>
  223.                 <div>
  224.                   <a href="assets/img/portfolio/app3.jpg" class="portfolio-lightbox link-preview" data-gallery="portfolioGallery" title="App 3"><i class="bi bi-plus"></i></a>
  225.                   <a href="portfolio-details.html" class="link-details" title="More Details"><i class="bi bi-link"></i></a>
  226.                 </div>
  227.               </div>
  228.             </div>
  229.           </div>
  230.  
  231.           <div class="col-lg-4 col-md-6 portfolio-item filter-card">
  232.             <div class="portfolio-wrap">
  233.               <img src="assets/img/portfolio/card1.jpg" class="img-fluid" alt="">
  234.               <div class="portfolio-info">
  235.                 <h4><a href="portfolio-details.html">Card 1</a></h4>
  236.                 <p>Card</p>
  237.                 <div>
  238.                   <a href="assets/img/portfolio/card1.jpg" class="portfolio-lightbox link-preview" data-gallery="portfolioGallery" title="Card 1"><i class="bi bi-plus"></i></a>
  239.                   <a href="portfolio-details.html" class="link-details" title="More Details"><i class="bi bi-link"></i></a>
  240.                 </div>
  241.               </div>
  242.             </div>
  243.           </div>
  244.  
  245.           <div class="col-lg-4 col-md-6 portfolio-item filter-card">
  246.             <div class="portfolio-wrap">
  247.               <img src="assets/img/portfolio/card3.jpg" class="img-fluid" alt="">
  248.               <div class="portfolio-info">
  249.                 <h4><a href="portfolio-details.html">Card 3</a></h4>
  250.                 <p>Card</p>
  251.                 <div>
  252.                   <a href="assets/img/portfolio/card3.jpg" class="portfolio-lightbox link-preview" data-gallery="portfolioGallery" title="Card 3"><i class="bi bi-plus"></i></a>
  253.                   <a href="portfolio-details.html" class="link-details" title="More Details"><i class="bi bi-link"></i></a>
  254.                 </div>
  255.               </div>
  256.             </div>
  257.           </div>
  258.  
  259.           <div class="col-lg-4 col-md-6 portfolio-item filter-web">
  260.             <div class="portfolio-wrap">
  261.               <img src="assets/img/portfolio/web1.jpg" class="img-fluid" alt="">
  262.               <div class="portfolio-info">
  263.                 <h4><a href="portfolio-details.html">Web 1</a></h4>
  264.                 <p>Web</p>
  265.                 <div>
  266.                   <a href="assets/img/portfolio/web1.jpg" class="portfolio-lightbox link-preview" data-gallery="portfolioGallery" title="Web 1"><i class="bi bi-plus"></i></a>
  267.                   <a href="portfolio-details.html" class="link-details" title="More Details"><i class="bi bi-link"></i></a>
  268.                 </div>
  269.               </div>
  270.             </div>
  271.           </div>
  272.  
  273.         </div>
  274.  
  275.       </div>
  276.     </section><!-- End Portfolio Section -->
  277.  
  278.      <!-- ======= Contact Section ======= -->
  279.     <section id="contact">
  280.       <div class="container-fluid" data-aos="fade-up">
  281.  
  282.         <div class="section-header">
  283.           <h3>Contact XXX</h3>
  284.         </div>
  285.  
  286.         <div class="row">
  287.           <div class="col"></div>
  288.           <div class="col-lg-6">
  289.             <div class="row">
  290.               <div class="col-md-4 info">
  291.                 <i class="bi bi-envelope"></i>
  292.                 <p>[email protected]</p>
  293.               </div>
  294.             </div>
  295.             <div class="form">
  296.               <form action="forms/contact.php" method="post" class="php-email-form">
  297.                 <div class="row">
  298.                   <div class="form-group col-lg-6">
  299.                     <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
  300.                   </div>
  301.                   <div class="form-group col-lg-6 mt-3 mt-lg-0">
  302.                     <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
  303.                   </div>
  304.                 </div>
  305.                 <div class="form-group mt-3">
  306.                   <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
  307.                 </div>
  308.                 <div class="form-group mt-3">
  309.                   <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
  310.                 </div>
  311.                 <div class="my-3">
  312.                   <div class="loading">Loading</div>
  313.                   <div class="error-message"></div>
  314.                   <div class="sent-message">Your message has been sent. Thank you!</div>
  315.                 </div>
  316.                 <div class="text-center"><button type="submit" title="Send Message">Send Message</button></div>
  317.               </form>
  318.             </div>
  319.           </div>
  320.           <div class="col"></div>
  321.         </div>
  322.  
  323.       </div>
  324.     </section><!-- End Contact Section -->
  325.  
  326.   </main><!-- End #main -->
  327.  
  328.   <!-- ======= Footer ======= -->
  329.   <footer id="footer">
  330.     <div class="footer-top">
  331.       <div class="container">
  332.         <div class="row">
  333.  
  334.           <div class="col-lg-4 col-md-6 footer-info">
  335.             <h3>NewBiz</h3>
  336.             <p>Company tagline</p>
  337.           </div>
  338.  
  339.           <div class="col-lg-2 col-md-6 footer-links">
  340.            <h4>Useful Links</h4>
  341.             <ul>
  342.               <li><a href="#">Home</a></li>
  343.               <li><a href="#">About</a></li>
  344.             </ul>
  345.           </div>
  346.  
  347.           <div class="col-lg-3 col-md-6 footer-contact">
  348.             <h4>Contact Us</h4>
  349.             <p>
  350.               <strong>Email:</strong> [email protected]<br>
  351.             </p>
  352.           </div>
  353.  
  354.           </div>
  355.         </div>
  356.       </div>
  357.     <div class="container">
  358.       <div class="copyright">
  359.         &copy; Copyright <strong>Company</strong>. All Rights Reserved
  360.       </div>
  361.     </div>
  362.   </footer><!-- End Footer -->
  363.  
  364.   <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
  365.  
  366.   <!-- Vendor JS Files -->
  367.   <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  368.   <script src="assets/vendor/aos/aos.js"></script>
  369.   <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  370.   <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  371.   <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  372.   <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  373.   <script src="assets/vendor/php-email-form/validate.js"></script>
  374.  
  375.   <!-- Template Main JS File -->
  376.   <script src="assets/js/main.js"></script>
  377.  
  378. </body>
  379.  
  380. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!