Blossomswong (Talk | contribs) |
Blossomswong (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | <!DOCTYPE html | + | <!DOCTYPE html> |
+ | <html lang="en"> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | |||
+ | <title>Lumino - free Bootstrap 4.0 theme</title> | ||
<!-- | <!-- | ||
− | + | Lumino Theme | |
− | http:// | + | http://www.templatemo.com/tm-483-lumino |
− | + | --> | |
+ | <!-- load stylesheets --> | ||
+ | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400"> <!-- Google web font "Open Sans" --> | ||
+ | <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"> <!-- Font Awesome --> | ||
+ | <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style --> | ||
+ | <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific pop up style --> | ||
+ | <link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style --> | ||
− | + | <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
− | + | <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
− | + | <!--[if lt IE 9]> | |
− | + | <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
+ | <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | ||
+ | <![endif]--> | ||
+ | </head> | ||
− | + | <body id="top" class="home"> | |
− | < | + | |
− | + | <div class="container-fluid"> | |
− | + | <div class="row"> | |
− | + | ||
− | < | + | <div class="tm-navbar-container"> |
− | < | + | |
− | < | + | <!-- navbar --> |
− | < | + | <nav class="navbar navbar-full navbar-fixed-top"> |
− | < | + | |
− | < | + | <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar"> |
+ | ☰ | ||
+ | </button> | ||
+ | |||
+ | <div class="collapse navbar-toggleable-sm" id="tmNavbar"> | ||
+ | |||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link" href="#top">Intro</a> | ||
+ | </li> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link" href="#tm-section-2">News</a> | ||
+ | </li> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link" href="#tm-section-3">Gallery</a> | ||
+ | </li> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link" href="#tm-section-4">Contact</a> | ||
+ | </li> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link external" href="columns.html">Columns</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </nav> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="row"> | ||
+ | <div class="tm-intro"> | ||
+ | |||
+ | <section id="tm-section-1"> | ||
+ | <div class="tm-container text-xs-center tm-section-1-inner"> | ||
+ | <img src="img/tm-lumino-logo.png" alt="Logo" class="tm-logo"> | ||
+ | <h1 class="tm-site-name">Lumino</h1> | ||
+ | <p class="tm-intro-text">Free Bootstrap 4.0 Website Template</p> | ||
+ | <a href="#tm-section-2" class="tm-intro-link">Begin</a> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="row gray-bg"> | ||
+ | |||
+ | <div id="tm-section-2" class="tm-section"> | ||
+ | <div class="tm-container tm-container-wide"> | ||
+ | <div class="tm-news-item"> | ||
+ | |||
+ | <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-item-img-container"> | ||
+ | <img src="img/tm-600x300-01.jpg" alt="Image" class="img-fluid tm-news-item-img"> | ||
+ | </div> | ||
+ | |||
+ | <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container"> | ||
+ | <h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2> | ||
+ | <p class="tm-news-text">Lumino theme is a Bootstrap 4.0 mobile compatible layout for your website. Check "columns" page for one, two, three columns and tables.</p> | ||
+ | <a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Preview</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="tm-news-item"> | ||
+ | |||
+ | <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 flex-order-2 tm-news-item-img-container"> | ||
+ | <img src="img/tm-600x300-02.jpg" alt="Image" class="img-fluid tm-news-item-img"> | ||
+ | </div> | ||
+ | |||
+ | <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container flex-order-1"> | ||
+ | <h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2> | ||
+ | <p class="tm-news-text">You may download, modify and use this template as you wish. Lumino HTML5 template is a fully responsive mobile ready for any kind of website.</p> | ||
+ | <a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Detail</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="tm-news-item"> | ||
+ | |||
+ | <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-item-img-container"> | ||
+ | <img src="img/tm-600x300-03.jpg" alt="Image" class="img-fluid tm-news-item-img"> | ||
+ | </div> | ||
+ | |||
+ | <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container"> | ||
+ | <h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2> | ||
+ | <p class="tm-news-text">Credit goes to <a rel="nofollow" href="http://unsplash.com" target="_parent">Unsplash</a> for images used in this website template. Nulla sit amet tristique lacus. Etiam blandit ex vitae mauris gravida.</p> | ||
+ | <a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Read</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> <!-- row --> | ||
+ | |||
+ | <div class="row"> | ||
+ | |||
+ | <section id="tm-section-3" class="tm-section"> | ||
+ | <div class="tm-container text-xs-center"> | ||
+ | |||
+ | <h2 class="blue-text tm-title">Lorem ipsum dolor sit amet</h2> | ||
+ | <p class="margin-b-5">Etiam at rhoncus nisl. Nunc rutrum ac ante euismod cursus.</p> | ||
+ | <p>Suspendisse imperdiet feugiat massa nex iaculis.</p> | ||
+ | |||
+ | <div class="tm-img-grid"> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-01.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-01.jpg" alt="Image" class="img-fluid tm-gallery-img"> <!-- 300x200 --> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-07.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-07.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-02.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-02.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-09.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-09.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-03.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-03.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-08.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-08.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-10.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-10.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-04.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-04.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-05.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-05.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-11.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-11.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-06.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-06.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="tm-gallery-img-container"> | ||
+ | <a href="img/tm-450x300-12.jpg" class="tm-gallery-img-link"> | ||
+ | <img src="img/tm-450x300-12.jpg" alt="Image" class="img-fluid tm-gallery-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | </div> <!-- row --> | ||
+ | |||
+ | <div class="row gray-bg"> | ||
+ | |||
+ | <section id="tm-section-4" class="tm-section"> | ||
+ | <div class="tm-container"> | ||
+ | |||
+ | <h2 class="blue-text tm-title text-xs-center">Contact Us</h2> | ||
+ | |||
+ | <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8"> | ||
+ | <form action="index.html" method="post" class="tm-contact-form"> | ||
+ | <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-left"> | ||
+ | <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name" required/> | ||
+ | </div> | ||
+ | <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-right"> | ||
+ | <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email" required/> | ||
+ | </div> | ||
+ | <div class="form-group"> | ||
+ | <input type="text" id="contact_subject" name="contact_subject" class="form-control" placeholder="Subject" required/> | ||
+ | </div> | ||
+ | <div class="form-group"> | ||
+ | <textarea id="contact_message" name="contact_message" class="form-control" rows="6" placeholder="Message" required></textarea> | ||
+ | </div> | ||
+ | |||
+ | <button type="submit" class="btn tm-light-blue-bordered-btn pull-xs-right">Submit</button> | ||
+ | </form> | ||
+ | </div> <!-- col --> | ||
+ | |||
+ | <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 margin-top-xs-50"> | ||
+ | <h3 class="light-blue-text tm-subtitle">Etiam at rhoncus nisl</h3> | ||
+ | <p>Nunc rutrum ac ante euismod cursus. Suspendisse imperdiet feugiat massa nec iaculis</p> | ||
+ | <p> | ||
+ | Tel: <a href="tel:0100200340">010-020-0340</a><br> | ||
+ | Email: <a href="mailto:info@company.com">info@company.com</a> | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <!-- footer --> | ||
+ | <footer class="tm-footer"> | ||
+ | <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> | ||
+ | <p class="text-xs-center tm-footer-text">Copyright © 2016 Company Name</p> | ||
+ | </div> | ||
+ | </footer> | ||
+ | |||
+ | </div> <!-- row --> | ||
+ | |||
+ | </div> <!-- container-fluid --> | ||
+ | |||
+ | <!-- load JS files --> | ||
+ | |||
+ | <script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) --> | ||
+ | <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h --> | ||
+ | <script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) --> | ||
+ | <script src="js/jquery.singlePageNav.min.js"></script> <!-- Single Page Nav (https://github.com/ChrisWojcik/single-page-nav) --> | ||
+ | <script src="js/jquery.magnific-popup.min.js"></script> <!-- Magnific pop-up (http://dimsemenov.com/plugins/magnific-popup/) --> | ||
+ | |||
+ | <!-- Templatemo scripts --> | ||
+ | <script> | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | |||
+ | var mobileTopOffset = 54; | ||
+ | var desktopTopOffset = 80; | ||
+ | var topOffset = desktopTopOffset; | ||
+ | |||
+ | if($(window).width() <= 767) { | ||
+ | topOffset = mobileTopOffset; | ||
+ | } | ||
+ | |||
+ | /* Single page nav | ||
+ | -----------------------------------------*/ | ||
+ | $('#tmNavbar').singlePageNav({ | ||
+ | 'currentClass' : "active", | ||
+ | offset : topOffset, | ||
+ | 'filter': ':not(.external)' | ||
+ | }); | ||
+ | |||
+ | /* Handle nav offset upon window resize | ||
+ | -----------------------------------------*/ | ||
+ | $(window).resize(function(){ | ||
+ | if($(window).width() <= 767) { | ||
+ | topOffset = mobileTopOffset; | ||
+ | } | ||
+ | else { | ||
+ | topOffset = desktopTopOffset; | ||
+ | } | ||
+ | |||
+ | $('#tmNavbar').singlePageNav({ | ||
+ | 'currentClass' : "active", | ||
+ | offset : topOffset, | ||
+ | 'filter': ':not(.external)' | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | |||
+ | /* Collapse menu after click | ||
+ | -----------------------------------------*/ | ||
+ | $('#tmNavbar a').click(function(){ | ||
+ | $('#tmNavbar').collapse('hide'); | ||
+ | }); | ||
+ | |||
+ | /* Turn navbar background to solid color starting at section 2 | ||
+ | ---------------------------------------------------------------*/ | ||
+ | var target = $("#tm-section-2").offset().top - topOffset; | ||
+ | |||
+ | if($(window).scrollTop() >= target) { | ||
+ | $(".tm-navbar-container").addClass("bg-inverse"); | ||
+ | } | ||
+ | else { | ||
+ | $(".tm-navbar-container").removeClass("bg-inverse"); | ||
+ | } | ||
+ | |||
+ | $(window).scroll(function(){ | ||
+ | |||
+ | if($(this).scrollTop() >= target) { | ||
+ | $(".tm-navbar-container").addClass("bg-inverse"); | ||
+ | } | ||
+ | else { | ||
+ | $(".tm-navbar-container").removeClass("bg-inverse"); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | |||
+ | /* Smooth Scrolling | ||
+ | * https://css-tricks.com/snippets/jquery/smooth-scrolling/ | ||
+ | --------------------------------------------------------------*/ | ||
+ | $('a[href*="#"]:not([href="#"])').click(function() { | ||
+ | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') | ||
+ | && location.hostname == this.hostname) { | ||
+ | |||
+ | var target = $(this.hash); | ||
+ | target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | ||
+ | |||
+ | if (target.length) { | ||
+ | |||
+ | $('html, body').animate({ | ||
+ | scrollTop: target.offset().top - topOffset | ||
+ | }, 1000); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | |||
+ | /* Magnific pop up | ||
+ | ------------------------- */ | ||
+ | $('.tm-img-grid').magnificPopup({ | ||
+ | delegate: 'a', // child items selector, by clicking on it popup will open | ||
+ | type: 'image', | ||
+ | gallery: {enabled:true} | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | </script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 01:12, 10 October 2017
<!DOCTYPE html>
![Image](img/tm-600x300-01.jpg)
Nulla molestie euismod
Lumino theme is a Bootstrap 4.0 mobile compatible layout for your website. Check "columns" page for one, two, three columns and tables.
Preview![Image](img/tm-600x300-02.jpg)
Nulla molestie euismod
You may download, modify and use this template as you wish. Lumino HTML5 template is a fully responsive mobile ready for any kind of website.
DetailContact Us
Etiam at rhoncus nisl
Nunc rutrum ac ante euismod cursus. Suspendisse imperdiet feugiat massa nec iaculis
Tel: 010-020-0340
Email: info@company.com