first commit
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
Template Name: Archiark
|
||||
Template Author: Untree.co
|
||||
Template License: https://creativecommons.org/licenses/by/3.0/
|
||||
Author URI: https://untree.co/
|
||||
|
||||
Twitter: https://twitter.com/Untree_co
|
||||
Facebook: https://web.facebook.com/Untree.co/
|
||||
@@ -0,0 +1,337 @@
|
||||
<!-- /*
|
||||
* Template Name: Archiark
|
||||
* Template Author: Untree.co
|
||||
* Tempalte URI: https://untree.co/
|
||||
* License: https://creativecommons.org/licenses/by/3.0/
|
||||
*/ -->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta name="author" content="Untree.co">
|
||||
<link rel="shortcut icon" href="favicon.png">
|
||||
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="bootstrap, bootstrap5" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="fonts/icomoon/style.css">
|
||||
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
|
||||
<link rel="stylesheet" href="css/tiny-slider.css">
|
||||
<link rel="stylesheet" href="css/aos.css">
|
||||
<link rel="stylesheet" href="css/glightbox.min.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Archiark — Free Bootstrap 5 Website Template by Untree.co</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="site-mobile-menu site-navbar-target">
|
||||
<div class="site-mobile-menu-header">
|
||||
<div class="site-mobile-menu-close">
|
||||
<span class="icofont-close js-menu-toggle"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-mobile-menu-body"></div>
|
||||
</div>
|
||||
|
||||
<nav class="site-nav">
|
||||
<div class="container">
|
||||
<div class="site-navigation">
|
||||
<a href="index.html" class="logo m-0 float-start">Archiark<span class="text-primary">.</span> </a>
|
||||
|
||||
<ul class="js-clone-nav d-none d-lg-inline-block text-start site-menu float-start">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li class="has-children">
|
||||
<a href="projects.html">Projects</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Commercial Building</a></li>
|
||||
<li><a href="#">Cultural Lifestyle</a></li>
|
||||
<li class="has-children">
|
||||
<a href="#">Dropdown</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Sub Menu One</a></li>
|
||||
<li><a href="#">Sub Menu Two</a></li>
|
||||
<li><a href="#">Sub Menu Three</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li class="active"><a href="about.html">About</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<a href="#" class="burger ml-auto float-end site-menu-toggle light js-menu-toggle d-inline-block d-lg-none" data-toggle="collapse" data-target="#main-navbar">
|
||||
<span></span>
|
||||
</a>
|
||||
<ul class="site-menu float-end d-none d-md-block">
|
||||
<li><a href="#" class="d-flex align-items-center text-white h2 fw-bold"><span class="icon-phone me-2"></span> <span>+ 2 292 4392 327</span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero-2 overlay" style="background-image: url('images/img_3.jpg');">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-5 mx-auto ">
|
||||
<h1 class="mb-5 text-center"><span>About Us</span></h1>
|
||||
|
||||
|
||||
<div class="intro-desc text-left">
|
||||
<div class="line"></div>
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section sec-4">
|
||||
<div class="container">
|
||||
<div class="row border-bottom mb-5 pb-5 justify-content-between">
|
||||
<div class="col-lg-4 align-self-center mb-5">
|
||||
<h2 class="heading mb-4">We create architectural designs</h2>
|
||||
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<a href="https://www.youtube.com/watch?v=mwtbEGNABWU" class="video-wrap glightbox">
|
||||
<span class="icon-play"></span>
|
||||
<img src="images/img_7.jpg" alt="Image" class="img-fluid">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-lg-4">
|
||||
|
||||
<div class="d-flex custom-card">
|
||||
<div class="img">
|
||||
<i class="flaticon-compass"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h3 class="h6 fw-bold text-black">We provide best services</h3>
|
||||
<p class="text-black-50">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium.</p>
|
||||
<p>
|
||||
<a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="d-flex custom-card">
|
||||
<div class="img">
|
||||
<i class="flaticon-plan"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h3 class="h6 fw-bold text-black">We provide best services</h3>
|
||||
<p class="text-black-50">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium.</p>
|
||||
<p>
|
||||
<a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="d-flex custom-card">
|
||||
<div class="img">
|
||||
<i class="flaticon-architect"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h3 class="h6 fw-bold text-black">We provide best services</h3>
|
||||
<p class="text-black-50">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium.</p>
|
||||
<p>
|
||||
<a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section sec-team sec-4 pb-5">
|
||||
<div class="container">
|
||||
<div class="row mb-5">
|
||||
<div class="col-lg-6 mx-auto text-center">
|
||||
<h2 class="heading">We Are The Team</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="person">
|
||||
<img src="images/person_1.jpg" alt="Image" class="img-fluid rounded-circle mx-auto w-50 mb-3">
|
||||
<h3 class="mb-1">Jayson Campbell</h3>
|
||||
<span class="d-block text-black-50 mb-3">CEO, Partner</span>
|
||||
<p class="text-black-50">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
|
||||
<ul class="social-2 list-unstyled mb-5">
|
||||
<li><a href="#"><span class="icon-facebook"></span></a></li>
|
||||
<li><a href="#"><span class="icon-twitter"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-dribbble"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="person">
|
||||
<img src="images/person_2.jpg" alt="Image" class="img-fluid rounded-circle mx-auto w-50 mb-3">
|
||||
<h3 class="mb-1">Jayson Campbell</h3>
|
||||
<span class="d-block text-black-50 mb-3">CEO, Partner</span>
|
||||
<p class="text-black-50">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
|
||||
<ul class="social-2 list-unstyled mb-5">
|
||||
<li><a href="#"><span class="icon-facebook"></span></a></li>
|
||||
<li><a href="#"><span class="icon-twitter"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-dribbble"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="person">
|
||||
<img src="images/person_3.jpg" alt="Image" class="img-fluid rounded-circle mx-auto w-50 mb-3">
|
||||
<h3 class="mb-1">Jayson Campbell</h3>
|
||||
<span class="d-block text-black-50 mb-3">CEO, Partner</span>
|
||||
<p class="text-black-50">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
|
||||
<ul class="social-2 list-unstyled mb-5">
|
||||
<li><a href="#"><span class="icon-facebook"></span></a></li>
|
||||
<li><a href="#"><span class="icon-twitter"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-dribbble"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="person">
|
||||
<img src="images/person_4.jpg" alt="Image" class="img-fluid rounded-circle mx-auto w-50 mb-3">
|
||||
<h3 class="mb-1">Jayson Campbell</h3>
|
||||
<span class="d-block text-black-50 mb-3">CEO, Partner</span>
|
||||
<p class="text-black-50">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
|
||||
<ul class="social-2 list-unstyled mb-5">
|
||||
<li><a href="#"><span class="icon-facebook"></span></a></li>
|
||||
<li><a href="#"><span class="icon-twitter"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-dribbble"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="site-footer bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-lg-4">
|
||||
<div class="widget">
|
||||
<h3 class="line-top">About</h3>
|
||||
<p class="mb-5">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam. Separated they live.</p>
|
||||
|
||||
</div>
|
||||
<div class="widget">
|
||||
<h3 class="line-top">Connect with us</h3>
|
||||
<ul class="social list-unstyled mb-5">
|
||||
<li><a href="#"><span class="icon-facebook"></span></a></li>
|
||||
<li><a href="#"><span class="icon-twitter"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-dribbble"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="widget">
|
||||
<h3 class="line-top">Navigations</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Work</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Press</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
<li><a href="#">Privacy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center text-center copyright">
|
||||
<div class="col-md-8">
|
||||
<p class="small text-black-50">Copyright ©<script>document.write(new Date().getFullYear());</script>. All Rights Reserved. — Designed with love by <a href="https://untree.co">Untree.co</a>
|
||||
</br>Distributed By <a href="https://themewagon.com/">Themewagon</a> <!-- License information: https://untree.co/license/ -->
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Preloader -->
|
||||
<div id="overlayer"></div>
|
||||
<div class="loader">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/tiny-slider.js"></script>
|
||||
<script src="js/aos.js"></script>
|
||||
<script src="js/glightbox.min.js"></script>
|
||||
<script src="js/navbar.js"></script>
|
||||
<script src="js/counter.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,248 @@
|
||||
<!-- /*
|
||||
* Template Name: Archiark
|
||||
* Template Author: Untree.co
|
||||
* Tempalte URI: https://untree.co/
|
||||
* License: https://creativecommons.org/licenses/by/3.0/
|
||||
*/ -->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta name="author" content="Untree.co">
|
||||
<link rel="shortcut icon" href="favicon.png">
|
||||
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="bootstrap, bootstrap5" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="fonts/icomoon/style.css">
|
||||
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
|
||||
<link rel="stylesheet" href="css/tiny-slider.css">
|
||||
<link rel="stylesheet" href="css/aos.css">
|
||||
<link rel="stylesheet" href="css/glightbox.min.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Archiark — Free Bootstrap 5 Website Template by Untree.co</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="site-mobile-menu site-navbar-target">
|
||||
<div class="site-mobile-menu-header">
|
||||
<div class="site-mobile-menu-close">
|
||||
<span class="icofont-close js-menu-toggle"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-mobile-menu-body"></div>
|
||||
</div>
|
||||
|
||||
<nav class="site-nav">
|
||||
<div class="container">
|
||||
<div class="site-navigation">
|
||||
<a href="index.html" class="logo m-0 float-start">Archiark<span class="text-primary">.</span> </a>
|
||||
|
||||
<ul class="js-clone-nav d-none d-lg-inline-block text-start site-menu float-start">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li class="has-children">
|
||||
<a href="projects.html">Projects</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Commercial Building</a></li>
|
||||
<li><a href="#">Cultural Lifestyle</a></li>
|
||||
<li class="has-children">
|
||||
<a href="#">Dropdown</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Sub Menu One</a></li>
|
||||
<li><a href="#">Sub Menu Two</a></li>
|
||||
<li><a href="#">Sub Menu Three</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li class="active"><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<a href="#" class="burger ml-auto float-end site-menu-toggle light js-menu-toggle d-inline-block d-lg-none" data-toggle="collapse" data-target="#main-navbar">
|
||||
<span></span>
|
||||
</a>
|
||||
<ul class="site-menu float-end d-none d-md-block">
|
||||
<li><a href="#" class="d-flex align-items-center text-white h2 fw-bold"><span class="icon-phone me-2"></span> <span>+ 2 292 4392 327</span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero-2 overlay" style="background-image: url('images/img_6.jpg');">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-5 mx-auto ">
|
||||
<h1 class="mb-5 text-center"><span>Contact Us</span></h1>
|
||||
|
||||
|
||||
<div class="intro-desc text-left">
|
||||
<div class="line"></div>
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section sec-contact">
|
||||
<div class="container">
|
||||
<div class="row mb-5 justify-content-center text-center">
|
||||
<div class="col-lg-5">
|
||||
<h2 class="heading">Get in touch</h2>
|
||||
<p class="text-black-50">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
|
||||
</div>
|
||||
</div>
|
||||
<form class="row">
|
||||
|
||||
<div class="col-md-6 col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="ps-3 mb-2">Name</label>
|
||||
<input type="text" class="form-control" id="name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="email" class="ps-3 mb-2">Email</label>
|
||||
<input type="text" class="form-control" id="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="phone" class="ps-3 mb-2">Phone</label>
|
||||
<input type="text" class="form-control" id="phone">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label for="subject" class="ps-3 mb-2">Subject</label>
|
||||
<input type="text" class="form-control" id="subject">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-12">
|
||||
<div class="mb-3">
|
||||
<label for="message" class="ps-3 mb-2">Message</label>
|
||||
<textarea class="form-control" name="" id="message" cols="30" rows="7"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<input type="submit" value="Send message" class="btn btn-primary">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="site-footer bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-lg-4">
|
||||
<div class="widget">
|
||||
<h3 class="line-top">About</h3>
|
||||
<p class="mb-5">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam. Separated they live.</p>
|
||||
|
||||
</div>
|
||||
<div class="widget">
|
||||
<h3 class="line-top">Connect with us</h3>
|
||||
<ul class="social list-unstyled mb-5">
|
||||
<li><a href="#"><span class="icon-facebook"></span></a></li>
|
||||
<li><a href="#"><span class="icon-twitter"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-dribbble"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="widget">
|
||||
<h3 class="line-top">Navigations</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Work</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Press</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
<li><a href="#">Privacy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center text-center copyright">
|
||||
<div class="col-md-8">
|
||||
<p class="small text-black-50">Copyright ©<script>document.write(new Date().getFullYear());</script>. All Rights Reserved. — Designed with love by <a href="https://untree.co">Untree.co</a></br>Distributed By <a href="https://themewagon.com/">Themewagon</a> <!-- License information: https://untree.co/license/ -->
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Preloader -->
|
||||
<div id="overlayer"></div>
|
||||
<div class="loader">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/tiny-slider.js"></script>
|
||||
<script src="js/aos.js"></script>
|
||||
<script src="js/glightbox.min.js"></script>
|
||||
<script src="js/navbar.js"></script>
|
||||
<script src="js/counter.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,334 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.0.0-alpha2 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
||||
|
||||
[tabindex="-1"]:focus:not(:focus-visible) {
|
||||
outline: 0 !important; }
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
background-color: currentColor;
|
||||
border: 0;
|
||||
opacity: 0.25; }
|
||||
|
||||
hr:not([size]) {
|
||||
height: 1px; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2; }
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw); }
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.5rem; } }
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw); }
|
||||
@media (min-width: 1200px) {
|
||||
h2 {
|
||||
font-size: 2rem; } }
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw); }
|
||||
@media (min-width: 1200px) {
|
||||
h3 {
|
||||
font-size: 1.75rem; } }
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw); }
|
||||
@media (min-width: 1200px) {
|
||||
h4 {
|
||||
font-size: 1.5rem; } }
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem; }
|
||||
|
||||
h6 {
|
||||
font-size: 1rem; }
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
text-decoration-skip-ink: none; }
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit; }
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 2rem; }
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0; }
|
||||
|
||||
dt {
|
||||
font-weight: 700; }
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; }
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem; }
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; }
|
||||
|
||||
small {
|
||||
font-size: 0.875em; }
|
||||
|
||||
mark {
|
||||
padding: 0.2em;
|
||||
background-color: #fcf8e3; }
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline; }
|
||||
|
||||
sub {
|
||||
bottom: -.25em; }
|
||||
|
||||
sup {
|
||||
top: -.5em; }
|
||||
|
||||
a {
|
||||
color: #16697a;
|
||||
text-decoration: underline; }
|
||||
a:hover {
|
||||
color: #0a3139; }
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none; }
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 1em; }
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.875em;
|
||||
-ms-overflow-style: scrollbar; }
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
word-break: normal; }
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
color: #d63384;
|
||||
word-wrap: break-word; }
|
||||
a > code {
|
||||
color: inherit; }
|
||||
|
||||
kbd {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.875em;
|
||||
color: #fff;
|
||||
background-color: #212529;
|
||||
border-radius: 0.2rem; }
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-weight: 700; }
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem; }
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle; }
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse; }
|
||||
|
||||
caption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: #6c757d;
|
||||
text-align: left; }
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
text-align: -webkit-match-parent; }
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0; }
|
||||
|
||||
label {
|
||||
display: inline-block; }
|
||||
|
||||
button {
|
||||
border-radius: 0; }
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color; }
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit; }
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible; }
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none; }
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer; }
|
||||
|
||||
select {
|
||||
word-wrap: normal; }
|
||||
|
||||
[list]::-webkit-calendar-picker-indicator {
|
||||
display: none; }
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; }
|
||||
button:not(:disabled),
|
||||
[type="button"]:not(:disabled),
|
||||
[type="reset"]:not(:disabled),
|
||||
[type="submit"]:not(:disabled) {
|
||||
cursor: pointer; }
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none; }
|
||||
|
||||
textarea {
|
||||
resize: vertical; }
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0; }
|
||||
|
||||
legend {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
line-height: inherit;
|
||||
white-space: normal; }
|
||||
@media (min-width: 1200px) {
|
||||
legend {
|
||||
font-size: 1.5rem; } }
|
||||
legend + * {
|
||||
clear: left; }
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0; }
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto; }
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: textfield; }
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0; }
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button; }
|
||||
|
||||
output {
|
||||
display: inline-block; }
|
||||
|
||||
iframe {
|
||||
border: 0; }
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer; }
|
||||
|
||||
progress {
|
||||
vertical-align: baseline; }
|
||||
|
||||
[hidden] {
|
||||
display: none !important; }
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,345 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth; } }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
||||
|
||||
[tabindex="-1"]:focus:not(:focus-visible) {
|
||||
outline: 0 !important; }
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
background-color: currentColor;
|
||||
border: 0;
|
||||
opacity: 0.25; }
|
||||
|
||||
hr:not([size]) {
|
||||
height: 1px; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2; }
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw); }
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.5rem; } }
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw); }
|
||||
@media (min-width: 1200px) {
|
||||
h2 {
|
||||
font-size: 2rem; } }
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw); }
|
||||
@media (min-width: 1200px) {
|
||||
h3 {
|
||||
font-size: 1.75rem; } }
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw); }
|
||||
@media (min-width: 1200px) {
|
||||
h4 {
|
||||
font-size: 1.5rem; } }
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem; }
|
||||
|
||||
h6 {
|
||||
font-size: 1rem; }
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
abbr[title],
|
||||
abbr[data-bs-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
text-decoration-skip-ink: none; }
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit; }
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 2rem; }
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0; }
|
||||
|
||||
dt {
|
||||
font-weight: 700; }
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; }
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem; }
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; }
|
||||
|
||||
small {
|
||||
font-size: 0.875em; }
|
||||
|
||||
mark {
|
||||
padding: 0.2em;
|
||||
background-color: #fcf8e3; }
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline; }
|
||||
|
||||
sub {
|
||||
bottom: -.25em; }
|
||||
|
||||
sup {
|
||||
top: -.5em; }
|
||||
|
||||
a {
|
||||
color: #0d6efd;
|
||||
text-decoration: underline; }
|
||||
a:hover {
|
||||
color: #0a58ca; }
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none; }
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 1em;
|
||||
direction: ltr /* rtl:ignore */;
|
||||
unicode-bidi: bidi-override; }
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.875em; }
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
word-break: normal; }
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
color: #d63384;
|
||||
word-wrap: break-word; }
|
||||
a > code {
|
||||
color: inherit; }
|
||||
|
||||
kbd {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.875em;
|
||||
color: #fff;
|
||||
background-color: #212529;
|
||||
border-radius: 0.2rem; }
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-weight: 700; }
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem; }
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle; }
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse; }
|
||||
|
||||
caption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: #6c757d;
|
||||
text-align: left; }
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
text-align: -webkit-match-parent; }
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0; }
|
||||
|
||||
label {
|
||||
display: inline-block; }
|
||||
|
||||
button {
|
||||
border-radius: 0; }
|
||||
|
||||
button:focus {
|
||||
outline: dotted 1px;
|
||||
outline: -webkit-focus-ring-color auto 5px; }
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit; }
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none; }
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer; }
|
||||
|
||||
select {
|
||||
word-wrap: normal; }
|
||||
|
||||
[list]::-webkit-calendar-picker-indicator {
|
||||
display: none; }
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; }
|
||||
button:not(:disabled),
|
||||
[type="button"]:not(:disabled),
|
||||
[type="reset"]:not(:disabled),
|
||||
[type="submit"]:not(:disabled) {
|
||||
cursor: pointer; }
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none; }
|
||||
|
||||
textarea {
|
||||
resize: vertical; }
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0; }
|
||||
|
||||
legend {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
line-height: inherit; }
|
||||
@media (min-width: 1200px) {
|
||||
legend {
|
||||
font-size: 1.5rem; } }
|
||||
legend + * {
|
||||
clear: left; }
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0; }
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto; }
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: textfield; }
|
||||
|
||||
/* rtl:raw:
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
direction: ltr;
|
||||
}
|
||||
*/
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0; }
|
||||
|
||||
::file-selector-button {
|
||||
font: inherit; }
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button; }
|
||||
|
||||
output {
|
||||
display: inline-block; }
|
||||
|
||||
iframe {
|
||||
border: 0; }
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer; }
|
||||
|
||||
progress {
|
||||
vertical-align: baseline; }
|
||||
|
||||
[hidden] {
|
||||
display: none !important; }
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
.tns-outer{padding:0 !important}.tns-outer [hidden]{display:none !important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0;min-height:1px}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery>.tns-slide-active{position:relative;left:auto !important}.tns-gallery>.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1 @@
|
||||
eyIxIjp7IklEIjoxLCJuYW1lIjoiTXkgaWNvbnMgY29sbGVjdGlvbiIsImJvb2ttYXJrX2lkIjoiMHM4NGQ1cDZlN2owMDAwMCIsImNyZWF0ZWQiOjAsInVwZGF0ZWQiOjE2MjIzNjUwMjUsImFjdGl2ZSI6MSwic291cmNlIjpudWxsLCJvcmRlciI6MCwiY29sb3IiOiIwMDAwMDAiLCJzdGF0dXMiOjF9LCIwczg0ZDVwNmU3ajAwMDAwIjpbeyJpZCI6MzM0ODY0NiwibmFtZSI6ImNvbXBhc3MiLCJjb2xvciI6IiMwMDAwMDAiLCJwcmVtaXVtIjowLCJzb3J0IjoxfSx7ImlkIjozMzQ4NjUwLCJuYW1lIjoicGxhbiIsImNvbG9yIjoiIzAwMDAwMCIsInByZW1pdW0iOjAsInNvcnQiOjJ9LHsiaWQiOjMzNDg2NTMsIm5hbWUiOiJjb2xvci1wYWxldHRlIiwiY29sb3IiOiIjMDAwMDAwIiwicHJlbWl1bSI6MCwic29ydCI6M30seyJpZCI6MzM0ODY1NiwibmFtZSI6InJ1bGVyIiwiY29sb3IiOiIjMDAwMDAwIiwicHJlbWl1bSI6MCwic29ydCI6NH0seyJpZCI6MzM0ODY5MCwibmFtZSI6ImFyY2hpdGVjdCIsImNvbG9yIjoiIzAwMDAwMCIsInByZW1pdW0iOjAsInNvcnQiOjV9LHsiaWQiOjMzNDg3NDYsIm5hbWUiOiJ3YWxsIiwiY29sb3IiOiIjMDAwMDAwIiwicHJlbWl1bSI6MCwic29ydCI6Nn1dfQ==
|
||||
@@ -0,0 +1,38 @@
|
||||
@font-face {
|
||||
font-family: "flaticon";
|
||||
src: url("./flaticon.ttf?9890e4f6eddb23febd8c5e9ec37ab564") format("truetype"),
|
||||
url("./flaticon.woff?9890e4f6eddb23febd8c5e9ec37ab564") format("woff"),
|
||||
url("./flaticon.woff2?9890e4f6eddb23febd8c5e9ec37ab564") format("woff2"),
|
||||
url("./flaticon.eot?9890e4f6eddb23febd8c5e9ec37ab564#iefix") format("embedded-opentype"),
|
||||
url("./flaticon.svg?9890e4f6eddb23febd8c5e9ec37ab564#flaticon") format("svg");
|
||||
}
|
||||
|
||||
i[class^="flaticon-"]:before, i[class*=" flaticon-"]:before {
|
||||
font-family: flaticon !important;
|
||||
font-style: normal;
|
||||
font-weight: normal !important;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.flaticon-compass:before {
|
||||
content: "\f101";
|
||||
}
|
||||
.flaticon-plan:before {
|
||||
content: "\f102";
|
||||
}
|
||||
.flaticon-color-palette:before {
|
||||
content: "\f103";
|
||||
}
|
||||
.flaticon-ruler:before {
|
||||
content: "\f104";
|
||||
}
|
||||
.flaticon-architect:before {
|
||||
content: "\f105";
|
||||
}
|
||||
.flaticon-wall:before {
|
||||
content: "\f106";
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,507 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Flaticon Webfont</title>
|
||||
<link rel="stylesheet" type="text/css" href="flaticon.css"/>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #5f7d95;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4AD295;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
|
||||
font-family: Flaticon;
|
||||
font-size: 30px;
|
||||
font-style: normal;
|
||||
margin-left: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 24px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
width: 210px;
|
||||
height: auto;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header strong {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.demo {
|
||||
margin: 2em auto;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
.demo ul li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.demo ul li code {
|
||||
background-color: #1D262D;
|
||||
border-radius: 3px;
|
||||
padding: 12px;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
font-weight: lighter;
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.demo ul li code .red {
|
||||
color: #EC3A3B;
|
||||
}
|
||||
|
||||
.demo ul li code .green {
|
||||
color: #4AD295;
|
||||
}
|
||||
|
||||
.demo ul li code .yellow {
|
||||
color: #FFEEB6;
|
||||
}
|
||||
|
||||
.demo ul li code .blue {
|
||||
color: #2C8CF4;
|
||||
}
|
||||
|
||||
.demo ul li code .purple {
|
||||
color: #4949E7;
|
||||
}
|
||||
|
||||
.demo ul li code .dots {
|
||||
margin-top: 0.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#glyphs {
|
||||
border-bottom: 1px solid #E3E9ED;
|
||||
padding: 2em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.glyph {
|
||||
display: inline-block;
|
||||
width: 9em;
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.glyph .flaticon {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
font-family: "Flaticon";
|
||||
font-size: 64px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.glyph .flaticon:before {
|
||||
font-size: 64px;
|
||||
color: #5f7d95;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.class-name {
|
||||
font-size: 0.65em;
|
||||
background-color: #E3E9ED;
|
||||
color: #869FB2;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 0.5em;
|
||||
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-size: 0.6em;
|
||||
background-color: #EFF3F6;
|
||||
border-top: 0;
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.author-name a {
|
||||
color: #1D262D;
|
||||
}
|
||||
|
||||
.class-name:last-child {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.class-name:last-child a {
|
||||
font-size: 10px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.glyph > input {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin: 5px auto;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.glyph > input.icon-input {
|
||||
font-family: "Flaticon";
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.attribution .title {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.attribution textarea {
|
||||
background-color: #F8FAFB;
|
||||
color: #1D262D;
|
||||
padding: 1em;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border: 1px solid #E3E9ED;
|
||||
border-radius: 4px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
font-size: 0.8em;
|
||||
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.attribution textarea:hover {
|
||||
border-color: #CFD9E0;
|
||||
}
|
||||
|
||||
.attribution textarea:focus {
|
||||
border-color: #4AD295;
|
||||
}
|
||||
|
||||
.iconsuse {
|
||||
margin: 2em auto;
|
||||
text-align: center;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.iconsuse:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.iconsuse .image {
|
||||
float: left;
|
||||
width: 25%;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.iconsuse .image p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.iconsuse .image span {
|
||||
display: block;
|
||||
font-size: 0.65em;
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 0.5em;
|
||||
color: #FFFF99;
|
||||
margin-top: 1em;
|
||||
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.flaticon:before {
|
||||
color: #5f7d95;
|
||||
}
|
||||
|
||||
#footer {
|
||||
text-align: center;
|
||||
background-color: #1D262D;
|
||||
color: #869FB2;
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.iconsuse .image {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.preview .inner {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: #f5f5f5;
|
||||
-webkit-border-radius: 3px 3px 0 0;
|
||||
-moz-border-radius: 3px 3px 0 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.preview .inner {
|
||||
line-height: 85px;
|
||||
font-size: 40px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
font-size: 10px;
|
||||
font-family: Monaco, monospace;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background: #ddd;
|
||||
-webkit-border-radius: 0 0 3px 3px;
|
||||
-moz-border-radius: 0 0 3px 3px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="https://www.flaticon.com/" target="_blank" class="logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 394.3 76.5">
|
||||
<path d="M156.6,69.4H145.3V7.1h11.3Z" style="fill:#0e2a47"/>
|
||||
<path d="M206.2,69.4h-11V64.8a15.4,15.4,0,0,1-12.6,5.7c-11.6,0-20.3-9.5-20.3-22.1s8.8-22.1,20.3-22.1a15.4,15.4,0,0,1,12.6,5.8V27.5h11Zm-32.4-21c0,6.4,4.2,11.6,10.8,11.6s10.8-4.9,10.8-11.6-4.4-11.6-10.8-11.6S173.9,42,173.9,48.4Z"
|
||||
style="fill:#0e2a47"/>
|
||||
<path d="M262.5,13.7a7.2,7.2,0,0,1-14.4,0,7.2,7.2,0,1,1,14.4,0ZM261,69.4H249.6v-42H261Z"
|
||||
style="fill:#0e2a47"/>
|
||||
<path id="_Trazado_" data-name="<Trazado>"
|
||||
d="M139.6,17.8a16.6,16.6,0,0,0-8-1.4c-3.2.4-4.9,2-4.9,5.9v5.1h13V37.5h-13v32H115.4v-32h-7.8v-10h7.8V22.2c0-9.9,5.2-16.3,15-16.3a23.4,23.4,0,0,1,9.3,1.8Z"
|
||||
style="fill:#0e2a47"/>
|
||||
<path d="M235.1,60c-3.5,0-6.3-1.9-6.3-7.1V37.5H244v-10H228.8V15H217.5V27.5h-5.7v10h5.7V53.7c0,10.9,5.3,16.8,15.7,16.8A22.9,22.9,0,0,0,244,68l-4.3-9.1A12.3,12.3,0,0,1,235.1,60Z"
|
||||
style="fill:#0e2a47"/>
|
||||
<path d="M348.9,48.4c0,12.6-9.7,22.1-22.7,22.1s-22.7-9.4-22.7-22.1,9.6-22.1,22.7-22.1S348.9,35.8,348.9,48.4Zm-33.9,0c0,6.8,4.8,11.6,11.1,11.6s11.2-4.8,11.2-11.6-4.8-11.6-11.2-11.6S315.1,41.6,315.1,48.4Z"
|
||||
style="fill:#0e2a47"/>
|
||||
<path d="M394.3,42.7V69.4H382.9V46.3c0-6.1-3-9.4-8.2-9.4s-8.9,3.2-8.9,9.5v23H354.6v-42h11v4.9c3-4.5,7.6-6.1,12.3-6.1C387.5,26.3,394.3,33,394.3,42.7Z"
|
||||
style="fill:#0e2a47"/>
|
||||
<path d="M298,55.7h0a12.4,12.4,0,0,1-8.2,4.2h-.9l-1.8-.2a10,10,0,0,1-7.4-5.6,13.2,13.2,0,0,1-1.2-5.8,13,13,0,0,1,1.3-5.9,10.1,10.1,0,0,1,7.5-5.5h2.4a11.7,11.7,0,0,1,8.3,4.2l5.5-9.6a19.9,19.9,0,0,0-8.1-4.3,23.4,23.4,0,0,0-6.1-.8,25.2,25.2,0,0,0-7.5,1.1,20.9,20.9,0,0,0-8,4.6,21.9,21.9,0,0,0-6.8,16.4,21.9,21.9,0,0,0,6.7,16.3,20.9,20.9,0,0,0,8,4.6,25.2,25.2,0,0,0,7.7,1.2,23.6,23.6,0,0,0,6.2-.8,20,20,0,0,0,8.1-4.4Z"
|
||||
style="fill:#0e2a47"/>
|
||||
<path d="M46.3,26.5H26.9L20.8,16H52.4L61.6,0H9.4A9.3,9.3,0,0,0,1.3,4.7a9.3,9.3,0,0,0,0,9.4L34.6,71.8a9.4,9.4,0,0,0,16.2,0l1.1-1.9L36.6,43.3Z"
|
||||
style="fill:#4ad295"/>
|
||||
<path d="M84.2,4.7A9.3,9.3,0,0,0,76.1,0H73.8l-25,43.3,9.2,16L84.2,14A9.3,9.3,0,0,0,84.2,4.7Z"
|
||||
style="fill:#4ad295"/>
|
||||
</svg>
|
||||
</a>
|
||||
</header>
|
||||
<section class="demo wrapper">
|
||||
|
||||
<p class="title">Webfont Instructions</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<span class="num">1. </span>Copy the "Fonts" files and CSS files to your website CSS folder.
|
||||
</li>
|
||||
<li>
|
||||
<span class="num">2. </span>Add the CSS link to your website source code on header.
|
||||
<code class="big">
|
||||
<<span class="red">head</span>>
|
||||
<br/><span class="dots">...</span>
|
||||
<br/><<span class="red">link</span> <span class="green">rel</span>=<span
|
||||
class="yellow">"stylesheet"</span> <span class="green">type</span>=<span
|
||||
class="yellow">"text/css"</span> <span class="green">href</span>=<span class="yellow">"your_website_domain/css_root/flaticon.css"</span>>
|
||||
<br/><span class="dots">...</span>
|
||||
<br/></<span class="red">head</span>>
|
||||
</code>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>
|
||||
<span class="num">3. </span>Use the icon class on <code>"<span class="blue">display</span>:<span
|
||||
class="purple"> inline</span>"</code> elements:
|
||||
<br/>
|
||||
Use example: <code><<span class="red">i</span> <span class="green">class</span>=<span class="yellow">"flaticon-airplane49"</span>></<span
|
||||
class="red">i</span>></code> or <code><<span class="red">span</span> <span
|
||||
class="green">class</span>=<span class="yellow">"flaticon-airplane49"</span>></<span
|
||||
class="red">span</span>></code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
<section id="glyphs">
|
||||
<div class="glyph">
|
||||
<i class="flaticon flaticon-compass"></i>
|
||||
<div class="class-name">.flaticon-compass</div>
|
||||
<div class="author-name">Author: <a data-file="compass" href="http://www.freepik.com">Freepik</a> </div>
|
||||
</div>
|
||||
|
||||
<div class="glyph">
|
||||
<i class="flaticon flaticon-plan"></i>
|
||||
<div class="class-name">.flaticon-plan</div>
|
||||
<div class="author-name">Author: <a data-file="plan" href="http://www.freepik.com">Freepik</a> </div>
|
||||
</div>
|
||||
|
||||
<div class="glyph">
|
||||
<i class="flaticon flaticon-color-palette"></i>
|
||||
<div class="class-name">.flaticon-color-palette</div>
|
||||
<div class="author-name">Author: <a data-file="color-palette" href="http://www.freepik.com">Freepik</a> </div>
|
||||
</div>
|
||||
|
||||
<div class="glyph">
|
||||
<i class="flaticon flaticon-ruler"></i>
|
||||
<div class="class-name">.flaticon-ruler</div>
|
||||
<div class="author-name">Author: <a data-file="ruler" href="http://www.freepik.com">Freepik</a> </div>
|
||||
</div>
|
||||
|
||||
<div class="glyph">
|
||||
<i class="flaticon flaticon-architect"></i>
|
||||
<div class="class-name">.flaticon-architect</div>
|
||||
<div class="author-name">Author: <a data-file="architect" href="http://www.freepik.com">Freepik</a> </div>
|
||||
</div>
|
||||
|
||||
<div class="glyph">
|
||||
<i class="flaticon flaticon-wall"></i>
|
||||
<div class="class-name">.flaticon-wall</div>
|
||||
<div class="author-name">Author: <a data-file="wall" href="http://www.freepik.com">Freepik</a> </div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="attribution wrapper" style="text-align:center;">
|
||||
|
||||
<div class="title">License and attribution:</div><div class="attrDiv">Font generated by <a href="https://www.flaticon.com">flaticon.com</a>. <div><p>Under <a href="http://creativecommons.org/licenses/by/3.0/">CC</a>: <a data-file="wall" href="http://www.freepik.com">Freepik</a></p> </div>
|
||||
</div>
|
||||
<div class="title">Copy the Attribution License:</div>
|
||||
|
||||
<textarea onclick="this.focus();this.select();">Font generated by <a href="https://www.flaticon.com">flaticon.com</a>. <p>Under <a href="http://creativecommons.org/licenses/by/3.0/">CC</a>: <a data-file="wall" href="http://www.freepik.com">Freepik</a></p>
|
||||
</textarea>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="iconsuse">
|
||||
|
||||
<div class="title">Examples:</div>
|
||||
<div class="image">
|
||||
<p>
|
||||
<i class="flaticon flaticon-compass"></i>
|
||||
<span><i class="flaticon-compass"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="image">
|
||||
<p>
|
||||
<i class="flaticon flaticon-plan"></i>
|
||||
<span><i class="flaticon-plan"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="image">
|
||||
<p>
|
||||
<i class="flaticon flaticon-color-palette"></i>
|
||||
<span><i class="flaticon-color-palette"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="image">
|
||||
<p>
|
||||
<i class="flaticon flaticon-ruler"></i>
|
||||
<span><i class="flaticon-ruler"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="image">
|
||||
<p>
|
||||
<i class="flaticon flaticon-architect"></i>
|
||||
<span><i class="flaticon-architect"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
<
|
||||
@@ -0,0 +1,49 @@
|
||||
$flaticon-font: "flaticon";
|
||||
|
||||
@font-face {
|
||||
font-family: $flaticon-font;
|
||||
src: url("./flaticon.ttf?9890e4f6eddb23febd8c5e9ec37ab564") format("truetype"),
|
||||
url("./flaticon.woff?9890e4f6eddb23febd8c5e9ec37ab564") format("woff"),
|
||||
url("./flaticon.woff2?9890e4f6eddb23febd8c5e9ec37ab564") format("woff2"),
|
||||
url("./flaticon.eot?9890e4f6eddb23febd8c5e9ec37ab564#iefix") format("embedded-opentype"),
|
||||
url("./flaticon.svg?9890e4f6eddb23febd8c5e9ec37ab564#flaticon") format("svg");
|
||||
}
|
||||
|
||||
i[class^="flaticon-"]:before, i[class*=" flaticon-"]:before {
|
||||
font-family: flaticon !important;
|
||||
font-style: normal;
|
||||
font-weight: normal !important;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
$flaticon-map: (
|
||||
"compass": "\f101",
|
||||
"plan": "\f102",
|
||||
"color-palette": "\f103",
|
||||
"ruler": "\f104",
|
||||
"architect": "\f105",
|
||||
"wall": "\f106",
|
||||
);
|
||||
|
||||
.flaticon-compass:before {
|
||||
content: map-get($flaticon-map, "compass");
|
||||
}
|
||||
.flaticon-plan:before {
|
||||
content: map-get($flaticon-map, "plan");
|
||||
}
|
||||
.flaticon-color-palette:before {
|
||||
content: map-get($flaticon-map, "color-palette");
|
||||
}
|
||||
.flaticon-ruler:before {
|
||||
content: map-get($flaticon-map, "ruler");
|
||||
}
|
||||
.flaticon-architect:before {
|
||||
content: map-get($flaticon-map, "architect");
|
||||
}
|
||||
.flaticon-wall:before {
|
||||
content: map-get($flaticon-map, "wall");
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,7 @@
|
||||
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
|
||||
|
||||
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
|
||||
|
||||
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
|
||||
|
||||
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
|
||||
@@ -0,0 +1,155 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
background: #fff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
small {
|
||||
font-size: .66666667em;
|
||||
}
|
||||
a {
|
||||
color: #e74c3c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
box-shadow: 0 1px #e74c3c;
|
||||
}
|
||||
.bshadow0, input {
|
||||
box-shadow: inset 0 -2px #e7e7e7;
|
||||
}
|
||||
input:hover {
|
||||
box-shadow: inset 0 -2px #ccc;
|
||||
}
|
||||
input, fieldset {
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
input {
|
||||
color: inherit;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
padding: .25em 0;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 -2px #449fdb;
|
||||
}
|
||||
.glyph {
|
||||
font-size: 16px;
|
||||
width: 15em;
|
||||
padding-bottom: 1em;
|
||||
margin-right: 4em;
|
||||
margin-bottom: 1em;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.liga {
|
||||
width: 80%;
|
||||
width: calc(100% - 2.5em);
|
||||
}
|
||||
.talign-right {
|
||||
text-align: right;
|
||||
}
|
||||
.talign-center {
|
||||
text-align: center;
|
||||
}
|
||||
.bgc1 {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.fgc1 {
|
||||
color: #999;
|
||||
}
|
||||
.fgc0 {
|
||||
color: #000;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.mvm {
|
||||
margin-top: .75em;
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
.mtn {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mtl, .mal {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.mbl, .mal {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.mal, .mhl {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.mhmm {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.mls {
|
||||
margin-left: .25em;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
.pbs, .pvs {
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
.pvs, .pts {
|
||||
padding-top: .25em;
|
||||
}
|
||||
.unit {
|
||||
float: left;
|
||||
}
|
||||
.unitRight {
|
||||
float: right;
|
||||
}
|
||||
.size1of2 {
|
||||
width: 50%;
|
||||
}
|
||||
.size1of1 {
|
||||
width: 100%;
|
||||
}
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.hidden-true {
|
||||
display: none;
|
||||
}
|
||||
.textbox0 {
|
||||
width: 3em;
|
||||
background: #f1f1f1;
|
||||
padding: .25em .5em;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
}
|
||||
#testDrive {
|
||||
display: block;
|
||||
padding-top: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.fs0 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fs1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
.fs2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
if (!('boxShadow' in document.body.style)) {
|
||||
document.body.setAttribute('class', 'noBoxShadow');
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", function(e) {
|
||||
var target = e.target;
|
||||
if (target.tagName === "INPUT" &&
|
||||
target.getAttribute('class').indexOf('liga') === -1) {
|
||||
target.select();
|
||||
}
|
||||
});
|
||||
|
||||
(function() {
|
||||
var fontSize = document.getElementById('fontSize'),
|
||||
testDrive = document.getElementById('testDrive'),
|
||||
testText = document.getElementById('testText');
|
||||
function updateTest() {
|
||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||
if (window.icomoonLiga) {
|
||||
window.icomoonLiga(testDrive);
|
||||
}
|
||||
}
|
||||
function updateSize() {
|
||||
testDrive.style.fontSize = fontSize.value + 'px';
|
||||
}
|
||||
fontSize.addEventListener('change', updateSize, false);
|
||||
testText.addEventListener('input', updateTest, false);
|
||||
testText.addEventListener('change', updateTest, false);
|
||||
updateSize();
|
||||
}());
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 915 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
@@ -0,0 +1,650 @@
|
||||
<!-- /*
|
||||
* Template Name: Archiark
|
||||
* Template Author: Untree.co
|
||||
* Tempalte URI: https://untree.co/
|
||||
* License: https://creativecommons.org/licenses/by/3.0/
|
||||
*/ -->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta name="author" content="Untree.co">
|
||||
<link rel="shortcut icon" href="../public/frontend/template/archiark/favicon.png">
|
||||
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="bootstrap, bootstrap5" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../public/frontend/template/archiark/fonts/icomoon/style.css">
|
||||
<link rel="stylesheet" href="../public/frontend/template/archiark/fonts/flaticon/font/flaticon.css">
|
||||
<link rel="stylesheet" href="../public/frontend/template/archiark/css/tiny-slider.css">
|
||||
<link rel="stylesheet" href="../public/frontend/template/archiark/css/aos.css">
|
||||
<link rel="stylesheet" href="../public/frontend/template/archiark/css/glightbox.min.css">
|
||||
<link rel="stylesheet" href="../public/frontend/template/archiark/css/style.css">
|
||||
|
||||
<title>Archiark — Free Bootstrap 5 Website Template by Untree.co</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="site-mobile-menu site-navbar-target">
|
||||
<div class="site-mobile-menu-header">
|
||||
<div class="site-mobile-menu-close">
|
||||
<span class="icofont-close js-menu-toggle"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-mobile-menu-body"></div>
|
||||
</div>
|
||||
|
||||
<nav class="site-nav">
|
||||
<div class="container">
|
||||
<div class="site-navigation">
|
||||
<a href="index.html" class="logo m-0 float-start">Archiark<span class="text-primary">.</span> </a>
|
||||
|
||||
<ul class="js-clone-nav d-none d-lg-inline-block text-start site-menu float-start">
|
||||
<li class="active"><a href="index.html">Home</a></li>
|
||||
<li class="has-children">
|
||||
<a href="projects.html">Projects</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Commercial Building</a></li>
|
||||
<li><a href="#">Cultural Lifestyle</a></li>
|
||||
<li class="has-children">
|
||||
<a href="#">Dropdown</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Sub Menu One</a></li>
|
||||
<li><a href="#">Sub Menu Two</a></li>
|
||||
<li><a href="#">Sub Menu Three</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<a href="#" class="burger ml-auto float-end site-menu-toggle light js-menu-toggle d-inline-block d-lg-none" data-toggle="collapse" data-target="#main-navbar">
|
||||
<span></span>
|
||||
</a>
|
||||
<ul class="site-menu float-end d-none d-md-block">
|
||||
<li><a href="#" class="d-flex align-items-center text-white h2 fw-bold"><span class="icon-phone me-2"></span> <span>+ 2 292 4392 327</span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero-2 overlay" style="background-image: url('../public/frontend/template/archiark/images/img_2.jpg');">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-5 mx-auto">
|
||||
<h1 class="mb-5"><span>We love</span> <span class="d-block">architecture</span> <span class="d-block">& interior design</span></h1>
|
||||
|
||||
<div class="play-vid">
|
||||
<a href="https://www.youtube.com/watch?v=mwtbEGNABWU" class="play glightbox">
|
||||
<span class="icon-play"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="intro-desc">
|
||||
<div class="line"></div>
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section sec-1">
|
||||
<div class="container">
|
||||
<div class="row g-0">
|
||||
<div class="col-lg-3">
|
||||
<h2 class="heading">We create architectural designs</h2>
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.</p>
|
||||
|
||||
<p><a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a></p>
|
||||
</div>
|
||||
<div class="col-lg-7 ms-auto">
|
||||
<img src="../public/frontend/template/archiark/images/img_8.jpg" alt="Image" class="img-fluid img-r">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section sec-2">
|
||||
<div class="container">
|
||||
<div class="row g-0">
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<img src="../public/frontend/template/archiark/images/img_4.jpg" alt="IMage" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-lg-3 ms-auto">
|
||||
<h2 class="heading">Modern Architecture</h2>
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.</p>
|
||||
<p><a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec-3 section bg-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<h2 class="heading">Services</h2>
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 ms-auto">
|
||||
<div class="accordion accordion-flush accordion-1" id="accordionFlushExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne">
|
||||
Interior Design
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-md-4">
|
||||
<img src="../public/frontend/template/archiark/images/img_7.jpg" alt="Image" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio.</p>
|
||||
<a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
|
||||
Landscape Design
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-md-4">
|
||||
<img src="../public/frontend/template/archiark/images/img_2.jpg" alt="Image" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio.</p>
|
||||
<a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
|
||||
Engineering Plan
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-md-4">
|
||||
<img src="../public/frontend/template/archiark/images/img_3.jpg" alt="Image" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio.</p>
|
||||
<a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingFour">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
|
||||
Architecture Design
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-md-4">
|
||||
<img src="../public/frontend/template/archiark/images/img_4.jpg" alt="Image" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio.</p>
|
||||
<a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section sec-5">
|
||||
<div class="container">
|
||||
<div class="row mb-5">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="heading">Projects</h2>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="../public/frontend/template/archiark/images/img_8.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="../public/frontend/template/archiark/images/img_2.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project Two</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="../public/frontend/template/archiark/images/img_3.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="../public/frontend/template/archiark/images/img_4.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="../public/frontend/template/archiark/images/img_5.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project Two</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="../public/frontend/template/archiark/images/img_6.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 text-center mt-5">
|
||||
<p><a href="#" class="btn btn-primary me-4">See all projects</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="sec-4 section bg-light">
|
||||
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="heading mb-5 text-center">Testimonial</h2>
|
||||
</div>
|
||||
<div class="testimonial-slide-center-wrap" data-aos="fade-up" data-aos-delay="100">
|
||||
|
||||
<div id="testimonial-nav">
|
||||
<span class="prev" data-controls="prev"><span class="icon-chevron-left"></span></span>
|
||||
|
||||
<span class="next" data-controls="next"><span class="icon-chevron-right"></span></span>
|
||||
</div>
|
||||
|
||||
<div class="testimonial-slide-center testimonial-center" id="testimonial-center">
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="../public/frontend/template/archiark/images/person_2.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="../public/frontend/template/archiark/images/person_1.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="../public/frontend/template/archiark/images/person_3.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="../public/frontend/template/archiark/images/person_4.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="../public/frontend/template/archiark/images/person_5.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="../public/frontend/template/archiark/images/person_2.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="../public/frontend/template/archiark/images/person_3.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="../public/frontend/template/archiark/images/person_4.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="../public/frontend/template/archiark/images/person_1.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section sec-news">
|
||||
<div class="container">
|
||||
<div class="row mb-5">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="heading">News</h2>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
<div class="post-entry-1 h-100">
|
||||
<a href="single.html">
|
||||
<img src="../public/frontend/template/archiark/images/img_3.jpg" alt="Image"
|
||||
class="img-fluid">
|
||||
</a>
|
||||
<div class="post-entry-1-contents">
|
||||
<span class="meta d-inline-block mb-0">July 17, 2019 <span class="mx-2">by</span> <a href="#">Admin</a></span>
|
||||
<h2 class="mb-3"><a href="single.html">How Awesome Stay connected</a></h2>
|
||||
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
|
||||
<p><a href="single.html">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
<div class="post-entry-1 h-100">
|
||||
<a href="single.html">
|
||||
<img src="../public/frontend/template/archiark/images/img_4.jpg" alt="Image"
|
||||
class="img-fluid">
|
||||
</a>
|
||||
<div class="post-entry-1-contents">
|
||||
|
||||
<span class="meta d-inline-block mb-0">July 17, 2019 <span class="mx-2">by</span> <a href="#">Admin</a></span>
|
||||
<h2 class="mb-3"><a href="single.html">We Need Unlimitted People</a></h2>
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
|
||||
<p><a href="single.html">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
<div class="post-entry-1 h-100">
|
||||
<a href="single.html">
|
||||
<img src="../public/frontend/template/archiark/images/img_5.jpg" alt="Image"
|
||||
class="img-fluid">
|
||||
</a>
|
||||
<div class="post-entry-1-contents">
|
||||
|
||||
<span class="meta d-inline-block mb-0">July 17, 2019 <span class="mx-2">by</span> <a href="#">Admin</a></span>
|
||||
<h2 class="mb-3"><a href="single.html">Important of getting a notifications</a></h2>
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
|
||||
<p><a href="single.html">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="site-footer bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-lg-4">
|
||||
<div class="widget">
|
||||
<h3 class="line-top">About</h3>
|
||||
<p class="mb-5">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam. Separated they live.</p>
|
||||
|
||||
</div>
|
||||
<div class="widget">
|
||||
<h3 class="line-top">Connect with us</h3>
|
||||
<ul class="social list-unstyled mb-5">
|
||||
<li><a href="#"><span class="icon-facebook"></span></a></li>
|
||||
<li><a href="#"><span class="icon-twitter"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-dribbble"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="widget">
|
||||
<h3 class="line-top">Navigations</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Work</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Press</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
<li><a href="#">Privacy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center text-center copyright">
|
||||
<div class="col-md-8">
|
||||
<p class="small text-black-50">Copyright ©<script>document.write(new Date().getFullYear());</script>. All Rights Reserved. — Designed with love by CustomDesign
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Preloader -->
|
||||
<div id="overlayer"></div>
|
||||
<div class="loader">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../public/frontend/template/archiark/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../public/frontend/template/archiark/js/tiny-slider.js"></script>
|
||||
<script src="../public/frontend/template/archiark/js/aos.js"></script>
|
||||
<script src="../public/frontend/template/archiark/js/glightbox.min.js"></script>
|
||||
<script src="../public/frontend/template/archiark/js/navbar.js"></script>
|
||||
<script src="../public/frontend/template/archiark/js/counter.js"></script>
|
||||
<script src="../public/frontend/template/archiark/js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,88 @@
|
||||
(function () {
|
||||
|
||||
'use trict';
|
||||
// How long you want the animation to take, in ms
|
||||
const animationDuration = 2000;
|
||||
// Calculate how long each ‘frame’ should last if we want to update the animation 60 times per second
|
||||
const frameDuration = 1000 / 60;
|
||||
// Use that to calculate how many frames we need to complete the animation
|
||||
const totalFrames = Math.round( animationDuration / frameDuration );
|
||||
// An ease-out function that slows the count as it progresses
|
||||
const easeOutQuad = t => t * ( 2 - t );
|
||||
|
||||
|
||||
const numberWithCommas = n => {
|
||||
return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
}
|
||||
|
||||
// The animation function, which takes an Element
|
||||
const animateCountUp = el => {
|
||||
let frame = 0;
|
||||
const countTo = parseInt( el.innerHTML, 10 );
|
||||
// Start the animation running 60 times per second
|
||||
const counter = setInterval( () => {
|
||||
frame++;
|
||||
// Calculate our progress as a value between 0 and 1
|
||||
// Pass that value to our easing function to get our
|
||||
// progress on a curve
|
||||
const progress = easeOutQuad( frame / totalFrames );
|
||||
// Use the progress value to calculate the current count
|
||||
const currentCount = Math.round( countTo * progress );
|
||||
|
||||
// If the current count has changed, update the element
|
||||
if ( parseInt( el.innerHTML, 10 ) !== currentCount ) {
|
||||
el.innerHTML = numberWithCommas(currentCount);
|
||||
}
|
||||
|
||||
// If we’ve reached our last frame, stop the animation
|
||||
if ( frame === totalFrames ) {
|
||||
clearInterval( counter );
|
||||
}
|
||||
}, frameDuration );
|
||||
};
|
||||
|
||||
// Run the animation on all elements with a class of ‘countup’
|
||||
const runAnimations = () => {
|
||||
const countupEls = document.querySelectorAll( '.countup' );
|
||||
countupEls.forEach( animateCountUp );
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// In Viewed
|
||||
var elements;
|
||||
var windowHeight;
|
||||
|
||||
function init() {
|
||||
elements = document.querySelectorAll('.section-counter');
|
||||
windowHeight = window.innerHeight;
|
||||
}
|
||||
|
||||
function checkPosition() {
|
||||
var i;
|
||||
for (i = 0; i < elements.length; i++) {
|
||||
var element = elements[i];
|
||||
var positionFromTop = elements[i].getBoundingClientRect().top;
|
||||
if (positionFromTop - windowHeight <= 0) {
|
||||
if( !element.classList.contains('viewed') ) {
|
||||
element.classList.add('viewed');
|
||||
runAnimations();
|
||||
} else {
|
||||
if ( element.classList.contains('viewed') ) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', checkPosition);
|
||||
window.addEventListener('resize', init);
|
||||
|
||||
init();
|
||||
checkPosition();
|
||||
|
||||
|
||||
})()
|
||||
@@ -0,0 +1,152 @@
|
||||
(function () {
|
||||
|
||||
'use strict'
|
||||
|
||||
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
easing: 'slide',
|
||||
once: true
|
||||
});
|
||||
|
||||
|
||||
var preloader = function() {
|
||||
|
||||
var loader = document.querySelector('.loader');
|
||||
var overlay = document.getElementById('overlayer');
|
||||
|
||||
function fadeOut(el) {
|
||||
el.style.opacity = 1;
|
||||
(function fade() {
|
||||
if ((el.style.opacity -= .1) < 0) {
|
||||
el.style.display = "none";
|
||||
} else {
|
||||
requestAnimationFrame(fade);
|
||||
}
|
||||
})();
|
||||
};
|
||||
|
||||
setTimeout(function() {
|
||||
fadeOut(loader);
|
||||
fadeOut(overlay);
|
||||
}, 200);
|
||||
};
|
||||
preloader();
|
||||
|
||||
|
||||
var tinyslier = function() {
|
||||
|
||||
var heroSlider = document.querySelectorAll('.hero-slide');
|
||||
var propertySlider = document.querySelectorAll('.property-slider');
|
||||
var imgPropertySlider = document.querySelectorAll('.img-property-slide');
|
||||
var testimonialCenter = document.querySelectorAll('.testimonial-center');
|
||||
|
||||
|
||||
if ( heroSlider.length > 0 ) {
|
||||
var tnsHeroSlider = tns({
|
||||
container: '.hero-slide',
|
||||
mode: 'carousel',
|
||||
speed: 700,
|
||||
autoplay: true,
|
||||
controls: false,
|
||||
nav: false,
|
||||
autoplayButtonOutput: false,
|
||||
controlsContainer: '#hero-nav',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if ( imgPropertySlider.length > 0 ) {
|
||||
var tnsPropertyImageSlider = tns({
|
||||
container: '.img-property-slide',
|
||||
mode: 'carousel',
|
||||
speed: 700,
|
||||
items: 1,
|
||||
autoplay: true,
|
||||
controls: false,
|
||||
nav: true,
|
||||
autoplayButtonOutput: false
|
||||
});
|
||||
}
|
||||
|
||||
if ( propertySlider.length> 0 ) {
|
||||
var tnsSlider = tns({
|
||||
container: '.property-slider',
|
||||
mode: 'carousel',
|
||||
speed: 700,
|
||||
items: 3,
|
||||
autoplay: true,
|
||||
autoplayButtonOutput: false,
|
||||
controlsContainer: '#property-nav',
|
||||
responsive: {
|
||||
0: {
|
||||
items: 1
|
||||
},
|
||||
700: {
|
||||
items: 2
|
||||
},
|
||||
900: {
|
||||
items: 3
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
if ( testimonialCenter.length> 0 ) {
|
||||
var testimonialSlider = tns({
|
||||
container: '#testimonial-center',
|
||||
items: 1,
|
||||
mode: 'carousel',
|
||||
slideBy: 'page',
|
||||
nav: true,
|
||||
controls: true,
|
||||
autoplay: true,
|
||||
autoplayButtonOutput: false,
|
||||
controls: true,
|
||||
gutter: 50,
|
||||
slideBy: 1,
|
||||
edgePadding: 0,
|
||||
center: true,
|
||||
controlsContainer: '#testimonial-nav',
|
||||
autoplayHoverPause: true,
|
||||
loop: true,
|
||||
swipeAngle: false,
|
||||
speed: 700,
|
||||
|
||||
responsive: {
|
||||
350: {
|
||||
gutter: 10,
|
||||
edgePadding: 0,
|
||||
items: 1,
|
||||
},
|
||||
500: {
|
||||
gutter: 20,
|
||||
edgePadding: 0,
|
||||
items: 1,
|
||||
},
|
||||
700: {
|
||||
gutter: 50,
|
||||
edgePadding: 20,
|
||||
items: 2,
|
||||
},
|
||||
1000: {
|
||||
gutter: 50,
|
||||
edgePadding: 50,
|
||||
items: 2,
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
tinyslier();
|
||||
|
||||
|
||||
var lightboxVideo = GLightbox({
|
||||
selector: '.glightbox'
|
||||
});
|
||||
|
||||
})()
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,90 @@
|
||||
(function(){
|
||||
|
||||
'use strict'
|
||||
|
||||
|
||||
var siteMenuClone = function() {
|
||||
var jsCloneNavs = document.querySelectorAll('.js-clone-nav');
|
||||
var siteMobileMenuBody = document.querySelector('.site-mobile-menu-body');
|
||||
|
||||
|
||||
|
||||
jsCloneNavs.forEach(nav => {
|
||||
var navCloned = nav.cloneNode(true);
|
||||
navCloned.setAttribute('class', 'site-nav-wrap');
|
||||
siteMobileMenuBody.appendChild(navCloned);
|
||||
});
|
||||
|
||||
setTimeout(function(){
|
||||
|
||||
var hasChildrens = document.querySelector('.site-mobile-menu').querySelectorAll(' .has-children');
|
||||
|
||||
var counter = 0;
|
||||
hasChildrens.forEach( hasChild => {
|
||||
|
||||
var refEl = hasChild.querySelector('a');
|
||||
|
||||
var newElSpan = document.createElement('span');
|
||||
newElSpan.setAttribute('class', 'arrow-collapse collapsed');
|
||||
|
||||
// prepend equivalent to jquery
|
||||
hasChild.insertBefore(newElSpan, refEl);
|
||||
|
||||
var arrowCollapse = hasChild.querySelector('.arrow-collapse');
|
||||
arrowCollapse.setAttribute('data-toggle', 'collapse');
|
||||
arrowCollapse.setAttribute('data-target', '#collapseItem' + counter);
|
||||
|
||||
var dropdown = hasChild.querySelector('.dropdown');
|
||||
dropdown.setAttribute('class', 'collapse');
|
||||
dropdown.setAttribute('id', 'collapseItem' + counter);
|
||||
|
||||
counter++;
|
||||
});
|
||||
|
||||
}, 1000);
|
||||
|
||||
|
||||
// Click js-menu-toggle
|
||||
|
||||
var menuToggle = document.querySelectorAll(".js-menu-toggle");
|
||||
var mTog;
|
||||
menuToggle.forEach(mtoggle => {
|
||||
mTog = mtoggle;
|
||||
mtoggle.addEventListener("click", (e) => {
|
||||
if ( document.body.classList.contains('offcanvas-menu') ) {
|
||||
document.body.classList.remove('offcanvas-menu');
|
||||
mtoggle.classList.remove('active');
|
||||
mTog.classList.remove('active');
|
||||
} else {
|
||||
document.body.classList.add('offcanvas-menu');
|
||||
mtoggle.classList.add('active');
|
||||
mTog.classList.add('active');
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
|
||||
var specifiedElement = document.querySelector(".site-mobile-menu");
|
||||
var mt, mtoggleTemp;
|
||||
document.addEventListener('click', function(event) {
|
||||
var isClickInside = specifiedElement.contains(event.target);
|
||||
menuToggle.forEach(mtoggle => {
|
||||
mtoggleTemp = mtoggle
|
||||
mt = mtoggle.contains(event.target);
|
||||
})
|
||||
|
||||
if (!isClickInside && !mt) {
|
||||
if ( document.body.classList.contains('offcanvas-menu') ) {
|
||||
document.body.classList.remove('offcanvas-menu');
|
||||
mtoggleTemp.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
siteMenuClone();
|
||||
|
||||
|
||||
})()
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,423 @@
|
||||
{
|
||||
"name": "archiark",
|
||||
"firstRun": false,
|
||||
"exportConfig": true,
|
||||
"fileConfigs": [
|
||||
{
|
||||
"path": "scss/bootstrap.scss",
|
||||
"configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":true}}"
|
||||
}
|
||||
],
|
||||
"fileTree": {
|
||||
"expandedDirs": [
|
||||
"scss"
|
||||
],
|
||||
"hideSystemFiles": true,
|
||||
"systemFiles": [
|
||||
".*",
|
||||
"desktop.ini",
|
||||
"prepros.config",
|
||||
"$RECYCLE.BIN",
|
||||
"prepros.cfg",
|
||||
"prepros-6.config",
|
||||
"Prepros Export"
|
||||
],
|
||||
"hideUnwatchedFiles": false
|
||||
},
|
||||
"imports": [
|
||||
{
|
||||
"path": "scss/style.scss",
|
||||
"imports": [
|
||||
"scss/bootstrap/_mixins.scss",
|
||||
"scss/bootstrap/_functions.scss",
|
||||
"scss/bootstrap/_variables.scss",
|
||||
"scss/bootstrap/bootstrap.scss",
|
||||
"scss/components/_site-navbar.scss",
|
||||
"scss/components/_site-base.scss",
|
||||
"scss/components/_site-blocks.scss",
|
||||
"scss/components/_site-footer.scss",
|
||||
"scss/bootstrap/vendor/_rfs.scss",
|
||||
"scss/bootstrap/mixins/_deprecate.scss",
|
||||
"scss/bootstrap/mixins/_breakpoints.scss",
|
||||
"scss/bootstrap/mixins/_image.scss",
|
||||
"scss/bootstrap/mixins/_resize.scss",
|
||||
"scss/bootstrap/mixins/_visually-hidden.scss",
|
||||
"scss/bootstrap/mixins/_reset-text.scss",
|
||||
"scss/bootstrap/mixins/_text-truncate.scss",
|
||||
"scss/bootstrap/mixins/_utilities.scss",
|
||||
"scss/bootstrap/mixins/_alert.scss",
|
||||
"scss/bootstrap/mixins/_buttons.scss",
|
||||
"scss/bootstrap/mixins/_caret.scss",
|
||||
"scss/bootstrap/mixins/_pagination.scss",
|
||||
"scss/bootstrap/mixins/_lists.scss",
|
||||
"scss/bootstrap/mixins/_list-group.scss",
|
||||
"scss/bootstrap/mixins/_forms.scss",
|
||||
"scss/bootstrap/mixins/_table-variants.scss",
|
||||
"scss/bootstrap/mixins/_border-radius.scss",
|
||||
"scss/bootstrap/mixins/_box-shadow.scss",
|
||||
"scss/bootstrap/mixins/_gradients.scss",
|
||||
"scss/bootstrap/mixins/_transition.scss",
|
||||
"scss/bootstrap/mixins/_clearfix.scss",
|
||||
"scss/bootstrap/mixins/_container.scss",
|
||||
"scss/bootstrap/mixins/_grid.scss",
|
||||
"scss/bootstrap/_utilities.scss",
|
||||
"scss/bootstrap/_root.scss",
|
||||
"scss/bootstrap/_reboot.scss",
|
||||
"scss/bootstrap/_type.scss",
|
||||
"scss/bootstrap/_images.scss",
|
||||
"scss/bootstrap/_containers.scss",
|
||||
"scss/bootstrap/_grid.scss",
|
||||
"scss/bootstrap/_tables.scss",
|
||||
"scss/bootstrap/_forms.scss",
|
||||
"scss/bootstrap/_buttons.scss",
|
||||
"scss/bootstrap/_transitions.scss",
|
||||
"scss/bootstrap/_dropdown.scss",
|
||||
"scss/bootstrap/_button-group.scss",
|
||||
"scss/bootstrap/_nav.scss",
|
||||
"scss/bootstrap/_navbar.scss",
|
||||
"scss/bootstrap/_card.scss",
|
||||
"scss/bootstrap/_accordion.scss",
|
||||
"scss/bootstrap/_breadcrumb.scss",
|
||||
"scss/bootstrap/_pagination.scss",
|
||||
"scss/bootstrap/_badge.scss",
|
||||
"scss/bootstrap/_alert.scss",
|
||||
"scss/bootstrap/_progress.scss",
|
||||
"scss/bootstrap/_list-group.scss",
|
||||
"scss/bootstrap/_close.scss",
|
||||
"scss/bootstrap/_toasts.scss",
|
||||
"scss/bootstrap/_modal.scss",
|
||||
"scss/bootstrap/_tooltip.scss",
|
||||
"scss/bootstrap/_popover.scss",
|
||||
"scss/bootstrap/_carousel.scss",
|
||||
"scss/bootstrap/_spinners.scss",
|
||||
"scss/bootstrap/_helpers.scss",
|
||||
"scss/bootstrap/utilities/_api.scss",
|
||||
"scss/bootstrap/forms/_labels.scss",
|
||||
"scss/bootstrap/forms/_form-text.scss",
|
||||
"scss/bootstrap/forms/_form-control.scss",
|
||||
"scss/bootstrap/forms/_form-select.scss",
|
||||
"scss/bootstrap/forms/_form-check.scss",
|
||||
"scss/bootstrap/forms/_form-range.scss",
|
||||
"scss/bootstrap/forms/_floating-labels.scss",
|
||||
"scss/bootstrap/forms/_input-group.scss",
|
||||
"scss/bootstrap/forms/_validation.scss",
|
||||
"scss/bootstrap/helpers/_clearfix.scss",
|
||||
"scss/bootstrap/helpers/_colored-links.scss",
|
||||
"scss/bootstrap/helpers/_ratio.scss",
|
||||
"scss/bootstrap/helpers/_position.scss",
|
||||
"scss/bootstrap/helpers/_visually-hidden.scss",
|
||||
"scss/bootstrap/helpers/_stretched-link.scss",
|
||||
"scss/bootstrap/helpers/_text-truncation.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "untree.co-archiark/scss/style.scss",
|
||||
"imports": [
|
||||
"untree.co-archiark/scss/bootstrap/_mixins.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_functions.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_variables.scss",
|
||||
"untree.co-archiark/scss/bootstrap/bootstrap.scss",
|
||||
"untree.co-archiark/scss/components/_site-navbar.scss",
|
||||
"untree.co-archiark/scss/components/_site-base.scss",
|
||||
"untree.co-archiark/scss/components/_site-blocks.scss",
|
||||
"untree.co-archiark/scss/components/_site-footer.scss",
|
||||
"untree.co-archiark/scss/bootstrap/vendor/_rfs.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_deprecate.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_breakpoints.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_image.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_resize.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_visually-hidden.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_reset-text.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_text-truncate.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_utilities.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_alert.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_buttons.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_caret.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_pagination.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_lists.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_list-group.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_forms.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_table-variants.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_border-radius.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_box-shadow.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_gradients.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_transition.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_clearfix.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_container.scss",
|
||||
"untree.co-archiark/scss/bootstrap/mixins/_grid.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_utilities.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_root.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_reboot.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_type.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_images.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_containers.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_grid.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_tables.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_forms.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_buttons.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_transitions.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_dropdown.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_button-group.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_nav.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_navbar.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_card.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_accordion.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_breadcrumb.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_pagination.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_badge.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_alert.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_progress.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_list-group.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_close.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_toasts.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_modal.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_tooltip.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_popover.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_carousel.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_spinners.scss",
|
||||
"untree.co-archiark/scss/bootstrap/_helpers.scss",
|
||||
"untree.co-archiark/scss/bootstrap/utilities/_api.scss",
|
||||
"untree.co-archiark/scss/bootstrap/forms/_labels.scss",
|
||||
"untree.co-archiark/scss/bootstrap/forms/_form-text.scss",
|
||||
"untree.co-archiark/scss/bootstrap/forms/_form-control.scss",
|
||||
"untree.co-archiark/scss/bootstrap/forms/_form-select.scss",
|
||||
"untree.co-archiark/scss/bootstrap/forms/_form-check.scss",
|
||||
"untree.co-archiark/scss/bootstrap/forms/_form-range.scss",
|
||||
"untree.co-archiark/scss/bootstrap/forms/_floating-labels.scss",
|
||||
"untree.co-archiark/scss/bootstrap/forms/_input-group.scss",
|
||||
"untree.co-archiark/scss/bootstrap/forms/_validation.scss",
|
||||
"untree.co-archiark/scss/bootstrap/helpers/_clearfix.scss",
|
||||
"untree.co-archiark/scss/bootstrap/helpers/_colored-links.scss",
|
||||
"untree.co-archiark/scss/bootstrap/helpers/_ratio.scss",
|
||||
"untree.co-archiark/scss/bootstrap/helpers/_position.scss",
|
||||
"untree.co-archiark/scss/bootstrap/helpers/_visually-hidden.scss",
|
||||
"untree.co-archiark/scss/bootstrap/helpers/_stretched-link.scss",
|
||||
"untree.co-archiark/scss/bootstrap/helpers/_text-truncation.scss"
|
||||
]
|
||||
}
|
||||
],
|
||||
"projectView": {
|
||||
"selectedView": "file-tree"
|
||||
},
|
||||
"fileWatcher": {
|
||||
"enabled": true,
|
||||
"watchedExtensions": [
|
||||
"less",
|
||||
"sass",
|
||||
"scss",
|
||||
"styl",
|
||||
"md",
|
||||
"markdown",
|
||||
"coffee",
|
||||
"js",
|
||||
"jade",
|
||||
"haml",
|
||||
"slim",
|
||||
"ls",
|
||||
"kit",
|
||||
"png",
|
||||
"jpg",
|
||||
"jpeg",
|
||||
"ts",
|
||||
"pug",
|
||||
"css",
|
||||
"html",
|
||||
"htm",
|
||||
"php"
|
||||
]
|
||||
},
|
||||
"pathFilters": [
|
||||
"node_modules",
|
||||
".*",
|
||||
"bower_components",
|
||||
"prepros.config",
|
||||
"Prepros Export",
|
||||
"prepros-6.config",
|
||||
"prepros.cfg",
|
||||
"wp-admin",
|
||||
"wp-includes"
|
||||
],
|
||||
"server": {
|
||||
"port": 8071,
|
||||
"assignNewPortAutomatically": true,
|
||||
"enable": true,
|
||||
"proxy": {
|
||||
"enable": false,
|
||||
"url": ""
|
||||
}
|
||||
},
|
||||
"browser-sync": {
|
||||
"enable": false,
|
||||
"clicks": true,
|
||||
"forms": true,
|
||||
"scroll": true
|
||||
},
|
||||
"live-reload": {
|
||||
"enable": true,
|
||||
"animate": true,
|
||||
"delay": 0
|
||||
},
|
||||
"ftp-deploy": {
|
||||
"connectionType": "ftp",
|
||||
"remotePath": "",
|
||||
"uploadTimeout": 20000,
|
||||
"uploadOnChange": false,
|
||||
"ftp": {
|
||||
"secure": false,
|
||||
"keepAlive": true,
|
||||
"host": "",
|
||||
"port": 21,
|
||||
"user": "",
|
||||
"password": ""
|
||||
},
|
||||
"sftp": {
|
||||
"host": "",
|
||||
"port": 22,
|
||||
"usePrivateKey": false,
|
||||
"username": "",
|
||||
"password": "",
|
||||
"privateKey": "",
|
||||
"passphrase": ""
|
||||
},
|
||||
"pathFilters": [
|
||||
"config.rb",
|
||||
"prepros.config",
|
||||
"prepros-6.config",
|
||||
"node_modules",
|
||||
"Prepros Export",
|
||||
".git",
|
||||
".idea",
|
||||
".sass-cache",
|
||||
".hg",
|
||||
".svn",
|
||||
".cache",
|
||||
".DS_Store",
|
||||
"*.sass",
|
||||
"*.scss",
|
||||
"*.less",
|
||||
"*.pug",
|
||||
"*.jade",
|
||||
"*.styl",
|
||||
"*.haml",
|
||||
"*.slim",
|
||||
"*.coffee",
|
||||
"*.ls",
|
||||
"*.kit",
|
||||
"*.ts"
|
||||
],
|
||||
"history": []
|
||||
},
|
||||
"file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}",
|
||||
"file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}",
|
||||
"autoprefixer": {
|
||||
"browsers": "last 5 versions"
|
||||
},
|
||||
"file-type-pug": "{\"compilers\":[\"pug\"]}",
|
||||
"file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}",
|
||||
"file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}",
|
||||
"file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}",
|
||||
"file-type-markdown": "{\"compilers\":[\"markdown\"]}",
|
||||
"file-type-haml": "{\"compilers\":[\"haml\"]}",
|
||||
"file-type-slim": "{\"compilers\":[\"slim\"]}",
|
||||
"file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}",
|
||||
"file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}",
|
||||
"file-type-kit": "{\"compilers\":[\"kit\"]}",
|
||||
"uglify-js": {
|
||||
"ie8": false,
|
||||
"compress": {
|
||||
"sequences": true,
|
||||
"properties": true,
|
||||
"dead_code": true,
|
||||
"drop_debugger": true,
|
||||
"unsafe": false,
|
||||
"unsafe_comps": false,
|
||||
"unsafe_math": false,
|
||||
"unsafe_proto": false,
|
||||
"unsafe_regexp": false,
|
||||
"conditionals": true,
|
||||
"comparisons": true,
|
||||
"evaluate": true,
|
||||
"booleans": true,
|
||||
"loops": true,
|
||||
"unused": true,
|
||||
"toplevel": false,
|
||||
"top_retain": "",
|
||||
"hoist_funs": true,
|
||||
"hoist_vars": false,
|
||||
"if_return": true,
|
||||
"join_vars": true,
|
||||
"collapse_vars": true,
|
||||
"reduce_vars": true,
|
||||
"warnings": true,
|
||||
"negate_iife": true,
|
||||
"pure_getters": false,
|
||||
"pure_funcs": [],
|
||||
"drop_console": false,
|
||||
"expression": false,
|
||||
"keep_fargs": true,
|
||||
"keep_fnames": false,
|
||||
"passes": 1,
|
||||
"keep_infinity": false,
|
||||
"side_effects": true,
|
||||
"global_defs": []
|
||||
},
|
||||
"output": {
|
||||
"ascii_only": false,
|
||||
"beautify": false,
|
||||
"comments": "",
|
||||
"indent_level": 4,
|
||||
"indent_start": 0,
|
||||
"inline_script": false,
|
||||
"keep_quoted_props": false,
|
||||
"max_line_len": false,
|
||||
"preamble": "",
|
||||
"preserve_line": false,
|
||||
"quote_keys": false,
|
||||
"quote_style": 0,
|
||||
"semicolons": true,
|
||||
"shebang": true,
|
||||
"width": 80
|
||||
}
|
||||
},
|
||||
"cssnext": {
|
||||
"customProperties": true,
|
||||
"applyRule": true,
|
||||
"calc": false,
|
||||
"nesting": true,
|
||||
"customMedia": true,
|
||||
"mediaQueriesRange": true,
|
||||
"customSelectors": true,
|
||||
"attributeCaseInsensitive": true,
|
||||
"colorRebeccapurple": true,
|
||||
"colorHwb": true,
|
||||
"colorGray": true,
|
||||
"colorHexAlpha": true,
|
||||
"colorFunction": true,
|
||||
"fontVariant": true,
|
||||
"filter": true,
|
||||
"initial": true,
|
||||
"rem": true,
|
||||
"pseudoElements": true,
|
||||
"pseudoClassMatches": true,
|
||||
"pseudoClassNot": true,
|
||||
"pseudoClassAnyLink": true,
|
||||
"colorRgba": true,
|
||||
"overflowWrap": true
|
||||
},
|
||||
"file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}",
|
||||
"babel": {
|
||||
"useBabelRc": true,
|
||||
"presets": {
|
||||
"babel-preset-es2015": true
|
||||
},
|
||||
"plugins": {
|
||||
"babel-plugin-syntax-jsx": true,
|
||||
"babel-plugin-transform-react-jsx": true,
|
||||
"babel-plugin-transform-async-to-generator": true,
|
||||
"babel-plugin-transform-class-properties": true,
|
||||
"babel-plugin-transform-object-rest-spread": true
|
||||
}
|
||||
},
|
||||
"file-type-png": "{\"compilers\":[\"png\"]}",
|
||||
"file-type-jpg": "{\"compilers\":[\"jpg\"],\"compiler-jpg\":{\"enabled\":true,\"originalSize\":0,\"newSize\":0}}"
|
||||
}
|
||||
@@ -0,0 +1,473 @@
|
||||
<!-- /*
|
||||
* Template Name: Archiark
|
||||
* Template Author: Untree.co
|
||||
* Tempalte URI: https://untree.co/
|
||||
* License: https://creativecommons.org/licenses/by/3.0/
|
||||
*/ -->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta name="author" content="Untree.co">
|
||||
<link rel="shortcut icon" href="favicon.png">
|
||||
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="bootstrap, bootstrap5" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="fonts/icomoon/style.css">
|
||||
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
|
||||
<link rel="stylesheet" href="css/tiny-slider.css">
|
||||
<link rel="stylesheet" href="css/aos.css">
|
||||
<link rel="stylesheet" href="css/glightbox.min.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Archiark — Free Bootstrap 5 Website Template by Untree.co</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="site-mobile-menu site-navbar-target">
|
||||
<div class="site-mobile-menu-header">
|
||||
<div class="site-mobile-menu-close">
|
||||
<span class="icofont-close js-menu-toggle"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-mobile-menu-body"></div>
|
||||
</div>
|
||||
|
||||
<nav class="site-nav">
|
||||
<div class="container">
|
||||
<div class="site-navigation">
|
||||
<a href="index.html" class="logo m-0 float-start">Archiark<span class="text-primary">.</span> </a>
|
||||
|
||||
<ul class="js-clone-nav d-none d-lg-inline-block text-start site-menu float-start">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li class="has-children active">
|
||||
<a href="projects.html">Projects</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Commercial Building</a></li>
|
||||
<li><a href="#">Cultural Lifestyle</a></li>
|
||||
<li class="has-children">
|
||||
<a href="#">Dropdown</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Sub Menu One</a></li>
|
||||
<li><a href="#">Sub Menu Two</a></li>
|
||||
<li><a href="#">Sub Menu Three</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
|
||||
<a href="#" class="burger ml-auto float-end site-menu-toggle light js-menu-toggle d-inline-block d-lg-none" data-toggle="collapse" data-target="#main-navbar">
|
||||
<span></span>
|
||||
</a>
|
||||
<ul class="site-menu float-end d-none d-md-block">
|
||||
<li><a href="#" class="d-flex align-items-center text-white h2 fw-bold"><span class="icon-phone me-2"></span> <span>+ 2 292 4392 327</span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<div class="hero-2 overlay" style="background-image: url('images/img_3.jpg');">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-5 mx-auto ">
|
||||
<h1 class="mb-5 text-center"><span>Project One</span></h1>
|
||||
|
||||
|
||||
<div class="intro-desc text-left">
|
||||
<div class="line"></div>
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section sec-3">
|
||||
<div class="container">
|
||||
|
||||
<div class="row mb-5 justify-content-between">
|
||||
<div class="col-lg-6 mb-lg-0 mb-4">
|
||||
<img src="images/img_7.jpg" alt="Image" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<div class="heading">Description</div>
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae placeat, unde sequi quas ipsum illo? Commodi accusantium, sit eveniet? Maiores tempora corporis ea nostrum magnam similique optio autem, dolor incidunt?</p>
|
||||
<p>Recusandae quam dicta repellat consequatur, facilis magnam minus unde, asperiores voluptatibus temporibus obcaecati, nihil libero. Maxime consectetur asperiores excepturi quidem deleniti, autem incidunt? Error nisi, eius fugiat expedita quia cupiditate!</p>
|
||||
<p><a href="#" class="btn btn-primary">Visit Website</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 border-left">
|
||||
<span class="text-black-50 d-block">Work year:</span> 2020
|
||||
</div>
|
||||
<div class="col-sm-3 border-left">
|
||||
<span class="text-black-50 d-block">Client:</span> XYZ Inc.
|
||||
</div>
|
||||
<div class="col-sm-3 border-left">
|
||||
<span class="text-black-50 d-block">Started:</span> 25 Jan 2020
|
||||
</div>
|
||||
<div class="col-sm-3 border-left">
|
||||
<span class="text-black-50 d-block">Finished:</span> 02 Dec 2020
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section sec-5">
|
||||
<div class="container">
|
||||
<div class="row mb-5">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="heading">Related Projects</h2>
|
||||
</div>
|
||||
<div class="col-lg-6 ms-auto">
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_8.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_2.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project Two</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_3.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_4.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_5.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project Two</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_6.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sec-4 section bg-light">
|
||||
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="heading mb-5 text-center">Testimonial</h2>
|
||||
</div>
|
||||
<div class="testimonial-slide-center-wrap" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="testimonial-slide-center testimonial-center" id="testimonial-center">
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_2.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_1.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_3.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_4.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_5.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_2.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_3.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_4.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_1.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="site-footer bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-lg-4">
|
||||
<div class="widget">
|
||||
<h3 class="line-top">About</h3>
|
||||
<p class="mb-5">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam. Separated they live.</p>
|
||||
|
||||
</div>
|
||||
<div class="widget">
|
||||
<h3 class="line-top">Connect with us</h3>
|
||||
<ul class="social list-unstyled mb-5">
|
||||
<li><a href="#"><span class="icon-facebook"></span></a></li>
|
||||
<li><a href="#"><span class="icon-twitter"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-dribbble"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="widget">
|
||||
<h3 class="line-top">Navigations</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Work</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Press</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
<li><a href="#">Privacy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center text-center copyright">
|
||||
<div class="col-md-8">
|
||||
<p class="small text-black-50">Copyright ©<script>document.write(new Date().getFullYear());</script>. All Rights Reserved. — Designed with love by <a href="https://untree.co">Untree.co</a> </br>Distributed By <a href="https://themewagon.com/">Themewagon</a><!-- License information: https://untree.co/license/ -->
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Preloader -->
|
||||
<div id="overlayer"></div>
|
||||
<div class="loader">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/tiny-slider.js"></script>
|
||||
<script src="js/aos.js"></script>
|
||||
<script src="js/glightbox.min.js"></script>
|
||||
<script src="js/navbar.js"></script>
|
||||
<script src="js/counter.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,503 @@
|
||||
<!-- /*
|
||||
* Template Name: Archiark
|
||||
* Template Author: Untree.co
|
||||
* Tempalte URI: https://untree.co/
|
||||
* License: https://creativecommons.org/licenses/by/3.0/
|
||||
*/ -->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta name="author" content="Untree.co">
|
||||
<link rel="shortcut icon" href="favicon.png">
|
||||
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="bootstrap, bootstrap5" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="fonts/icomoon/style.css">
|
||||
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
|
||||
<link rel="stylesheet" href="css/tiny-slider.css">
|
||||
<link rel="stylesheet" href="css/aos.css">
|
||||
<link rel="stylesheet" href="css/glightbox.min.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Archiark — Free Bootstrap 5 Website Template by Untree.co</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="site-mobile-menu site-navbar-target">
|
||||
<div class="site-mobile-menu-header">
|
||||
<div class="site-mobile-menu-close">
|
||||
<span class="icofont-close js-menu-toggle"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-mobile-menu-body"></div>
|
||||
</div>
|
||||
|
||||
<nav class="site-nav">
|
||||
<div class="container">
|
||||
<div class="site-navigation">
|
||||
<a href="index.html" class="logo m-0 float-start">Archiark<span class="text-primary">.</span> </a>
|
||||
|
||||
<ul class="js-clone-nav d-none d-lg-inline-block text-start site-menu float-start">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li class="has-children active">
|
||||
<a href="projects.html">Projects</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Commercial Building</a></li>
|
||||
<li><a href="#">Cultural Lifestyle</a></li>
|
||||
<li class="has-children">
|
||||
<a href="#">Dropdown</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="#">Sub Menu One</a></li>
|
||||
<li><a href="#">Sub Menu Two</a></li>
|
||||
<li><a href="#">Sub Menu Three</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
|
||||
<a href="#" class="burger ml-auto float-end site-menu-toggle light js-menu-toggle d-inline-block d-lg-none" data-toggle="collapse" data-target="#main-navbar">
|
||||
<span></span>
|
||||
</a>
|
||||
<ul class="site-menu float-end d-none d-md-block">
|
||||
<li><a href="#" class="d-flex align-items-center text-white h2 fw-bold"><span class="icon-phone me-2"></span> <span>+ 2 292 4392 327</span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero-2 overlay" style="background-image: url('images/img_3.jpg');">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-5 mx-auto ">
|
||||
<h1 class="mb-5 text-center"><span>Our Projects</span></h1>
|
||||
|
||||
|
||||
<div class="intro-desc text-left">
|
||||
<div class="line"></div>
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section sec-5">
|
||||
<div class="container">
|
||||
<div class="row mb-5">
|
||||
|
||||
<div class="col-lg-6 ms-auto">
|
||||
<p>Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_8.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_2.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project Two</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_3.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_4.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_5.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project Two</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="single-portfolio">
|
||||
<a href="project-single.html">
|
||||
<img src="images/img_6.jpg" alt="Image" class="img-fluid">
|
||||
<div class="contents">
|
||||
<h3>Project One</h3>
|
||||
<div class="cat">Construction</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sec-4 section bg-light">
|
||||
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="heading mb-5 text-center">Testimonial</h2>
|
||||
</div>
|
||||
<div class="testimonial-slide-center-wrap" data-aos="fade-up" data-aos-delay="100">
|
||||
|
||||
<div id="testimonial-nav">
|
||||
<span class="prev" data-controls="prev"><span class="icon-chevron-left"></span></span>
|
||||
|
||||
<span class="next" data-controls="next"><span class="icon-chevron-right"></span></span>
|
||||
</div>
|
||||
|
||||
<div class="testimonial-slide-center testimonial-center" id="testimonial-center">
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_2.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_1.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_3.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_4.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_5.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_2.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_3.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_4.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="testimonial-item">
|
||||
<div class="testimonial-item-inner">
|
||||
<div class="testimonial-author mb-5">
|
||||
<img src="images/person_1.jpg" alt="Image" class="img-fluid">
|
||||
<strong class="d-block">James Campbell</strong>
|
||||
<span>CEO, Co-Founder</span>
|
||||
</div>
|
||||
<blockquote>
|
||||
Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam.
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row border-bottom mb-5 pb-5 justify-content-between">
|
||||
<div class="col-lg-4 align-self-center mb-5">
|
||||
<span class="d-block subheading mb-3">We are committed</span>
|
||||
<h2 class="heading mb-4">The road of success is always under construction</h2>
|
||||
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<a href="https://www.youtube.com/watch?v=mwtbEGNABWU" class="video-wrap glightbox">
|
||||
<span class="icon-play"></span>
|
||||
<img src="images/img_4.jpg" alt="Image" class="img-fluid">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-lg-4">
|
||||
|
||||
<div class="d-flex custom-card">
|
||||
<div class="img">
|
||||
<i class="flaticon-compass"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h3 class="h6 fw-bold text-black">We provide best services</h3>
|
||||
<p class="text-black-50">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium.</p>
|
||||
<p>
|
||||
<a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="d-flex custom-card">
|
||||
<div class="img">
|
||||
<i class="flaticon-plan"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h3 class="h6 fw-bold text-black">We provide best services</h3>
|
||||
<p class="text-black-50">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium.</p>
|
||||
<p>
|
||||
<a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="d-flex custom-card">
|
||||
<div class="img">
|
||||
<i class="flaticon-architect"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h3 class="h6 fw-bold text-black">We provide best services</h3>
|
||||
<p class="text-black-50">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium.</p>
|
||||
<p>
|
||||
<a href="#" class="more-2">Learn more <span class="icon-arrow_forward"></span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="site-footer bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-lg-4">
|
||||
<div class="widget">
|
||||
<h3 class="line-top">About</h3>
|
||||
<p class="mb-5">Delectus voluptatum distinctio quos eius excepturi sunt pariatur, aut, doloribus officia ea molestias beatae laudantium, quam odio ipsum veritatis est maiores velit quasi blanditiis et natus accusamus itaque. Veniam quidem debitis odio amet voluptas distinctio dicta placeat! Et pariatur doloremque ea veniam. Separated they live.</p>
|
||||
|
||||
</div>
|
||||
<div class="widget">
|
||||
<h3 class="line-top">Connect with us</h3>
|
||||
<ul class="social list-unstyled mb-5">
|
||||
<li><a href="#"><span class="icon-facebook"></span></a></li>
|
||||
<li><a href="#"><span class="icon-twitter"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-dribbble"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="widget">
|
||||
<h3 class="line-top">Navigations</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Work</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Press</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
<li><a href="#">Privacy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-md-4">
|
||||
<div class="widget">
|
||||
<ul class="links list-unstyled">
|
||||
<li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center text-center copyright">
|
||||
<div class="col-md-8">
|
||||
<br class="small text-black-50">Copyright ©<script>document.write(new Date().getFullYear());</script>. All Rights Reserved. — Designed with love by <a href="https://untree.co">Untree.co</a> </br>Distributed By <a href="https://themewagon.com/" >Themewagon</a> </p><!-- License information: https://untree.co/license/ -->
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Preloader -->
|
||||
<div id="overlayer"></div>
|
||||
<div class="loader">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/tiny-slider.js"></script>
|
||||
<script src="js/aos.js"></script>
|
||||
<script src="js/glightbox.min.js"></script>
|
||||
<script src="js/navbar.js"></script>
|
||||
<script src="js/counter.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.accordion-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: $accordion-button-padding-y $accordion-button-padding-x;
|
||||
@include font-size($font-size-base);
|
||||
color: $accordion-button-color;
|
||||
background-color: $accordion-button-bg;
|
||||
border: $accordion-border-width solid $accordion-border-color;
|
||||
@include border-radius(0);
|
||||
overflow-anchor: none;
|
||||
@include transition($accordion-transition);
|
||||
|
||||
&.collapsed {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
color: $accordion-button-active-color;
|
||||
background-color: $accordion-button-active-bg;
|
||||
|
||||
&::after {
|
||||
background-image: escape-svg($accordion-button-active-icon);
|
||||
transform: $accordion-icon-transform;
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion icon
|
||||
&::after {
|
||||
flex-shrink: 0;
|
||||
width: $accordion-icon-width;
|
||||
height: $accordion-icon-width;
|
||||
margin-left: auto;
|
||||
content: "";
|
||||
background-image: escape-svg($accordion-button-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-size: $accordion-icon-width;
|
||||
@include transition($accordion-icon-transition);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
border-color: $accordion-button-focus-border-color;
|
||||
outline: 0;
|
||||
box-shadow: $accordion-button-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
&:first-of-type {
|
||||
.accordion-button {
|
||||
@include border-top-radius($accordion-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.accordion-button {
|
||||
// Only set a border-radius on the last item if the accordion is collapsed
|
||||
&.collapsed {
|
||||
border-bottom-width: $accordion-border-width;
|
||||
@include border-bottom-radius($accordion-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-collapse {
|
||||
border-bottom-width: $accordion-border-width;
|
||||
@include border-bottom-radius($accordion-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-collapse {
|
||||
border: solid $accordion-border-color;
|
||||
border-width: 0 $accordion-border-width;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
padding: $accordion-body-padding-y $accordion-body-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// Flush accordion items
|
||||
//
|
||||
// Remove borders and border-radius to keep accordion items edge-to-edge.
|
||||
|
||||
.accordion-flush {
|
||||
.accordion-button {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.accordion-collapse {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
&:first-of-type {
|
||||
.accordion-button {
|
||||
border-top-width: 0;
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.accordion-button.collapsed {
|
||||
border-bottom-width: 0;
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.alert {
|
||||
position: relative;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
margin-bottom: $alert-margin-bottom;
|
||||
border: $alert-border-width solid transparent;
|
||||
@include border-radius($alert-border-radius);
|
||||
}
|
||||
|
||||
// Headings for larger alerts
|
||||
.alert-heading {
|
||||
// Specified to prevent conflicts of changing $headings-color
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
}
|
||||
|
||||
|
||||
// Dismissible alerts
|
||||
//
|
||||
// Expand the right padding and account for the close button's positioning.
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: $alert-dismissible-padding-r;
|
||||
|
||||
// Adjust close link position
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: $stretched-link-z-index + 1;
|
||||
padding: $alert-padding-y * 1.25 $alert-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// scss-docs-start alert-modifiers
|
||||
// Generate contextual modifier classes for colorizing the alert.
|
||||
|
||||
@each $state, $value in $theme-colors {
|
||||
$background: shift-color($value, $alert-bg-scale);
|
||||
$border: shift-color($value, $alert-border-scale);
|
||||
$color: shift-color($value, $alert-color-scale);
|
||||
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
|
||||
$color: mix($value, color-contrast($background), abs($alert-color-scale));
|
||||
}
|
||||
.alert-#{$state} {
|
||||
@include alert-variant($background, $border, $color);
|
||||
}
|
||||
}
|
||||
// scss-docs-end alert-modifiers
|
||||
@@ -0,0 +1,29 @@
|
||||
// Base class
|
||||
//
|
||||
// Requires one of the contextual, color modifier classes for `color` and
|
||||
// `background-color`.
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: $badge-padding-y $badge-padding-x;
|
||||
@include font-size($badge-font-size);
|
||||
font-weight: $badge-font-weight;
|
||||
line-height: 1;
|
||||
color: $badge-color;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
@include border-radius($badge-border-radius);
|
||||
@include gradient-bg();
|
||||
|
||||
// Empty badges collapse automatically
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick fix for badges in buttons
|
||||
.btn .badge {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||
margin-bottom: $breadcrumb-margin-bottom;
|
||||
@include font-size($breadcrumb-font-size);
|
||||
list-style: none;
|
||||
background-color: $breadcrumb-bg;
|
||||
@include border-radius($breadcrumb-border-radius);
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item {
|
||||
padding-left: $breadcrumb-item-padding-x;
|
||||
|
||||
&::before {
|
||||
float: left; // Suppress inline spacings and underlining of the separator
|
||||
padding-right: $breadcrumb-item-padding-x;
|
||||
color: $breadcrumb-divider-color;
|
||||
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $breadcrumb-active-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
// Make the div behave like a button
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
vertical-align: middle; // match .btn alignment given font-size hack above
|
||||
|
||||
> .btn {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||
// the borders properly
|
||||
> .btn-check:checked + .btn,
|
||||
> .btn-check:focus + .btn,
|
||||
> .btn:hover,
|
||||
> .btn:focus,
|
||||
> .btn:active,
|
||||
> .btn.active {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
// Prevent double borders when buttons are next to each other
|
||||
> .btn:not(:first-child),
|
||||
> .btn-group:not(:first-child) {
|
||||
margin-left: -$btn-border-width;
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||
> .btn-group:not(:last-child) > .btn {
|
||||
@include border-end-radius(0);
|
||||
}
|
||||
|
||||
// The left radius should be 0 if the button is:
|
||||
// - the "third or more" child
|
||||
// - the second child and the previous element isn't `.btn-check` (making it the first child visually)
|
||||
// - part of a btn-group which isn't the first child
|
||||
> .btn:nth-child(n + 3),
|
||||
> :not(.btn-check) + .btn,
|
||||
> .btn-group:not(:first-child) > .btn {
|
||||
@include border-start-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Sizing
|
||||
//
|
||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||
|
||||
.btn-group-sm > .btn { @extend .btn-sm; }
|
||||
.btn-group-lg > .btn { @extend .btn-lg; }
|
||||
|
||||
|
||||
//
|
||||
// Split button dropdowns
|
||||
//
|
||||
|
||||
.dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x * .75;
|
||||
padding-left: $btn-padding-x * .75;
|
||||
|
||||
&::after,
|
||||
.dropup &::after,
|
||||
.dropend &::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dropstart &::before {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm + .dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x-sm * .75;
|
||||
padding-left: $btn-padding-x-sm * .75;
|
||||
}
|
||||
|
||||
.btn-lg + .dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x-lg * .75;
|
||||
padding-left: $btn-padding-x-lg * .75;
|
||||
}
|
||||
|
||||
|
||||
// The clickable button for toggling the menu
|
||||
// Set the same inset shadow as the :active state
|
||||
.btn-group.show .dropdown-toggle {
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Vertical button groups
|
||||
//
|
||||
|
||||
.btn-group-vertical {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .btn:not(:first-child),
|
||||
> .btn-group:not(:first-child) {
|
||||
margin-top: -$btn-border-width;
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||
> .btn-group:not(:last-child) > .btn {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
> .btn ~ .btn,
|
||||
> .btn-group:not(:first-child) > .btn {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-family: $btn-font-family;
|
||||
font-weight: $btn-font-weight;
|
||||
line-height: $btn-line-height;
|
||||
color: $body-color;
|
||||
text-align: center;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
white-space: $btn-white-space;
|
||||
vertical-align: middle;
|
||||
cursor: if($enable-button-pointers, pointer, null);
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: $btn-border-width solid transparent;
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
|
||||
@include transition($btn-transition);
|
||||
|
||||
&:hover {
|
||||
color: $body-color;
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
}
|
||||
|
||||
.btn-check:focus + &,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: $btn-focus-box-shadow;
|
||||
}
|
||||
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:active,
|
||||
&.active {
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
&:focus {
|
||||
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
fieldset:disabled & {
|
||||
pointer-events: none;
|
||||
opacity: $btn-disabled-opacity;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate buttons
|
||||
//
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value, $value);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-outline-#{$color} {
|
||||
@include button-outline-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Link buttons
|
||||
//
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
font-weight: $font-weight-normal;
|
||||
color: $btn-link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
&:hover {
|
||||
color: $btn-link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: $btn-link-disabled-color;
|
||||
}
|
||||
|
||||
// No need for an active state here
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Button Sizes
|
||||
//
|
||||
|
||||
.btn-lg {
|
||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
|
||||
}
|
||||
@@ -0,0 +1,215 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
||||
height: $card-height;
|
||||
word-wrap: break-word;
|
||||
background-color: $card-bg;
|
||||
background-clip: border-box;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
|
||||
> hr {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .list-group {
|
||||
border-top: inherit;
|
||||
border-bottom: inherit;
|
||||
|
||||
&:first-child {
|
||||
border-top-width: 0;
|
||||
@include border-top-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 0;
|
||||
@include border-bottom-radius($card-inner-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Due to specificity of the above selector (`.card > .list-group`), we must
|
||||
// use a child selector here to prevent double borders.
|
||||
> .card-header + .list-group,
|
||||
> .list-group + .card-footer {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
||||
// as much space as possible, ensuring footers are aligned to the bottom.
|
||||
flex: 1 1 auto;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
color: $card-color;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: $card-title-spacer-y;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: -$card-title-spacer-y / 2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
+ .card-link {
|
||||
margin-left: $card-spacer-x #{"/* rtl:ignore */"};
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Optional textual caps
|
||||
//
|
||||
|
||||
.card-header {
|
||||
padding: $card-cap-padding-y $card-cap-padding-x;
|
||||
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
||||
color: $card-cap-color;
|
||||
background-color: $card-cap-bg;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: $card-cap-padding-y $card-cap-padding-x;
|
||||
color: $card-cap-color;
|
||||
background-color: $card-cap-bg;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Header navs
|
||||
//
|
||||
|
||||
.card-header-tabs {
|
||||
margin-right: -$card-cap-padding-x / 2;
|
||||
margin-bottom: -$card-cap-padding-y;
|
||||
margin-left: -$card-cap-padding-x / 2;
|
||||
border-bottom: 0;
|
||||
|
||||
@if $nav-tabs-link-active-bg != $card-bg {
|
||||
.nav-link.active {
|
||||
background-color: $card-bg;
|
||||
border-bottom-color: $card-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
margin-right: -$card-cap-padding-x / 2;
|
||||
margin-left: -$card-cap-padding-x / 2;
|
||||
}
|
||||
|
||||
// Card image
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: $card-img-overlay-padding;
|
||||
@include border-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
.card-img,
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||
}
|
||||
|
||||
.card-img,
|
||||
.card-img-top {
|
||||
@include border-top-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
.card-img,
|
||||
.card-img-bottom {
|
||||
@include border-bottom-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card groups
|
||||
//
|
||||
|
||||
.card-group {
|
||||
// The child selector allows nested `.card` within `.card-group`
|
||||
// to display properly.
|
||||
> .card {
|
||||
margin-bottom: $card-group-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
// The child selector allows nested `.card` within `.card-group`
|
||||
// to display properly.
|
||||
> .card {
|
||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
||||
flex: 1 0 0%;
|
||||
margin-bottom: 0;
|
||||
|
||||
+ .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Handle rounded corners
|
||||
@if $enable-rounded {
|
||||
&:not(:last-child) {
|
||||
@include border-end-radius(0);
|
||||
|
||||
.card-img-top,
|
||||
.card-header {
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.card-img-bottom,
|
||||
.card-footer {
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
@include border-start-radius(0);
|
||||
|
||||
.card-img-top,
|
||||
.card-header {
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.card-img-bottom,
|
||||
.card-footer {
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
// Notes on the classes:
|
||||
//
|
||||
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
||||
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
|
||||
// we're preventing all actions instead
|
||||
// 2. The .carousel-item-start and .carousel-item-end is used to indicate where
|
||||
// the active slide is heading.
|
||||
// 3. .active.carousel-item is the current slide.
|
||||
// 4. .active.carousel-item-start and .active.carousel-item-end is the current
|
||||
// slide in its in-transition state. Only one of these occurs at a time.
|
||||
// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
|
||||
// is the upcoming slide in transition.
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel.pointer-event {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.carousel-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
display: none;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-right: -100%;
|
||||
backface-visibility: hidden;
|
||||
@include transition($carousel-transition);
|
||||
}
|
||||
|
||||
.carousel-item.active,
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
.carousel-item-next:not(.carousel-item-start),
|
||||
.active.carousel-item-end {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.carousel-item-prev:not(.carousel-item-end),
|
||||
.active.carousel-item-start {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
/* rtl:end:ignore */
|
||||
|
||||
|
||||
//
|
||||
// Alternate transitions
|
||||
//
|
||||
|
||||
.carousel-fade {
|
||||
.carousel-item {
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.carousel-item.active,
|
||||
.carousel-item-next.carousel-item-start,
|
||||
.carousel-item-prev.carousel-item-end {
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.active.carousel-item-start,
|
||||
.active.carousel-item-end {
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
@include transition(opacity 0s $carousel-transition-duration);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Left/right controls for nav
|
||||
//
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
// Use flex for alignment (1-3)
|
||||
display: flex; // 1. allow flex styles
|
||||
align-items: center; // 2. vertically center contents
|
||||
justify-content: center; // 3. horizontally center contents
|
||||
width: $carousel-control-width;
|
||||
color: $carousel-control-color;
|
||||
text-align: center;
|
||||
opacity: $carousel-control-opacity;
|
||||
@include transition($carousel-control-transition);
|
||||
|
||||
// Hover/focus state
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $carousel-control-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
opacity: $carousel-control-hover-opacity;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
left: 0;
|
||||
background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
|
||||
}
|
||||
.carousel-control-next {
|
||||
right: 0;
|
||||
background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
|
||||
}
|
||||
|
||||
// Icons for within
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
display: inline-block;
|
||||
width: $carousel-control-icon-width;
|
||||
height: $carousel-control-icon-width;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* rtl:options: {
|
||||
"autoRename": true,
|
||||
"stringMap":[ {
|
||||
"name" : "prev-next",
|
||||
"search" : "prev",
|
||||
"replace" : "next"
|
||||
} ]
|
||||
} */
|
||||
.carousel-control-prev-icon {
|
||||
background-image: escape-svg($carousel-control-prev-icon-bg);
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
background-image: escape-svg($carousel-control-next-icon-bg);
|
||||
}
|
||||
|
||||
// Optional indicator pips
|
||||
//
|
||||
// Add an ordered list with the following class and add a list item for each
|
||||
// slide your carousel holds.
|
||||
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 0; // override <ol> default
|
||||
// Use the .carousel-control's width as margin so we don't overlay those
|
||||
margin-right: $carousel-control-width;
|
||||
margin-left: $carousel-control-width;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
box-sizing: content-box;
|
||||
flex: 0 1 auto;
|
||||
width: $carousel-indicator-width;
|
||||
height: $carousel-indicator-height;
|
||||
margin-right: $carousel-indicator-spacer;
|
||||
margin-left: $carousel-indicator-spacer;
|
||||
text-indent: -999px;
|
||||
cursor: pointer;
|
||||
background-color: $carousel-indicator-active-bg;
|
||||
background-clip: padding-box;
|
||||
// Use transparent borders to increase the hit area by 10px on top and bottom.
|
||||
border-top: $carousel-indicator-hit-area-height solid transparent;
|
||||
border-bottom: $carousel-indicator-hit-area-height solid transparent;
|
||||
opacity: $carousel-indicator-opacity;
|
||||
@include transition($carousel-indicator-transition);
|
||||
}
|
||||
|
||||
.active {
|
||||
opacity: $carousel-indicator-active-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional captions
|
||||
//
|
||||
//
|
||||
|
||||
.carousel-caption {
|
||||
position: absolute;
|
||||
right: (100% - $carousel-caption-width) / 2;
|
||||
bottom: $carousel-caption-spacer;
|
||||
left: (100% - $carousel-caption-width) / 2;
|
||||
padding-top: $carousel-caption-padding-y;
|
||||
padding-bottom: $carousel-caption-padding-y;
|
||||
color: $carousel-caption-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Dark mode carousel
|
||||
|
||||
.carousel-dark {
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
filter: $carousel-dark-control-icon-filter;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
background-color: $carousel-dark-indicator-active-bg;
|
||||
}
|
||||
|
||||
.carousel-caption {
|
||||
color: $carousel-dark-caption-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
// transparent background and border properties included for button version.
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
.btn-close {
|
||||
box-sizing: content-box;
|
||||
width: $btn-close-width;
|
||||
height: $btn-close-height;
|
||||
padding: $btn-close-padding-y $btn-close-padding-x;
|
||||
color: $btn-close-color;
|
||||
background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
|
||||
border: 0; // for button elements
|
||||
@include border-radius();
|
||||
opacity: $btn-close-opacity;
|
||||
|
||||
// Override <a>'s hover style
|
||||
&:hover {
|
||||
color: $btn-close-color;
|
||||
text-decoration: none;
|
||||
opacity: $btn-close-hover-opacity;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: $btn-close-focus-shadow;
|
||||
opacity: $btn-close-focus-opacity;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
opacity: $btn-close-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close-white {
|
||||
filter: $btn-close-white-filter;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
// Container widths
|
||||
//
|
||||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
// Single container class with breakpoint max-widths
|
||||
.container,
|
||||
// 100% wide container at all breakpoints
|
||||
.container-fluid {
|
||||
@include make-container();
|
||||
}
|
||||
|
||||
// Responsive containers that are 100% wide until a breakpoint
|
||||
@each $breakpoint, $container-max-width in $container-max-widths {
|
||||
.container-#{$breakpoint} {
|
||||
@extend .container-fluid;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
||||
%responsive-container-#{$breakpoint} {
|
||||
max-width: $container-max-width;
|
||||
}
|
||||
|
||||
// Extend each breakpoint which is smaller or equal to the current breakpoint
|
||||
$extend-breakpoint: true;
|
||||
|
||||
@each $name, $width in $grid-breakpoints {
|
||||
@if ($extend-breakpoint) {
|
||||
.container#{breakpoint-infix($name, $grid-breakpoints)} {
|
||||
@extend %responsive-container-#{$breakpoint};
|
||||
}
|
||||
|
||||
// Once the current breakpoint is reached, stop extending
|
||||
@if ($breakpoint == $name) {
|
||||
$extend-breakpoint: false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
// The dropdown wrapper (`<div>`)
|
||||
.dropup,
|
||||
.dropend,
|
||||
.dropdown,
|
||||
.dropstart {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
white-space: nowrap;
|
||||
|
||||
// Generate the caret automatically
|
||||
@include caret();
|
||||
}
|
||||
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: $zindex-dropdown;
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
min-width: $dropdown-min-width;
|
||||
padding: $dropdown-padding-y $dropdown-padding-x;
|
||||
margin: $dropdown-spacer 0 0; // override default ul
|
||||
@include font-size($dropdown-font-size);
|
||||
color: $dropdown-color;
|
||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
list-style: none;
|
||||
background-color: $dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($dropdown-border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// Reset positioning when positioned with Popper
|
||||
&[style] {
|
||||
right: auto !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start responsive-breakpoints
|
||||
// We deliberately hardcode the `bs-` prefix because we check
|
||||
// this custom property in JS to determine Popper's positioning
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.dropdown-menu#{$infix}-start {
|
||||
--bs-position: start;
|
||||
right: auto #{"/* rtl:ignore */"};
|
||||
left: 0 #{"/* rtl:ignore */"};
|
||||
}
|
||||
|
||||
.dropdown-menu#{$infix}-end {
|
||||
--bs-position: end;
|
||||
right: 0 #{"/* rtl:ignore */"};
|
||||
left: auto #{"/* rtl:ignore */"};
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end responsive-breakpoints
|
||||
|
||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||
// Just add .dropup after the standard .dropdown class and you're set.
|
||||
.dropup {
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: $dropdown-spacer;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(up);
|
||||
}
|
||||
}
|
||||
|
||||
.dropend {
|
||||
.dropdown-menu {
|
||||
top: 0;
|
||||
right: auto;
|
||||
left: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: $dropdown-spacer;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(end);
|
||||
&::after {
|
||||
vertical-align: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropstart {
|
||||
.dropdown-menu {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
left: auto;
|
||||
margin-top: 0;
|
||||
margin-right: $dropdown-spacer;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(start);
|
||||
&::before {
|
||||
vertical-align: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
.dropdown-divider {
|
||||
height: 0;
|
||||
margin: $dropdown-divider-margin-y 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid $dropdown-divider-bg;
|
||||
}
|
||||
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
//
|
||||
// `<button>`-specific styles are denoted with `// For <button>s`
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
width: 100%; // For `<button>`s
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
clear: both;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $dropdown-link-color;
|
||||
text-align: inherit; // For `<button>`s
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background-color: transparent; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
|
||||
// Prevent dropdown overflow if there's no padding
|
||||
// See https://github.com/twbs/bootstrap/pull/27703
|
||||
@if $dropdown-padding-y == 0 {
|
||||
&:first-child {
|
||||
@include border-top-radius($dropdown-inner-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($dropdown-inner-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
@include gradient-bg($dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $dropdown-link-active-color;
|
||||
text-decoration: none;
|
||||
@include gradient-bg($dropdown-link-active-bg);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $dropdown-link-disabled-color;
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none, null);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: $dropdown-header-padding;
|
||||
margin-bottom: 0; // for use with heading elements
|
||||
@include font-size($font-size-sm);
|
||||
color: $dropdown-header-color;
|
||||
white-space: nowrap; // as with > li > a
|
||||
}
|
||||
|
||||
// Dropdown text
|
||||
.dropdown-item-text {
|
||||
display: block;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
color: $dropdown-link-color;
|
||||
}
|
||||
|
||||
// Dark dropdowns
|
||||
.dropdown-menu-dark {
|
||||
color: $dropdown-dark-color;
|
||||
background-color: $dropdown-dark-bg;
|
||||
border-color: $dropdown-dark-border-color;
|
||||
@include box-shadow($dropdown-dark-box-shadow);
|
||||
|
||||
.dropdown-item {
|
||||
color: $dropdown-dark-link-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $dropdown-dark-link-hover-color;
|
||||
@include gradient-bg($dropdown-dark-link-hover-bg);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $dropdown-dark-link-active-color;
|
||||
@include gradient-bg($dropdown-dark-link-active-bg);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $dropdown-dark-link-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-color: $dropdown-dark-divider-bg;
|
||||
}
|
||||
|
||||
.dropdown-item-text {
|
||||
color: $dropdown-dark-link-color;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
color: $dropdown-dark-header-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@import "forms/labels";
|
||||
@import "forms/form-text";
|
||||
@import "forms/form-control";
|
||||
@import "forms/form-select";
|
||||
@import "forms/form-check";
|
||||
@import "forms/form-range";
|
||||
@import "forms/floating-labels";
|
||||
@import "forms/input-group";
|
||||
@import "forms/validation";
|
||||
@@ -0,0 +1,205 @@
|
||||
// Bootstrap functions
|
||||
//
|
||||
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
|
||||
|
||||
// Ascending
|
||||
// Used to evaluate Sass maps like our grid breakpoints.
|
||||
@mixin _assert-ascending($map, $map-name) {
|
||||
$prev-key: null;
|
||||
$prev-num: null;
|
||||
@each $key, $num in $map {
|
||||
@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
|
||||
// Do nothing
|
||||
} @else if not comparable($prev-num, $num) {
|
||||
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
} @else if $prev-num >= $num {
|
||||
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
}
|
||||
$prev-key: $key;
|
||||
$prev-num: $num;
|
||||
}
|
||||
}
|
||||
|
||||
// Starts at zero
|
||||
// Used to ensure the min-width of the lowest breakpoint starts at 0.
|
||||
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
|
||||
@if length($map) > 0 {
|
||||
$values: map-values($map);
|
||||
$first-value: nth($values, 1);
|
||||
@if $first-value != 0 {
|
||||
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Internal Bootstrap function to turn maps into its negative variant.
|
||||
// It prefixes the keys with `n` and makes the value negative.
|
||||
@function negativify-map($map) {
|
||||
$result: ();
|
||||
@each $key, $value in $map {
|
||||
@if $key != 0 {
|
||||
$result: map-merge($result, ("n" + $key: (-$value)));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// Get multiple keys from a sass map
|
||||
@function map-get-multiple($map, $values) {
|
||||
$result: ();
|
||||
@each $key, $value in $map {
|
||||
@if (index($values, $key) != null) {
|
||||
$result: map-merge($result, ($key: $value));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// Replace `$search` with `$replace` in `$string`
|
||||
// Used on our SVG icon backgrounds for custom forms.
|
||||
//
|
||||
// @author Hugo Giraudel
|
||||
// @param {String} $string - Initial string
|
||||
// @param {String} $search - Substring to replace
|
||||
// @param {String} $replace ('') - New value
|
||||
// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
// See https://codepen.io/kevinweber/pen/dXWoRw
|
||||
//
|
||||
// Requires the use of quotes around data URIs.
|
||||
|
||||
@function escape-svg($string) {
|
||||
@if str-index($string, "data:image/svg+xml") {
|
||||
@each $char, $encoded in $escaped-characters {
|
||||
// Do not escape the url brackets
|
||||
@if str-index($string, "url(") == 1 {
|
||||
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
|
||||
} @else {
|
||||
$string: str-replace($string, $char, $encoded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
// Color contrast
|
||||
// See https://github.com/twbs/bootstrap/pull/30168
|
||||
|
||||
// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
|
||||
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
|
||||
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
|
||||
|
||||
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
|
||||
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
|
||||
$max-ratio: 0;
|
||||
$max-ratio-color: null;
|
||||
|
||||
@each $color in $foregrounds {
|
||||
$contrast-ratio: contrast-ratio($background, $color);
|
||||
@if $contrast-ratio > $min-contrast-ratio {
|
||||
@return $color;
|
||||
} @else if $contrast-ratio > $max-ratio {
|
||||
$max-ratio: $contrast-ratio;
|
||||
$max-ratio-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
|
||||
|
||||
@return $max-ratio-color;
|
||||
}
|
||||
|
||||
@function contrast-ratio($background, $foreground: $color-contrast-light) {
|
||||
$l1: luminance($background);
|
||||
$l2: luminance(opaque($background, $foreground));
|
||||
|
||||
@return if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
|
||||
}
|
||||
|
||||
// Return WCAG2.0 relative luminance
|
||||
// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
|
||||
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
||||
@function luminance($color) {
|
||||
$rgb: (
|
||||
"r": red($color),
|
||||
"g": green($color),
|
||||
"b": blue($color)
|
||||
);
|
||||
|
||||
@each $name, $value in $rgb {
|
||||
$value: if($value / 255 < .03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
|
||||
$rgb: map-merge($rgb, ($name: $value));
|
||||
}
|
||||
|
||||
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
|
||||
}
|
||||
|
||||
// Return opaque color
|
||||
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
||||
@function opaque($background, $foreground) {
|
||||
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
|
||||
}
|
||||
|
||||
// scss-docs-start color-functions
|
||||
// Tint a color: mix a color with white
|
||||
@function tint-color($color, $weight) {
|
||||
@return mix(white, $color, $weight);
|
||||
}
|
||||
|
||||
// Shade a color: mix a color with black
|
||||
@function shade-color($color, $weight) {
|
||||
@return mix(black, $color, $weight);
|
||||
}
|
||||
|
||||
// Shade the color if the weight is positive, else tint it
|
||||
@function shift-color($color, $weight) {
|
||||
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
|
||||
}
|
||||
// scss-docs-end color-functions
|
||||
|
||||
// Return valid calc
|
||||
@function add($value1, $value2, $return-calc: true) {
|
||||
@if $value1 == null {
|
||||
@return $value2;
|
||||
}
|
||||
|
||||
@if $value2 == null {
|
||||
@return $value1;
|
||||
}
|
||||
|
||||
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
|
||||
@return $value1 + $value2;
|
||||
}
|
||||
|
||||
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
|
||||
}
|
||||
|
||||
@function subtract($value1, $value2, $return-calc: true) {
|
||||
@if $value1 == null and $value2 == null {
|
||||
@return null;
|
||||
}
|
||||
|
||||
@if $value1 == null {
|
||||
@return -$value2;
|
||||
}
|
||||
|
||||
@if $value2 == null {
|
||||
@return $value1;
|
||||
}
|
||||
|
||||
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
|
||||
@return $value1 - $value2;
|
||||
}
|
||||
|
||||
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
// Row
|
||||
//
|
||||
// Rows contain your columns.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.row {
|
||||
@include make-row();
|
||||
|
||||
> * {
|
||||
@include make-col-ready();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
||||
@if $enable-grid-classes {
|
||||
@include make-grid-columns();
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@import "helpers/clearfix";
|
||||
@import "helpers/colored-links";
|
||||
@import "helpers/ratio";
|
||||
@import "helpers/position";
|
||||
@import "helpers/visually-hidden";
|
||||
@import "helpers/stretched-link";
|
||||
@import "helpers/text-truncation";
|
||||
@@ -0,0 +1,42 @@
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
//
|
||||
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
||||
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
|
||||
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
|
||||
// which weren't expecting the images within themselves to be involuntarily resized.
|
||||
// See also https://github.com/twbs/bootstrap/issues/18178
|
||||
.img-fluid {
|
||||
@include img-fluid();
|
||||
}
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
.img-thumbnail {
|
||||
padding: $thumbnail-padding;
|
||||
background-color: $thumbnail-bg;
|
||||
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||
@include border-radius($thumbnail-border-radius);
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
@include img-fluid();
|
||||
}
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
.figure {
|
||||
// Ensures the caption's text aligns with the image.
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.figure-img {
|
||||
margin-bottom: $spacer / 2;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
@include font-size($figure-caption-font-size);
|
||||
color: $figure-caption-color;
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
// Base class
|
||||
//
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
|
||||
.list-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// No need to set list-style: none; since .list-group-item is block level
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
margin-bottom: 0;
|
||||
@include border-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
|
||||
// Interactive list items
|
||||
//
|
||||
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
||||
// list items. Includes an extra `.active` modifier class for selected items.
|
||||
|
||||
.list-group-item-action {
|
||||
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
||||
color: $list-group-action-color;
|
||||
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
||||
color: $list-group-action-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $list-group-hover-bg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $list-group-action-active-color;
|
||||
background-color: $list-group-action-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Individual list items
|
||||
//
|
||||
// Use on `li`s or `div`s within the `.list-group` parent.
|
||||
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
||||
color: $list-group-color;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
background-color: $list-group-bg;
|
||||
border: $list-group-border-width solid $list-group-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius(inherit);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius(inherit);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $list-group-disabled-color;
|
||||
pointer-events: none;
|
||||
background-color: $list-group-disabled-bg;
|
||||
}
|
||||
|
||||
// Include both here for `<a>`s and `<button>`s
|
||||
&.active {
|
||||
z-index: 2; // Place active items above their siblings for proper border styling
|
||||
color: $list-group-active-color;
|
||||
background-color: $list-group-active-bg;
|
||||
border-color: $list-group-active-border-color;
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top-width: 0;
|
||||
|
||||
&.active {
|
||||
margin-top: -$list-group-border-width;
|
||||
border-top-width: $list-group-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Horizontal
|
||||
//
|
||||
// Change the layout of list group items from vertical (default) to horizontal.
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.list-group-horizontal#{$infix} {
|
||||
flex-direction: row;
|
||||
|
||||
> .list-group-item {
|
||||
&:first-child {
|
||||
@include border-bottom-start-radius($list-group-border-radius);
|
||||
@include border-top-end-radius(0);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-top-end-radius($list-group-border-radius);
|
||||
@include border-bottom-start-radius(0);
|
||||
}
|
||||
|
||||
&.active {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
+ .list-group-item {
|
||||
border-top-width: $list-group-border-width;
|
||||
border-left-width: 0;
|
||||
|
||||
&.active {
|
||||
margin-left: -$list-group-border-width;
|
||||
border-left-width: $list-group-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush list items
|
||||
//
|
||||
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
||||
// useful within other components (e.g., cards).
|
||||
|
||||
.list-group-flush {
|
||||
@include border-radius(0);
|
||||
|
||||
> .list-group-item {
|
||||
border-width: 0 0 $list-group-border-width;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// scss-docs-start list-group-modifiers
|
||||
// List group contextual variants
|
||||
//
|
||||
// Add modifier classes to change text and background color on individual items.
|
||||
// Organizationally, this must come after the `:hover` states.
|
||||
|
||||
@each $state, $value in $theme-colors {
|
||||
$background: shift-color($value, $list-group-item-bg-scale);
|
||||
$color: shift-color($value, $list-group-item-color-scale);
|
||||
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
|
||||
$color: mix($value, color-contrast($background), abs($alert-color-scale));
|
||||
}
|
||||
|
||||
@include list-group-item-variant($state, $background, $color);
|
||||
}
|
||||
// scss-docs-end list-group-modifiers
|
||||
@@ -0,0 +1,41 @@
|
||||
// Toggles
|
||||
//
|
||||
// Used in conjunction with global variables to enable certain theme features.
|
||||
|
||||
// Vendor
|
||||
@import "vendor/rfs";
|
||||
|
||||
// Deprecate
|
||||
@import "mixins/deprecate";
|
||||
|
||||
// Helpers
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/image";
|
||||
@import "mixins/resize";
|
||||
@import "mixins/visually-hidden";
|
||||
@import "mixins/reset-text";
|
||||
@import "mixins/text-truncate";
|
||||
|
||||
// Utilities
|
||||
@import "mixins/utilities";
|
||||
|
||||
// Components
|
||||
@import "mixins/alert";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/caret";
|
||||
@import "mixins/pagination";
|
||||
@import "mixins/lists";
|
||||
@import "mixins/list-group";
|
||||
@import "mixins/forms";
|
||||
@import "mixins/table-variants";
|
||||
|
||||
// Skins
|
||||
@import "mixins/border-radius";
|
||||
@import "mixins/box-shadow";
|
||||
@import "mixins/gradients";
|
||||
@import "mixins/transition";
|
||||
|
||||
// Layout
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/container";
|
||||
@import "mixins/grid";
|
||||
@@ -0,0 +1,235 @@
|
||||
// .modal-open - body class for killing the scroll
|
||||
// .modal - container to scroll within
|
||||
// .modal-dialog - positioning shell for the actual modal
|
||||
// .modal-content - actual modal w/ bg and corners and stuff
|
||||
|
||||
|
||||
.modal-open {
|
||||
// Kill the scroll on the body
|
||||
overflow: hidden;
|
||||
|
||||
.modal {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Container that the modal scrolls within
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||
// https://github.com/twbs/bootstrap/pull/10951.
|
||||
outline: 0;
|
||||
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
|
||||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
||||
// See also https://github.com/twbs/bootstrap/issues/17695
|
||||
}
|
||||
|
||||
// Shell div to position the modal with bottom padding
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: $modal-dialog-margin;
|
||||
// allow clicks to pass through for custom click handling to close modal
|
||||
pointer-events: none;
|
||||
|
||||
// When fading in the modal, animate it to slide down
|
||||
.modal.fade & {
|
||||
@include transition($modal-transition);
|
||||
transform: $modal-fade-transform;
|
||||
}
|
||||
.modal.show & {
|
||||
transform: $modal-show-transform;
|
||||
}
|
||||
|
||||
// When trying to close, animate focus to scale
|
||||
.modal.modal-static & {
|
||||
transform: $modal-scale-transform;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog-scrollable {
|
||||
height: subtract(100%, $modal-dialog-margin * 2);
|
||||
|
||||
.modal-content {
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog-centered {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: subtract(100%, $modal-dialog-margin * 2);
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
|
||||
// counteract the pointer-events: none; in the .modal-dialog
|
||||
color: $modal-content-color;
|
||||
pointer-events: auto;
|
||||
background-color: $modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: $modal-content-border-width solid $modal-content-border-color;
|
||||
@include border-radius($modal-content-border-radius);
|
||||
@include box-shadow($modal-content-box-shadow-xs);
|
||||
// Remove focus outline from opened modal
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Modal background
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: $modal-backdrop-bg;
|
||||
|
||||
// Fade for backdrop
|
||||
&.fade { opacity: 0; }
|
||||
&.show { opacity: $modal-backdrop-opacity; }
|
||||
}
|
||||
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
||||
padding: $modal-header-padding;
|
||||
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
||||
@include border-top-radius($modal-content-inner-border-radius);
|
||||
|
||||
.btn-close {
|
||||
padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
|
||||
margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Title text within header
|
||||
.modal-title {
|
||||
margin-bottom: 0;
|
||||
line-height: $modal-title-line-height;
|
||||
}
|
||||
|
||||
// Modal body
|
||||
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
||||
.modal-body {
|
||||
position: relative;
|
||||
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
||||
// when there should be a fixed height on `.modal-dialog`.
|
||||
flex: 1 1 auto;
|
||||
padding: $modal-inner-padding;
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
align-items: center; // vertically center
|
||||
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
||||
padding: $modal-inner-padding - $modal-footer-margin-between / 2;
|
||||
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
||||
@include border-bottom-radius($modal-content-inner-border-radius);
|
||||
|
||||
// Place margin between footer elements
|
||||
// This solution is far from ideal because of the universal selector usage,
|
||||
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
|
||||
> * {
|
||||
margin: $modal-footer-margin-between / 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
.modal-scrollbar-measure {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@include media-breakpoint-up(sm) {
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
max-width: $modal-md;
|
||||
margin: $modal-dialog-margin-y-sm-up auto;
|
||||
}
|
||||
|
||||
.modal-dialog-scrollable {
|
||||
height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
||||
}
|
||||
|
||||
.modal-dialog-centered {
|
||||
min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include box-shadow($modal-content-box-shadow-sm-up);
|
||||
}
|
||||
|
||||
.modal-sm { max-width: $modal-sm; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.modal-lg,
|
||||
.modal-xl {
|
||||
max-width: $modal-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.modal-xl { max-width: $modal-xl; }
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$postfix: if($infix != "", $infix + "-down", "");
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.modal-fullscreen#{$postfix} {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
||||
.modal-content {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
// Base class
|
||||
//
|
||||
// Kickstart any navigation component with a set of style resets. Works with
|
||||
// `<nav>`s, `<ul>`s or `<ol>`s.
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||
@include font-size($nav-link-font-size);
|
||||
font-weight: $nav-link-font-weight;
|
||||
color: $nav-link-color;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
@include transition($nav-link-transition);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $nav-link-hover-color;
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
}
|
||||
|
||||
// Disabled state lightens text
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Tabs
|
||||
//
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||
|
||||
.nav-link {
|
||||
margin-bottom: -$nav-tabs-border-width;
|
||||
border: $nav-tabs-border-width solid transparent;
|
||||
@include border-top-radius($nav-tabs-border-radius);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $nav-tabs-link-hover-border-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: $nav-tabs-link-active-color;
|
||||
background-color: $nav-tabs-link-active-bg;
|
||||
border-color: $nav-tabs-link-active-border-color;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
// Make dropdown border overlap tab border
|
||||
margin-top: -$nav-tabs-border-width;
|
||||
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Pills
|
||||
//
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
@include border-radius($nav-pills-border-radius);
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: $nav-pills-link-active-color;
|
||||
@include gradient-bg($nav-pills-link-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Justified variants
|
||||
//
|
||||
|
||||
.nav-fill {
|
||||
> .nav-link,
|
||||
.nav-item {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-justified {
|
||||
> .nav-link,
|
||||
.nav-item {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tabbable tabs
|
||||
//
|
||||
// Hide tabbable panes to start, show them when `.active`
|
||||
|
||||
.tab-content {
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
> .active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
// Contents
|
||||
//
|
||||
// Navbar
|
||||
// Navbar brand
|
||||
// Navbar nav
|
||||
// Navbar text
|
||||
// Responsive navbar
|
||||
// Navbar position
|
||||
// Navbar themes
|
||||
|
||||
|
||||
// Navbar
|
||||
//
|
||||
// Provide a static navbar from which we expand to create full-width, fixed, and
|
||||
// other navbar variations.
|
||||
|
||||
.navbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
||||
align-items: center;
|
||||
justify-content: space-between; // space out brand from logo
|
||||
padding-top: $navbar-padding-y;
|
||||
padding-right: $navbar-padding-x; // default: null
|
||||
padding-bottom: $navbar-padding-y;
|
||||
padding-left: $navbar-padding-x; // default: null
|
||||
@include gradient-bg();
|
||||
|
||||
// Because flex properties aren't inherited, we need to redeclare these first
|
||||
// few properties so that content nested within behave properly.
|
||||
// The `flex-wrap` property is inherited to simplify the expanded navbars
|
||||
%container-flex-properties {
|
||||
display: flex;
|
||||
flex-wrap: inherit;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
> .container,
|
||||
> .container-fluid {
|
||||
@extend %container-flex-properties;
|
||||
}
|
||||
|
||||
@each $breakpoint, $container-max-width in $container-max-widths {
|
||||
> .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
|
||||
@extend %container-flex-properties;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar brand
|
||||
//
|
||||
// Used for brand, project, or site names.
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: $navbar-brand-padding-y;
|
||||
padding-bottom: $navbar-brand-padding-y;
|
||||
margin-right: $navbar-brand-margin-end;
|
||||
@include font-size($navbar-brand-font-size);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar nav
|
||||
//
|
||||
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar text
|
||||
//
|
||||
//
|
||||
|
||||
.navbar-text {
|
||||
padding-top: $nav-link-padding-y;
|
||||
padding-bottom: $nav-link-padding-y;
|
||||
}
|
||||
|
||||
|
||||
// Responsive navbar
|
||||
//
|
||||
// Custom styles for responsive collapsing and toggling of navbar contents.
|
||||
// Powered by the collapse Bootstrap JavaScript plugin.
|
||||
|
||||
// When collapsed, prevent the toggleable navbar contents from appearing in
|
||||
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
|
||||
// on the `.navbar` parent.
|
||||
.navbar-collapse {
|
||||
// For always expanded or extra full navbars, ensure content aligns itself
|
||||
// properly vertically. Can be easily overridden with flex utilities.
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Button for toggling the navbar when in its collapsed state
|
||||
.navbar-toggler {
|
||||
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
||||
@include font-size($navbar-toggler-font-size);
|
||||
line-height: 1;
|
||||
background-color: transparent; // remove default button style
|
||||
border: $border-width solid transparent; // remove default button style
|
||||
@include border-radius($navbar-toggler-border-radius);
|
||||
@include transition($navbar-toggler-transition);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 $navbar-toggler-focus-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Keep as a separate element so folks can easily override it with another icon
|
||||
// or image file as needed.
|
||||
.navbar-toggler-icon {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||
// where your navbar collapses.
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
// stylelint-disable-next-line scss/selector-no-union-class-name
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-up($next) {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-right: $navbar-nav-link-padding-x;
|
||||
padding-left: $navbar-nav-link-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
display: flex !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar themes
|
||||
//
|
||||
// Styles for switching between navbars with light or dark background.
|
||||
|
||||
// Dark links against a light background
|
||||
.navbar-light {
|
||||
.navbar-brand {
|
||||
color: $navbar-light-brand-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-light-brand-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-light-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.nav-link.active {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $navbar-light-color;
|
||||
border-color: $navbar-light-toggler-border-color;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: escape-svg($navbar-light-toggler-icon-bg);
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-light-color;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// White links against a dark background
|
||||
.navbar-dark {
|
||||
.navbar-brand {
|
||||
color: $navbar-dark-brand-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-dark-brand-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-dark-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.nav-link.active {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $navbar-dark-color;
|
||||
border-color: $navbar-dark-toggler-border-color;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: escape-svg($navbar-dark-toggler-icon-bg);
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-dark-color;
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.pagination {
|
||||
display: flex;
|
||||
@include list-unstyled();
|
||||
}
|
||||
|
||||
.page-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
color: $pagination-color;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
background-color: $pagination-bg;
|
||||
border: $pagination-border-width solid $pagination-border-color;
|
||||
@include transition($pagination-transition);
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
color: $pagination-hover-color;
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
background-color: $pagination-hover-bg;
|
||||
border-color: $pagination-hover-border-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
color: $pagination-focus-color;
|
||||
background-color: $pagination-focus-bg;
|
||||
outline: $pagination-focus-outline;
|
||||
box-shadow: $pagination-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&:not(:first-child) .page-link {
|
||||
margin-left: $pagination-margin-start;
|
||||
}
|
||||
|
||||
&.active .page-link {
|
||||
z-index: 3;
|
||||
color: $pagination-active-color;
|
||||
@include gradient-bg($pagination-active-bg);
|
||||
border-color: $pagination-active-border-color;
|
||||
}
|
||||
|
||||
&.disabled .page-link {
|
||||
color: $pagination-disabled-color;
|
||||
pointer-events: none;
|
||||
background-color: $pagination-disabled-bg;
|
||||
border-color: $pagination-disabled-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
|
||||
|
||||
.pagination-lg {
|
||||
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $border-radius-lg);
|
||||
}
|
||||
|
||||
.pagination-sm {
|
||||
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $border-radius-sm);
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
.popover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0 #{"/* rtl:ignore */"};
|
||||
z-index: $zindex-popover;
|
||||
display: block;
|
||||
max-width: $popover-max-width;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
@include font-size($popover-font-size);
|
||||
// Allow breaking very long words so they don't overflow the popover's bounds
|
||||
word-wrap: break-word;
|
||||
background-color: $popover-bg;
|
||||
background-clip: padding-box;
|
||||
border: $popover-border-width solid $popover-border-color;
|
||||
@include border-radius($popover-border-radius);
|
||||
@include box-shadow($popover-box-shadow);
|
||||
|
||||
.popover-arrow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: $popover-arrow-width;
|
||||
height: $popover-arrow-height;
|
||||
margin: 0 $popover-border-radius;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-top {
|
||||
// Overrule margin set by popper.js
|
||||
margin-bottom: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
|
||||
|
||||
> .popover-arrow {
|
||||
bottom: subtract(-$popover-arrow-height, $popover-border-width);
|
||||
|
||||
&::before {
|
||||
bottom: 0;
|
||||
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
|
||||
border-top-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: $popover-border-width;
|
||||
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
|
||||
border-top-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-end {
|
||||
// Overrule margin set by popper.js
|
||||
margin-left: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
|
||||
|
||||
> .popover-arrow {
|
||||
left: subtract(-$popover-arrow-height, $popover-border-width);
|
||||
width: $popover-arrow-height;
|
||||
height: $popover-arrow-width;
|
||||
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
|
||||
border-right-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: $popover-border-width;
|
||||
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
|
||||
border-right-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-bottom {
|
||||
// Overrule margin set by popper.js
|
||||
margin-top: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
|
||||
|
||||
> .popover-arrow {
|
||||
top: subtract(-$popover-arrow-height, $popover-border-width);
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
|
||||
border-bottom-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: $popover-border-width;
|
||||
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
|
||||
border-bottom-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
// This will remove the popover-header's border just below the arrow
|
||||
.popover-header::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: $popover-arrow-width;
|
||||
margin-left: -$popover-arrow-width / 2;
|
||||
content: "";
|
||||
border-bottom: $popover-border-width solid $popover-header-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-start {
|
||||
// Overrule margin set by popper.js
|
||||
margin-right: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
|
||||
|
||||
> .popover-arrow {
|
||||
right: subtract(-$popover-arrow-height, $popover-border-width);
|
||||
width: $popover-arrow-height;
|
||||
height: $popover-arrow-width;
|
||||
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
|
||||
|
||||
&::before {
|
||||
right: 0;
|
||||
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
|
||||
border-left-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: $popover-border-width;
|
||||
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
|
||||
border-left-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-auto {
|
||||
&[data-popper-placement^="top"] {
|
||||
@extend .bs-popover-top;
|
||||
}
|
||||
&[data-popper-placement^="right"] {
|
||||
@extend .bs-popover-end;
|
||||
}
|
||||
&[data-popper-placement^="bottom"] {
|
||||
@extend .bs-popover-bottom;
|
||||
}
|
||||
&[data-popper-placement^="left"] {
|
||||
@extend .bs-popover-start;
|
||||
}
|
||||
}
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
.popover-header {
|
||||
padding: $popover-header-padding-y $popover-header-padding-x;
|
||||
margin-bottom: 0; // Reset the default from Reboot
|
||||
@include font-size($font-size-base);
|
||||
color: $popover-header-color;
|
||||
background-color: $popover-header-bg;
|
||||
border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
|
||||
@include border-top-radius($popover-inner-border-radius);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
padding: $popover-body-padding-y $popover-body-padding-x;
|
||||
color: $popover-body-color;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
// Disable animation if transitions are disabled
|
||||
@if $enable-transitions {
|
||||
@keyframes progress-bar-stripes {
|
||||
0% { background-position-x: $progress-height; }
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
height: $progress-height;
|
||||
overflow: hidden; // force rounded corners by cropping it
|
||||
@include font-size($progress-font-size);
|
||||
background-color: $progress-bg;
|
||||
@include border-radius($progress-border-radius);
|
||||
@include box-shadow($progress-box-shadow);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
color: $progress-bar-color;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: $progress-bar-bg;
|
||||
@include transition($progress-bar-transition);
|
||||
}
|
||||
|
||||
.progress-bar-striped {
|
||||
@include gradient-striped();
|
||||
background-size: $progress-height $progress-height;
|
||||
}
|
||||
|
||||
@if $enable-transitions {
|
||||
.progress-bar-animated {
|
||||
animation: $progress-bar-animation-timing progress-bar-stripes;
|
||||
|
||||
@if $enable-reduced-motion {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,635 @@
|
||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||
|
||||
|
||||
// Reboot
|
||||
//
|
||||
// Normalization of HTML elements, manually forked from Normalize.css to remove
|
||||
// styles targeting irrelevant browsers while applying new styles.
|
||||
//
|
||||
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
|
||||
|
||||
|
||||
// Document
|
||||
//
|
||||
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
// Root
|
||||
//
|
||||
// Ability to the value of the root font sizes, affecting the value of `rem`.
|
||||
// null by default, thus nothing is generated.
|
||||
|
||||
:root {
|
||||
font-size: $font-size-root;
|
||||
|
||||
@if $enable-smooth-scroll {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Body
|
||||
//
|
||||
// 1. Remove the margin in all browsers.
|
||||
// 2. As a best practice, apply a default `background-color`.
|
||||
// 3. Prevent adjustments of font size after orientation changes in iOS.
|
||||
// 4. Change the default tap highlight to be completely transparent in iOS.
|
||||
|
||||
body {
|
||||
margin: 0; // 1
|
||||
font-family: $font-family-base;
|
||||
@include font-size($font-size-base);
|
||||
font-weight: $font-weight-base;
|
||||
line-height: $line-height-base;
|
||||
color: $body-color;
|
||||
text-align: $body-text-align;
|
||||
background-color: $body-bg; // 2
|
||||
-webkit-text-size-adjust: 100%; // 3
|
||||
-webkit-tap-highlight-color: rgba($black, 0); // 4
|
||||
}
|
||||
|
||||
|
||||
// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
|
||||
// on elements that programmatically receive focus but wouldn't normally show a visible
|
||||
// focus outline. In general, this would mean that the outline is only applied if the
|
||||
// interaction that led to the element receiving programmatic focus was a keyboard interaction,
|
||||
// or the browser has somehow determined that the user is primarily a keyboard user and/or
|
||||
// wants focus outlines to always be presented.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
|
||||
// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
|
||||
|
||||
[tabindex="-1"]:focus:not(:focus-visible) {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
// Content grouping
|
||||
//
|
||||
// 1. Reset Firefox's gray color
|
||||
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
|
||||
|
||||
hr {
|
||||
margin: $hr-margin-y 0;
|
||||
color: $hr-color; // 1
|
||||
background-color: currentColor;
|
||||
border: 0;
|
||||
opacity: $hr-opacity;
|
||||
}
|
||||
|
||||
hr:not([size]) {
|
||||
height: $hr-height; // 2
|
||||
}
|
||||
|
||||
|
||||
// Typography
|
||||
//
|
||||
// 1. Remove top margins from headings
|
||||
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||
// margin for easier control within type scales as it avoids margin collapsing.
|
||||
|
||||
%heading {
|
||||
margin-top: 0; // 1
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
font-family: $headings-font-family;
|
||||
font-style: $headings-font-style;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %heading;
|
||||
@include font-size($h1-font-size);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %heading;
|
||||
@include font-size($h2-font-size);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %heading;
|
||||
@include font-size($h3-font-size);
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %heading;
|
||||
@include font-size($h4-font-size);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %heading;
|
||||
@include font-size($h5-font-size);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %heading;
|
||||
@include font-size($h6-font-size);
|
||||
}
|
||||
|
||||
|
||||
// Reset margins on paragraphs
|
||||
//
|
||||
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||
// bottom margin to use `rem` units instead of `em`.
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
}
|
||||
|
||||
|
||||
// Abbreviations
|
||||
//
|
||||
// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
|
||||
// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
|
||||
// 3. Add explicit cursor to indicate changed behavior.
|
||||
// 4. Prevent the text-decoration to be skipped.
|
||||
|
||||
abbr[title],
|
||||
abbr[data-bs-original-title] { // 1
|
||||
text-decoration: underline; // 2
|
||||
text-decoration: underline dotted; // 2
|
||||
cursor: help; // 3
|
||||
text-decoration-skip-ink: none; // 4
|
||||
}
|
||||
|
||||
|
||||
// Address
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
// Lists
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: $dt-font-weight;
|
||||
}
|
||||
|
||||
// 1. Undo browser default
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; // 1
|
||||
}
|
||||
|
||||
|
||||
// Blockquote
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
// Strong
|
||||
//
|
||||
// Add the correct font weight in Chrome, Edge, and Safari
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: $font-weight-bolder;
|
||||
}
|
||||
|
||||
|
||||
// Small
|
||||
//
|
||||
// Add the correct font size in all browsers
|
||||
|
||||
small {
|
||||
@include font-size($small-font-size);
|
||||
}
|
||||
|
||||
|
||||
// Mark
|
||||
|
||||
mark {
|
||||
padding: $mark-padding;
|
||||
background-color: $mark-bg;
|
||||
}
|
||||
|
||||
|
||||
// Sub and Sup
|
||||
//
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in
|
||||
// all browsers.
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
@include font-size($sub-sup-font-size);
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub { bottom: -.25em; }
|
||||
sup { top: -.5em; }
|
||||
|
||||
|
||||
// Links
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
// And undo these styles for placeholder links/named anchors (without href).
|
||||
// It would be more straightforward to just use a[href] in previous block, but that
|
||||
// causes specificity issues in many other styles that are too complex to fix.
|
||||
// See https://github.com/twbs/bootstrap/issues/19402
|
||||
|
||||
a:not([href]):not([class]) {
|
||||
&,
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Code
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: $font-family-code;
|
||||
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
|
||||
direction: ltr #{"/* rtl:ignore */"};
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
// 1. Remove browser default top margin
|
||||
// 2. Reset browser default of `1em` to use `rem`s
|
||||
// 3. Don't allow content to break outside
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0; // 1
|
||||
margin-bottom: 1rem; // 2
|
||||
overflow: auto; // 3
|
||||
@include font-size($code-font-size);
|
||||
color: $pre-color;
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code {
|
||||
@include font-size(inherit);
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@include font-size($code-font-size);
|
||||
color: $code-color;
|
||||
word-wrap: break-word;
|
||||
|
||||
// Streamline the style when inside anchors to avoid broken underline and more
|
||||
a > & {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: $kbd-padding-y $kbd-padding-x;
|
||||
@include font-size($kbd-font-size);
|
||||
color: $kbd-color;
|
||||
background-color: $kbd-bg;
|
||||
@include border-radius($border-radius-sm);
|
||||
|
||||
kbd {
|
||||
padding: 0;
|
||||
@include font-size(1em);
|
||||
font-weight: $nested-kbd-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Figures
|
||||
//
|
||||
// Apply a consistent margin strategy (matches our type styles).
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
// Images and content
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Prevent double borders
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: $table-cell-padding-y;
|
||||
padding-bottom: $table-cell-padding-y;
|
||||
color: $table-caption-color;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// 1. Removes font-weight bold by inheriting
|
||||
// 2. Matches default `<td>` alignment by inheriting `text-align`.
|
||||
// 3. Fix alignment for Safari
|
||||
|
||||
th {
|
||||
font-weight: $table-th-font-weight; // 1
|
||||
text-align: inherit; // 2
|
||||
text-align: -webkit-match-parent; // 3
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// Forms
|
||||
//
|
||||
// 1. Allow labels to use `margin` for spacing.
|
||||
|
||||
label {
|
||||
display: inline-block; // 1
|
||||
}
|
||||
|
||||
// Remove the default `border-radius` that macOS Chrome adds.
|
||||
// See https://github.com/twbs/bootstrap/issues/24093
|
||||
|
||||
button {
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Work around a Firefox bug where the transparent `button` background
|
||||
// results in a loss of the default `button` focus styles.
|
||||
// Credit https://github.com/suitcss/base/
|
||||
|
||||
button:focus {
|
||||
outline: dotted 1px;
|
||||
outline: -webkit-focus-ring-color auto 5px;
|
||||
}
|
||||
|
||||
// 1. Remove the margin in Firefox and Safari
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0; // 1
|
||||
font-family: inherit;
|
||||
@include font-size(inherit);
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
// Remove the inheritance of text transform in Firefox
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// Set the cursor for non-`<button>` buttons
|
||||
//
|
||||
// Details at https://github.com/twbs/bootstrap/pull/30562
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Remove the inheritance of word-wrap in Safari.
|
||||
// See https://github.com/twbs/bootstrap/issues/24990
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
// Remove the dropdown arrow in Chrome from inputs built with datalists.
|
||||
// See https://stackoverflow.com/a/54997118
|
||||
|
||||
[list]::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
// controls in Android 4.
|
||||
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
// 3. Opinionated: add "hand" cursor to non-disabled button elements.
|
||||
|
||||
button,
|
||||
[type="button"], // 1
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
|
||||
@if $enable-button-pointers {
|
||||
&:not(:disabled) {
|
||||
cursor: pointer; // 3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||
|
||||
textarea {
|
||||
resize: vertical; // 1
|
||||
}
|
||||
|
||||
// 1. Browsers set a default `min-width: min-content;` on fieldsets,
|
||||
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
|
||||
// So we reset that to ensure fieldsets behave more like a standard block element.
|
||||
// See https://github.com/twbs/bootstrap/issues/12359
|
||||
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
||||
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||
|
||||
fieldset {
|
||||
min-width: 0; // 1
|
||||
padding: 0; // 2
|
||||
margin: 0; // 2
|
||||
border: 0; // 2
|
||||
}
|
||||
|
||||
// 1. By using `float: left`, the legend will behave like a block element.
|
||||
// This way the border of a fieldset wraps around the legend if present.
|
||||
// 2. Fix wrapping bug.
|
||||
// See https://github.com/twbs/bootstrap/issues/29712
|
||||
|
||||
legend {
|
||||
float: left; // 1
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: $legend-margin-bottom;
|
||||
@include font-size($legend-font-size);
|
||||
font-weight: $legend-font-weight;
|
||||
line-height: inherit;
|
||||
|
||||
+ * {
|
||||
clear: left; // 2
|
||||
}
|
||||
}
|
||||
|
||||
// Fix height of inputs with a type of datetime-local, date, month, week, or time
|
||||
// See https://github.com/twbs/bootstrap/issues/18842
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// 1. Correct the outline style in Safari.
|
||||
// 2. This overrides the extra rounded corners on search inputs in iOS so that our
|
||||
// `.form-control` class can properly style them. Note that this cannot simply
|
||||
// be added to `.form-control` as it's not specific enough. For details, see
|
||||
// https://github.com/twbs/bootstrap/issues/11586.
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px; // 1
|
||||
-webkit-appearance: textfield; // 2
|
||||
}
|
||||
|
||||
// 1. A few input types should stay LTR
|
||||
// See https://rtlstyling.com/posts/rtl-styling#form-inputs
|
||||
// 2. RTL only output
|
||||
// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
|
||||
|
||||
/* rtl:raw:
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
direction: ltr;
|
||||
}
|
||||
*/
|
||||
|
||||
// Remove the inner padding in Chrome and Safari on macOS.
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// Remove padding around color pickers in webkit browsers
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
// Inherit font family and line height for file input buttons
|
||||
|
||||
// stylelint-disable-next-line selector-pseudo-element-no-unknown
|
||||
::file-selector-button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
// 1. Change font properties to `inherit`
|
||||
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit; // 1
|
||||
-webkit-appearance: button; // 2
|
||||
}
|
||||
|
||||
// Correct element displays
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Remove border from iframe
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Summary
|
||||
//
|
||||
// 1. Add the correct display in all browsers
|
||||
|
||||
summary {
|
||||
display: list-item; // 1
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// Progress
|
||||
//
|
||||
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
||||
// Hidden attribute
|
||||
//
|
||||
// Always hide an element with the `hidden` HTML attribute.
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
:root {
|
||||
// Custom variable values only support SassScript inside `#{}`.
|
||||
@each $color, $value in $colors {
|
||||
--#{$variable-prefix}#{$color}: #{$value};
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
--#{$variable-prefix}#{$color}: #{$value};
|
||||
}
|
||||
|
||||
// Use `inspect` for lists so that quoted items keep the quotes.
|
||||
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
||||
--#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
|
||||
--#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
|
||||
--#{$variable-prefix}gradient: #{$gradient};
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
//
|
||||
// Rotating border
|
||||
//
|
||||
|
||||
@keyframes spinner-border {
|
||||
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
display: inline-block;
|
||||
width: $spinner-width;
|
||||
height: $spinner-height;
|
||||
vertical-align: text-bottom;
|
||||
border: $spinner-border-width solid currentColor;
|
||||
border-right-color: transparent;
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 50%;
|
||||
animation: $spinner-animation-speed linear infinite spinner-border;
|
||||
}
|
||||
|
||||
.spinner-border-sm {
|
||||
width: $spinner-width-sm;
|
||||
height: $spinner-height-sm;
|
||||
border-width: $spinner-border-width-sm;
|
||||
}
|
||||
|
||||
//
|
||||
// Growing circle
|
||||
//
|
||||
|
||||
@keyframes spinner-grow {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-grow {
|
||||
display: inline-block;
|
||||
width: $spinner-width;
|
||||
height: $spinner-height;
|
||||
vertical-align: text-bottom;
|
||||
background-color: currentColor;
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: $spinner-animation-speed linear infinite spinner-grow;
|
||||
}
|
||||
|
||||
.spinner-grow-sm {
|
||||
width: $spinner-width-sm;
|
||||
height: $spinner-height-sm;
|
||||
}
|
||||
|
||||
@if $enable-reduced-motion {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.spinner-border,
|
||||
.spinner-grow {
|
||||
animation-duration: $spinner-animation-speed * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
//
|
||||
// Basic Bootstrap table
|
||||
//
|
||||
|
||||
.table {
|
||||
--#{$variable-prefix}table-bg: #{$table-bg};
|
||||
--#{$variable-prefix}table-striped-color: #{$table-striped-color};
|
||||
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
|
||||
--#{$variable-prefix}table-active-color: #{$table-active-color};
|
||||
--#{$variable-prefix}table-active-bg: #{$table-active-bg};
|
||||
--#{$variable-prefix}table-hover-color: #{$table-hover-color};
|
||||
--#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
color: $table-color;
|
||||
vertical-align: $table-cell-vertical-align;
|
||||
border-color: $table-border-color;
|
||||
|
||||
// Target th & td
|
||||
// We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
|
||||
// We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
|
||||
// Another advantage is that this generates less code and makes the selector less specific making it easier to override.
|
||||
// stylelint-disable-next-line selector-max-universal
|
||||
> :not(caption) > * > * {
|
||||
padding: $table-cell-padding-y $table-cell-padding-x;
|
||||
background-color: var(--#{$variable-prefix}table-bg);
|
||||
background-image: linear-gradient(var(--#{$variable-prefix}table-accent-bg), var(--#{$variable-prefix}table-accent-bg));
|
||||
border-bottom-width: $table-border-width;
|
||||
}
|
||||
|
||||
> tbody {
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
> thead {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// Highlight border color between thead, tbody and tfoot.
|
||||
> :not(:last-child) > :last-child > * {
|
||||
border-bottom-color: $table-group-separator-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Change placement of captions with a class
|
||||
//
|
||||
|
||||
.caption-top {
|
||||
caption-side: top;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Condensed table w/ half padding
|
||||
//
|
||||
|
||||
.table-sm {
|
||||
// stylelint-disable-next-line selector-max-universal
|
||||
> :not(caption) > * > * {
|
||||
padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Border versions
|
||||
//
|
||||
// Add or remove borders all around the table and between all the columns.
|
||||
//
|
||||
// When borders are added on all sides of the cells, the corners can render odd when
|
||||
// these borders do not have the same color or if they are semi-transparent.
|
||||
// Therefor we add top and border bottoms to the `tr`s and left and right borders
|
||||
// to the `td`s or `th`s
|
||||
|
||||
.table-bordered {
|
||||
> :not(caption) > * {
|
||||
border-width: $table-border-width 0;
|
||||
|
||||
// stylelint-disable-next-line selector-max-universal
|
||||
> * {
|
||||
border-width: 0 $table-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-borderless {
|
||||
// stylelint-disable-next-line selector-max-universal
|
||||
> :not(caption) > * > * {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Zebra-striping
|
||||
//
|
||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
|
||||
.table-striped {
|
||||
> tbody > tr:nth-of-type(#{$table-striped-order}) {
|
||||
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
|
||||
color: var(--#{$variable-prefix}table-striped-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Active table
|
||||
//
|
||||
// The `.table-active` class can be added to highlight rows or cells
|
||||
|
||||
.table-active {
|
||||
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
|
||||
color: var(--#{$variable-prefix}table-active-color);
|
||||
}
|
||||
|
||||
// Hover effect
|
||||
//
|
||||
// Placed here since it has to come after the potential zebra striping
|
||||
|
||||
.table-hover {
|
||||
> tbody > tr:hover {
|
||||
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
|
||||
color: var(--#{$variable-prefix}table-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table variants
|
||||
//
|
||||
// Table variants set the table cell backgrounds, border colors
|
||||
// and the colors of the striped, hovered & active tables
|
||||
|
||||
@each $color, $value in $table-variants {
|
||||
@include table-variant($color, $value);
|
||||
}
|
||||
|
||||
// Responsive tables
|
||||
//
|
||||
// Generate series of `.table-responsive-*` classes for configuring the screen
|
||||
// size of where your table will overflow.
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.table-responsive#{$infix} {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
.toast {
|
||||
width: $toast-max-width;
|
||||
max-width: 100%;
|
||||
@include font-size($toast-font-size);
|
||||
color: $toast-color;
|
||||
pointer-events: auto;
|
||||
background-color: $toast-background-color;
|
||||
background-clip: padding-box;
|
||||
border: $toast-border-width solid $toast-border-color;
|
||||
box-shadow: $toast-box-shadow;
|
||||
@include border-radius($toast-border-radius);
|
||||
|
||||
&:not(.showing):not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-container {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
> :not(:last-child) {
|
||||
margin-bottom: $toast-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $toast-padding-y $toast-padding-x;
|
||||
color: $toast-header-color;
|
||||
background-color: $toast-header-background-color;
|
||||
background-clip: padding-box;
|
||||
border-bottom: $toast-border-width solid $toast-header-border-color;
|
||||
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
|
||||
|
||||
.btn-close {
|
||||
margin-right: $toast-padding-x / -2;
|
||||
margin-left: $toast-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-body {
|
||||
padding: $toast-padding-x; // apply to both vertical and horizontal
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
// Base class
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: $zindex-tooltip;
|
||||
display: block;
|
||||
margin: $tooltip-margin;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
@include font-size($tooltip-font-size);
|
||||
// Allow breaking very long words so they don't overflow the tooltip's bounds
|
||||
word-wrap: break-word;
|
||||
opacity: 0;
|
||||
|
||||
&.show { opacity: $tooltip-opacity; }
|
||||
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: $tooltip-arrow-width;
|
||||
height: $tooltip-arrow-height;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-top {
|
||||
padding: $tooltip-arrow-height 0;
|
||||
|
||||
.tooltip-arrow {
|
||||
bottom: 0;
|
||||
|
||||
&::before {
|
||||
top: -1px;
|
||||
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-end {
|
||||
padding: 0 $tooltip-arrow-height;
|
||||
|
||||
.tooltip-arrow {
|
||||
left: 0;
|
||||
width: $tooltip-arrow-height;
|
||||
height: $tooltip-arrow-width;
|
||||
|
||||
&::before {
|
||||
right: -1px;
|
||||
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
|
||||
border-right-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-bottom {
|
||||
padding: $tooltip-arrow-height 0;
|
||||
|
||||
.tooltip-arrow {
|
||||
top: 0;
|
||||
|
||||
&::before {
|
||||
bottom: -1px;
|
||||
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-start {
|
||||
padding: 0 $tooltip-arrow-height;
|
||||
|
||||
.tooltip-arrow {
|
||||
right: 0;
|
||||
width: $tooltip-arrow-height;
|
||||
height: $tooltip-arrow-width;
|
||||
|
||||
&::before {
|
||||
left: -1px;
|
||||
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
|
||||
border-left-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-auto {
|
||||
&[data-popper-placement^="top"] {
|
||||
@extend .bs-tooltip-top;
|
||||
}
|
||||
&[data-popper-placement^="right"] {
|
||||
@extend .bs-tooltip-end;
|
||||
}
|
||||
&[data-popper-placement^="bottom"] {
|
||||
@extend .bs-tooltip-bottom;
|
||||
}
|
||||
&[data-popper-placement^="left"] {
|
||||
@extend .bs-tooltip-start;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
max-width: $tooltip-max-width;
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
color: $tooltip-color;
|
||||
text-align: center;
|
||||
background-color: $tooltip-bg;
|
||||
@include border-radius($tooltip-border-radius);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.fade {
|
||||
@include transition($transition-fade);
|
||||
|
||||
&:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
&:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
@include transition($transition-collapse);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
//
|
||||
// Headings
|
||||
//
|
||||
.h1 {
|
||||
@extend h1;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
@extend h2;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
@extend h3;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
@extend h4;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
@extend h5;
|
||||
}
|
||||
|
||||
.h6 {
|
||||
@extend h6;
|
||||
}
|
||||
|
||||
|
||||
.lead {
|
||||
@include font-size($lead-font-size);
|
||||
font-weight: $lead-font-weight;
|
||||
}
|
||||
|
||||
// Type display classes
|
||||
@each $display, $font-size in $display-font-sizes {
|
||||
.display-#{$display} {
|
||||
@include font-size($font-size);
|
||||
font-weight: $display-font-weight;
|
||||
line-height: $display-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Emphasis
|
||||
//
|
||||
.small {
|
||||
@extend small;
|
||||
}
|
||||
|
||||
.mark {
|
||||
@extend mark;
|
||||
}
|
||||
|
||||
//
|
||||
// Lists
|
||||
//
|
||||
|
||||
.list-unstyled {
|
||||
@include list-unstyled();
|
||||
}
|
||||
|
||||
// Inline turns list items into inline-block
|
||||
.list-inline {
|
||||
@include list-unstyled();
|
||||
}
|
||||
.list-inline-item {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $list-inline-padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
// Builds on `abbr`
|
||||
.initialism {
|
||||
@include font-size($initialism-font-size);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
.blockquote {
|
||||
margin-bottom: $blockquote-margin-y;
|
||||
@include font-size($blockquote-font-size);
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
margin-top: -$blockquote-margin-y;
|
||||
margin-bottom: $blockquote-margin-y;
|
||||
@include font-size($blockquote-footer-font-size);
|
||||
color: $blockquote-footer-color;
|
||||
|
||||
&::before {
|
||||
content: "\2014\00A0"; // em dash, nbsp
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,560 @@
|
||||
// Utilities
|
||||
|
||||
$utilities: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$utilities: map-merge(
|
||||
(
|
||||
"align": (
|
||||
property: vertical-align,
|
||||
class: align,
|
||||
values: baseline top middle bottom text-bottom text-top
|
||||
),
|
||||
"float": (
|
||||
responsive: true,
|
||||
property: float,
|
||||
values: (
|
||||
start: left,
|
||||
end: right,
|
||||
none: none,
|
||||
)
|
||||
),
|
||||
"overflow": (
|
||||
property: overflow,
|
||||
values: auto hidden visible scroll,
|
||||
),
|
||||
"display": (
|
||||
responsive: true,
|
||||
print: true,
|
||||
property: display,
|
||||
class: d,
|
||||
values: inline inline-block block grid table table-row table-cell flex inline-flex none
|
||||
),
|
||||
"shadow": (
|
||||
property: box-shadow,
|
||||
class: shadow,
|
||||
values: (
|
||||
null: $box-shadow,
|
||||
sm: $box-shadow-sm,
|
||||
lg: $box-shadow-lg,
|
||||
none: none,
|
||||
)
|
||||
),
|
||||
"position": (
|
||||
property: position,
|
||||
values: static relative absolute fixed sticky
|
||||
),
|
||||
"top": (
|
||||
property: top,
|
||||
values: $position-values
|
||||
),
|
||||
"bottom": (
|
||||
property: bottom,
|
||||
values: $position-values
|
||||
),
|
||||
"start": (
|
||||
property: left,
|
||||
class: start,
|
||||
values: $position-values
|
||||
),
|
||||
"end": (
|
||||
property: right,
|
||||
class: end,
|
||||
values: $position-values
|
||||
),
|
||||
"translate-middle": (
|
||||
property: transform,
|
||||
class: translate-middle,
|
||||
values: (
|
||||
null: translate(-50%, -50%),
|
||||
x: translateX(-50%),
|
||||
y: translateY(-50%),
|
||||
)
|
||||
),
|
||||
"border": (
|
||||
property: border,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-top": (
|
||||
property: border-top,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-end": (
|
||||
property: border-right,
|
||||
class: border-end,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-bottom": (
|
||||
property: border-bottom,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-start": (
|
||||
property: border-left,
|
||||
class: border-start,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-color": (
|
||||
property: border-color,
|
||||
class: border,
|
||||
values: map-merge($theme-colors, ("white": $white))
|
||||
),
|
||||
"border-width": (
|
||||
property: border-width,
|
||||
class: border,
|
||||
values: $border-widths
|
||||
),
|
||||
// Sizing utilities
|
||||
"width": (
|
||||
property: width,
|
||||
class: w,
|
||||
values: (
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%,
|
||||
auto: auto
|
||||
)
|
||||
),
|
||||
"max-width": (
|
||||
property: max-width,
|
||||
class: mw,
|
||||
values: (100: 100%)
|
||||
),
|
||||
"viewport-width": (
|
||||
property: width,
|
||||
class: vw,
|
||||
values: (100: 100vw)
|
||||
),
|
||||
"min-viewport-width": (
|
||||
property: min-width,
|
||||
class: min-vw,
|
||||
values: (100: 100vw)
|
||||
),
|
||||
"height": (
|
||||
property: height,
|
||||
class: h,
|
||||
values: (
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%,
|
||||
auto: auto
|
||||
)
|
||||
),
|
||||
"max-height": (
|
||||
property: max-height,
|
||||
class: mh,
|
||||
values: (100: 100%)
|
||||
),
|
||||
"viewport-height": (
|
||||
property: height,
|
||||
class: vh,
|
||||
values: (100: 100vh)
|
||||
),
|
||||
"min-viewport-height": (
|
||||
property: min-height,
|
||||
class: min-vh,
|
||||
values: (100: 100vh)
|
||||
),
|
||||
// Flex utilities
|
||||
"flex": (
|
||||
responsive: true,
|
||||
property: flex,
|
||||
values: (fill: 1 1 auto)
|
||||
),
|
||||
"flex-direction": (
|
||||
responsive: true,
|
||||
property: flex-direction,
|
||||
class: flex,
|
||||
values: row column row-reverse column-reverse
|
||||
),
|
||||
"flex-grow": (
|
||||
responsive: true,
|
||||
property: flex-grow,
|
||||
class: flex,
|
||||
values: (
|
||||
grow-0: 0,
|
||||
grow-1: 1,
|
||||
)
|
||||
),
|
||||
"flex-shrink": (
|
||||
responsive: true,
|
||||
property: flex-shrink,
|
||||
class: flex,
|
||||
values: (
|
||||
shrink-0: 0,
|
||||
shrink-1: 1,
|
||||
)
|
||||
),
|
||||
"flex-wrap": (
|
||||
responsive: true,
|
||||
property: flex-wrap,
|
||||
class: flex,
|
||||
values: wrap nowrap wrap-reverse
|
||||
),
|
||||
"gap": (
|
||||
responsive: true,
|
||||
property: gap,
|
||||
class: gap,
|
||||
values: $spacers
|
||||
),
|
||||
"justify-content": (
|
||||
responsive: true,
|
||||
property: justify-content,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
evenly: space-evenly,
|
||||
)
|
||||
),
|
||||
"align-items": (
|
||||
responsive: true,
|
||||
property: align-items,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch,
|
||||
)
|
||||
),
|
||||
"align-content": (
|
||||
responsive: true,
|
||||
property: align-content,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
stretch: stretch,
|
||||
)
|
||||
),
|
||||
"align-self": (
|
||||
responsive: true,
|
||||
property: align-self,
|
||||
values: (
|
||||
auto: auto,
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch,
|
||||
)
|
||||
),
|
||||
"order": (
|
||||
responsive: true,
|
||||
property: order,
|
||||
values: (
|
||||
first: -1,
|
||||
0: 0,
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 4,
|
||||
5: 5,
|
||||
last: 6,
|
||||
),
|
||||
),
|
||||
// Margin utilities
|
||||
"margin": (
|
||||
responsive: true,
|
||||
property: margin,
|
||||
class: m,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-x": (
|
||||
responsive: true,
|
||||
property: margin-right margin-left,
|
||||
class: mx,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-y": (
|
||||
responsive: true,
|
||||
property: margin-top margin-bottom,
|
||||
class: my,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-top": (
|
||||
responsive: true,
|
||||
property: margin-top,
|
||||
class: mt,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-end": (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
class: me,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-bottom": (
|
||||
responsive: true,
|
||||
property: margin-bottom,
|
||||
class: mb,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-start": (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
class: ms,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
// Negative margin utilities
|
||||
"negative-margin": (
|
||||
responsive: true,
|
||||
property: margin,
|
||||
class: m,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-x": (
|
||||
responsive: true,
|
||||
property: margin-right margin-left,
|
||||
class: mx,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-y": (
|
||||
responsive: true,
|
||||
property: margin-top margin-bottom,
|
||||
class: my,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-top": (
|
||||
responsive: true,
|
||||
property: margin-top,
|
||||
class: mt,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-end": (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
class: me,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-bottom": (
|
||||
responsive: true,
|
||||
property: margin-bottom,
|
||||
class: mb,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-start": (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
class: ms,
|
||||
values: $negative-spacers
|
||||
),
|
||||
// Padding utilities
|
||||
"padding": (
|
||||
responsive: true,
|
||||
property: padding,
|
||||
class: p,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-x": (
|
||||
responsive: true,
|
||||
property: padding-right padding-left,
|
||||
class: px,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-y": (
|
||||
responsive: true,
|
||||
property: padding-top padding-bottom,
|
||||
class: py,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-top": (
|
||||
responsive: true,
|
||||
property: padding-top,
|
||||
class: pt,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-end": (
|
||||
responsive: true,
|
||||
property: padding-right,
|
||||
class: pe,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-bottom": (
|
||||
responsive: true,
|
||||
property: padding-bottom,
|
||||
class: pb,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-start": (
|
||||
responsive: true,
|
||||
property: padding-left,
|
||||
class: ps,
|
||||
values: $spacers
|
||||
),
|
||||
// Text
|
||||
"font-size": (
|
||||
rfs: true,
|
||||
property: font-size,
|
||||
class: fs,
|
||||
values: $font-sizes
|
||||
),
|
||||
"font-style": (
|
||||
property: font-style,
|
||||
class: fst,
|
||||
values: italic normal
|
||||
),
|
||||
"font-weight": (
|
||||
property: font-weight,
|
||||
class: fw,
|
||||
values: (
|
||||
light: $font-weight-light,
|
||||
lighter: $font-weight-lighter,
|
||||
normal: $font-weight-normal,
|
||||
bold: $font-weight-bold,
|
||||
bolder: $font-weight-bolder
|
||||
)
|
||||
),
|
||||
"text-transform": (
|
||||
property: text-transform,
|
||||
class: text,
|
||||
values: lowercase uppercase capitalize
|
||||
),
|
||||
"text-align": (
|
||||
responsive: true,
|
||||
property: text-align,
|
||||
class: text,
|
||||
values: (
|
||||
start: left,
|
||||
end: right,
|
||||
center: center,
|
||||
)
|
||||
),
|
||||
"color": (
|
||||
property: color,
|
||||
class: text,
|
||||
values: map-merge(
|
||||
$theme-colors,
|
||||
(
|
||||
"white": $white,
|
||||
"body": $body-color,
|
||||
"muted": $text-muted,
|
||||
"black-50": rgba($black, .5),
|
||||
"white-50": rgba($white, .5),
|
||||
"reset": inherit,
|
||||
)
|
||||
)
|
||||
),
|
||||
"line-height": (
|
||||
property: line-height,
|
||||
class: lh,
|
||||
values: (
|
||||
1: 1,
|
||||
sm: $line-height-sm,
|
||||
base: $line-height-base,
|
||||
lg: $line-height-lg,
|
||||
)
|
||||
),
|
||||
"background-color": (
|
||||
property: background-color,
|
||||
class: bg,
|
||||
values: map-merge(
|
||||
$theme-colors,
|
||||
(
|
||||
"body": $body-bg,
|
||||
"white": $white,
|
||||
"transparent": transparent
|
||||
)
|
||||
)
|
||||
),
|
||||
"gradient": (
|
||||
property: background-image,
|
||||
class: bg,
|
||||
values: (gradient: var(--#{$variable-prefix}gradient))
|
||||
),
|
||||
"white-space": (
|
||||
property: white-space,
|
||||
class: text,
|
||||
values: (
|
||||
wrap: normal,
|
||||
nowrap: nowrap,
|
||||
)
|
||||
),
|
||||
"text-decoration": (
|
||||
property: text-decoration,
|
||||
values: none underline line-through
|
||||
),
|
||||
"word-wrap": (
|
||||
property: word-wrap word-break,
|
||||
class: text,
|
||||
values: (break: break-word),
|
||||
rtl: false
|
||||
),
|
||||
"font-family": (
|
||||
property: font-family,
|
||||
class: font,
|
||||
values: (monospace: var(--#{$variable-prefix}font-monospace))
|
||||
),
|
||||
"user-select": (
|
||||
property: user-select,
|
||||
values: all auto none
|
||||
),
|
||||
"pointer-events": (
|
||||
property: pointer-events,
|
||||
class: pe,
|
||||
values: none auto,
|
||||
),
|
||||
"rounded": (
|
||||
property: border-radius,
|
||||
class: rounded,
|
||||
values: (
|
||||
null: $border-radius,
|
||||
0: 0,
|
||||
1: $border-radius-sm,
|
||||
2: $border-radius,
|
||||
3: $border-radius-lg,
|
||||
circle: 50%,
|
||||
pill: $border-radius-pill
|
||||
)
|
||||
),
|
||||
"rounded-top": (
|
||||
property: border-top-left-radius border-top-right-radius,
|
||||
class: rounded-top,
|
||||
values: (null: $border-radius)
|
||||
),
|
||||
"rounded-end": (
|
||||
property: border-top-right-radius border-bottom-right-radius,
|
||||
class: rounded-end,
|
||||
values: (null: $border-radius)
|
||||
),
|
||||
"rounded-bottom": (
|
||||
property: border-bottom-right-radius border-bottom-left-radius,
|
||||
class: rounded-bottom,
|
||||
values: (null: $border-radius)
|
||||
),
|
||||
"rounded-start": (
|
||||
property: border-bottom-left-radius border-top-left-radius,
|
||||
class: rounded-start,
|
||||
values: (null: $border-radius)
|
||||
),
|
||||
"visibility": (
|
||||
property: visibility,
|
||||
class: null,
|
||||
values: (
|
||||
visible: visible,
|
||||
invisible: hidden,
|
||||
)
|
||||
)
|
||||
),
|
||||
$utilities
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,65 @@
|
||||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
$include-column-box-sizing: true !default;
|
||||
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
|
||||
@import "mixins/lists";
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/container";
|
||||
@import "mixins/grid";
|
||||
@import "mixins/utilities";
|
||||
|
||||
@import "vendor/rfs";
|
||||
|
||||
@import "containers";
|
||||
@import "grid";
|
||||
|
||||
@import "utilities";
|
||||
// Only use the utilities we need
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$utilities: map-get-multiple(
|
||||
$utilities,
|
||||
(
|
||||
"display",
|
||||
"order",
|
||||
"flex",
|
||||
"flex-direction",
|
||||
"flex-grow",
|
||||
"flex-shrink",
|
||||
"flex-wrap",
|
||||
"justify-content",
|
||||
"align-items",
|
||||
"align-content",
|
||||
"align-self",
|
||||
"margin",
|
||||
"margin-x",
|
||||
"margin-y",
|
||||
"margin-top",
|
||||
"margin-end",
|
||||
"margin-bottom",
|
||||
"margin-start",
|
||||
"negative-margin",
|
||||
"negative-margin-x",
|
||||
"negative-margin-y",
|
||||
"negative-margin-top",
|
||||
"negative-margin-end",
|
||||
"negative-margin-bottom",
|
||||
"negative-margin-start",
|
||||
"padding",
|
||||
"padding-x",
|
||||
"padding-y",
|
||||
"padding-top",
|
||||
"padding-end",
|
||||
"padding-bottom",
|
||||
"padding-start",
|
||||
)
|
||||
);
|
||||
|
||||
@import "utilities/api";
|
||||
@@ -0,0 +1,15 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
// Prevent the usage of custom properties since we don't add them to `:root` in reboot
|
||||
$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default
|
||||
$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default
|
||||
@import "mixins";
|
||||
@import "reboot";
|
||||
@@ -0,0 +1,18 @@
|
||||
/*!
|
||||
* Bootstrap Utilities v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
// Configuration
|
||||
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "utilities";
|
||||
|
||||
|
||||
// Utilities
|
||||
|
||||
@import "utilities/api";
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user