API tools faq
paste
Guest User

Untitled

a guest
Apr 27th, 2018
169
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 20.21 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, shrink-to-fit=no" name="viewport">
  7.   <meta content="ie=edge" http-equiv="x-ua-compatible">
  8.   <title>Home | Title</title>
  9.   <!-- Bootstrap core CSS -->
  10.   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
  11.   <!-- Material Design Bootstrap -->
  12.   <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.1/css/mdb.min.css" rel="stylesheet">
  13.   <!-- Font Awesome -->
  14.   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  15.   <link href="/assets/css/styles.css" rel="stylesheet">
  16. </head>
  17.  
  18. <body>
  19.   <header>
  20.     <!--Navbar-->
  21.     <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
  22.       <div class="container">
  23.         <!-- Navbar brand -->
  24.         <a class="navbar-brand" href="#">Brand</a>
  25.         <!-- Collapse button -->
  26.         <!-- Collapsible content -->
  27.         <div class="collapse navbar-collapse" id="basicExampleNav">
  28.           <!-- Links -->
  29.           <ul class="navbar-nav mr-auto">
  30.             <li class="nav-item active">
  31.               <a class="nav-link" href="#intro">Home</a>
  32.             </li>
  33.             <li class="nav-item">
  34.               <a class="nav-link" href="#features">Features</a>
  35.             </li>
  36.             <li class="nav-item">
  37.               <a class="nav-link" href="#examples">Examples</a>
  38.             </li>
  39.             <li class="nav-item">
  40.               <a class="nav-link" href="#gallery">Gallery</a>
  41.             </li>
  42.             <li class="nav-item">
  43.               <a class="nav-link" href="#contact">Contact Us</a>
  44.             </li>
  45.             <li class="nav-item">
  46.               <a class="nav-link" data-target="#modalRegisterSuccess" data-toggle="modal">modal</a>
  47.             </li>
  48.           </ul>
  49.           <ul class="navbar-nav mr-1">
  50.             <li class="nav-item">
  51.               <a class="nav-link" data-target="#modalLR" data-toggle="modal" id="aLogin">Login</a>
  52.             </li>
  53.             <li class="nav-item">
  54.               <a class="nav-link" data-target="#modalLR" data-toggle="modal" id="aRegister">Register</a>
  55.             </li>
  56.           </ul>
  57.         </div>
  58.         <!-- Collapsible content -->
  59.       </div>
  60.     </nav>
  61.     <!--/.Navbar-->
  62.     <div class="view" id="intro">
  63.       <div class="full-bg-img rgba-stylish-strong container-fluid d-flex align-items-center justify-content-center">
  64.         <div class="row d-flex justify-content-center">
  65.           <div class="col-md-10 text-center">
  66.             <h2 class="display-3 font-bold white-text mb-2">Brand</h2>
  67.             <hr class="hr-light">
  68.             <h4 class="white-text my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, consectetur.</h4>
  69.             <button class="btn btn-outline-white"
  70.              type="button">Read more</button>
  71.           </div>
  72.         </div>
  73.       </div>
  74.     </div>
  75.   </header>
  76.   <!--Modal: Login / Register Form -->
  77.   <div aria-hidden="true" aria-labelledby="LoginRegisterModal" class="modal fade" id="modalLR" role="dialog" tabindex="-1">
  78.     <div class="modal-dialog cascading-modal" role="document">
  79.       <!--Content-->
  80.       <div class="modal-content">
  81.         <!--Modal cascading tabs-->
  82.         <div class="modal-c-tabs">
  83.           <!-- Nav tabs -->
  84.           <ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
  85.             <li class="nav-item">
  86.               <a class="nav-link active" data-toggle="tab" href="#tabLogin" role="tab">Login</a>
  87.             </li>
  88.             <li class="nav-item">
  89.               <a class="nav-link" data-toggle="tab" href="#tabRegister" role="tab">Register</a>
  90.             </li>
  91.           </ul>
  92.           <!-- Tab panels -->
  93.           <div class="tab-content">
  94.             <div class="tab-pane fade in show active" id="tabLogin" role="tabpanel">
  95.               <!--Body-->
  96.               <form action="/login" id="frmLogin" method="post" name="frmLogin">
  97.                 <input name="_csrf" type="hidden" value="LR39d8Mo-NrLCg7W_-o-l4V5CwvSDhlpsMPQ">
  98.                 <div class="modal-body mb-1">
  99.                   <div class="md-form form-sm">
  100.                     <input class="form-control form-control-sm validate invalid" id="loginEmail" name="email" type="text" value="">
  101.                     <label for="loginEmail" data-error="Error">Email address</label>
  102.                   </div>
  103.                   <div class="md-form form-sm">
  104.                     <input class="form-control form-control-sm" id="loginPassword" name="password" type="password">
  105.                     <label data-error="wrong" data-success="right" for="loginPassword">Password</label>
  106.                   </div>
  107.                   <div class="text-center mt-2">
  108.                     <button class="btn btn-info" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; Logging in" type="submit">Log in</button>
  109.                   </div>
  110.                 </div>
  111.               </form>
  112.               <!--Footer-->
  113.               <div class="modal-footer">
  114.                 <div class="options text-center text-md-right mt-1">
  115.                   <p>Not a member?
  116.                     <a class="blue-text" href="#" id="aRegisterInModal">Sign Up</a>
  117.                   </p>
  118.                   <p>
  119.                     <a class="blue-text" href="#">Forgot Password?</a>
  120.                   </p>
  121.                 </div>
  122.                 <button class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal" type="button">Close</button>
  123.               </div>
  124.             </div>
  125.             <div class="tab-pane fade" id="tabRegister" role="tabpanel">
  126.               <!--Body-->
  127.               <form action="/register" id="frmRegister" method="post" name="frmRegister">
  128.                 <div class="modal-body">
  129.                   <div class="md-form form-sm">
  130.                     <input class="form-control form-control-sm validate invalid" id="registerFirstName" name="firstName" type="text" value="">
  131.                     <label data-error="Error" for="registerFirstName">First Name</label>
  132.                   </div>
  133.                   <div class="md-form form-sm">
  134.                     <input class="form-control form-control-sm" id="registerLastName" name="lastName" type="text" value="">
  135.                     <label for="registerLastName">Last Name</label>
  136.                   </div>
  137.                   <div class="md-form form-sm">
  138.                     <input class="form-control form-control-sm" id="registerEmail" name="email" type="text" value="">
  139.                     <label for="registerEmail">Email address</label>
  140.                   </div>
  141.                   <div class="md-form form-sm">
  142.                     <input class="form-control form-control-sm" id="registerPassword" name="password" type="password">
  143.                     <label for="registerPassword">Password</label>
  144.                   </div>
  145.                   <div class="md-form form-sm">
  146.                     <input class="form-control form-control-sm" id="registerPasswordRepeat" name="password_confirmation" type="password">
  147.                     <label for="registerPasswordRepeat">Repeat password</label>
  148.                   </div>
  149.                   <div class="text-center form-sm mt-2">
  150.                     <button class="btn btn-info" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; Processing signup">Sign up</button>
  151.                   </div>
  152.                 </div>
  153.               </form>
  154.               <!--Footer-->
  155.               <div class="modal-footer">
  156.                 <div class="options text-center text-md-right mt-1">
  157.                   <p>Have an account?
  158.                     <a class="blue-text" data-toggle="tab" href="#tabLogin">Log In</a>
  159.                   </p>
  160.                 </div>
  161.                 <button class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal" type="button">Close</button>
  162.               </div>
  163.             </div>
  164.           </div>
  165.         </div>
  166.       </div>
  167.       <!--/.Content-->
  168.     </div>
  169.   </div>
  170.   <!--Modal: Login / Register Form Demo-->
  171.   <!-- Central Modal Medium Success -->
  172.   <div aria-hidden="true" aria-labelledby="Sign up successful" class="modal fade" id="centralModal" role="dialog" tabindex="-1">
  173.     <div class="modal-dialog modal-notify modal-success" role="document">
  174.       <!--Content-->
  175.       <div class="modal-content">
  176.         <!--Header-->
  177.         <div class="modal-header">
  178.           <p class="heading lead">Sign up successful</p>
  179.           <button aria-label="Close" class="close" data-dismiss="modal" type="button">
  180.             <span aria-hidden="true" class="white-text">&times;</span>
  181.           </button>
  182.         </div>
  183.         <!--Body-->
  184.         <div class="modal-body">
  185.           <div class="text-center">
  186.             <h3>Thank you for your registration</h3>
  187.             <p>In order for us to ensure we can contact you in future, we please need you to verify the email address you have
  188.               just entered. You will receive an email momentarily, please click on the link to verify your email address
  189.               accordingly.
  190.             </p>
  191.           </div>
  192.         </div>
  193.         <!--Footer-->
  194.         <div class="modal-footer justify-content-center">
  195.           <a class="btn btn-outline-success waves-effect" data-dismiss="modal" type="button">Close</a>
  196.         </div>
  197.       </div>
  198.       <!--/.Content-->
  199.     </div>
  200.   </div>
  201.   <!-- Central Modal Medium Success-->
  202.   <main class="mt-5">
  203.     <div class="container">
  204.       <section class="text-center" id="features">
  205.         <h2 class="mb-4 font-weight-bold">Features</h2>
  206.         <div class="row d-flex justify-content-center mb-4">
  207.           <div class="col-md-8">
  208.             <p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit ad minus atque odio quis. Similique.</p>
  209.           </div>
  210.         </div>
  211.         <div class="row">
  212.           <div class="col-md-4 mb-5">
  213.             <h4 class="my-4 font-weight-bold">Experience</h4>
  214.             <p class="grey-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, iure voluptate sapiente similique consequuntur
  215.               consectetur.</p>
  216.           </div>
  217.           <div class="col-md-4 mb-5">
  218.             <h4 class="my-4 font-weight-bold">Happiness</h4>
  219.             <p class="grey-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, iure voluptate sapiente similique consequuntur
  220.               consectetur.</p>
  221.           </div>
  222.           <div class="col-md-4 mb-5">
  223.             <h4 class="my-4 font-weight-bold">Adventure</h4>
  224.             <p class="grey-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, iure voluptate sapiente similique consequuntur
  225.               consectetur.</p>
  226.           </div>
  227.         </div>
  228.       </section>
  229.       <hr class="my-5">
  230.       <section id="examples">
  231.         <div class="row">
  232.           <div class="col-lg-4 col-md-12 mb-4">
  233.             <div class="view overlay z-depth-1-half">
  234.               <img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg">
  235.               <div class="mask rgba-white-slight"></div>
  236.             </div>
  237.             <h4 class="my-4 font-weight-bold">Heading</h4>
  238.             <p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
  239.           </div>
  240.           <div class="col-lg-4 col-md-6 mb-4">
  241.             <div class="view overlay z-depth-1-half">
  242.               <img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg">
  243.               <div class="mask rgba-white-slight"></div>
  244.             </div>
  245.             <h4 class="my-4 font-weight-bold">Heading</h4>
  246.             <p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
  247.           </div>
  248.           <div class="col-lg-4 col-md-6 mb-4">
  249.             <div class="view overlay z-depth-1-half">
  250.               <img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/29.jpg">
  251.               <div class="mask rgba-white-slight"></div>
  252.             </div>
  253.             <h4 class="my-4 font-weight-bold">Heading</h4>
  254.             <p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
  255.           </div>
  256.         </div>
  257.         <div class="row">
  258.           <div class="col-lg-4 col-md-12 mb-4">
  259.             <div class="view overlay z-depth-1-half">
  260.               <img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/10.jpg">
  261.               <div class="mask rgba-white-slight"></div>
  262.             </div>
  263.             <h4 class="my-4 font-weight-bold">Heading</h4>
  264.             <p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
  265.           </div>
  266.           <div class="col-lg-4 col-md-6 mb-4">
  267.             <div class="view overlay z-depth-1-half">
  268.               <img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/11.jpg">
  269.               <div class="mask rgba-white-slight"></div>
  270.             </div>
  271.             <h4 class="my-4 font-weight-bold">Heading</h4>
  272.             <p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
  273.           </div>
  274.           <div class="col-lg-4 col-md-6 mb-4">
  275.             <div class="view overlay z-depth-1-half">
  276.               <img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/13.jpg">
  277.               <div class="mask rgba-white-slight"></div>
  278.             </div>
  279.             <h4 class="my-4 font-weight-bold">Heading</h4>
  280.             <p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
  281.           </div>
  282.         </div>
  283.       </section>
  284.       <hr class="my-5">
  285.       <section id="gallery">
  286.         <h2 class="mb-5 font-weight-bold text-center">Gallery</h2>
  287.         <div class="row">
  288.           <div class="col-md-6 mb-4">
  289.             <!--Carousel Wrapper-->
  290.             <div class="carousel slide carousel-fade" data-ride="carousel" id="carousel-example-1z">
  291.               <!--Indicators-->
  292.               <ol class="carousel-indicators"></ol>
  293.               <!--/.Indicators-->
  294.               <!--Slides-->
  295.               <div class="carousel-inner z-depth-1-half" role="listbox">
  296.                 <!--First slide-->
  297.                 <div class="carousel-item active">
  298.                   <img alt="First slide" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg">
  299.                 </div>
  300.                 <!--/First slide-->
  301.                 <!--Second slide-->
  302.                 <div class="carousel-item">
  303.                   <img alt="Second slide" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg">
  304.                 </div>
  305.                 <!--/Second slide-->
  306.                 <!--Third slide-->
  307.                 <div class="carousel-item">
  308.                   <img alt="Third slide" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg">
  309.                 </div>
  310.                 <!--/Third slide-->
  311.               </div>
  312.               <!--/.Slides-->
  313.               <!--Controls-->
  314.               <a class="carousel-control-prev" data-slide="prev" href="#carousel-example-1z" role="button">
  315.                 <span class="sr-only">Previous</span>
  316.               </a>
  317.               <a class="carousel-control-next" data-slide="next" href="#carousel-example-1z" role="button">
  318.                 <span class="sr-only">Next</span>
  319.               </a>
  320.               <!--/.Controls-->
  321.             </div>
  322.             <!--/.Carousel Wrapper-->
  323.           </div>
  324.           <div class="col-md-6">
  325.             <a class="teal-text" href="">
  326.               <h6 class="pb-1">
  327.                 <strong>Lifestyle</strong>
  328.               </h6>
  329.             </a>
  330.             <h4 class="mb-3">
  331.               <strong>This is title of the news</strong>
  332.             </h4>
  333.             <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
  334.               facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis debitis aut rerum.</p>
  335.             <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
  336.               facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis debitis aut rerum.</p>
  337.             <p>by
  338.               <a>
  339.                 <strong>Jessica Clark</strong>
  340.               </a> , 26/08/2016</p>
  341.             <a class="btn btn-primary btn-md">Read more</a>
  342.           </div>
  343.         </div>
  344.       </section>
  345.       <hr class="my-5">
  346.       <section id="contact">
  347.         <h2 class="mb-5 font-weight-bold text-center">Contact us</h2>
  348.         <div class="row">
  349.           <div class="col-lg-5 col-md-12 mb-5">
  350.             <form action="" class="p-5">
  351.               <div class="md-form form-sm">
  352.                 <input class="form-control" id="input-1" name="input-1" type="text">
  353.                 <label for="input-1">Your name</label>
  354.               </div>
  355.               <div class="md-form form-sm">
  356.                 <input class="form-control" id="input-2" name="input-2" type="email">
  357.                 <label for="input-2">Email</label>
  358.               </div>
  359.               <div class="md-form form-sm">
  360.                 <input class="form-control" id="input-3" name="input-3" type="text">
  361.                 <label for="input-3">Subject</label>
  362.               </div>
  363.               <div class="md-form form-sm">
  364.                 <textarea class="md-textarea" id="input-4" name="input-4" style="height: 100px" type="text"></textarea>
  365.                 <label for="input-4">Your message</label>
  366.               </div>
  367.               <div class="text-center">
  368.                 <button class="btn btn-unique">Send</button>
  369.               </div>
  370.             </form>
  371.           </div>
  372.           <div class="col-lg-7 col-md-12 mb-5">
  373.             <div class="row text-center">
  374.               <div class="col-md-4 mb-3">
  375.                 <p>Roan Crescent</p>
  376.               </div>
  377.               <div class="col-md-4 mb-3">
  378.                 <p>Corporate Park North</p>
  379.               </div>
  380.               <div class="col-md-4 mb-3">
  381.                 <p>123 456 7890</p>
  382.               </div>
  383.             </div>
  384.           </div>
  385.         </div>
  386.       </section>
  387.     </div>
  388.   </main>
  389.   <footer class="page-footer font-small blue pt-4 mt-4">
  390.     <div class="container-fluid text-center text-md-left">
  391.       <div class="row">
  392.         <div class="col-md-6">
  393.           <h5 class="text-uppercase">Footer Content</h5>
  394.           <p>Here you can use rows and columns here to organize your footer content.</p>
  395.         </div>
  396.         <div class="col-md-6">
  397.           <h5 class="text-uppercase">Links</h5>
  398.           <ul class="list-unstyled">
  399.             <li>
  400.               <a href="#!">Link 1</a>
  401.             </li>
  402.             <li>
  403.               <a href="#!">Link 2</a>
  404.             </li>
  405.             <li>
  406.               <a href="#!">Link 3</a>
  407.             </li>
  408.             <li>
  409.               <a href="#!">Link 4</a>
  410.             </li>
  411.           </ul>
  412.         </div>
  413.       </div>
  414.     </div>
  415.     <div class="footer-copyright py-3 text-center">
  416.       © 2018 Copyright:
  417.     </div>
  418.   </footer>
  419.   <!-- SCRIPTS -->
  420.   <!-- JQuery -->
  421.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
  422.   <!-- Bootstrap tooltips -->
  423.  
  424.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" type="text/javascript"></script>
  425.   <!-- Bootstrap core JavaScript -->
  426.  
  427.   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" type="text/javascript"></script>
  428.   <!-- MDB core JavaScript -->
  429.  
  430.   <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.1/js/mdb.min.js" type="text/javascript"></script>
  431.   <script src="/app.js" type="text/javascript"></script>
  432. </body>
  433.  
  434. </html>
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!