Server : Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.20 System : Linux st2.domain.com 3.10.0-1127.10.1.el7.x86_64 #1 SMP Wed Jun 3 14:28:03 UTC 2020 x86_64 User : apache ( 48) PHP Version : 7.4.20 Disable Function : NONE Directory : /var/www/html/thietkeweb2/layout/2021/ |
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<title>Motiva - Mentor, Coach and Speaker Website Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Motiva - Mentor, Coach and Speaker Website Template" name="description">
<meta content="" name="keywords">
<meta content="" name="author">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- CSS Files
================================================== -->
<link id="bootstrap" href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link id="bootstrap-grid" href="css/bootstrap-grid.min.css" rel="stylesheet" type="text/css" />
<link id="bootstrap-reboot" href="css/bootstrap-reboot.min.css" rel="stylesheet" type="text/css" />
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="css/owl.theme.css" rel="stylesheet" type="text/css">
<link href="css/owl.transitions.css" rel="stylesheet" type="text/css">
<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
<link href="css/jquery.countdown.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- color scheme -->
<link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css">
<link href="css/coloring.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="topbar" class="text-white bg-color topbar-noborder">
<div class="container">
<div class="topbar-left sm-hide">
<span class="topbar-widget tb-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
</span>
</div>
<div class="topbar-right">
<span class="topbar-widget"><a href="#">Privacy policy</a></span>
<span class="topbar-widget"><a href="#">Request Quote</a></span>
<span class="topbar-widget"><a href="#">FAQ</a></span>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- header begin -->
<header class="transparent">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="de-flex sm-pt10">
<div class="de-flex-col">
<!-- logo begin -->
<div id="logo">
<a href="index.html">
<img alt="" class="logo" src="images/logo-light.png" />
<img alt="" class="logo-2" src="images/logo.png" />
</a>
</div>
<!-- logo close -->
</div>
<div class="de-flex-col header-col-mid">
<!-- mainmenu begin -->
<ul id="mainmenu">
<li><a href="index.html">Home</a>
<ul>
<li><a href="index.html">Homepage 1</a></li>
<li><a href="index-2.html">Homepage 2</a></li>
<li><a href="index-onepage.html">Onepage 1</a></li>
<li><a href="index-onepage-2.html">Onepage 2</a></li>
</ul>
</li>
<li><a href="events.html">Events</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="team.html">Team</a></li>
</ul>
</li>
<li><a href="news.html">News</a></li>
<li><a href="store.html">Store</a>
<ul>
<li><a href="store.html">All Products</a></li>
<li><a href="store-single.html">Single Product</a></li>
</ul>
</li>
<li><a href="#">More</a>
<ul>
<li><a href="alerts.html">Alerts</a></li>
<li><a href="counters.html">Counters</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="icon-set-1.html">Icon Set 1</a></li>
<li><a href="modal.html">Modal</a></li>
<li><a href="progress-bar.html">Progress Bar</a></li>
<li><a href="steps.html">Steps</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- mainmenu close -->
</div>
<div class="de-flex-col">
<div class="h-phone md-hide"><span>Need Help?</span><i class="fa fa-phone"></i> 1 200 300 9000</div>
<span id="menu-btn"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header close -->
<!-- content begin -->
<div class="no-bottom no-top" id="content">
<div id="top"></div>
<!-- section begin -->
<section id="section-subheader" class="text-light" data-stellar-background-ratio=".2" data-bgimage="url(images/background/bg-subheader-1.jpg) top">
<div class="center-y relative text-center">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="spacer-single"></div>
<h1>Modal</h1>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</section>
<!-- section begin -->
<section aria-label="section">
<div class="container">
<div class="row">
<div class="col-md-4 mb60">
<h3>Modal demo</h3>
<p>Live demo
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p>
<div class="spacer10"></div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade text-dark text-dark" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<strong>You can put any text here.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb60">
<h3>Static backdrop</h3>
<p>When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
</p>
<div class="spacer10"></div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade text-dark" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<strong>You can put any text here.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb60">
<h3>Scrolling long content</h3>
<p>When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
</p>
<div class="spacer10"></div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade text-dark" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle-1">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb60">
<h3>Scrollable modal</h3>
<p>Vertically centered scrollable modal.</p>
<div class="spacer10"></div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade text-dark" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 mb60">
<h3>Modal size</h3>
<p>You can set size for modal.</p>
<div class="spacer10"></div>
<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
<div class="modal fade text-dark bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle-2" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle-2">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade text-dark bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle-3" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle-3">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade text-dark bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle-4" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle-4">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- section close -->
</div>
<!-- content close -->
<a href="#" id="back-to-top"></a>
<!-- footer begin -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="widget">
<a href="index.html"><img alt="" class="img-fluid mb20" src="images/logo-light.png"></a>
<address class="s1">
<span><i class="id-color fa fa-map-marker fa-lg"></i>08 W 36th St, New York, NY 10001</span>
<span><i class="id-color fa fa-phone fa-lg"></i>1 200 300 9000</span>
<span><i class="id-color fa fa-envelope-o fa-lg"></i><a href="mailto:contact@example.com">contact@motivatemplate.com</a></span>
<span><i class="id-color fa fa-file-pdf-o fa-lg"></i><a href="#">Download Brochure</a></span>
</address>
</div>
</div>
<div class="col-md-4">
<h5 class="id-color mb20">Upcoming Events</h5>
<ul class="ul-style-2">
<li><a href="event-single-1.html">Attitude is Everything</a></li>
<li><a href="event-single-2.html">The Winning Mindset</a></li>
<li><a href="event-single-3.html">Sales Breakthrough</a></li>
<li><a href="event-single-4.html">Effective Communication Skills</a></li>
<li><a href="event-single-5.html">Be The Game Changer</a></li>
<li><a href="event-single-6.html">I Can and I Will</a></li>
</ul>
</div>
<div class="col-lg-4">
<div class="widget">
<h5 class="id-color">Newsletter</h5>
<p>Signup for our newsletter to get the latest news, updates and special offers in your inbox.</p>
<form action="blank.php" class="row" id="form_subscribe" method="post" name="form_subscribe">
<div class="col text-center">
<input class="form-control" id="name_1" name="name_1" placeholder="enter your email" type="text" /> <a href="#" id="btn-submit"><i class="fa fa-long-arrow-right"></i></a>
<div class="clearfix"></div>
</div>
</form>
<div class="spacer-10"></div>
<small class="text-white-op-5">Your email is safe with us. We don't spam.</small>
</div>
</div>
</div>
</div>
<div class="subfooter">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="de-flex">
<div class="de-flex-col">
© Copyright 2021 - Motiva by Designesia
</div>
<div class="de-flex-col">
<div class="social-icons">
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-instagram fa-lg"></i></a>
<a href="#"><i class="fa fa-spotify fa-lg"></i></a>
<a href="#"><i class="fa fa-youtube fa-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- footer close -->
<div id="preloader">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</div>
<!-- Javascript Files
================================================== -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/validation.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/enquire.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/typed.js"></script>
<script src="js/jquery.countTo.js"></script>
<script src="js/jquery.countdown.js"></script>
<script src="js/designesia.js"></script>
</body>
</html>