Initial Draft
This commit is contained in:
parent
2c15b4051e
commit
d454758450
|
|
@ -0,0 +1,35 @@
|
|||
|
||||
|
||||
=> FREE HTML TEMPLATE LICENSE BY HTML Codex
|
||||
|
||||
All free HTML templates by HTML Codex are licensed under a Creative Commons Attribution 4.0 International License which means you are not allowed to remove the author’s credit link/attribution link/backlink.
|
||||
|
||||
When you download or use our free HTML templates, it will attribute the following conditions.
|
||||
|
||||
|
||||
=> YOU ARE ALLOWED
|
||||
|
||||
1. You are allowed to use for your personal and commercial purposes.
|
||||
|
||||
2. You are allowed to modify/customize however you like.
|
||||
|
||||
3. You are allowed to convert/port for use for any CMS.
|
||||
|
||||
4. You are allowed to share/distribute under the HTML Codex brand name.
|
||||
|
||||
5. You are allowed to put a screenshot or a link on your blog posts or any other websites.
|
||||
|
||||
|
||||
=> YOU ARE NOT ALLOWED
|
||||
|
||||
1. You are not allowed to remove the author’s credit link/attribution link/backlink without purchasing Credit Removal License ( https://htmlcodex.com/credit-removal ).
|
||||
|
||||
2. You are not allowed to sell, resale, rent, lease, license, or sub-license.
|
||||
|
||||
3. You are not allowed to upload on your template websites or template collection websites or any other third party websites without our permission.
|
||||
|
||||
This license can be terminated if you breach any of these conditions.
|
||||
|
||||
Please contact us (https://htmlcodex.com/contact) if you have any query.
|
||||
|
||||
=> PURCHASE CREDIT REMOVAL LICENSE ( https://htmlcodex.com/credit-removal )
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
=> Template Name : GreenHost - Web Hosting HTML Template
|
||||
|
||||
=> Template Link : https://htmlcodex.com/web-hosting-html-template
|
||||
|
||||
=> Template License : https://htmlcodex.com/license (or read the LICENSE.txt file)
|
||||
|
||||
=> Template Author : HTML Codex
|
||||
|
||||
=> Author Website : https://htmlcodex.com
|
||||
|
||||
=> About HTML Codex : HTML Codex is one of the top creators and publishers of Free HTML templates, HTML landing pages, HTML email templates and HTML snippets in the world. Read more at ( https://htmlcodex.com/about-us )
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IO Cloud Solutions - Shared Hosting, VPS, Dedicated Servers</title>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<meta content="" name="keywords">
|
||||
<meta content="" name="description">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link href="img/favicon.ico" rel="icon">
|
||||
|
||||
<!-- Google Web Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Icon Font Stylesheet -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Libraries Stylesheet -->
|
||||
<link href="lib/animate/animate.min.css" rel="stylesheet">
|
||||
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Customized Bootstrap Stylesheet -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Template Stylesheet -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-xxl bg-white p-0">
|
||||
<!-- Spinner Start -->
|
||||
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spinner End -->
|
||||
|
||||
|
||||
<!-- Navbar & Hero Start -->
|
||||
<div class="container-xxl position-relative p-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light px-4 px-lg-5 py-3 py-lg-0">
|
||||
<a href="" class="navbar-brand p-0">
|
||||
<h1 class="m-0"><i class="fa fa-server me-3"></i>IO Cloud Solutions</h1>
|
||||
<!-- <img src="img/logo.png" alt="Logo"> -->
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<div class="navbar-nav ms-auto py-0">
|
||||
<a href="index.html" class="nav-item nav-link">Home</a>
|
||||
<a href="about.html" class="nav-item nav-link active">About</a>
|
||||
<!-- <a href="domain.html" class="nav-item nav-link">Domain</a> -->
|
||||
<a href="index.html#hosting" class="nav-item nav-link">Hosting</a>
|
||||
<!--<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="team.html" class="dropdown-item">Our Team</a>
|
||||
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
|
||||
<a href="comparison.html" class="dropdown-item">Comparison</a>
|
||||
</div>
|
||||
</div>-->
|
||||
<a href="contact.html" class="nav-item nav-link">Contact</a>
|
||||
</div>
|
||||
<butaton type="button" class="btn text-secondary ms-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></butaton>
|
||||
<a href="" class="btn btn-secondary py-2 px-4 ms-3">Register</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-xxl py-5 bg-primary hero-header mb-5">
|
||||
<div class="container my-5 py-5 px-lg-5">
|
||||
<div class="row g-5 pt-5">
|
||||
<div class="col-12 text-center text-lg-start">
|
||||
<h1 class="display-4 text-white animated slideInLeft">About Us</h1>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb justify-content-center justify-content-lg-start animated slideInLeft">
|
||||
<li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
|
||||
<li class="breadcrumb-item text-white active" aria-current="page">About</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navbar & Hero End -->
|
||||
|
||||
|
||||
<!-- Full Screen Search Start -->
|
||||
<div class="modal fade" id="searchModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content" style="background: rgba(29, 40, 51, 0.8);">
|
||||
<div class="modal-header border-0">
|
||||
<button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body d-flex align-items-center justify-content-center">
|
||||
<div class="input-group" style="max-width: 600px;">
|
||||
<input type="text" class="form-control bg-transparent border-light p-3" placeholder="Type search keyword">
|
||||
<button class="btn btn-light px-4"><i class="bi bi-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Full Screen Search End -->
|
||||
|
||||
|
||||
<!-- About Start -->
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<div class="row g-5 align-items-center">
|
||||
<div class="col-lg-7 wow fadeInUp" data-wow-delay="0.1s">
|
||||
<div class="section-title position-relative mb-4 pb-4">
|
||||
<h1 class="mb-2">Welcome to IO Cloud Solutions</h1>
|
||||
</div>
|
||||
<p class="mb-4">Hello everyone, my name is Lutchy Horace (the owner), but my friends call me Bugz, short for Bugzbunny. A intermediate sysadmin. I got into this business in 2023 because I believe there was a gap in providing best-in-class support for small businesses. I'm harnessing my 10+ years of experience to provide the service that will provide you peace of mind and affordability. To create an online presence for yourself, for your family, your business, or a given cause. Come join us and support this dream!</p>
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.1s">
|
||||
<div class="bg-light rounded text-center p-4">
|
||||
<i class="fa fa-users-cog fa-2x text-primary mb-2"></i>
|
||||
<h2 class="mb-1" data-toggle="counter-up">2</h2>
|
||||
<p class="mb-0">Experts</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.3s">
|
||||
<div class="bg-light rounded text-center p-4">
|
||||
<i class="fa fa-users fa-2x text-primary mb-2"></i>
|
||||
<h2 class="mb-1" data-toggle="counter-up">22</h2>
|
||||
<p class="mb-0">Clients</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.5s">
|
||||
<div class="bg-light rounded text-center p-4">
|
||||
<i class="fa fa-check fa-2x text-primary mb-2"></i>
|
||||
<h2 class="mb-1" data-toggle="counter-up">14</h2>
|
||||
<p class="mb-0">Projects</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<img class="img-fluid wow zoomIn" data-wow-delay="0.5s" src="img/about.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- About End -->
|
||||
|
||||
|
||||
<!-- Team Start -->
|
||||
<!--
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
|
||||
<h1 class="mb-3">Our Team Members</h1>
|
||||
<p class="mb-1">Vero justo sed sed vero clita amet. Et justo vero sea diam elitr amet ipsum eos
|
||||
ipsum clita duo sed. Sed vero sea diam erat vero elitr sit clita.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
|
||||
<div class="team-item border-top border-5 border-primary rounded shadow overflow-hidden">
|
||||
<div class="text-center p-4">
|
||||
<img class="img-fluid rounded-circle mb-4" src="img/team-1.jpg" alt="">
|
||||
<h5 class="fw-bold mb-1">Full Name</h5>
|
||||
<small>Designation</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center bg-primary p-3">
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
|
||||
<div class="team-item border-top border-5 border-primary rounded shadow overflow-hidden">
|
||||
<div class="text-center p-4">
|
||||
<img class="img-fluid rounded-circle mb-4" src="img/team-2.jpg" alt="">
|
||||
<h5 class="fw-bold mb-1">Full Name</h5>
|
||||
<small>Designation</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center bg-primary p-3">
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
|
||||
<div class="team-item border-top border-5 border-primary rounded shadow overflow-hidden">
|
||||
<div class="text-center p-4">
|
||||
<img class="img-fluid rounded-circle mb-4" src="img/team-3.jpg" alt="">
|
||||
<h5 class="fw-bold mb-1">Full Name</h5>
|
||||
<small>Designation</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center bg-primary p-3">
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.7s">
|
||||
<div class="team-item border-top border-5 border-primary rounded shadow overflow-hidden">
|
||||
<div class="text-center p-4">
|
||||
<img class="img-fluid rounded-circle mb-4" src="img/team-4.jpg" alt="">
|
||||
<h5 class="fw-bold mb-1">Full Name</h5>
|
||||
<small>Designation</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center bg-primary p-3">
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!-- Team End -->
|
||||
|
||||
|
||||
<!-- Footer Start -->
|
||||
<div class="container-fluid bg-primary text-white footer mt-5 pt-5 wow fadeIn" data-wow-delay="0.1s">
|
||||
<div class="container py-5 px-lg-5">
|
||||
<div class="row gy-5 gx-4 pt-5">
|
||||
<div class="col-12">
|
||||
<h5 class="fw-bold text-white mb-4">Subscribe Our Newsletter</h5>
|
||||
<div class="position-relative" style="max-width: 400px;">
|
||||
<input class="form-control bg-white border-0 w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
|
||||
<button type="button" class="btn btn-primary py-2 px-3 position-absolute top-0 end-0 mt-2 me-2">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row gy-5 g-4">
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">About Us</h5>
|
||||
<a class="btn btn-link" href="#">About Us</a>
|
||||
<a class="btn btn-link" href="contact.html">Contact Us</a>
|
||||
<a class="btn btn-link" href="privacy.html">Privacy Policy</a>
|
||||
<a class="btn btn-link" href="tos.html">Terms & Condition</a>
|
||||
<a class="btn btn-link" href="#">Support</a>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">Our Services</h5>
|
||||
<a class="btn btn-link" href="">Shared Hosting</a>
|
||||
<a class="btn btn-link" href="">VPS Hosting</a>
|
||||
<a class="btn btn-link" href="">Dedicated Hosting</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<h5 class="fw-bold text-white mb-4">Get In Touch</h5>
|
||||
<!--<p class="mb-2"><i class="fa fa-map-marker-alt me-3"></i>123 Street, New York, USA</p>
|
||||
<p class="mb-2"><i class="fa fa-phone-alt me-3"></i>+012 345 67890</p>-->
|
||||
<p class="mb-2"><i class="fa fa-envelope me-3"></i>info<span class=div1>@</span>iocloudsolutions<span class=div2>.</span>net</p>
|
||||
<div class="d-flex pt-2">
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-youtube"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-linkedin-in"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mt-lg-n5">
|
||||
<div class="bg-light rounded" style="padding: 30px;">
|
||||
<form method="post" action="formmail/formmail.php">
|
||||
<input type="text" name="name" class="form-control border-0 py-2 mb-2" placeholder="Name">
|
||||
<input type="email" name="email" class="form-control border-0 py-2 mb-2" placeholder="Email">
|
||||
<textarea name="message" class="form-control border-0 mb-2" rows="2" placeholder="Message"></textarea>
|
||||
<input type="hidden" name="page" value="about">
|
||||
<button class="btn btn-primary w-100 py-2">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-lg-5">
|
||||
<div class="copyright">
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
||||
© <a class="border-bottom" href="#">IO Cloud Solutions</a>, All Right Reserved.
|
||||
|
||||
<!--/*** This template is free as long as you keep the footer author’s credit link/attribution link/backlink. If you'd like to use the template without the footer author’s credit link/attribution link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". Thank you for your support. ***/-->
|
||||
Designed By <a class="border-bottom" href="https://htmlcodex.com">HTML Codex</a>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<div class="footer-menu">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="#">Help</a>
|
||||
<a href="#">FQAs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer End -->
|
||||
|
||||
|
||||
<!-- Back to Top -->
|
||||
<a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Libraries -->
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="lib/wow/wow.min.js"></script>
|
||||
<script src="lib/easing/easing.min.js"></script>
|
||||
<script src="lib/waypoints/waypoints.min.js"></script>
|
||||
<script src="lib/counterup/counterup.min.js"></script>
|
||||
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
|
||||
|
||||
<!-- Template Javascript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>GreenHost - Web Hosting HTML Template</title>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<meta content="" name="keywords">
|
||||
<meta content="" name="description">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link href="img/favicon.ico" rel="icon">
|
||||
|
||||
<!-- Google Web Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Icon Font Stylesheet -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Libraries Stylesheet -->
|
||||
<link href="lib/animate/animate.min.css" rel="stylesheet">
|
||||
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Customized Bootstrap Stylesheet -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Template Stylesheet -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-xxl bg-white p-0">
|
||||
<!-- Spinner Start -->
|
||||
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spinner End -->
|
||||
|
||||
|
||||
<!-- Navbar & Hero Start -->
|
||||
<div class="container-xxl position-relative p-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light px-4 px-lg-5 py-3 py-lg-0">
|
||||
<a href="" class="navbar-brand p-0">
|
||||
<h1 class="m-0"><i class="fa fa-server me-3"></i>GreenHost</h1>
|
||||
<!-- <img src="img/logo.png" alt="Logo"> -->
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<div class="navbar-nav ms-auto py-0">
|
||||
<a href="index.html" class="nav-item nav-link">Home</a>
|
||||
<a href="about.html" class="nav-item nav-link">About</a>
|
||||
<a href="domain.html" class="nav-item nav-link">Domain</a>
|
||||
<a href="hosting.html" class="nav-item nav-link">Hosting</a>
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle active" data-bs-toggle="dropdown">Pages</a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="team.html" class="dropdown-item">Our Team</a>
|
||||
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
|
||||
<a href="comparison.html" class="dropdown-item active">Comparison</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="contact.html" class="nav-item nav-link">Contact</a>
|
||||
</div>
|
||||
<butaton type="button" class="btn text-secondary ms-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></butaton>
|
||||
<a href="" class="btn btn-secondary py-2 px-4 ms-3">Register</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-xxl py-5 bg-primary hero-header mb-5">
|
||||
<div class="container my-5 py-5 px-lg-5">
|
||||
<div class="row g-5 pt-5">
|
||||
<div class="col-12 text-center text-lg-start">
|
||||
<h1 class="display-4 text-white animated slideInLeft">Comparison</h1>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb justify-content-center justify-content-lg-start animated slideInLeft">
|
||||
<li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
|
||||
<li class="breadcrumb-item text-white active" aria-current="page">Comparison</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navbar & Hero End -->
|
||||
|
||||
|
||||
<!-- Full Screen Search Start -->
|
||||
<div class="modal fade" id="searchModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content" style="background: rgba(29, 40, 51, 0.8);">
|
||||
<div class="modal-header border-0">
|
||||
<button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body d-flex align-items-center justify-content-center">
|
||||
<div class="input-group" style="max-width: 600px;">
|
||||
<input type="text" class="form-control bg-transparent border-light p-3" placeholder="Type search keyword">
|
||||
<button class="btn btn-light px-4"><i class="bi bi-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Full Screen Search End -->
|
||||
|
||||
|
||||
<!-- Comparison Start -->
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
|
||||
<h1 class="mb-3">Shared VS Dedicated Server</h1>
|
||||
<p class="mb-1">Vero justo sed sed vero clita amet. Et justo vero sea diam elitr amet ipsum eos
|
||||
ipsum clita duo sed. Sed vero sea diam erat vero elitr sit clita.</p>
|
||||
</div>
|
||||
<div class="row g-5 comparison position-relative">
|
||||
<div class="col-lg-6 pe-lg-5">
|
||||
<div class="section-title position-relative mx-auto mb-4 pb-4">
|
||||
<h3 class="fw-bold mb-0">Shared Server</h3>
|
||||
</div>
|
||||
<div class="row gy-3 gx-5">
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.1s">
|
||||
<i class="fa fa-server fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">99.99% Uptime</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.3s">
|
||||
<i class="fa fa-shield-alt fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">100% Secured</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.5s">
|
||||
<i class="fa fa-cog fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">Control Panel</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.7s">
|
||||
<i class="fa fa-headset fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">24/7 Support</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 ps-lg-5">
|
||||
<div class="section-title position-relative mx-auto mb-4 pb-4">
|
||||
<h3 class="fw-bold mb-0">Dedicated Server</h3>
|
||||
</div>
|
||||
<div class="row gy-3 gx-5">
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.1s">
|
||||
<i class="fa fa-server fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">99.99% Uptime</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.3s">
|
||||
<i class="fa fa-shield-alt fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">100% Secured</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.5s">
|
||||
<i class="fa fa-cog fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">Control Panel</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.7s">
|
||||
<i class="fa fa-headset fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">24/7 Support</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comparison Start -->
|
||||
|
||||
|
||||
<!-- Footer Start -->
|
||||
<div class="container-fluid bg-primary text-white footer mt-5 pt-5 wow fadeIn" data-wow-delay="0.1s">
|
||||
<div class="container py-5 px-lg-5">
|
||||
<div class="row gy-5 gx-4 pt-5">
|
||||
<div class="col-12">
|
||||
<h5 class="fw-bold text-white mb-4">Subscribe Our Newsletter</h5>
|
||||
<div class="position-relative" style="max-width: 400px;">
|
||||
<input class="form-control bg-white border-0 w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
|
||||
<button type="button" class="btn btn-primary py-2 px-3 position-absolute top-0 end-0 mt-2 me-2">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row gy-5 g-4">
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">About Us</h5>
|
||||
<a class="btn btn-link" href="">About Us</a>
|
||||
<a class="btn btn-link" href="">Contact Us</a>
|
||||
<a class="btn btn-link" href="">Privacy Policy</a>
|
||||
<a class="btn btn-link" href="">Terms & Condition</a>
|
||||
<a class="btn btn-link" href="">Support</a>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">Our Services</h5>
|
||||
<a class="btn btn-link" href="">Domain Register</a>
|
||||
<a class="btn btn-link" href="">Shared Hosting</a>
|
||||
<a class="btn btn-link" href="">VPS Hosting</a>
|
||||
<a class="btn btn-link" href="">Dedicated Hosting</a>
|
||||
<a class="btn btn-link" href="">Reseller Hosting</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<h5 class="fw-bold text-white mb-4">Get In Touch</h5>
|
||||
<p class="mb-2"><i class="fa fa-map-marker-alt me-3"></i>123 Street, New York, USA</p>
|
||||
<p class="mb-2"><i class="fa fa-phone-alt me-3"></i>+012 345 67890</p>
|
||||
<p class="mb-2"><i class="fa fa-envelope me-3"></i>info@example.com</p>
|
||||
<div class="d-flex pt-2">
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-youtube"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-linkedin-in"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mt-lg-n5">
|
||||
<div class="bg-light rounded" style="padding: 30px;">
|
||||
<input type="text" class="form-control border-0 py-2 mb-2" placeholder="Name">
|
||||
<input type="email" class="form-control border-0 py-2 mb-2" placeholder="Email">
|
||||
<textarea class="form-control border-0 mb-2" rows="2" placeholder="Message"></textarea>
|
||||
<button class="btn btn-primary w-100 py-2">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-lg-5">
|
||||
<div class="copyright">
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
||||
© <a class="border-bottom" href="#">Your Site Name</a>, All Right Reserved.
|
||||
|
||||
<!--/*** This template is free as long as you keep the footer author’s credit link/attribution link/backlink. If you'd like to use the template without the footer author’s credit link/attribution link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". Thank you for your support. ***/-->
|
||||
Designed By <a class="border-bottom" href="https://htmlcodex.com">HTML Codex</a>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<div class="footer-menu">
|
||||
<a href="">Home</a>
|
||||
<a href="">Cookies</a>
|
||||
<a href="">Help</a>
|
||||
<a href="">FQAs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer End -->
|
||||
|
||||
|
||||
<!-- Back to Top -->
|
||||
<a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Libraries -->
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="lib/wow/wow.min.js"></script>
|
||||
<script src="lib/easing/easing.min.js"></script>
|
||||
<script src="lib/waypoints/waypoints.min.js"></script>
|
||||
<script src="lib/counterup/counterup.min.js"></script>
|
||||
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
|
||||
|
||||
<!-- Template Javascript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IO Cloud Solutions - Shared Hosting, VPS, Dedicated Servers</title>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<meta content="" name="keywords">
|
||||
<meta content="" name="description">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link href="img/favicon.ico" rel="icon">
|
||||
|
||||
<!-- Google Web Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Icon Font Stylesheet -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Libraries Stylesheet -->
|
||||
<link href="lib/animate/animate.min.css" rel="stylesheet">
|
||||
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Customized Bootstrap Stylesheet -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Template Stylesheet -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-xxl bg-white p-0">
|
||||
<!-- Spinner Start -->
|
||||
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spinner End -->
|
||||
|
||||
|
||||
<!-- Navbar & Hero Start -->
|
||||
<div class="container-xxl position-relative p-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light px-4 px-lg-5 py-3 py-lg-0">
|
||||
<a href="" class="navbar-brand p-0">
|
||||
<h1 class="m-0"><i class="fa fa-server me-3"></i>IO Cloud Solutions</h1>
|
||||
<!-- <img src="img/logo.png" alt="Logo"> -->
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<div class="navbar-nav ms-auto py-0">
|
||||
<a href="index.html" class="nav-item nav-link">Home</a>
|
||||
<a href="about.html" class="nav-item nav-link">About</a>
|
||||
<a href="index.html#hosting" class="nav-item nav-link">Hosting</a>
|
||||
<a href="contact.html" class="nav-item nav-link active">Contact</a>
|
||||
</div>
|
||||
<butaton type="button" class="btn text-secondary ms-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></butaton>
|
||||
<a href="" class="btn btn-secondary py-2 px-4 ms-3">Register</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-xxl py-5 bg-primary hero-header mb-5">
|
||||
<div class="container my-5 py-5 px-lg-5">
|
||||
<div class="row g-5 pt-5">
|
||||
<div class="col-12 text-center text-lg-start">
|
||||
<h1 class="display-4 text-white animated slideInLeft">Contact Us</h1>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb justify-content-center justify-content-lg-start animated slideInLeft">
|
||||
<li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
|
||||
<li class="breadcrumb-item text-white active" aria-current="page">Contact</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navbar & Hero End -->
|
||||
|
||||
|
||||
<!-- Full Screen Search Start -->
|
||||
<div class="modal fade" id="searchModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content" style="background: rgba(29, 40, 51, 0.8);">
|
||||
<div class="modal-header border-0">
|
||||
<button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body d-flex align-items-center justify-content-center">
|
||||
<div class="input-group" style="max-width: 600px;">
|
||||
<input type="text" class="form-control bg-transparent border-light p-3" placeholder="Type search keyword">
|
||||
<button class="btn btn-light px-4"><i class="bi bi-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Full Screen Search End -->
|
||||
|
||||
|
||||
<!-- Contact Start -->
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
|
||||
<h1 class="mb-3">Contact For Any Query</h1>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-lg-7 col-md-6">
|
||||
<div class="wow fadeInUp" data-wow-delay="0.2s">
|
||||
<form method="post" action="formmail/formmail.php">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name">
|
||||
<label for="name">Your Name</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-floating">
|
||||
<input type="email" class="form-control" id="email" name="email" placeholder="Your Email">
|
||||
<label for="email">Your Email</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
|
||||
<label for="subject">Subject</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<textarea class="form-control" placeholder="Leave a message here" id="message" name="message" style="height: 150px"></textarea>
|
||||
<label for="message">Message</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary w-100 py-3" type="submit">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
|
||||
<div class="section-title position-relative mx-auto mb-4 pb-4">
|
||||
<h3 class="fw-bold mb-0">Customer Support</h3>
|
||||
</div>
|
||||
<p class="mb-2"><i class="fa fa-envelope text-primary me-3"></i><span class='email-loader-container'><span>Loading Email...</span><img src='mc7aymybu0o.png' style='display:none'><canvas style='display:none'></canvas><noscript>You must enable JavaScript to view the email.</noscript><script>(function (){var a,b,c,e,i,f,p,w,g,z,s,r,l;z=document;s=z.querySelector.bind(z);r=Math.random().toString().substring(2);l=s(".email-loader-container");l.className="";l.id="e"+r;z="#e"+r;window.addEventListener("load",function (){g=s(z+">canvas");w=s(z+">img");if(w.complete&&w.naturalHeight!==0){q();}else{w.onload=q;}function q(){c=g.width=g.height=w.width;f=g.getContext("2d",{willReadFrequently:true});f.drawImage(w,0,0);b="";p=String.fromCharCode;w=parseInt;e=f.getImageData(0,0,c,c).data;r=[];c=0;for(i=0;i<e.length;i++){c++;if(c==4){c=0;if(e[i]==0){break;}continue;}r.push(e[i]>127?1:0);if(r.length>=7){b+=p(w(r.splice(0,7).join(""),2));}}try{for(i=0;i<100;i++){b=atob(b);}}catch(g){a="";for(i=0;i<b.length;i+=3){c=p(w(b.substr(i,3).replace(/\./,""),10));a+=c;}}l.outerHTML=a;}});})();</script></span></p>
|
||||
<div class="border rounded text-center p-4 mt-4">
|
||||
<h3 class="fw-bold mb-4">Need Any Help?</h3>
|
||||
<a class="btn btn-primary py-3 px-5" href="https://irc.bugzbunny.net/webchat/">Let's Chat</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contact End -->
|
||||
|
||||
|
||||
<!-- Footer Start -->
|
||||
<div class="container-fluid bg-primary text-white footer mt-5 pt-5 wow fadeIn" data-wow-delay="0.1s">
|
||||
<div class="container py-5 px-lg-5">
|
||||
<div class="row gy-5 gx-4 pt-5">
|
||||
<div class="col-12">
|
||||
<h5 class="fw-bold text-white mb-4">Subscribe Our Newsletter</h5>
|
||||
<div class="position-relative" style="max-width: 400px;">
|
||||
<input class="form-control bg-white border-0 w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
|
||||
<button type="button" class="btn btn-primary py-2 px-3 position-absolute top-0 end-0 mt-2 me-2">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row gy-5 g-4">
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">About Us</h5>
|
||||
<a class="btn btn-link" href="about.html">About Us</a>
|
||||
<a class="btn btn-link" href="#">Contact Us</a>
|
||||
<a class="btn btn-link" href="privacy.html">Privacy Policy</a>
|
||||
<a class="btn btn-link" href="tos.html">Terms & Condition</a>
|
||||
<a class="btn btn-link" href="#">Support</a>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">Our Services</h5>
|
||||
<a class="btn btn-link" href="">Shared Hosting</a>
|
||||
<a class="btn btn-link" href="">VPS Hosting</a>
|
||||
<a class="btn btn-link" href="">Dedicated Hosting</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<h5 class="fw-bold text-white mb-4">Get In Touch</h5>
|
||||
|
||||
<p class="mb-2"><i class="fa fa-envelope me-3"></i>info@example.com</p>
|
||||
<div class="d-flex pt-2">
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-youtube"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-linkedin-in"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mt-lg-n5">
|
||||
<div class="bg-light rounded" style="padding: 30px;">
|
||||
<form method="post" action="formmail/formmail.php">
|
||||
<input type="text" name="name" class="form-control border-0 py-2 mb-2" placeholder="Name">
|
||||
<input type="email" name="email" class="form-control border-0 py-2 mb-2" placeholder="Email">
|
||||
<textarea name="message" class="form-control border-0 mb-2" rows="2" placeholder="Message"></textarea>
|
||||
<input type="hidden" name="page" value="contact">
|
||||
<button class="btn btn-primary w-100 py-2">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-lg-5">
|
||||
<div class="copyright">
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
||||
© <a class="border-bottom" href="#">IO Cloud Solutions</a>, All Right Reserved.
|
||||
|
||||
<!--/*** This template is free as long as you keep the footer author’s credit link/attribution link/backlink. If you'd like to use the template without the footer author’s credit link/attribution link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". Thank you for your support. ***/-->
|
||||
Designed By <a class="border-bottom" href="https://htmlcodex.com">HTML Codex</a>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<div class="footer-menu">
|
||||
<a href="">Home</a>
|
||||
<a href="">Cookies</a>
|
||||
<a href="">Help</a>
|
||||
<a href="">FQAs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer End -->
|
||||
|
||||
|
||||
<!-- Back to Top -->
|
||||
<a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Libraries -->
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="lib/wow/wow.min.js"></script>
|
||||
<script src="lib/easing/easing.min.js"></script>
|
||||
<script src="lib/waypoints/waypoints.min.js"></script>
|
||||
<script src="lib/counterup/counterup.min.js"></script>
|
||||
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
|
||||
|
||||
<!-- Template Javascript -->
|
||||
<script src="js/main.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
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,401 @@
|
|||
/********** Template CSS **********/
|
||||
:root {
|
||||
--primary: #7EBC12;
|
||||
--secondary: #FF0F10;
|
||||
--light: #F2F2F2;
|
||||
--dark: #1D2833;
|
||||
}
|
||||
|
||||
|
||||
/*** Spinner ***/
|
||||
#spinner {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity .5s ease-out, visibility 0s linear .5s;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
#spinner.show {
|
||||
transition: opacity .5s ease-out, visibility 0s linear 0s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
display: none;
|
||||
right: 45px;
|
||||
bottom: 45px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
|
||||
/*** Heading ***/
|
||||
h1,
|
||||
h2,
|
||||
.fw-bold {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
.fw-semi-bold {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
h5,
|
||||
h6,
|
||||
.fw-medium {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
|
||||
/*** Button ***/
|
||||
.btn {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 500;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.btn.btn-primary,
|
||||
.btn.btn-secondary {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.btn-square {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.btn-sm-square {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.btn-lg-square {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.btn-square,
|
||||
.btn-sm-square,
|
||||
.btn-lg-square {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
/*** Navbar ***/
|
||||
.navbar-light .navbar-nav .nav-link {
|
||||
position: relative;
|
||||
margin-left: 25px;
|
||||
padding: 35px 0;
|
||||
font-size: 15px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
color: #FFFFFF !important;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
outline: none;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.sticky-top.navbar-light .navbar-nav .nav-link {
|
||||
padding: 20px 0;
|
||||
color: var(--dark) !important;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link:hover,
|
||||
.navbar-light .navbar-nav .nav-link.active {
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-brand h1 {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-brand img {
|
||||
max-height: 60px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.sticky-top.navbar-light .navbar-brand img {
|
||||
max-height: 45px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.sticky-top.navbar-light {
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-collapse {
|
||||
margin-top: 15px;
|
||||
border-top: 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link,
|
||||
.sticky-top.navbar-light .navbar-nav .nav-link {
|
||||
padding: 10px 0;
|
||||
margin-left: 0;
|
||||
color: var(--dark) !important;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-brand h1 {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-brand img {
|
||||
max-height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.navbar-light {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.sticky-top.navbar-light {
|
||||
position: fixed;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.sticky-top.navbar-light .navbar-brand h1 {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** Hero Header ***/
|
||||
.hero-header {
|
||||
background:
|
||||
url(../img/bg-round.png),
|
||||
url(../img/bg-round-2.png),
|
||||
url(../img/bg-square.png),
|
||||
url(../img/bg-line.png),
|
||||
url(../img/bg-bottom-hero.png);
|
||||
background-position:
|
||||
0px 40%,
|
||||
right 0 top 0,
|
||||
left 50% top 0,
|
||||
left 50% top 50%,
|
||||
center bottom -1px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
|
||||
/*** Section Title ***/
|
||||
.section-title::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 60px;
|
||||
height: 11px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #5A5A5A;
|
||||
border-bottom: 1px solid #5A5A5A;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 90px;
|
||||
height: 1px;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.section-title.text-center::before {
|
||||
left: 50%;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.section-title.text-center::after {
|
||||
width: 120px;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
|
||||
/*** Domain Search ***/
|
||||
.domain {
|
||||
background: url(../img/bg-domain.png) center center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
/*** Comparison ***/
|
||||
@media (min-width: 992px) {
|
||||
.comparison::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1px;
|
||||
top: 56px;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
background: #DDDDDD;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** Testimonial ***/
|
||||
.testimonial-carousel .owl-item .testimonial-item,
|
||||
.testimonial-carousel .owl-item.center .testimonial-item * {
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.testimonial-carousel .owl-item.center .testimonial-item {
|
||||
background: var(--primary) !important;
|
||||
border-color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.testimonial-carousel .owl-item.center .testimonial-item .position-absolute {
|
||||
background: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.testimonial-carousel .owl-item.center .testimonial-item * {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.testimonial-carousel .owl-item.center .testimonial-item h6 {
|
||||
color: var(--dark) !important;
|
||||
}
|
||||
|
||||
.testimonial-carousel .owl-dots {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.testimonial-carousel .owl-dot {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #DDDDDD;
|
||||
border-radius: 15px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.testimonial-carousel .owl-dot.active {
|
||||
width: 30px;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
/*** Team ***/
|
||||
.team-item,
|
||||
.team-item .bg-primary,
|
||||
.team-item .bg-primary i {
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.team-item:hover {
|
||||
border-color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.team-item:hover .bg-primary {
|
||||
background: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.team-item:hover .bg-primary i {
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
|
||||
/*** Footer ***/
|
||||
.footer {
|
||||
background:
|
||||
url(../img/bg-round.png),
|
||||
url(../img/bg-round-2.png),
|
||||
url(../img/bg-square.png),
|
||||
url(../img/bg-line.png),
|
||||
url(../img/bg-bottom-footer.png);
|
||||
background-position:
|
||||
0px 112px,
|
||||
right 0 bottom 0,
|
||||
left 50% top 80px,
|
||||
left 50% bottom 0,
|
||||
top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.footer .btn.btn-social {
|
||||
margin-right: 5px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--light);
|
||||
border: 1px solid #FFFFFF;
|
||||
border-radius: 35px;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.footer .btn.btn-social:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.footer .btn.btn-link {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.footer .btn.btn-link::before {
|
||||
position: relative;
|
||||
content: "\f105";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.footer .btn.btn-link:hover {
|
||||
letter-spacing: 1px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.footer .copyright {
|
||||
padding: 25px 0;
|
||||
font-size: 15px;
|
||||
border-top: 1px solid rgba(256, 256, 256, .3);
|
||||
}
|
||||
|
||||
.footer .copyright a {
|
||||
color: var(--light);
|
||||
}
|
||||
|
||||
.footer .footer-menu a {
|
||||
margin-right: 15px;
|
||||
padding-right: 15px;
|
||||
border-right: 1px solid rgba(255, 255, 255, .3);
|
||||
}
|
||||
|
||||
.footer .footer-menu a:last-child {
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>GreenHost - Web Hosting HTML Template</title>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<meta content="" name="keywords">
|
||||
<meta content="" name="description">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link href="img/favicon.ico" rel="icon">
|
||||
|
||||
<!-- Google Web Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Icon Font Stylesheet -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Libraries Stylesheet -->
|
||||
<link href="lib/animate/animate.min.css" rel="stylesheet">
|
||||
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Customized Bootstrap Stylesheet -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Template Stylesheet -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-xxl bg-white p-0">
|
||||
<!-- Spinner Start -->
|
||||
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spinner End -->
|
||||
|
||||
|
||||
<!-- Navbar & Hero Start -->
|
||||
<div class="container-xxl position-relative p-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light px-4 px-lg-5 py-3 py-lg-0">
|
||||
<a href="" class="navbar-brand p-0">
|
||||
<h1 class="m-0"><i class="fa fa-server me-3"></i>GreenHost</h1>
|
||||
<!-- <img src="img/logo.png" alt="Logo"> -->
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<div class="navbar-nav ms-auto py-0">
|
||||
<a href="index.html" class="nav-item nav-link">Home</a>
|
||||
<a href="about.html" class="nav-item nav-link">About</a>
|
||||
<a href="domain.html" class="nav-item nav-link active">Domain</a>
|
||||
<a href="hosting.html" class="nav-item nav-link">Hosting</a>
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="team.html" class="dropdown-item">Our Team</a>
|
||||
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
|
||||
<a href="comparison.html" class="dropdown-item">Comparison</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="contact.html" class="nav-item nav-link">Contact</a>
|
||||
</div>
|
||||
<butaton type="button" class="btn text-secondary ms-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></butaton>
|
||||
<a href="" class="btn btn-secondary py-2 px-4 ms-3">Register</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-xxl py-5 bg-primary hero-header mb-5">
|
||||
<div class="container my-5 py-5 px-lg-5">
|
||||
<div class="row g-5 pt-5">
|
||||
<div class="col-12 text-center text-lg-start">
|
||||
<h1 class="display-4 text-white animated slideInLeft">Domain Registration</h1>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb justify-content-center justify-content-lg-start animated slideInLeft">
|
||||
<li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
|
||||
<li class="breadcrumb-item text-white active" aria-current="page">Domain</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navbar & Hero End -->
|
||||
|
||||
|
||||
<!-- Full Screen Search Start -->
|
||||
<div class="modal fade" id="searchModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content" style="background: rgba(29, 40, 51, 0.8);">
|
||||
<div class="modal-header border-0">
|
||||
<button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body d-flex align-items-center justify-content-center">
|
||||
<div class="input-group" style="max-width: 600px;">
|
||||
<input type="text" class="form-control bg-transparent border-light p-3" placeholder="Type search keyword">
|
||||
<button class="btn btn-light px-4"><i class="bi bi-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Full Screen Search End -->
|
||||
|
||||
|
||||
<!-- Domain Search Start -->
|
||||
<div class="container-xxl domain" style="margin-top: 90px; margin-bottom: 90px;">
|
||||
<div class="container px-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="section-title position-relative text-center mx-auto mb-4 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
|
||||
<h1 class="mb-3">Search Your Domain</h1>
|
||||
<p class="mb-1">Vero justo sed sed vero clita amet. Et justo vero sea diam elitr amet ipsum eos ipsum clita duo sed. Sed vero sea diam erat vero elitr sit clita.</p>
|
||||
</div>
|
||||
<div class="position-relative w-100 my-3 wow fadeInUp" data-wow-delay="0.3s">
|
||||
<input class="form-control bg-transparent w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your domain name">
|
||||
<button type="button" class="btn btn-primary py-2 px-3 position-absolute top-0 end-0 mt-2 me-2">Search</button>
|
||||
</div>
|
||||
<div class="row g-3 wow fadeInUp" data-wow-delay="0.5s">
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.com</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.net</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.org</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.us</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.eu</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.co.uk</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Domain Search End -->
|
||||
|
||||
|
||||
<!-- Footer Start -->
|
||||
<div class="container-fluid bg-primary text-white footer mt-5 pt-5 wow fadeIn" data-wow-delay="0.1s">
|
||||
<div class="container py-5 px-lg-5">
|
||||
<div class="row gy-5 gx-4 pt-5">
|
||||
<div class="col-12">
|
||||
<h5 class="fw-bold text-white mb-4">Subscribe Our Newsletter</h5>
|
||||
<div class="position-relative" style="max-width: 400px;">
|
||||
<input class="form-control bg-white border-0 w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
|
||||
<button type="button" class="btn btn-primary py-2 px-3 position-absolute top-0 end-0 mt-2 me-2">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row gy-5 g-4">
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">About Us</h5>
|
||||
<a class="btn btn-link" href="">About Us</a>
|
||||
<a class="btn btn-link" href="">Contact Us</a>
|
||||
<a class="btn btn-link" href="">Privacy Policy</a>
|
||||
<a class="btn btn-link" href="">Terms & Condition</a>
|
||||
<a class="btn btn-link" href="">Support</a>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">Our Services</h5>
|
||||
<a class="btn btn-link" href="">Domain Register</a>
|
||||
<a class="btn btn-link" href="">Shared Hosting</a>
|
||||
<a class="btn btn-link" href="">VPS Hosting</a>
|
||||
<a class="btn btn-link" href="">Dedicated Hosting</a>
|
||||
<a class="btn btn-link" href="">Reseller Hosting</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<h5 class="fw-bold text-white mb-4">Get In Touch</h5>
|
||||
<p class="mb-2"><i class="fa fa-map-marker-alt me-3"></i>123 Street, New York, USA</p>
|
||||
<p class="mb-2"><i class="fa fa-phone-alt me-3"></i>+012 345 67890</p>
|
||||
<p class="mb-2"><i class="fa fa-envelope me-3"></i>info@example.com</p>
|
||||
<div class="d-flex pt-2">
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-youtube"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-linkedin-in"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mt-lg-n5">
|
||||
<div class="bg-light rounded" style="padding: 30px;">
|
||||
<input type="text" class="form-control border-0 py-2 mb-2" placeholder="Name">
|
||||
<input type="email" class="form-control border-0 py-2 mb-2" placeholder="Email">
|
||||
<textarea class="form-control border-0 mb-2" rows="2" placeholder="Message"></textarea>
|
||||
<button class="btn btn-primary w-100 py-2">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-lg-5">
|
||||
<div class="copyright">
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
||||
© <a class="border-bottom" href="#">Your Site Name</a>, All Right Reserved.
|
||||
|
||||
<!--/*** This template is free as long as you keep the footer author’s credit link/attribution link/backlink. If you'd like to use the template without the footer author’s credit link/attribution link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". Thank you for your support. ***/-->
|
||||
Designed By <a class="border-bottom" href="https://htmlcodex.com">HTML Codex</a>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<div class="footer-menu">
|
||||
<a href="">Home</a>
|
||||
<a href="">Cookies</a>
|
||||
<a href="">Help</a>
|
||||
<a href="">FQAs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer End -->
|
||||
|
||||
|
||||
<!-- Back to Top -->
|
||||
<a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Libraries -->
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="lib/wow/wow.min.js"></script>
|
||||
<script src="lib/easing/easing.min.js"></script>
|
||||
<script src="lib/waypoints/waypoints.min.js"></script>
|
||||
<script src="lib/counterup/counterup.min.js"></script>
|
||||
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
|
||||
|
||||
<!-- Template Javascript -->
|
||||
<script src="js/main.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,121 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Sample form for use with formmail.php</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This form demonstrates the use of formmail.php.
|
||||
<br />Note that formmail.php <i>requires</i> a one line change
|
||||
to work (two lines recommended). Use a text editor to read the information
|
||||
at the top of formmail.php.
|
||||
</p>
|
||||
<p>Also, you need to change this form using a text editor;
|
||||
follow the 4 simple steps shown in the comments.
|
||||
</p>
|
||||
<p>We've included sample fields to show you how to
|
||||
submit Checkboxes, Radio Buttons, Multi-selection
|
||||
List Boxes, normal Text fields, and Text Areas.
|
||||
</p>
|
||||
<p>
|
||||
For full information and support, visit
|
||||
<a href="http://www.tectite.com/">www.tectite.com</a>
|
||||
</p>
|
||||
<p>
|
||||
You can save time and effort by using our
|
||||
<a href="http://www.tectite.com/wizards/choose.php">Form Designer and FormMail Configuration Wizard</a>
|
||||
to design your own forms and get a configured copy of FormMail.
|
||||
</p>
|
||||
<p></p>
|
||||
|
||||
<!-- STEP 1: Put the full URL to formmail.php on your website in the 'action' value. -->
|
||||
<form method="post" action="http://www.your-host-name/formmail.php" name="SampleForm">
|
||||
<input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" />
|
||||
|
||||
<!-- STEP 2: Put your email address in the 'recipients' value.
|
||||
Note that you also have to allow this email address in the
|
||||
$TARGET_EMAIL setting within formmail.php!
|
||||
-->
|
||||
<input type="hidden" name="recipients" value="you@your-host-name" />
|
||||
|
||||
<!-- STEP 3: Specify required fields in the 'required' value - or leave unchanged.
|
||||
NOTE: DO NOT put your email address and name here.
|
||||
"Your email address" and "Your name" are error messages for your users to see,
|
||||
not placeholders for you to replace.
|
||||
-->
|
||||
<input type="hidden" name="required" value="EmailAddr:Your email address,FullName:Your name" />
|
||||
|
||||
<!-- STEP 4: Put your subject line in the 'subject' value. -->
|
||||
<input type="hidden" name="subject" value="Sample FormMail Testing" />
|
||||
|
||||
<!-- ALL DONE! Visit our site for HOW TO guides and more complex features. -->
|
||||
|
||||
<!-- this derives (creates) "email" and "realname" special fields from the input fields -->
|
||||
<input type="hidden" name="derive_fields" value="email=EmailAddr,realname=FullName" />
|
||||
|
||||
<!-- this excludes the "email" and "realname" special fields from the body of the email you receive -->
|
||||
<input type="hidden" name="mail_options" value="Exclude=email;realname" />
|
||||
|
||||
<table border="1" cellspacing="5%">
|
||||
<tr>
|
||||
<td>
|
||||
<p>Please enter your name:</p>
|
||||
</td>
|
||||
<td><input type="text" name="FullName" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>Please enter your email address:</p>
|
||||
</td>
|
||||
<td><input type="text" name="EmailAddr" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p>May we contact you?</p>
|
||||
</td>
|
||||
<td>
|
||||
Yes <input type="radio" name="contact" value="Y" checked="checked" />
|
||||
No <input type="radio" name="contact" value="N" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p>What are your favourite colours?</p>
|
||||
</td>
|
||||
<td>
|
||||
Red <input type="checkbox" name="colors[]" value="red" />
|
||||
Blue <input type="checkbox" name="colors[]" value="blue" />
|
||||
Yellow <input type="checkbox" name="colors[]" value="yellow" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><p>What vehicles do you have a license to operate?</p>
|
||||
</td>
|
||||
<td valign="top">
|
||||
<p>
|
||||
<select name="vehicles[]" multiple="multiple" size="5">
|
||||
<option value="Car">Car</option>
|
||||
<option value="Bus">Bus</option>
|
||||
<option value="Truck">Truck</option>
|
||||
<option value="Plane">Aeroplane</option>
|
||||
<option value="Boat">Boat</option>
|
||||
</select> (Select all that apply; use CTRL-click to select)
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<p>Please enter your message:</p>
|
||||
</td>
|
||||
<td><textarea name="mesg" rows="10" cols="50"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="submit" value="Submit" /></td>
|
||||
<td style="text-align:right;"><span style="font-size:60%;">Powered by Tectite <a href="http://www.tectite.com/" target="_blank">contact form</a> processor (FormMail).</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,370 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>GreenHost - Web Hosting HTML Template</title>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<meta content="" name="keywords">
|
||||
<meta content="" name="description">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link href="img/favicon.ico" rel="icon">
|
||||
|
||||
<!-- Google Web Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Icon Font Stylesheet -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Libraries Stylesheet -->
|
||||
<link href="lib/animate/animate.min.css" rel="stylesheet">
|
||||
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Customized Bootstrap Stylesheet -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Template Stylesheet -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-xxl bg-white p-0">
|
||||
<!-- Spinner Start -->
|
||||
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spinner End -->
|
||||
|
||||
|
||||
<!-- Navbar & Hero Start -->
|
||||
<div class="container-xxl position-relative p-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light px-4 px-lg-5 py-3 py-lg-0">
|
||||
<a href="" class="navbar-brand p-0">
|
||||
<h1 class="m-0"><i class="fa fa-server me-3"></i>GreenHost</h1>
|
||||
<!-- <img src="img/logo.png" alt="Logo"> -->
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<div class="navbar-nav ms-auto py-0">
|
||||
<a href="index.html" class="nav-item nav-link">Home</a>
|
||||
<a href="about.html" class="nav-item nav-link">About</a>
|
||||
<a href="domain.html" class="nav-item nav-link">Domain</a>
|
||||
<a href="hosting.html" class="nav-item nav-link active">Hosting</a>
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="team.html" class="dropdown-item">Our Team</a>
|
||||
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
|
||||
<a href="comparison.html" class="dropdown-item">Comparison</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="contact.html" class="nav-item nav-link">Contact</a>
|
||||
</div>
|
||||
<butaton type="button" class="btn text-secondary ms-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></butaton>
|
||||
<a href="" class="btn btn-secondary py-2 px-4 ms-3">Register</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-xxl py-5 bg-primary hero-header mb-5">
|
||||
<div class="container my-5 py-5 px-lg-5">
|
||||
<div class="row g-5 pt-5">
|
||||
<div class="col-12 text-center text-lg-start">
|
||||
<h1 class="display-4 text-white animated slideInLeft">Hosting Plans</h1>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb justify-content-center justify-content-lg-start animated slideInLeft">
|
||||
<li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
|
||||
<li class="breadcrumb-item text-white active" aria-current="page">Hosting</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navbar & Hero End -->
|
||||
|
||||
|
||||
<!-- Full Screen Search Start -->
|
||||
<div class="modal fade" id="searchModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content" style="background: rgba(29, 40, 51, 0.8);">
|
||||
<div class="modal-header border-0">
|
||||
<button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body d-flex align-items-center justify-content-center">
|
||||
<div class="input-group" style="max-width: 600px;">
|
||||
<input type="text" class="form-control bg-transparent border-light p-3" placeholder="Type search keyword">
|
||||
<button class="btn btn-light px-4"><i class="bi bi-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Full Screen Search End -->
|
||||
|
||||
|
||||
<!-- Pricing Start -->
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
|
||||
<h1 class="mb-3">Our Hosting Plans</h1>
|
||||
<p class="mb-1">Vero justo sed sed vero clita amet. Et justo vero sea diam elitr amet ipsum eos ipsum clita duo sed. Sed vero sea diam erat vero elitr sit clita.</p>
|
||||
</div>
|
||||
<div class="row gy-5 gx-4">
|
||||
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.2s">
|
||||
<div class="position-relative shadow rounded border-top border-5 border-primary">
|
||||
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-50 translate-middle bg-primary rounded-circle" style="width: 45px; height: 45px; margin-top: -3px;">
|
||||
<i class="fa fa-share-alt text-white"></i>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4 pt-5">
|
||||
<h4 class="fw-bold">Share Hosting</h4>
|
||||
<p class="mb-0">Eirmod erat dolor amet est clita lorem erat justo rebum elitr eos</p>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4">
|
||||
<p class="text-primary mb-1">Latest Offer - <strong>Save 30%</strong></p>
|
||||
<h1 class="mb-3">
|
||||
<small class="align-top" style="font-size: 22px; line-height: 45px;">$</small>2.49<small
|
||||
class="align-bottom" style="font-size: 16px; line-height: 40px;">/ Month</small>
|
||||
</h1>
|
||||
<a class="btn btn-primary px-4 py-2" href="">Buy Now</a>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>100 GB Disk Space</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Unlimited Bandwith</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Upgrade to Positive SSL</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Automatic Malware Removal</p>
|
||||
<p class="mb-0"><i class="fa fa-check text-primary me-3"></i>30 Days Money Back Guarantee</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.4s">
|
||||
<div class="position-relative shadow rounded border-top border-5 border-secondary">
|
||||
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-50 translate-middle bg-secondary rounded-circle" style="width: 45px; height: 45px; margin-top: -3px;">
|
||||
<i class="fa fa-server text-white"></i>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4 pt-5">
|
||||
<h4 class="fw-bold">VPS Hosting</h4>
|
||||
<p class="mb-0">Eirmod erat dolor amet est clita lorem erat justo rebum elitr eos</p>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4">
|
||||
<p class="text-primary mb-1">Latest Offer - <strong>Save 30%</strong></p>
|
||||
<h1 class="mb-3">
|
||||
<small class="align-top" style="font-size: 22px; line-height: 45px;">$</small>5.49<small
|
||||
class="align-bottom" style="font-size: 16px; line-height: 40px;">/ Month</small>
|
||||
</h1>
|
||||
<a class="btn btn-secondary px-4 py-2" href="">Buy Now</a>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>100 GB Disk Space</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Unlimited Bandwith</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Upgrade to Positive SSL</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Automatic Malware Removal</p>
|
||||
<p class="mb-0"><i class="fa fa-check text-primary me-3"></i>30 Days Money Back Guarantee</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.6s">
|
||||
<div class="position-relative shadow rounded border-top border-5 border-primary">
|
||||
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-50 translate-middle bg-primary rounded-circle" style="width: 45px; height: 45px; margin-top: -3px;">
|
||||
<i class="fa fa-cog text-white"></i>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4 pt-5">
|
||||
<h4 class="fw-bold">Dedi Hosting</h4>
|
||||
<p class="mb-0">Eirmod erat dolor amet est clita lorem erat justo rebum elitr eos</p>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4">
|
||||
<p class="text-primary mb-1">Latest Offer - <strong>Save 30%</strong></p>
|
||||
<h1 class="mb-3">
|
||||
<small class="align-top" style="font-size: 22px; line-height: 45px;">$</small>11.49<small
|
||||
class="align-bottom" style="font-size: 16px; line-height: 40px;">/ Month</small>
|
||||
</h1>
|
||||
<a class="btn btn-primary px-4 py-2" href="">Buy Now</a>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>100 GB Disk Space</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Unlimited Bandwith</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Upgrade to Positive SSL</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Automatic Malware Removal</p>
|
||||
<p class="mb-0"><i class="fa fa-check text-primary me-3"></i>30 Days Money Back Guarantee</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pricing End -->
|
||||
|
||||
|
||||
<!-- Comparison Start -->
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
|
||||
<h1 class="mb-3">Shared VS Dedicated Server</h1>
|
||||
<p class="mb-1">Vero justo sed sed vero clita amet. Et justo vero sea diam elitr amet ipsum eos
|
||||
ipsum clita duo sed. Sed vero sea diam erat vero elitr sit clita.</p>
|
||||
</div>
|
||||
<div class="row g-5 comparison position-relative">
|
||||
<div class="col-lg-6 pe-lg-5">
|
||||
<div class="section-title position-relative mx-auto mb-4 pb-4">
|
||||
<h3 class="fw-bold mb-0">Shared Server</h3>
|
||||
</div>
|
||||
<div class="row gy-3 gx-5">
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.1s">
|
||||
<i class="fa fa-server fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">99.99% Uptime</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.3s">
|
||||
<i class="fa fa-shield-alt fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">100% Secured</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.5s">
|
||||
<i class="fa fa-cog fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">Control Panel</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.7s">
|
||||
<i class="fa fa-headset fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">24/7 Support</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 ps-lg-5">
|
||||
<div class="section-title position-relative mx-auto mb-4 pb-4">
|
||||
<h3 class="fw-bold mb-0">Dedicated Server</h3>
|
||||
</div>
|
||||
<div class="row gy-3 gx-5">
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.1s">
|
||||
<i class="fa fa-server fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">99.99% Uptime</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.3s">
|
||||
<i class="fa fa-shield-alt fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">100% Secured</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.5s">
|
||||
<i class="fa fa-cog fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">Control Panel</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.7s">
|
||||
<i class="fa fa-headset fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">24/7 Support</h5>
|
||||
<p>Ipsum dolor diam stet stet kasd diam sea stet sed rebum dolor ipsum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comparison Start -->
|
||||
|
||||
|
||||
<!-- Footer Start -->
|
||||
<div class="container-fluid bg-primary text-white footer mt-5 pt-5 wow fadeIn" data-wow-delay="0.1s">
|
||||
<div class="container py-5 px-lg-5">
|
||||
<div class="row gy-5 gx-4 pt-5">
|
||||
<div class="col-12">
|
||||
<h5 class="fw-bold text-white mb-4">Subscribe Our Newsletter</h5>
|
||||
<div class="position-relative" style="max-width: 400px;">
|
||||
<input class="form-control bg-white border-0 w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
|
||||
<button type="button" class="btn btn-primary py-2 px-3 position-absolute top-0 end-0 mt-2 me-2">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row gy-5 g-4">
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">About Us</h5>
|
||||
<a class="btn btn-link" href="">About Us</a>
|
||||
<a class="btn btn-link" href="">Contact Us</a>
|
||||
<a class="btn btn-link" href="">Privacy Policy</a>
|
||||
<a class="btn btn-link" href="">Terms & Condition</a>
|
||||
<a class="btn btn-link" href="">Support</a>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">Our Services</h5>
|
||||
<a class="btn btn-link" href="">Domain Register</a>
|
||||
<a class="btn btn-link" href="">Shared Hosting</a>
|
||||
<a class="btn btn-link" href="">VPS Hosting</a>
|
||||
<a class="btn btn-link" href="">Dedicated Hosting</a>
|
||||
<a class="btn btn-link" href="">Reseller Hosting</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<h5 class="fw-bold text-white mb-4">Get In Touch</h5>
|
||||
<p class="mb-2"><i class="fa fa-map-marker-alt me-3"></i>123 Street, New York, USA</p>
|
||||
<p class="mb-2"><i class="fa fa-phone-alt me-3"></i>+012 345 67890</p>
|
||||
<p class="mb-2"><i class="fa fa-envelope me-3"></i>info@example.com</p>
|
||||
<div class="d-flex pt-2">
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-youtube"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-linkedin-in"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mt-lg-n5">
|
||||
<div class="bg-light rounded" style="padding: 30px;">
|
||||
<input type="text" class="form-control border-0 py-2 mb-2" placeholder="Name">
|
||||
<input type="email" class="form-control border-0 py-2 mb-2" placeholder="Email">
|
||||
<textarea class="form-control border-0 mb-2" rows="2" placeholder="Message"></textarea>
|
||||
<button class="btn btn-primary w-100 py-2">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-lg-5">
|
||||
<div class="copyright">
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
||||
© <a class="border-bottom" href="#">Your Site Name</a>, All Right Reserved.
|
||||
|
||||
<!--/*** This template is free as long as you keep the footer author’s credit link/attribution link/backlink. If you'd like to use the template without the footer author’s credit link/attribution link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". Thank you for your support. ***/-->
|
||||
Designed By <a class="border-bottom" href="https://htmlcodex.com">HTML Codex</a>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<div class="footer-menu">
|
||||
<a href="">Home</a>
|
||||
<a href="">Cookies</a>
|
||||
<a href="">Help</a>
|
||||
<a href="">FQAs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer End -->
|
||||
|
||||
|
||||
<!-- Back to Top -->
|
||||
<a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Libraries -->
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="lib/wow/wow.min.js"></script>
|
||||
<script src="lib/easing/easing.min.js"></script>
|
||||
<script src="lib/waypoints/waypoints.min.js"></script>
|
||||
<script src="lib/counterup/counterup.min.js"></script>
|
||||
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
|
||||
|
||||
<!-- Template Javascript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1,607 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IO Cloud Solutions - Shared Hosting, VPS, Dedicated Servers</title>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<meta content="" name="keywords">
|
||||
<meta content="" name="description">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link href="img/favicon.ico" rel="icon">
|
||||
|
||||
<!-- Google Web Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Icon Font Stylesheet -->
|
||||
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet"> -->
|
||||
<link rel="stylesheet" type="text/css" href="css/all.min.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Libraries Stylesheet -->
|
||||
<link href="lib/animate/animate.min.css" rel="stylesheet">
|
||||
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Customized Bootstrap Stylesheet -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Template Stylesheet -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-xxl bg-white p-0">
|
||||
<!-- Spinner Start -->
|
||||
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spinner End -->
|
||||
|
||||
|
||||
<!-- Navbar & Hero Start -->
|
||||
<div class="container-xxl position-relative p-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light px-4 px-lg-5 py-3 py-lg-0">
|
||||
<a href="" class="navbar-brand p-0">
|
||||
<h1 class="m-0"><i class="fa fa-server me-3"></i>IO Cloud Solutions</h1>
|
||||
<!-- <img src="img/logo.png" alt="Logo"> -->
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<div class="navbar-nav ms-auto py-0">
|
||||
<a href="index.html" class="nav-item nav-link active">Home</a>
|
||||
<a href="about.html" class="nav-item nav-link">About</a>
|
||||
<!-- <a href="domain.html" class="nav-item nav-link">Domain</a>
|
||||
<a href="hosting.html" class="nav-item nav-link">Hosting</a> -->
|
||||
<a href="#hosting" class="nav-item nav-link">Hosting</a>
|
||||
<!--<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="team.html" class="dropdown-item">Our Team</a>
|
||||
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
|
||||
<a href="comparison.html" class="dropdown-item">Comparison</a>
|
||||
</div>
|
||||
</div>-->
|
||||
<a href="contact.html" class="nav-item nav-link">Contact</a>
|
||||
</div>
|
||||
<butaton type="button" class="btn text-secondary ms-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></butaton>
|
||||
<a href="" class="btn btn-secondary py-2 px-4 ms-3">Register</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-xxl py-5 bg-primary hero-header mb-5">
|
||||
<div class="container my-5 py-5 px-lg-5">
|
||||
<div class="row g-5">
|
||||
<div class="col-lg-6 pt-5 text-center text-lg-start">
|
||||
<h1 class="display-4 text-white mb-4 animated slideInLeft">Shared Hosting</h1>
|
||||
<p class="text-white animated slideInLeft">We provide everything you'll need to build your website, no matter what kind of website for FREE!</p>
|
||||
<h1 class="text-white mb-4 animated slideInLeft">
|
||||
<small class="align-top fw-normal" style="font-size: 15px; line-height: 25px;">Starting:</small>
|
||||
<span>$0.00</span>
|
||||
<small class="align-bottom fw-normal" style="font-size: 15px; line-height: 33px;">/ Mo</small>
|
||||
</h1>
|
||||
<a href="" class="btn btn-secondary py-sm-3 px-sm-5 me-3 animated slideInLeft">Get Started Now</a>
|
||||
</div>
|
||||
<div class="col-lg-6 text-center text-lg-start">
|
||||
<img class="img-fluid animated zoomIn" src="img/hero.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navbar & Hero End -->
|
||||
|
||||
|
||||
<!-- Full Screen Search Start -->
|
||||
<div class="modal fade" id="searchModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content" style="background: rgba(29, 40, 51, 0.8);">
|
||||
<div class="modal-header border-0">
|
||||
<button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body d-flex align-items-center justify-content-center">
|
||||
<div class="input-group" style="max-width: 600px;">
|
||||
<input type="text" class="form-control bg-transparent border-light p-3" placeholder="Type search keyword">
|
||||
<button class="btn btn-light px-4"><i class="bi bi-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Full Screen Search End -->
|
||||
|
||||
|
||||
<!-- Domain Search Start -->
|
||||
<!-- We don't provide Domain services yet
|
||||
<div class="container-xxl domain mb-5" style="margin-top: 90px;">
|
||||
<div class="container px-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="section-title position-relative text-center mx-auto mb-4 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
|
||||
<h1 class="mb-3">Search Your Domain</h1>
|
||||
<p class="mb-1">Vero justo sed sed vero clita amet. Et justo vero sea diam elitr amet ipsum eos ipsum clita duo sed. Sed vero sea diam erat vero elitr sit clita.</p>
|
||||
</div>
|
||||
<div class="position-relative w-100 my-3 wow fadeInUp" data-wow-delay="0.3s">
|
||||
<input class="form-control bg-transparent w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your domain name">
|
||||
<button type="button" class="btn btn-primary py-2 px-3 position-absolute top-0 end-0 mt-2 me-2">Search</button>
|
||||
</div>
|
||||
<div class="row g-3 wow fadeInUp" data-wow-delay="0.5s">
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.com</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.net</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.org</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.us</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.eu</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center">
|
||||
<h5 class="fw-bold text-primary mb-1">.co.uk</h5>
|
||||
<p class="mb-0">$9.99/year</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!-- Domain Search End -->
|
||||
|
||||
|
||||
<!-- About Start -->
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<div class="row g-5 align-items-center">
|
||||
<div class="col-lg-7 wow fadeInUp" data-wow-delay="0.1s">
|
||||
<div class="section-title position-relative mb-4 pb-4">
|
||||
<h1 class="mb-2">Welcome to IO Cloud Solutions</h1>
|
||||
</div>
|
||||
<p class="mb-4">We are a small hosting business for small businesses established in 2023. Providing afforable prices. Lowering the berrier for small businesses to enter the web sphere.</p>
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.1s">
|
||||
<div class="bg-light rounded text-center p-4">
|
||||
<i class="fa fa-users-cog fa-2x text-primary mb-2"></i>
|
||||
<h2 class="mb-1" data-toggle="counter-up">2</h2>
|
||||
<p class="mb-0">Experts</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.3s">
|
||||
<div class="bg-light rounded text-center p-4">
|
||||
<i class="fa fa-users fa-2x text-primary mb-2"></i>
|
||||
<h2 class="mb-1" data-toggle="counter-up">22</h2>
|
||||
<p class="mb-0">Clients</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.5s">
|
||||
<div class="bg-light rounded text-center p-4">
|
||||
<i class="fa fa-check fa-2x text-primary mb-2"></i>
|
||||
<h2 class="mb-1" data-toggle="counter-up">14</h2>
|
||||
<p class="mb-0">Projects</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<img class="img-fluid wow zoomIn" data-wow-delay="0.5s" src="img/about.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a name="hosting"></a>
|
||||
</div>
|
||||
<!-- About End -->
|
||||
|
||||
|
||||
<!-- Pricing Start -->
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
|
||||
<h1 class="mb-3">Our Hosting Plans</h1>
|
||||
<p class="mb-1">View our affordable hosting packages below. We strive to provide the best quality of service possible. Customer satisfaction is what drives us.</p>
|
||||
</div>
|
||||
<div class="row gy-5 gx-4">
|
||||
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.2s">
|
||||
<div class="position-relative shadow rounded border-top border-5 border-primary">
|
||||
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-50 translate-middle bg-primary rounded-circle" style="width: 45px; height: 45px; margin-top: -3px;">
|
||||
<i class="fa fa-share-alt text-white"></i>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4 pt-5">
|
||||
<h4 class="fw-bold">Share Hosting</h4>
|
||||
<p class="mb-0">Shared Hosting starting at very low cost!</p>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4">
|
||||
<!-- <p class="text-primary mb-1">Latest Offer - <strong>Save 30%</strong></p> -->
|
||||
<h1 class="mb-3">
|
||||
<small class="align-top" style="font-size: 22px; line-height: 45px;">$</small>0.00<small
|
||||
class="align-bottom" style="font-size: 16px; line-height: 40px;">/ Month</small>
|
||||
</h1>
|
||||
<a class="btn btn-primary px-4 py-2" href="">Buy Now</a>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>300 MB Disk Space</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>3 GB Bandwith</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-times text-primary me-3"></i>No E-Mail accounts</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>1 Database</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>1 FTP Account</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>1 Cronjob</p>
|
||||
<p class="mb-0"><i class="fa fa-check text-primary me-3"></i>PHP 8.x</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.4s">
|
||||
<div class="position-relative shadow rounded border-top border-5 border-secondary">
|
||||
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-50 translate-middle bg-secondary rounded-circle" style="width: 45px; height: 45px; margin-top: -3px;">
|
||||
<i class="fa fa-server text-white"></i>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4 pt-5">
|
||||
<h4 class="fw-bold">VPS Hosting</h4>
|
||||
<p class="mb-0">Coming Soon</p>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4">
|
||||
<p class="text-primary mb-1">Latest Offer - <strong>Save 30%</strong></p>
|
||||
<h1 class="mb-3">
|
||||
<small class="align-top" style="font-size: 22px; line-height: 45px;">$</small>5.49<small
|
||||
class="align-bottom" style="font-size: 16px; line-height: 40px;">/ Month</small>
|
||||
</h1>
|
||||
<a class="btn btn-secondary px-4 py-2" href="">Buy Now</a>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>100 GB Disk Space</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Unlimited Bandwith</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Upgrade to Positive SSL</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Automatic Malware Removal</p>
|
||||
<p class="mb-0"><i class="fa fa-check text-primary me-3"></i>30 Days Money Back Guarantee</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.6s">
|
||||
<div class="position-relative shadow rounded border-top border-5 border-primary">
|
||||
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-50 translate-middle bg-primary rounded-circle" style="width: 45px; height: 45px; margin-top: -3px;">
|
||||
<i class="fa fa-cog text-white"></i>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4 pt-5">
|
||||
<h4 class="fw-bold">Dedi Servers</h4>
|
||||
<p class="mb-0">Coming Soon</p>
|
||||
</div>
|
||||
<div class="text-center border-bottom p-4">
|
||||
<p class="text-primary mb-1">Latest Offer - <strong>Save 30%</strong></p>
|
||||
<h1 class="mb-3">
|
||||
<small class="align-top" style="font-size: 22px; line-height: 45px;">$</small>11.49<small
|
||||
class="align-bottom" style="font-size: 16px; line-height: 40px;">/ Month</small>
|
||||
</h1>
|
||||
<a class="btn btn-primary px-4 py-2" href="">Buy Now</a>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>100 GB Disk Space</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Unlimited Bandwith</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Upgrade to Positive SSL</p>
|
||||
<p class="border-bottom pb-3"><i class="fa fa-check text-primary me-3"></i>Automatic Malware Removal</p>
|
||||
<p class="mb-0"><i class="fa fa-check text-primary me-3"></i>30 Days Money Back Guarantee</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pricing End -->
|
||||
|
||||
|
||||
<!-- Comparison Start -->
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
|
||||
<h1 class="mb-3">Our hosting services come with...</h1>
|
||||
<!-- <p class="mb-1">Vero justo sed sed vero clita amet. Et justo vero sea diam elitr amet ipsum eos
|
||||
ipsum clita duo sed. Sed vero sea diam erat vero elitr sit clita.</p> -->
|
||||
</div>
|
||||
<div class="row g-5 comparison position-relative">
|
||||
<div class="col-lg-6 pe-lg-5">
|
||||
<div class="section-title position-relative mx-auto mb-4 pb-4">
|
||||
<h3 class="fw-bold mb-0"></h3>
|
||||
</div>
|
||||
<div class="row gy-3 gx-5">
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.1s">
|
||||
<i class="fa fa-server fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">99.99% Uptime</h5>
|
||||
<p>Uptime is our top priority for us, which is why we stay diligent in maintaining our services uptime.</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.3s">
|
||||
<i class="fa fa-money-bill fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">30-Day Money-Back</h5>
|
||||
<p>Money-back guarantee in case you change your mind.</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.5s">
|
||||
<i class="fa fa-cog fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">Control Panel</h5>
|
||||
<p>Our simple-to-use control panel removes all the fuss and lets you do what's best. Running your site.</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.7s">
|
||||
<i class="fa fa-headset fa-3x text-primary mb-3"></i>
|
||||
<h5 class="fw-bold">24/7 Support</h5>
|
||||
<p>Our friendly support team is available anytime to support you if you ever get stuck.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 ps-lg-5">
|
||||
<div class="section-title position-relative mx-auto mb-4 pb-4">
|
||||
<h3 class="fw-bold mb-0"></h3>
|
||||
</div>
|
||||
<div class="row gy-3 gx-5">
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.1s">
|
||||
<i class="fa fa-server fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">Dedicated Server</h5>
|
||||
<p>Dedicated Servers allow businesses to leverage existing data centers to maximize reliability and lower cost.</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.3s">
|
||||
<i class="fa-brands fa-wordpress-simple fa-3x text-secondary mb-3" aria-hidden="true"></i>
|
||||
<h5 class="fw-bold">Wordpress</h5>
|
||||
<p>Get up and running with Wordpress. With our one-click installer now!</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.5s">
|
||||
<i class="fa fa-cloud fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">Shared Hosting</h5>
|
||||
<p>Shared Website hosting with fast SSD storage and E-Mail hosting (paid accounts only!).</p>
|
||||
</div>
|
||||
<div class="col-sm-6 wow fadeIn" data-wow-delay="0.7s">
|
||||
<i class="fa fa-server fa-3x text-secondary mb-3"></i>
|
||||
<h5 class="fw-bold">VPS Hosting</h5>
|
||||
<p>Virtual Private Servers with ultra-fast SSD with the flexibility to run your software. Ubuntu, Nginx, Nodejs, and more</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comparison Start -->
|
||||
|
||||
|
||||
<!-- Testimonial Start -->
|
||||
<div class="container-xxl py-5 wow fadeInUp" data-wow-delay="0.1s">
|
||||
<div class="container px-lg-5">
|
||||
<div class="owl-carousel testimonial-carousel">
|
||||
<div class="testimonial-item position-relative bg-light border-top border-5 border-primary rounded p-4 my-4">
|
||||
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 ms-5 translate-middle bg-primary rounded-circle" style="width: 45px; height: 45px; margin-top: -3px;">
|
||||
<i class="fa fa-quote-left text-white"></i>
|
||||
</div>
|
||||
<p class="mt-3">They helped me quickly and efficiently! They were polite and wonderful to speak with!</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="img-fluid flex-shrink-0 rounded-circle" src="img/anon_img.webp" style="width: 50px; height: 50px;">
|
||||
<div class="ps-3">
|
||||
<h6 class="fw-bold mb-1">Anonymous</h6>
|
||||
<small>Unknown</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-item position-relative bg-light border-top border-5 border-primary rounded p-4 my-4">
|
||||
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 ms-5 translate-middle bg-primary rounded-circle" style="width: 45px; height: 45px; margin-top: -3px;">
|
||||
<i class="fa fa-quote-left text-white"></i>
|
||||
</div>
|
||||
<p class="mt-3">I needed assistance with canceling a shared hosting plan and setting up my second website and technical support responded quickly and was very thorough with their instructions.</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="img-fluid flex-shrink-0 rounded-circle" src="img/anon_img.webp" style="width: 50px; height: 50px;">
|
||||
<div class="ps-3">
|
||||
<h6 class="fw-bold mb-1">Anonymous</h6>
|
||||
<small>Unknown</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-item position-relative bg-light border-top border-5 border-primary rounded p-4 my-4">
|
||||
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 ms-5 translate-middle bg-primary rounded-circle" style="width: 45px; height: 45px; margin-top: -3px;">
|
||||
<i class="fa fa-quote-left text-white"></i>
|
||||
</div>
|
||||
<p class="mt-3">Great service! Very responsive and helpful support staff!!! Highly recommend.</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="img-fluid flex-shrink-0 rounded-circle" src="img/anon_img.webp" style="width: 50px; height: 50px;">
|
||||
<div class="ps-3">
|
||||
<h6 class="fw-bold mb-1">Anonymouse</h6>
|
||||
<small>Unknown</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-item position-relative bg-light border-top border-5 border-primary rounded p-4 mt-4">
|
||||
<div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 ms-5 translate-middle bg-primary rounded-circle" style="width: 45px; height: 45px; margin-top: -3px;">
|
||||
<i class="fa fa-quote-left text-white"></i>
|
||||
</div>
|
||||
<p class="mt-3">I didn't need any help until I needed it. Customer support gave me some step-by-step assistance to get everything back on track.</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="img-fluid flex-shrink-0 rounded-circle" src="img/anon_img.webp" style="width: 50px; height: 50px;">
|
||||
<div class="ps-3">
|
||||
<h6 class="fw-bold mb-1">Anonymouse</h6>
|
||||
<small>Unknown</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Testimonial End -->
|
||||
|
||||
|
||||
<!-- Team Start -->
|
||||
<!--
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
|
||||
<h1 class="mb-3">Our Team Members</h1>
|
||||
<p class="mb-1">Vero justo sed sed vero clita amet. Et justo vero sea diam elitr amet ipsum eos
|
||||
ipsum clita duo sed. Sed vero sea diam erat vero elitr sit clita.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
|
||||
<div class="team-item border-top border-5 border-primary rounded shadow overflow-hidden">
|
||||
<div class="text-center p-4">
|
||||
<img class="img-fluid rounded-circle mb-4" src="img/team-1.jpg" alt="">
|
||||
<h5 class="fw-bold mb-1">Full Name</h5>
|
||||
<small>Designation</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center bg-primary p-3">
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
|
||||
<div class="team-item border-top border-5 border-primary rounded shadow overflow-hidden">
|
||||
<div class="text-center p-4">
|
||||
<img class="img-fluid rounded-circle mb-4" src="img/team-2.jpg" alt="">
|
||||
<h5 class="fw-bold mb-1">Full Name</h5>
|
||||
<small>Designation</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center bg-primary p-3">
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
|
||||
<div class="team-item border-top border-5 border-primary rounded shadow overflow-hidden">
|
||||
<div class="text-center p-4">
|
||||
<img class="img-fluid rounded-circle mb-4" src="img/team-3.jpg" alt="">
|
||||
<h5 class="fw-bold mb-1">Full Name</h5>
|
||||
<small>Designation</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center bg-primary p-3">
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.7s">
|
||||
<div class="team-item border-top border-5 border-primary rounded shadow overflow-hidden">
|
||||
<div class="text-center p-4">
|
||||
<img class="img-fluid rounded-circle mb-4" src="img/team-4.jpg" alt="">
|
||||
<h5 class="fw-bold mb-1">Full Name</h5>
|
||||
<small>Designation</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center bg-primary p-3">
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-square text-primary bg-white m-1" href=""><i class="fab fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!-- Team End -->
|
||||
|
||||
|
||||
<!-- Footer Start -->
|
||||
<div class="container-fluid bg-primary text-white footer mt-5 pt-5 wow fadeIn" data-wow-delay="0.1s">
|
||||
<div class="container py-5 px-lg-5">
|
||||
<div class="row gy-5 gx-4 pt-5">
|
||||
<div class="col-12">
|
||||
<h5 class="fw-bold text-white mb-4">Subscribe Our Newsletter</h5>
|
||||
<div class="position-relative" style="max-width: 400px;">
|
||||
<input class="form-control bg-white border-0 w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
|
||||
<button type="button" class="btn btn-primary py-2 px-3 position-absolute top-0 end-0 mt-2 me-2">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row gy-5 g-4">
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">About Us</h5>
|
||||
<a class="btn btn-link" href="about.html">About Us</a>
|
||||
<a class="btn btn-link" href="contact.html">Contact Us</a>
|
||||
<a class="btn btn-link" href="privacy.html">Privacy Policy</a>
|
||||
<a class="btn btn-link" href="tos.html">Terms & Condition</a>
|
||||
<a class="btn btn-link" href="#">Support</a>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">Our Services</h5>
|
||||
<!--<a class="btn btn-link" href="">Domain Register</a>-->
|
||||
<a class="btn btn-link" href="#">Shared Hosting</a>
|
||||
<a class="btn btn-link" href="#">VPS Hosting</a>
|
||||
<a class="btn btn-link" href="#">Dedicated Hosting</a>
|
||||
<!--<a class="btn btn-link" href="">Reseller Hosting</a>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<h5 class="fw-bold text-white mb-4">Get In Touch</h5>
|
||||
<!--<p class="mb-2"><i class="fa fa-map-marker-alt me-3"></i>123 Street, New York, USA</p>
|
||||
<p class="mb-2"><i class="fa fa-phone-alt me-3"></i>+012 345 67890</p>-->
|
||||
<p class="mb-2"><i class="fa fa-envelope me-3"></i>info<span class=div1>@</span>iocloudsolutions<span class=div2>.</span>net</p>
|
||||
<div class="d-flex pt-2">
|
||||
<a class="btn btn-outline-light btn-social" href="#"><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href="#"><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href="#"><i class="fab fa-youtube"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href="#"><i class="fab fa-linkedin-in"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mt-lg-n5">
|
||||
<div class="bg-light rounded" style="padding: 30px;">
|
||||
<form method="post" action="formmail/formmail.php">
|
||||
<input type="text" name="name" class="form-control border-0 py-2 mb-2" placeholder="Name">
|
||||
<input type="email" name="email" class="form-control border-0 py-2 mb-2" placeholder="Email">
|
||||
<textarea name="message" class="form-control border-0 mb-2" rows="2" placeholder="Message"></textarea>
|
||||
<input type="hidden" name="page" value="home">
|
||||
<button class="btn btn-primary w-100 py-2">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-lg-5">
|
||||
<div class="copyright">
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
||||
© <a class="border-bottom" href="#">IO Cloud Solutions</a>, All Right Reserved.
|
||||
|
||||
<!--/*** This template is free as long as you keep the footer author’s credit link/attribution link/backlink. If you'd like to use the template without the footer author’s credit link/attribution link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". Thank you for your support. ***/-->
|
||||
Designed By <a class="border-bottom" href="https://htmlcodex.com">HTML Codex</a>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<div class="footer-menu">
|
||||
<a href="">Home</a>
|
||||
<!--<a href="">Cookies</a>-->
|
||||
<a href="">Help</a>
|
||||
<!--<a href="">FQAs</a>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer End -->
|
||||
|
||||
|
||||
<!-- Back to Top -->
|
||||
<a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Libraries -->
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="lib/wow/wow.min.js"></script>
|
||||
<script src="lib/easing/easing.min.js"></script>
|
||||
<script src="lib/waypoints/waypoints.min.js"></script>
|
||||
<script src="lib/counterup/counterup.min.js"></script>
|
||||
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
|
||||
|
||||
<!-- Template Javascript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
// Spinner
|
||||
var spinner = function () {
|
||||
setTimeout(function () {
|
||||
if ($('#spinner').length > 0) {
|
||||
$('#spinner').removeClass('show');
|
||||
}
|
||||
}, 1);
|
||||
};
|
||||
spinner();
|
||||
|
||||
|
||||
// Initiate the wowjs
|
||||
new WOW().init();
|
||||
|
||||
|
||||
// Sticky Navbar
|
||||
$(window).scroll(function () {
|
||||
if ($(this).scrollTop() > 45) {
|
||||
$('.navbar').addClass('sticky-top shadow-sm');
|
||||
} else {
|
||||
$('.navbar').removeClass('sticky-top shadow-sm');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Dropdown on mouse hover
|
||||
const $dropdown = $(".dropdown");
|
||||
const $dropdownToggle = $(".dropdown-toggle");
|
||||
const $dropdownMenu = $(".dropdown-menu");
|
||||
const showClass = "show";
|
||||
|
||||
$(window).on("load resize", function() {
|
||||
if (this.matchMedia("(min-width: 992px)").matches) {
|
||||
$dropdown.hover(
|
||||
function() {
|
||||
const $this = $(this);
|
||||
$this.addClass(showClass);
|
||||
$this.find($dropdownToggle).attr("aria-expanded", "true");
|
||||
$this.find($dropdownMenu).addClass(showClass);
|
||||
},
|
||||
function() {
|
||||
const $this = $(this);
|
||||
$this.removeClass(showClass);
|
||||
$this.find($dropdownToggle).attr("aria-expanded", "false");
|
||||
$this.find($dropdownMenu).removeClass(showClass);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
$dropdown.off("mouseenter mouseleave");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Back to top button
|
||||
$(window).scroll(function () {
|
||||
if ($(this).scrollTop() > 300) {
|
||||
$('.back-to-top').fadeIn('slow');
|
||||
} else {
|
||||
$('.back-to-top').fadeOut('slow');
|
||||
}
|
||||
});
|
||||
$('.back-to-top').click(function () {
|
||||
$('html, body').animate({scrollTop: 0}, 1500, 'easeInOutExpo');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
// Facts counter
|
||||
$('[data-toggle="counter-up"]').counterUp({
|
||||
delay: 10,
|
||||
time: 2000
|
||||
});
|
||||
|
||||
|
||||
// Testimonials carousel
|
||||
$(".testimonial-carousel").owlCarousel({
|
||||
autoplay: true,
|
||||
smartSpeed: 1000,
|
||||
margin: 25,
|
||||
dots: true,
|
||||
loop: true,
|
||||
center: true,
|
||||
responsive: {
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
576:{
|
||||
items:1
|
||||
},
|
||||
768:{
|
||||
items:2
|
||||
},
|
||||
992:{
|
||||
items:3
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
|||
/*!
|
||||
* jquery.counterup.js 2.1.0
|
||||
*
|
||||
* Copyright 2013, Benjamin Intal http://gambit.ph @bfintal
|
||||
* Released under the GPL v2 License
|
||||
*
|
||||
* Amended by Jeremy Paris, Ciro Mattia Gonano and others
|
||||
*
|
||||
* Date: Feb 24, 2017
|
||||
*/
|
||||
(function($){"use strict";$.fn.counterUp=function(options){var settings=$.extend({time:400,delay:10,offset:100,beginAt:0,formatter:false,context:"window",callback:function(){}},options),s;return this.each(function(){var $this=$(this),counter={time:$(this).data("counterup-time")||settings.time,delay:$(this).data("counterup-delay")||settings.delay,offset:$(this).data("counterup-offset")||settings.offset,beginAt:$(this).data("counterup-beginat")||settings.beginAt,context:$(this).data("counterup-context")||settings.context};var counterUpper=function(){var nums=[];var divisions=counter.time/counter.delay;var num=$(this).attr("data-num")?$(this).attr("data-num"):$this.text();var isComma=/[0-9]+,[0-9]+/.test(num);num=num.replace(/,/g,"");var decimalPlaces=(num.split(".")[1]||[]).length;if(counter.beginAt>num)counter.beginAt=num;var isTime=/[0-9]+:[0-9]+:[0-9]+/.test(num);if(isTime){var times=num.split(":"),m=1;s=0;while(times.length>0){s+=m*parseInt(times.pop(),10);m*=60}}for(var i=divisions;i>=counter.beginAt/num*divisions;i--){var newNum=parseFloat(num/divisions*i).toFixed(decimalPlaces);if(isTime){newNum=parseInt(s/divisions*i);var hours=parseInt(newNum/3600)%24;var minutes=parseInt(newNum/60)%60;var seconds=parseInt(newNum%60,10);newNum=(hours<10?"0"+hours:hours)+":"+(minutes<10?"0"+minutes:minutes)+":"+(seconds<10?"0"+seconds:seconds)}if(isComma){while(/(\d+)(\d{3})/.test(newNum.toString())){newNum=newNum.toString().replace(/(\d+)(\d{3})/,"$1"+","+"$2")}}if(settings.formatter){newNum=settings.formatter.call(this,newNum)}nums.unshift(newNum)}$this.data("counterup-nums",nums);$this.text(counter.beginAt);var f=function(){if(!$this.data("counterup-nums")){settings.callback.call(this);return}$this.html($this.data("counterup-nums").shift());if($this.data("counterup-nums").length){setTimeout($this.data("counterup-func"),counter.delay)}else{$this.data("counterup-nums",null);$this.data("counterup-func",null);settings.callback.call(this)}};$this.data("counterup-func",f);setTimeout($this.data("counterup-func"),counter.delay)};$this.waypoint(function(direction){counterUpper();this.destroy()},{offset:counter.offset+"%",context:counter.context})})}})(jQuery);
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
/*
|
||||
* jQuery Easing v1.4.1 - http://gsgd.co.uk/sandbox/jquery/easing/
|
||||
* Open source under the BSD License.
|
||||
* Copyright © 2008 George McGinley Smith
|
||||
* All rights reserved.
|
||||
* https://raw.github.com/gdsmith/jquery-easing/master/LICENSE
|
||||
*/
|
||||
|
||||
(function (factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(['jquery'], function ($) {
|
||||
return factory($);
|
||||
});
|
||||
} else if (typeof module === "object" && typeof module.exports === "object") {
|
||||
exports = factory(require('jquery'));
|
||||
} else {
|
||||
factory(jQuery);
|
||||
}
|
||||
})(function($){
|
||||
|
||||
// Preserve the original jQuery "swing" easing as "jswing"
|
||||
if (typeof $.easing !== 'undefined') {
|
||||
$.easing['jswing'] = $.easing['swing'];
|
||||
}
|
||||
|
||||
var pow = Math.pow,
|
||||
sqrt = Math.sqrt,
|
||||
sin = Math.sin,
|
||||
cos = Math.cos,
|
||||
PI = Math.PI,
|
||||
c1 = 1.70158,
|
||||
c2 = c1 * 1.525,
|
||||
c3 = c1 + 1,
|
||||
c4 = ( 2 * PI ) / 3,
|
||||
c5 = ( 2 * PI ) / 4.5;
|
||||
|
||||
// x is the fraction of animation progress, in the range 0..1
|
||||
function bounceOut(x) {
|
||||
var n1 = 7.5625,
|
||||
d1 = 2.75;
|
||||
if ( x < 1/d1 ) {
|
||||
return n1*x*x;
|
||||
} else if ( x < 2/d1 ) {
|
||||
return n1*(x-=(1.5/d1))*x + .75;
|
||||
} else if ( x < 2.5/d1 ) {
|
||||
return n1*(x-=(2.25/d1))*x + .9375;
|
||||
} else {
|
||||
return n1*(x-=(2.625/d1))*x + .984375;
|
||||
}
|
||||
}
|
||||
|
||||
$.extend( $.easing,
|
||||
{
|
||||
def: 'easeOutQuad',
|
||||
swing: function (x) {
|
||||
return $.easing[$.easing.def](x);
|
||||
},
|
||||
easeInQuad: function (x) {
|
||||
return x * x;
|
||||
},
|
||||
easeOutQuad: function (x) {
|
||||
return 1 - ( 1 - x ) * ( 1 - x );
|
||||
},
|
||||
easeInOutQuad: function (x) {
|
||||
return x < 0.5 ?
|
||||
2 * x * x :
|
||||
1 - pow( -2 * x + 2, 2 ) / 2;
|
||||
},
|
||||
easeInCubic: function (x) {
|
||||
return x * x * x;
|
||||
},
|
||||
easeOutCubic: function (x) {
|
||||
return 1 - pow( 1 - x, 3 );
|
||||
},
|
||||
easeInOutCubic: function (x) {
|
||||
return x < 0.5 ?
|
||||
4 * x * x * x :
|
||||
1 - pow( -2 * x + 2, 3 ) / 2;
|
||||
},
|
||||
easeInQuart: function (x) {
|
||||
return x * x * x * x;
|
||||
},
|
||||
easeOutQuart: function (x) {
|
||||
return 1 - pow( 1 - x, 4 );
|
||||
},
|
||||
easeInOutQuart: function (x) {
|
||||
return x < 0.5 ?
|
||||
8 * x * x * x * x :
|
||||
1 - pow( -2 * x + 2, 4 ) / 2;
|
||||
},
|
||||
easeInQuint: function (x) {
|
||||
return x * x * x * x * x;
|
||||
},
|
||||
easeOutQuint: function (x) {
|
||||
return 1 - pow( 1 - x, 5 );
|
||||
},
|
||||
easeInOutQuint: function (x) {
|
||||
return x < 0.5 ?
|
||||
16 * x * x * x * x * x :
|
||||
1 - pow( -2 * x + 2, 5 ) / 2;
|
||||
},
|
||||
easeInSine: function (x) {
|
||||
return 1 - cos( x * PI/2 );
|
||||
},
|
||||
easeOutSine: function (x) {
|
||||
return sin( x * PI/2 );
|
||||
},
|
||||
easeInOutSine: function (x) {
|
||||
return -( cos( PI * x ) - 1 ) / 2;
|
||||
},
|
||||
easeInExpo: function (x) {
|
||||
return x === 0 ? 0 : pow( 2, 10 * x - 10 );
|
||||
},
|
||||
easeOutExpo: function (x) {
|
||||
return x === 1 ? 1 : 1 - pow( 2, -10 * x );
|
||||
},
|
||||
easeInOutExpo: function (x) {
|
||||
return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ?
|
||||
pow( 2, 20 * x - 10 ) / 2 :
|
||||
( 2 - pow( 2, -20 * x + 10 ) ) / 2;
|
||||
},
|
||||
easeInCirc: function (x) {
|
||||
return 1 - sqrt( 1 - pow( x, 2 ) );
|
||||
},
|
||||
easeOutCirc: function (x) {
|
||||
return sqrt( 1 - pow( x - 1, 2 ) );
|
||||
},
|
||||
easeInOutCirc: function (x) {
|
||||
return x < 0.5 ?
|
||||
( 1 - sqrt( 1 - pow( 2 * x, 2 ) ) ) / 2 :
|
||||
( sqrt( 1 - pow( -2 * x + 2, 2 ) ) + 1 ) / 2;
|
||||
},
|
||||
easeInElastic: function (x) {
|
||||
return x === 0 ? 0 : x === 1 ? 1 :
|
||||
-pow( 2, 10 * x - 10 ) * sin( ( x * 10 - 10.75 ) * c4 );
|
||||
},
|
||||
easeOutElastic: function (x) {
|
||||
return x === 0 ? 0 : x === 1 ? 1 :
|
||||
pow( 2, -10 * x ) * sin( ( x * 10 - 0.75 ) * c4 ) + 1;
|
||||
},
|
||||
easeInOutElastic: function (x) {
|
||||
return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ?
|
||||
-( pow( 2, 20 * x - 10 ) * sin( ( 20 * x - 11.125 ) * c5 )) / 2 :
|
||||
pow( 2, -20 * x + 10 ) * sin( ( 20 * x - 11.125 ) * c5 ) / 2 + 1;
|
||||
},
|
||||
easeInBack: function (x) {
|
||||
return c3 * x * x * x - c1 * x * x;
|
||||
},
|
||||
easeOutBack: function (x) {
|
||||
return 1 + c3 * pow( x - 1, 3 ) + c1 * pow( x - 1, 2 );
|
||||
},
|
||||
easeInOutBack: function (x) {
|
||||
return x < 0.5 ?
|
||||
( pow( 2 * x, 2 ) * ( ( c2 + 1 ) * 2 * x - c2 ) ) / 2 :
|
||||
( pow( 2 * x - 2, 2 ) *( ( c2 + 1 ) * ( x * 2 - 2 ) + c2 ) + 2 ) / 2;
|
||||
},
|
||||
easeInBounce: function (x) {
|
||||
return 1 - bounceOut( 1 - x );
|
||||
},
|
||||
easeOutBounce: bounceOut,
|
||||
easeInOutBounce: function (x) {
|
||||
return x < 0.5 ?
|
||||
( 1 - bounceOut( 1 - 2 * x ) ) / 2 :
|
||||
( 1 + bounceOut( 2 * x - 1 ) ) / 2;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
!function(n){"function"==typeof define&&define.amd?define(["jquery"],function(e){return n(e)}):"object"==typeof module&&"object"==typeof module.exports?exports=n(require("jquery")):n(jQuery)}(function(n){function e(n){var e=7.5625,t=2.75;return n<1/t?e*n*n:n<2/t?e*(n-=1.5/t)*n+.75:n<2.5/t?e*(n-=2.25/t)*n+.9375:e*(n-=2.625/t)*n+.984375}void 0!==n.easing&&(n.easing.jswing=n.easing.swing);var t=Math.pow,u=Math.sqrt,r=Math.sin,i=Math.cos,a=Math.PI,c=1.70158,o=1.525*c,s=2*a/3,f=2*a/4.5;n.extend(n.easing,{def:"easeOutQuad",swing:function(e){return n.easing[n.easing.def](e)},easeInQuad:function(n){return n*n},easeOutQuad:function(n){return 1-(1-n)*(1-n)},easeInOutQuad:function(n){return n<.5?2*n*n:1-t(-2*n+2,2)/2},easeInCubic:function(n){return n*n*n},easeOutCubic:function(n){return 1-t(1-n,3)},easeInOutCubic:function(n){return n<.5?4*n*n*n:1-t(-2*n+2,3)/2},easeInQuart:function(n){return n*n*n*n},easeOutQuart:function(n){return 1-t(1-n,4)},easeInOutQuart:function(n){return n<.5?8*n*n*n*n:1-t(-2*n+2,4)/2},easeInQuint:function(n){return n*n*n*n*n},easeOutQuint:function(n){return 1-t(1-n,5)},easeInOutQuint:function(n){return n<.5?16*n*n*n*n*n:1-t(-2*n+2,5)/2},easeInSine:function(n){return 1-i(n*a/2)},easeOutSine:function(n){return r(n*a/2)},easeInOutSine:function(n){return-(i(a*n)-1)/2},easeInExpo:function(n){return 0===n?0:t(2,10*n-10)},easeOutExpo:function(n){return 1===n?1:1-t(2,-10*n)},easeInOutExpo:function(n){return 0===n?0:1===n?1:n<.5?t(2,20*n-10)/2:(2-t(2,-20*n+10))/2},easeInCirc:function(n){return 1-u(1-t(n,2))},easeOutCirc:function(n){return u(1-t(n-1,2))},easeInOutCirc:function(n){return n<.5?(1-u(1-t(2*n,2)))/2:(u(1-t(-2*n+2,2))+1)/2},easeInElastic:function(n){return 0===n?0:1===n?1:-t(2,10*n-10)*r((10*n-10.75)*s)},easeOutElastic:function(n){return 0===n?0:1===n?1:t(2,-10*n)*r((10*n-.75)*s)+1},easeInOutElastic:function(n){return 0===n?0:1===n?1:n<.5?-(t(2,20*n-10)*r((20*n-11.125)*f))/2:t(2,-20*n+10)*r((20*n-11.125)*f)/2+1},easeInBack:function(n){return(c+1)*n*n*n-c*n*n},easeOutBack:function(n){return 1+(c+1)*t(n-1,3)+c*t(n-1,2)},easeInOutBack:function(n){return n<.5?t(2*n,2)*(7.189819*n-o)/2:(t(2*n-2,2)*((o+1)*(2*n-2)+o)+2)/2},easeInBounce:function(n){return 1-e(1-n)},easeOutBounce:e,easeInOutBounce:function(n){return n<.5?(1-e(1-2*n))/2:(1+e(2*n-1))/2}})});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
Copyright (c) 2014 Owl
|
||||
Modified work Copyright 2016 David Deutsch
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -0,0 +1,170 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.1
|
||||
* Copyright 2013-2017 David Deutsch
|
||||
* Licensed under ()
|
||||
*/
|
||||
/*
|
||||
* Owl Carousel - Core
|
||||
*/
|
||||
.owl-carousel {
|
||||
display: none;
|
||||
width: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* position relative and z-index fix webkit rendering fonts issue */
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
.owl-carousel .owl-stage {
|
||||
position: relative;
|
||||
-ms-touch-action: pan-Y;
|
||||
-moz-backface-visibility: hidden;
|
||||
/* fix firefox animation glitch */ }
|
||||
.owl-carousel .owl-stage:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0; }
|
||||
.owl-carousel .owl-stage-outer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* fix for flashing background */
|
||||
-webkit-transform: translate3d(0px, 0px, 0px); }
|
||||
.owl-carousel .owl-wrapper,
|
||||
.owl-carousel .owl-item {
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0); }
|
||||
.owl-carousel .owl-item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
float: left;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none; }
|
||||
.owl-carousel .owl-item img {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
.owl-carousel .owl-nav.disabled,
|
||||
.owl-carousel .owl-dots.disabled {
|
||||
display: none; }
|
||||
.owl-carousel .owl-nav .owl-prev,
|
||||
.owl-carousel .owl-nav .owl-next,
|
||||
.owl-carousel .owl-dot {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.owl-carousel.owl-loaded {
|
||||
display: block; }
|
||||
.owl-carousel.owl-loading {
|
||||
opacity: 0;
|
||||
display: block; }
|
||||
.owl-carousel.owl-hidden {
|
||||
opacity: 0; }
|
||||
.owl-carousel.owl-refresh .owl-item {
|
||||
visibility: hidden; }
|
||||
.owl-carousel.owl-drag .owl-item {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.owl-carousel.owl-grab {
|
||||
cursor: move;
|
||||
cursor: grab; }
|
||||
.owl-carousel.owl-rtl {
|
||||
direction: rtl; }
|
||||
.owl-carousel.owl-rtl .owl-item {
|
||||
float: right; }
|
||||
|
||||
/* No Js */
|
||||
.no-js .owl-carousel {
|
||||
display: block; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Animate Plugin
|
||||
*/
|
||||
.owl-carousel .animated {
|
||||
animation-duration: 1000ms;
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.owl-carousel .owl-animated-in {
|
||||
z-index: 0; }
|
||||
|
||||
.owl-carousel .owl-animated-out {
|
||||
z-index: 1; }
|
||||
|
||||
.owl-carousel .fadeOut {
|
||||
animation-name: fadeOut; }
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1; }
|
||||
100% {
|
||||
opacity: 0; } }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Auto Height Plugin
|
||||
*/
|
||||
.owl-height {
|
||||
transition: height 500ms ease-in-out; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Lazy Load Plugin
|
||||
*/
|
||||
.owl-carousel .owl-item .owl-lazy {
|
||||
opacity: 0;
|
||||
transition: opacity 400ms ease; }
|
||||
|
||||
.owl-carousel .owl-item img.owl-lazy {
|
||||
transform-style: preserve-3d; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Video Plugin
|
||||
*/
|
||||
.owl-carousel .owl-video-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: #000; }
|
||||
|
||||
.owl-carousel .owl-video-play-icon {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -40px;
|
||||
margin-top: -40px;
|
||||
background: url("owl.video.play.png") no-repeat;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
transition: transform 100ms ease; }
|
||||
|
||||
.owl-carousel .owl-video-play-icon:hover {
|
||||
-ms-transform: scale(1.3, 1.3);
|
||||
transform: scale(1.3, 1.3); }
|
||||
|
||||
.owl-carousel .owl-video-playing .owl-video-tn,
|
||||
.owl-carousel .owl-video-playing .owl-video-play-icon {
|
||||
display: none; }
|
||||
|
||||
.owl-carousel .owl-video-tn {
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transition: opacity 400ms ease; }
|
||||
|
||||
.owl-carousel .owl-video-frame {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.1
|
||||
* Copyright 2013-2017 David Deutsch
|
||||
* Licensed under ()
|
||||
*/
|
||||
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.1
|
||||
* Copyright 2013-2017 David Deutsch
|
||||
* Licensed under ()
|
||||
*/
|
||||
/*
|
||||
* Default theme - Owl Carousel CSS File
|
||||
*/
|
||||
.owl-theme .owl-nav {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-nav [class*='owl-'] {
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
padding: 4px 7px;
|
||||
background: #D6D6D6;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 3px; }
|
||||
.owl-theme .owl-nav [class*='owl-']:hover {
|
||||
background: #869791;
|
||||
color: #FFF;
|
||||
text-decoration: none; }
|
||||
.owl-theme .owl-nav .disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default; }
|
||||
|
||||
.owl-theme .owl-nav.disabled + .owl-dots {
|
||||
margin-top: 10px; }
|
||||
|
||||
.owl-theme .owl-dots {
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-dots .owl-dot {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline; }
|
||||
.owl-theme .owl-dots .owl-dot span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 5px 7px;
|
||||
background: #D6D6D6;
|
||||
display: block;
|
||||
-webkit-backface-visibility: visible;
|
||||
transition: opacity 200ms ease;
|
||||
border-radius: 30px; }
|
||||
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
|
||||
background: #869791; }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.1
|
||||
* Copyright 2013-2017 David Deutsch
|
||||
* Licensed under ()
|
||||
*/
|
||||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.1
|
||||
* Copyright 2013-2017 David Deutsch
|
||||
* Licensed under ()
|
||||
*/
|
||||
/*
|
||||
* Green theme - Owl Carousel CSS File
|
||||
*/
|
||||
.owl-theme .owl-nav {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-nav [class*='owl-'] {
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
padding: 4px 7px;
|
||||
background: #D6D6D6;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 3px; }
|
||||
.owl-theme .owl-nav [class*='owl-']:hover {
|
||||
background: #4DC7A0;
|
||||
color: #FFF;
|
||||
text-decoration: none; }
|
||||
.owl-theme .owl-nav .disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default; }
|
||||
|
||||
.owl-theme .owl-nav.disabled + .owl-dots {
|
||||
margin-top: 10px; }
|
||||
|
||||
.owl-theme .owl-dots {
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.owl-theme .owl-dots .owl-dot {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline; }
|
||||
.owl-theme .owl-dots .owl-dot span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 5px 7px;
|
||||
background: #D6D6D6;
|
||||
display: block;
|
||||
-webkit-backface-visibility: visible;
|
||||
transition: opacity 200ms ease;
|
||||
border-radius: 30px; }
|
||||
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
|
||||
background: #4DC7A0; }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Owl Carousel v2.2.1
|
||||
* Copyright 2013-2017 David Deutsch
|
||||
* Licensed under ()
|
||||
*/
|
||||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#4DC7A0;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#4DC7A0}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,5 @@
|
|||
<?php
|
||||
$links = array(
|
||||
'js' => 'lib/waypoints/waypoints.min.js'
|
||||
);
|
||||
?>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,542 @@
|
|||
/*
|
||||
* WOW wow.js - v1.3.0 - 2016-10-04
|
||||
* https://wowjs.uk
|
||||
* Copyright (c) 2016 Thomas Grainger; Licensed MIT
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(['module', 'exports'], factory);
|
||||
} else if (typeof exports !== "undefined") {
|
||||
factory(module, exports);
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod, mod.exports);
|
||||
global.WOW = mod.exports;
|
||||
}
|
||||
})(this, function (module, exports) {
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _class, _temp;
|
||||
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
}
|
||||
|
||||
var _createClass = function () {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return function (Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
|
||||
function isIn(needle, haystack) {
|
||||
return haystack.indexOf(needle) >= 0;
|
||||
}
|
||||
|
||||
function extend(custom, defaults) {
|
||||
for (var key in defaults) {
|
||||
if (custom[key] == null) {
|
||||
var value = defaults[key];
|
||||
custom[key] = value;
|
||||
}
|
||||
}
|
||||
return custom;
|
||||
}
|
||||
|
||||
function isMobile(agent) {
|
||||
return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
|
||||
);
|
||||
}
|
||||
|
||||
function createEvent(event) {
|
||||
var bubble = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
|
||||
var cancel = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
|
||||
var detail = arguments.length <= 3 || arguments[3] === undefined ? null : arguments[3];
|
||||
|
||||
var customEvent = void 0;
|
||||
if (document.createEvent != null) {
|
||||
// W3C DOM
|
||||
customEvent = document.createEvent('CustomEvent');
|
||||
customEvent.initCustomEvent(event, bubble, cancel, detail);
|
||||
} else if (document.createEventObject != null) {
|
||||
// IE DOM < 9
|
||||
customEvent = document.createEventObject();
|
||||
customEvent.eventType = event;
|
||||
} else {
|
||||
customEvent.eventName = event;
|
||||
}
|
||||
|
||||
return customEvent;
|
||||
}
|
||||
|
||||
function emitEvent(elem, event) {
|
||||
if (elem.dispatchEvent != null) {
|
||||
// W3C DOM
|
||||
elem.dispatchEvent(event);
|
||||
} else if (event in (elem != null)) {
|
||||
elem[event]();
|
||||
} else if ('on' + event in (elem != null)) {
|
||||
elem['on' + event]();
|
||||
}
|
||||
}
|
||||
|
||||
function addEvent(elem, event, fn) {
|
||||
if (elem.addEventListener != null) {
|
||||
// W3C DOM
|
||||
elem.addEventListener(event, fn, false);
|
||||
} else if (elem.attachEvent != null) {
|
||||
// IE DOM
|
||||
elem.attachEvent('on' + event, fn);
|
||||
} else {
|
||||
// fallback
|
||||
elem[event] = fn;
|
||||
}
|
||||
}
|
||||
|
||||
function removeEvent(elem, event, fn) {
|
||||
if (elem.removeEventListener != null) {
|
||||
// W3C DOM
|
||||
elem.removeEventListener(event, fn, false);
|
||||
} else if (elem.detachEvent != null) {
|
||||
// IE DOM
|
||||
elem.detachEvent('on' + event, fn);
|
||||
} else {
|
||||
// fallback
|
||||
delete elem[event];
|
||||
}
|
||||
}
|
||||
|
||||
function getInnerHeight() {
|
||||
if ('innerHeight' in window) {
|
||||
return window.innerHeight;
|
||||
}
|
||||
|
||||
return document.documentElement.clientHeight;
|
||||
}
|
||||
|
||||
// Minimalistic WeakMap shim, just in case.
|
||||
var WeakMap = window.WeakMap || window.MozWeakMap || function () {
|
||||
function WeakMap() {
|
||||
_classCallCheck(this, WeakMap);
|
||||
|
||||
this.keys = [];
|
||||
this.values = [];
|
||||
}
|
||||
|
||||
_createClass(WeakMap, [{
|
||||
key: 'get',
|
||||
value: function get(key) {
|
||||
for (var i = 0; i < this.keys.length; i++) {
|
||||
var item = this.keys[i];
|
||||
if (item === key) {
|
||||
return this.values[i];
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}, {
|
||||
key: 'set',
|
||||
value: function set(key, value) {
|
||||
for (var i = 0; i < this.keys.length; i++) {
|
||||
var item = this.keys[i];
|
||||
if (item === key) {
|
||||
this.values[i] = value;
|
||||
return this;
|
||||
}
|
||||
}
|
||||
this.keys.push(key);
|
||||
this.values.push(value);
|
||||
return this;
|
||||
}
|
||||
}]);
|
||||
|
||||
return WeakMap;
|
||||
}();
|
||||
|
||||
// Dummy MutationObserver, to avoid raising exceptions.
|
||||
var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver || (_temp = _class = function () {
|
||||
function MutationObserver() {
|
||||
_classCallCheck(this, MutationObserver);
|
||||
|
||||
if (typeof console !== 'undefined' && console !== null) {
|
||||
console.warn('MutationObserver is not supported by your browser.');
|
||||
console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
|
||||
}
|
||||
}
|
||||
|
||||
_createClass(MutationObserver, [{
|
||||
key: 'observe',
|
||||
value: function observe() {}
|
||||
}]);
|
||||
|
||||
return MutationObserver;
|
||||
}(), _class.notSupported = true, _temp);
|
||||
|
||||
// getComputedStyle shim, from http://stackoverflow.com/a/21797294
|
||||
var getComputedStyle = window.getComputedStyle || function getComputedStyle(el) {
|
||||
var getComputedStyleRX = /(\-([a-z]){1})/g;
|
||||
return {
|
||||
getPropertyValue: function getPropertyValue(prop) {
|
||||
if (prop === 'float') {
|
||||
prop = 'styleFloat';
|
||||
}
|
||||
if (getComputedStyleRX.test(prop)) {
|
||||
prop.replace(getComputedStyleRX, function (_, _char) {
|
||||
return _char.toUpperCase();
|
||||
});
|
||||
}
|
||||
var currentStyle = el.currentStyle;
|
||||
|
||||
return (currentStyle != null ? currentStyle[prop] : void 0) || null;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var WOW = function () {
|
||||
function WOW() {
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
||||
|
||||
_classCallCheck(this, WOW);
|
||||
|
||||
this.defaults = {
|
||||
boxClass: 'wow',
|
||||
animateClass: 'animated',
|
||||
offset: 0,
|
||||
mobile: true,
|
||||
live: true,
|
||||
callback: null,
|
||||
scrollContainer: null,
|
||||
resetAnimation: true
|
||||
};
|
||||
|
||||
this.animate = function animateFactory() {
|
||||
if ('requestAnimationFrame' in window) {
|
||||
return function (callback) {
|
||||
return window.requestAnimationFrame(callback);
|
||||
};
|
||||
}
|
||||
return function (callback) {
|
||||
return callback();
|
||||
};
|
||||
}();
|
||||
|
||||
this.vendors = ['moz', 'webkit'];
|
||||
|
||||
this.start = this.start.bind(this);
|
||||
this.resetAnimation = this.resetAnimation.bind(this);
|
||||
this.scrollHandler = this.scrollHandler.bind(this);
|
||||
this.scrollCallback = this.scrollCallback.bind(this);
|
||||
this.scrolled = true;
|
||||
this.config = extend(options, this.defaults);
|
||||
if (options.scrollContainer != null) {
|
||||
this.config.scrollContainer = document.querySelector(options.scrollContainer);
|
||||
}
|
||||
// Map of elements to animation names:
|
||||
this.animationNameCache = new WeakMap();
|
||||
this.wowEvent = createEvent(this.config.boxClass);
|
||||
}
|
||||
|
||||
_createClass(WOW, [{
|
||||
key: 'init',
|
||||
value: function init() {
|
||||
this.element = window.document.documentElement;
|
||||
if (isIn(document.readyState, ['interactive', 'complete'])) {
|
||||
this.start();
|
||||
} else {
|
||||
addEvent(document, 'DOMContentLoaded', this.start);
|
||||
}
|
||||
this.finished = [];
|
||||
}
|
||||
}, {
|
||||
key: 'start',
|
||||
value: function start() {
|
||||
var _this = this;
|
||||
|
||||
this.stopped = false;
|
||||
this.boxes = [].slice.call(this.element.querySelectorAll('.' + this.config.boxClass));
|
||||
this.all = this.boxes.slice(0);
|
||||
if (this.boxes.length) {
|
||||
if (this.disabled()) {
|
||||
this.resetStyle();
|
||||
} else {
|
||||
for (var i = 0; i < this.boxes.length; i++) {
|
||||
var box = this.boxes[i];
|
||||
this.applyStyle(box, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.disabled()) {
|
||||
addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
|
||||
addEvent(window, 'resize', this.scrollHandler);
|
||||
this.interval = setInterval(this.scrollCallback, 50);
|
||||
}
|
||||
if (this.config.live) {
|
||||
var mut = new MutationObserver(function (records) {
|
||||
for (var j = 0; j < records.length; j++) {
|
||||
var record = records[j];
|
||||
for (var k = 0; k < record.addedNodes.length; k++) {
|
||||
var node = record.addedNodes[k];
|
||||
_this.doSync(node);
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
mut.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'stop',
|
||||
value: function stop() {
|
||||
this.stopped = true;
|
||||
removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
|
||||
removeEvent(window, 'resize', this.scrollHandler);
|
||||
if (this.interval != null) {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'sync',
|
||||
value: function sync() {
|
||||
if (MutationObserver.notSupported) {
|
||||
this.doSync(this.element);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'doSync',
|
||||
value: function doSync(element) {
|
||||
if (typeof element === 'undefined' || element === null) {
|
||||
element = this.element;
|
||||
}
|
||||
if (element.nodeType !== 1) {
|
||||
return;
|
||||
}
|
||||
element = element.parentNode || element;
|
||||
var iterable = element.querySelectorAll('.' + this.config.boxClass);
|
||||
for (var i = 0; i < iterable.length; i++) {
|
||||
var box = iterable[i];
|
||||
if (!isIn(box, this.all)) {
|
||||
this.boxes.push(box);
|
||||
this.all.push(box);
|
||||
if (this.stopped || this.disabled()) {
|
||||
this.resetStyle();
|
||||
} else {
|
||||
this.applyStyle(box, true);
|
||||
}
|
||||
this.scrolled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'show',
|
||||
value: function show(box) {
|
||||
this.applyStyle(box);
|
||||
box.className = box.className + ' ' + this.config.animateClass;
|
||||
if (this.config.callback != null) {
|
||||
this.config.callback(box);
|
||||
}
|
||||
emitEvent(box, this.wowEvent);
|
||||
|
||||
if (this.config.resetAnimation) {
|
||||
addEvent(box, 'animationend', this.resetAnimation);
|
||||
addEvent(box, 'oanimationend', this.resetAnimation);
|
||||
addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
|
||||
addEvent(box, 'MSAnimationEnd', this.resetAnimation);
|
||||
}
|
||||
|
||||
return box;
|
||||
}
|
||||
}, {
|
||||
key: 'applyStyle',
|
||||
value: function applyStyle(box, hidden) {
|
||||
var _this2 = this;
|
||||
|
||||
var duration = box.getAttribute('data-wow-duration');
|
||||
var delay = box.getAttribute('data-wow-delay');
|
||||
var iteration = box.getAttribute('data-wow-iteration');
|
||||
|
||||
return this.animate(function () {
|
||||
return _this2.customStyle(box, hidden, duration, delay, iteration);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'resetStyle',
|
||||
value: function resetStyle() {
|
||||
for (var i = 0; i < this.boxes.length; i++) {
|
||||
var box = this.boxes[i];
|
||||
box.style.visibility = 'visible';
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}, {
|
||||
key: 'resetAnimation',
|
||||
value: function resetAnimation(event) {
|
||||
if (event.type.toLowerCase().indexOf('animationend') >= 0) {
|
||||
var target = event.target || event.srcElement;
|
||||
target.className = target.className.replace(this.config.animateClass, '').trim();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'customStyle',
|
||||
value: function customStyle(box, hidden, duration, delay, iteration) {
|
||||
if (hidden) {
|
||||
this.cacheAnimationName(box);
|
||||
}
|
||||
box.style.visibility = hidden ? 'hidden' : 'visible';
|
||||
|
||||
if (duration) {
|
||||
this.vendorSet(box.style, { animationDuration: duration });
|
||||
}
|
||||
if (delay) {
|
||||
this.vendorSet(box.style, { animationDelay: delay });
|
||||
}
|
||||
if (iteration) {
|
||||
this.vendorSet(box.style, { animationIterationCount: iteration });
|
||||
}
|
||||
this.vendorSet(box.style, { animationName: hidden ? 'none' : this.cachedAnimationName(box) });
|
||||
|
||||
return box;
|
||||
}
|
||||
}, {
|
||||
key: 'vendorSet',
|
||||
value: function vendorSet(elem, properties) {
|
||||
for (var name in properties) {
|
||||
if (properties.hasOwnProperty(name)) {
|
||||
var value = properties[name];
|
||||
elem['' + name] = value;
|
||||
for (var i = 0; i < this.vendors.length; i++) {
|
||||
var vendor = this.vendors[i];
|
||||
elem['' + vendor + name.charAt(0).toUpperCase() + name.substr(1)] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'vendorCSS',
|
||||
value: function vendorCSS(elem, property) {
|
||||
var style = getComputedStyle(elem);
|
||||
var result = style.getPropertyCSSValue(property);
|
||||
for (var i = 0; i < this.vendors.length; i++) {
|
||||
var vendor = this.vendors[i];
|
||||
result = result || style.getPropertyCSSValue('-' + vendor + '-' + property);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}, {
|
||||
key: 'animationName',
|
||||
value: function animationName(box) {
|
||||
var aName = void 0;
|
||||
try {
|
||||
aName = this.vendorCSS(box, 'animation-name').cssText;
|
||||
} catch (error) {
|
||||
// Opera, fall back to plain property value
|
||||
aName = getComputedStyle(box).getPropertyValue('animation-name');
|
||||
}
|
||||
|
||||
if (aName === 'none') {
|
||||
return ''; // SVG/Firefox, unable to get animation name?
|
||||
}
|
||||
|
||||
return aName;
|
||||
}
|
||||
}, {
|
||||
key: 'cacheAnimationName',
|
||||
value: function cacheAnimationName(box) {
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=921834
|
||||
// box.dataset is not supported for SVG elements in Firefox
|
||||
return this.animationNameCache.set(box, this.animationName(box));
|
||||
}
|
||||
}, {
|
||||
key: 'cachedAnimationName',
|
||||
value: function cachedAnimationName(box) {
|
||||
return this.animationNameCache.get(box);
|
||||
}
|
||||
}, {
|
||||
key: 'scrollHandler',
|
||||
value: function scrollHandler() {
|
||||
this.scrolled = true;
|
||||
}
|
||||
}, {
|
||||
key: 'scrollCallback',
|
||||
value: function scrollCallback() {
|
||||
if (this.scrolled) {
|
||||
this.scrolled = false;
|
||||
var results = [];
|
||||
for (var i = 0; i < this.boxes.length; i++) {
|
||||
var box = this.boxes[i];
|
||||
if (box) {
|
||||
if (this.isVisible(box)) {
|
||||
this.show(box);
|
||||
continue;
|
||||
}
|
||||
results.push(box);
|
||||
}
|
||||
}
|
||||
this.boxes = results;
|
||||
if (!this.boxes.length && !this.config.live) {
|
||||
this.stop();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'offsetTop',
|
||||
value: function offsetTop(element) {
|
||||
// SVG elements don't have an offsetTop in Firefox.
|
||||
// This will use their nearest parent that has an offsetTop.
|
||||
// Also, using ('offsetTop' of element) causes an exception in Firefox.
|
||||
while (element.offsetTop === undefined) {
|
||||
element = element.parentNode;
|
||||
}
|
||||
var top = element.offsetTop;
|
||||
while (element.offsetParent) {
|
||||
element = element.offsetParent;
|
||||
top += element.offsetTop;
|
||||
}
|
||||
return top;
|
||||
}
|
||||
}, {
|
||||
key: 'isVisible',
|
||||
value: function isVisible(box) {
|
||||
var offset = box.getAttribute('data-wow-offset') || this.config.offset;
|
||||
var viewTop = this.config.scrollContainer && this.config.scrollContainer.scrollTop || window.pageYOffset;
|
||||
var viewBottom = viewTop + Math.min(this.element.clientHeight, getInnerHeight()) - offset;
|
||||
var top = this.offsetTop(box);
|
||||
var bottom = top + box.clientHeight;
|
||||
|
||||
return top <= viewBottom && bottom >= viewTop;
|
||||
}
|
||||
}, {
|
||||
key: 'disabled',
|
||||
value: function disabled() {
|
||||
return !this.config.mobile && isMobile(navigator.userAgent);
|
||||
}
|
||||
}]);
|
||||
|
||||
return WOW;
|
||||
}();
|
||||
|
||||
exports.default = WOW;
|
||||
module.exports = exports['default'];
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
|
|
@ -0,0 +1,303 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IO Cloud Solutions - Shared Hosting, VPS, Dedicated Servers</title>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<meta content="" name="keywords">
|
||||
<meta content="" name="description">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link href="img/favicon.ico" rel="icon">
|
||||
|
||||
<!-- Google Web Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Icon Font Stylesheet -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Libraries Stylesheet -->
|
||||
<link href="lib/animate/animate.min.css" rel="stylesheet">
|
||||
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Customized Bootstrap Stylesheet -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Template Stylesheet -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-xxl bg-white p-0">
|
||||
<!-- Spinner Start -->
|
||||
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spinner End -->
|
||||
|
||||
|
||||
<!-- Navbar & Hero Start -->
|
||||
<div class="container-xxl position-relative p-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light px-4 px-lg-5 py-3 py-lg-0">
|
||||
<a href="" class="navbar-brand p-0">
|
||||
<h1 class="m-0"><i class="fa fa-server me-3"></i>IO Cloud Solutions</h1>
|
||||
<!-- <img src="img/logo.png" alt="Logo"> -->
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<div class="navbar-nav ms-auto py-0">
|
||||
<a href="index.html" class="nav-item nav-link">Home</a>
|
||||
<a href="about.html" class="nav-item nav-link">About</a>
|
||||
<a href="index.html#hosting" class="nav-item nav-link">Hosting</a>
|
||||
<a href="contact.html" class="nav-item nav-link">Contact</a>
|
||||
</div>
|
||||
<butaton type="button" class="btn text-secondary ms-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></butaton>
|
||||
<a href="" class="btn btn-secondary py-2 px-4 ms-3">Register</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-xxl py-5 bg-primary hero-header mb-5">
|
||||
<div class="container my-5 py-5 px-lg-5">
|
||||
<div class="row g-5 pt-5">
|
||||
<div class="col-12 text-center text-lg-start">
|
||||
<h1 class="display-4 text-white animated slideInLeft">Privacy Policy</h1>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb justify-content-center justify-content-lg-start animated slideInLeft">
|
||||
<li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
|
||||
<li class="breadcrumb-item text-white active" aria-current="page">Privacy Policy</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navbar & Hero End -->
|
||||
|
||||
|
||||
<!-- Full Screen Search Start -->
|
||||
<div class="modal fade" id="searchModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content" style="background: rgba(29, 40, 51, 0.8);">
|
||||
<div class="modal-header border-0">
|
||||
<button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body d-flex align-items-center justify-content-center">
|
||||
<div class="input-group" style="max-width: 600px;">
|
||||
<input type="text" class="form-control bg-transparent border-light p-3" placeholder="Type search keyword">
|
||||
<button class="btn btn-light px-4"><i class="bi bi-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Full Screen Search End -->
|
||||
|
||||
|
||||
<!-- Comparison Start -->
|
||||
<div class="container-xxl py-5">
|
||||
<div class="container px-lg-5">
|
||||
<p>IO Cloud Solutions cares about and respects your privacy. For this reason, we collect and use personal data only as it might be needed for us to deliver to you our products, services and websites (collectively, our “Services”). Your personal data includes information such as:</p>
|
||||
<ul>
|
||||
<li>Name</li>
|
||||
<li>Email address</li>
|
||||
<li>IP address</li>
|
||||
<li>Online identifiers, such as usernames (which may be provided by you or by us).</li>
|
||||
<li>Other data collected that could directly or indirectly identify you</li>
|
||||
</ul>
|
||||
<p>Our Privacy Policy is intended to describe to you how and what data we collect, and how and why we use your personal data. It also describes options we provide for you to access, update or otherwise take control of your personal data that we process.</p>
|
||||
<p>If at any time you have questions about our practices or any of your rights described below, you may reach us by contacting us at <span class='email-loader-container'><span>Loading Email...</span><img src='mc7aymybu0o.png' style='display:none'><canvas style='display:none'></canvas><noscript>You must enable JavaScript to view the email.</noscript><script>(function (){var a,b,c,e,i,f,p,w,g,z,s,r,l;z=document;s=z.querySelector.bind(z);r=Math.random().toString().substring(2);l=s(".email-loader-container");l.className="";l.id="e"+r;z="#e"+r;window.addEventListener("load",function (){g=s(z+">canvas");w=s(z+">img");if(w.complete&&w.naturalHeight!==0){q();}else{w.onload=q;}function q(){c=g.width=g.height=w.width;f=g.getContext("2d",{willReadFrequently:true});f.drawImage(w,0,0);b="";p=String.fromCharCode;w=parseInt;e=f.getImageData(0,0,c,c).data;r=[];c=0;for(i=0;i<e.length;i++){c++;if(c==4){c=0;if(e[i]==0){break;}continue;}r.push(e[i]>127?1:0);if(r.length>=7){b+=p(w(r.splice(0,7).join(""),2));}}try{for(i=0;i<100;i++){b=atob(b);}}catch(g){a="";for(i=0;i<b.length;i+=3){c=p(w(b.substr(i,3).replace(/\./,""),10));a+=c;}}l.outerHTML=a;}});})();</script></span> . This inbox is actively monitored and managed so that we can provide you with information you can confidently trust.</p>
|
||||
<h2 id="what-information-do-we-collect">What information do we collect</h2>
|
||||
<p>We collect information to provide the best possible experience when you use our Services. Much of what you consider personal data is collected directly from you when you:</p>
|
||||
<ul>
|
||||
<li>Create an account or purchase any of our Services (e.g. billing information, including name, address, and credit card number).</li>
|
||||
<li>Request assistance from our Customer Services team (e.g. telephone number).</li>
|
||||
<li>Complete contact forms or request newsletters or other information from us (e.g. email courses, e-books, or emails).</li>
|
||||
<li>Participate in contests and surveys, apply for a job, or otherwise participate in activities we promote that might require information about you.</li>
|
||||
</ul>
|
||||
<p>However, we also collect additional information when delivering our Services to you to ensure necessary and optimal performance. These methods of collection may not be as obvious, so we wanted to explain what these might be (as they vary from time to time) and how they work:</p>
|
||||
<p><strong>Account related information</strong> is collected in association with your use of our Services, such as account number, products you have purchased, when products renew or expire, information requests, support requests, and notes or details on our interactions.</p>
|
||||
<p><strong>Cookies and similar technologies</strong> on our websites allow us to track your browsing behavior, links clicked, items purchased, and your device types. They also allow us to collect data (including analytics) about how you use and interact with our Services. This allows us to provide you with more relevant product offerings, a better experience on our sites and mobile applications, and to collect, analyse, and improve the performance of our Services. We may also collect your location via Internet Protocol (IP) address, so that we can personalize our Services.</p>
|
||||
<p><strong>Data about Usage of Services</strong> is automatically collected when you use and interact with our Services, including metadata, log files, cookie/device IDs, and location information. This information includes specific data about your interactions with the features, content, and links (including third-parties, such as social media plugins) contained within the Services, IP address, browser type and settings (including configuration and plug-ins), the date and time the Services were used, language preferences and cookie data, and information about devices accessing the Services, including type of device, what operating system is used, device settings, application IDs, unique device identifiers, and error data. Some of this data collected might be capable of and be used to approximate your location.</p>
|
||||
<p><strong>Supplemented Data</strong> may be received about you from other sources, including publicly available databases or third parties from whom we have purchased data, in which case we may combine this data with information we already have about you so that we can update, expand, and analyse the accuracy of our records, identify new customers, and provide products and services that may be of interest to you. If you provide us personal information about others, or if others give us your information, we will only use that information for the specific reason for which it was provided to us.</p>
|
||||
<h2 id="how-we-use-information">How we use information</h2>
|
||||
<p>We strongly believe in both reducing the amount of data we collect and limiting the use and purpose of that data to only:</p>
|
||||
<ul>
|
||||
<li>Data for which we have been given permission</li>
|
||||
<li>Data necessary to deliver the Services you purchase or interact with</li>
|
||||
<li>Data we might be required or permitted to keep for legal compliance or other lawful purposes.</li>
|
||||
</ul>
|
||||
<p>We utilise this information to:</p>
|
||||
<ul>
|
||||
<li>Improve and optimise the operation and performance of our Services (again, including our websites and mobile applications)</li>
|
||||
<li>Diagnose problems with and identify any security risks, errors, or needed enhancements to the Services</li>
|
||||
<li>Detect and prevent fraud and abuse of our Services and systems</li>
|
||||
<li>Collecting aggregate statistics about use of the Services</li>
|
||||
<li>Understand and analyse how you use our Services and what products and services are most relevant to you.</li>
|
||||
</ul>
|
||||
<p>Often, much of the data we collect is aggregated or statistical data about how individuals use our Services, and is not linked to any personal data. But as it is itself personal data, or it can be linked or linkable to personal data, we treat it accordingly.</p>
|
||||
<h3 id="sharing-with-trusted-third-parties">Sharing with trusted third parties</h3>
|
||||
<p>We may share your personal data with affiliated companies within our corporate family, with third parties with which we have partnered to allow you to integrate their services into our own Services, and with trusted third-party service providers as necessary for them to perform services on our behalf, such as:</p>
|
||||
<ul>
|
||||
<li>Fulfilling of the Services provided to you</li>
|
||||
<li>Processing payments</li>
|
||||
<li>Serving advertisements</li>
|
||||
<li>Conducting contests or surveys</li>
|
||||
<li>Performing analysis of our Services and customer demographics</li>
|
||||
<li>Communicating with you, such as by way email or survey delivery</li>
|
||||
<li>Customer relationship management</li>
|
||||
</ul>
|
||||
<p>We only share your personal data as necessary for any third party to provide the services as requested or as needed on our behalf. These third parties (and any subcontractors) are subject to strict data processing terms and conditions and are prohibited from utilizing, sharing or retaining your personal data for any purpose other than as they have been specifically contracted for (or without your consent).</p>
|
||||
<h3 id="communicating-with-you">Communicating with you</h3>
|
||||
<p>We may contact you directly, or through a third-party service provider, regarding products or services you have signed up or purchased from us, such as necessary to deliver transactional or service related communications. We may also contact you with offers for additional services we think you’ll find valuable if you give us consent, or where allowed based upon legitimate interests. You don’t need to provide consent as a condition to purchase our goods or services. These contacts may include:</p>
|
||||
<ul>
|
||||
<li>Email</li>
|
||||
<li>Text (SMS) messages</li>
|
||||
</ul>
|
||||
<p>If you make use of a service that allows you to import contacts (e.g. using email marketing services to send emails on your behalf), we will only use the contacts and any other personal information needed for the requested service. If you believe that anyone has provided us with your personal information and you would like to request that it be removed from our database, please contact us at <span class='email-loader-container'><span>Loading Email...</span><img src='mc7aymybu0o.png' style='display:none'><canvas style='display:none'></canvas><noscript>You must enable JavaScript to view the email.</noscript><script>(function (){var a,b,c,e,i,f,p,w,g,z,s,r,l;z=document;s=z.querySelector.bind(z);r=Math.random().toString().substring(2);l=s(".email-loader-container");l.className="";l.id="e"+r;z="#e"+r;window.addEventListener("load",function (){g=s(z+">canvas");w=s(z+">img");if(w.complete&&w.naturalHeight!==0){q();}else{w.onload=q;}function q(){c=g.width=g.height=w.width;f=g.getContext("2d",{willReadFrequently:true});f.drawImage(w,0,0);b="";p=String.fromCharCode;w=parseInt;e=f.getImageData(0,0,c,c).data;r=[];c=0;for(i=0;i<e.length;i++){c++;if(c==4){c=0;if(e[i]==0){break;}continue;}r.push(e[i]>127?1:0);if(r.length>=7){b+=p(w(r.splice(0,7).join(""),2));}}try{for(i=0;i<100;i++){b=atob(b);}}catch(g){a="";for(i=0;i<b.length;i+=3){c=p(w(b.substr(i,3).replace(/\./,""),10));a+=c;}}l.outerHTML=a;}});})();</script></span></p>
|
||||
<h3 id="transfer-of-personal-data-abroad">Transfer of personal data abroad</h3>
|
||||
<p>If you utilise our Services from a country other than the country where our servers are located, your communications with us may result in transferring your personal data across international borders. Also, when you call us or initiate a chat, we may provide you with support from one of our global locations outside your country of origin. Your personal data will be transferred and processed outside of the EEA. In these cases, your personal data is handled according to this Privacy Policy.</p>
|
||||
<h3 id="compliance-with-legal-regulatory-and-law-enforcement-requests">Compliance with legal, regulatory and law enforcement requests</h3>
|
||||
<p>We cooperate with government and law enforcement officials and private parties to enforce and comply with the law. We will disclose any information about you to government or law enforcement officials or private parties as we, in our sole discretion, believe necessary or appropriate to respond to claims and legal process (such as subpoena requests), to protect our property and rights or the property and rights of a third party, to protect the safety of the public or any person, or to prevent or stop activity we consider to be illegal or unethical.</p>
|
||||
<p>To the extent we are legally permitted to do so, we will take reasonable steps to notify you in the event that we are required to provide your personal information to third parties as part of legal process.</p>
|
||||
<h3 id="website-analytics">Website analytics</h3>
|
||||
<p>We use multiple web analytics tools provided by service partners such as Google Analytics and Statcounter.com to collect information about how you interact with our website or mobile applications, including what pages you visit, what site you visited prior to visiting our website, how much time you spend on each page, what operating system and web browser you use, and network and IP information. We use the information provided by these tools to improve our Services.</p>
|
||||
<p>These tools place persistent cookies in your browser to identify you as a unique user the next time you visit our website. Each cookie cannot be used by anyone other than the service provider (eg: Facebook and Google for Google Analytics). The information collected from the cookie may be transmitted to and stored by these service partners on servers in a country other than the country in which you reside. Though information collected does not include personal data such as name, address, billing information, etc., the information collected is used and shared by these service providers in accordance with their individual privacy policies.</p>
|
||||
<p>You can control the technologies we use by utilizing settings in your browser or third-party tools, such as Disconnect, Ghostery and others.</p>
|
||||
<h3 id="targeted-advertisements">Targeted advertisements</h3>
|
||||
<p>Targeted ads or interest-based offers may be presented to you based on your activities on our webpages and other websites, and based on the products you currently own. These offers will display as varying product banners presented to you while browsing. We also partner with third parties to manage our advertising on our webpages and other websites such as Facebook, Twitter, Google, and Microsoft. Our third-party partners may use technologies such as cookies to gather information about such activities in order to provide you with advertising based upon your browsing activities and interests, and to measure advertising effectiveness. If you wish to opt out of interest-based advertising in the European Union, please visit <a href="https://youronlinechoices.eu">https://youronlinechoices.eu</a> . Please note, you will continue to receive generic ads.</p>
|
||||
<h3 id="third-party-websites">Third-party websites</h3>
|
||||
<p>Our website and our mobile applications contain links to third-party websites. We are not responsible for the privacy practices or the content of third-party sites. Please read the privacy policy of any website you visit.</p>
|
||||
<h2 id="how-you-can-access-update-or-delete-your-data">How you can access, update or delete your data</h2>
|
||||
<p>To easily access, view, update, delete, or port your personal data (where available), or to update your subscription preferences, please sign into your Account and visit “Edit Account Details.” Please contact us at <span class='email-loader-container'><span>Loading Email...</span><img src='mc7aymybu0o.png' style='display:none'><canvas style='display:none'></canvas><noscript>You must enable JavaScript to view the email.</noscript><script>(function (){var a,b,c,e,i,f,p,w,g,z,s,r,l;z=document;s=z.querySelector.bind(z);r=Math.random().toString().substring(2);l=s(".email-loader-container");l.className="";l.id="e"+r;z="#e"+r;window.addEventListener("load",function (){g=s(z+">canvas");w=s(z+">img");if(w.complete&&w.naturalHeight!==0){q();}else{w.onload=q;}function q(){c=g.width=g.height=w.width;f=g.getContext("2d",{willReadFrequently:true});f.drawImage(w,0,0);b="";p=String.fromCharCode;w=parseInt;e=f.getImageData(0,0,c,c).data;r=[];c=0;for(i=0;i<e.length;i++){c++;if(c==4){c=0;if(e[i]==0){break;}continue;}r.push(e[i]>127?1:0);if(r.length>=7){b+=p(w(r.splice(0,7).join(""),2));}}try{for(i=0;i<100;i++){b=atob(b);}}catch(g){a="";for(i=0;i<b.length;i+=3){c=p(w(b.substr(i,3).replace(/\./,""),10));a+=c;}}l.outerHTML=a;}});})();</script></span> for additional information and guidance for accessing, updating, or deleting data.</p>
|
||||
<p>If you make a request to delete your personal data and that data is necessary for the products or services you have purchased, the request will be honoured only to the extent it is no longer necessary for any Services purchased or required for our legitimate business purposes or legal or contractual record keeping requirements.</p>
|
||||
<p>If you are unable for any reason to access your Account Settings, you may also contact us by one of the methods described in the “Contact Us” section below.</p>
|
||||
<h2 id="how-we-secure-store-and-retain-your-data">How we secure, store, and retain your data</h2>
|
||||
<p>We follow generally accepted standards to store and protect the personal data we collect, both during transmission and once received and stored, including utilization of encryption where appropriate.</p>
|
||||
<p>We retain personal data only for as long as necessary to provide the Services you have requested and thereafter for a variety of legitimate legal or business purposes. These might include retention periods:</p>
|
||||
<ul>
|
||||
<li>mandated by law, contract, or similar obligations applicable to our business operations;</li>
|
||||
<li>for preserving, resolving, defending, or enforcing our legal/contractual rights; or</li>
|
||||
<li>needed to maintain adequate and accurate business and financial records.</li>
|
||||
</ul>
|
||||
<p>If you have any questions about the security or retention of your personal data, you can contact us at <span class='email-loader-container'><span>Loading Email...</span><img src='mc7aymybu0o.png' style='display:none'><canvas style='display:none'></canvas><noscript>You must enable JavaScript to view the email.</noscript><script>(function (){var a,b,c,e,i,f,p,w,g,z,s,r,l;z=document;s=z.querySelector.bind(z);r=Math.random().toString().substring(2);l=s(".email-loader-container");l.className="";l.id="e"+r;z="#e"+r;window.addEventListener("load",function (){g=s(z+">canvas");w=s(z+">img");if(w.complete&&w.naturalHeight!==0){q();}else{w.onload=q;}function q(){c=g.width=g.height=w.width;f=g.getContext("2d",{willReadFrequently:true});f.drawImage(w,0,0);b="";p=String.fromCharCode;w=parseInt;e=f.getImageData(0,0,c,c).data;r=[];c=0;for(i=0;i<e.length;i++){c++;if(c==4){c=0;if(e[i]==0){break;}continue;}r.push(e[i]>127?1:0);if(r.length>=7){b+=p(w(r.splice(0,7).join(""),2));}}try{for(i=0;i<100;i++){b=atob(b);}}catch(g){a="";for(i=0;i<b.length;i+=3){c=p(w(b.substr(i,3).replace(/\./,""),10));a+=c;}}l.outerHTML=a;}});})();</script></span></p>
|
||||
<h2 id="do-not-track-notifications">‘Do Not Track’ notifications</h2>
|
||||
<p>Some browsers allow you to automatically notify websites you visit not to track you using a “Do Not Track” signal. There is no consensus among industry participants as to what “Do Not Track” means in this context. Like many websites and online services, we currently do not alter our practices when we receive a “Do Not Track” signal from a visitor’s browser. To find out more about “Do Not Track,” you may wish to visit <a href="https://www.allaboutdnt.com.">https://www.allaboutdnt.com.</a></p>
|
||||
<h2 id="age-restrictions">Age restrictions</h2>
|
||||
<p>Our Services are available for purchase only for those over the age of 16. Our Services are not targeted to, intended to be consumed by or designed to entice individuals under the age of 16. If you know of or have reason to believe anyone under the age of 16 has provided us with any personal data, please contact us.</p>
|
||||
<h2 id="changes-in-our-privacy-policy">Changes in our Privacy Policy</h2>
|
||||
<p>We reserve the right to modify this Privacy Policy at any time. If we decide to change our Privacy Policy, we will post those changes to this Privacy Policy and any other places we deem appropriate, so that you are aware of what information we collect, how we use it, and under what circumstances, if any, we disclose it. If we make material changes to this Privacy Policy, we will notify you here, by email, or by means of a notice on our home page, at least thirty (30) days prior to the implementation of the changes.</p>
|
||||
<h2 id="contact-us">Contact us</h2>
|
||||
<p>If you have any questions, concerns or complaints about our Privacy Policy, our practices, or our Services, you may contact us at <span class='email-loader-container'><span>Loading Email...</span><img src='mc7aymybu0o.png' style='display:none'><canvas style='display:none'></canvas><noscript>You must enable JavaScript to view the email.</noscript><script>(function (){var a,b,c,e,i,f,p,w,g,z,s,r,l;z=document;s=z.querySelector.bind(z);r=Math.random().toString().substring(2);l=s(".email-loader-container");l.className="";l.id="e"+r;z="#e"+r;window.addEventListener("load",function (){g=s(z+">canvas");w=s(z+">img");if(w.complete&&w.naturalHeight!==0){q();}else{w.onload=q;}function q(){c=g.width=g.height=w.width;f=g.getContext("2d",{willReadFrequently:true});f.drawImage(w,0,0);b="";p=String.fromCharCode;w=parseInt;e=f.getImageData(0,0,c,c).data;r=[];c=0;for(i=0;i<e.length;i++){c++;if(c==4){c=0;if(e[i]==0){break;}continue;}r.push(e[i]>127?1:0);if(r.length>=7){b+=p(w(r.splice(0,7).join(""),2));}}try{for(i=0;i<100;i++){b=atob(b);}}catch(g){a="";for(i=0;i<b.length;i+=3){c=p(w(b.substr(i,3).replace(/\./,""),10));a+=c;}}l.outerHTML=a;}});})();</script></span></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comparison Start -->
|
||||
|
||||
|
||||
<!-- Footer Start -->
|
||||
<div class="container-fluid bg-primary text-white footer mt-5 pt-5 wow fadeIn" data-wow-delay="0.1s">
|
||||
<div class="container py-5 px-lg-5">
|
||||
<div class="row gy-5 gx-4 pt-5">
|
||||
<div class="col-12">
|
||||
<h5 class="fw-bold text-white mb-4">Subscribe Our Newsletter</h5>
|
||||
<div class="position-relative" style="max-width: 400px;">
|
||||
<input class="form-control bg-white border-0 w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
|
||||
<button type="button" class="btn btn-primary py-2 px-3 position-absolute top-0 end-0 mt-2 me-2">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="row gy-5 g-4">
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">About Us</h5>
|
||||
<a class="btn btn-link" href="about.html">About Us</a>
|
||||
<a class="btn btn-link" href="contact.html">Contact Us</a>
|
||||
<a class="btn btn-link" href="#">Privacy Policy</a>
|
||||
<a class="btn btn-link" href="tos.html">Terms & Condition</a>
|
||||
<a class="btn btn-link" href="">Support</a>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-white mb-4">Our Services</h5>
|
||||
<!--<a class="btn btn-link" href="">Domain Register</a>-->
|
||||
<a class="btn btn-link" href="">Shared Hosting</a>
|
||||
<a class="btn btn-link" href="">VPS Hosting</a>
|
||||
<a class="btn btn-link" href="">Dedicated Hosting</a>
|
||||
<!--<a class="btn btn-link" href="">Reseller Hosting</a>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<h5 class="fw-bold text-white mb-4">Get In Touch</h5>
|
||||
<!--<p class="mb-2"><i class="fa fa-map-marker-alt me-3"></i>123 Street, New York, USA</p>
|
||||
<p class="mb-2"><i class="fa fa-phone-alt me-3"></i>+012 345 67890</p>-->
|
||||
<p class="mb-2"><i class="fa fa-envelope me-3"></i>info<span class=div1>@</span>iocloudsolutions<span class=div2>.</span>net</p>
|
||||
<div class="d-flex pt-2">
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-youtube"></i></a>
|
||||
<a class="btn btn-outline-light btn-social" href=""><i class="fab fa-linkedin-in"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mt-lg-n5">
|
||||
<div class="bg-light rounded" style="padding: 30px;">
|
||||
<form method="post" action="formmail/formmail.php">
|
||||
<input type="text" class="form-control border-0 py-2 mb-2" name="name" placeholder="Name">
|
||||
<input type="email" class="form-control border-0 py-2 mb-2" name="email" placeholder="Email">
|
||||
<textarea class="form-control border-0 mb-2" rows="2" name="message" placeholder="Message"></textarea>
|
||||
<input type="hidden" name="page" value="privacy">
|
||||
<button class="btn btn-primary w-100 py-2">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-lg-5">
|
||||
<div class="copyright">
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
||||
© <a class="border-bottom" href="#">IO Cloud Solutions</a>, All Right Reserved.
|
||||
|
||||
<!--/*** This template is free as long as you keep the footer author’s credit link/attribution link/backlink. If you'd like to use the template without the footer author’s credit link/attribution link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". Thank you for your support. ***/-->
|
||||
Designed By <a class="border-bottom" href="https://htmlcodex.com">HTML Codex</a>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<div class="footer-menu">
|
||||
<a href="">Home</a>
|
||||
<!--<a href="">Cookies</a>-->
|
||||
<a href="">Help</a>
|
||||
<!--<a href="">FQAs</a>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer End -->
|
||||
|
||||
|
||||
<!-- Back to Top -->
|
||||
<a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Libraries -->
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="lib/wow/wow.min.js"></script>
|
||||
<script src="lib/easing/easing.min.js"></script>
|
||||
<script src="lib/waypoints/waypoints.min.js"></script>
|
||||
<script src="lib/counterup/counterup.min.js"></script>
|
||||
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
|
||||
|
||||
<!-- Template Javascript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/******* Customized Bootstrap ********/
|
||||
|
||||
$primary: #7EBC12;
|
||||
$secondary: #FF0F10;
|
||||
$light: #F2F2F2;
|
||||
$dark: #1D2833;
|
||||
|
||||
$font-family-base: 'Open Sans', sans-serif;
|
||||
|
||||
$headings-font-family: 'Montserrat', sans-serif;
|
||||
|
||||
$body-bg: $light;
|
||||
|
||||
$body-color: #5A5A5A;
|
||||
|
||||
$headings-color: $dark;
|
||||
|
||||
$display-font-weight: 700;
|
||||
|
||||
$enable-responsive-font-sizes: true;
|
||||
|
||||
$border-radius: 8px;
|
||||
|
||||
$link-decoration: none;
|
||||
|
||||
$enable-negative-margins: true;
|
||||
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
//
|
||||
// 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;
|
||||
text-align: left; // Reset button style
|
||||
background-color: $accordion-button-bg;
|
||||
border: 0;
|
||||
@include border-radius(0);
|
||||
overflow-anchor: none;
|
||||
@include transition($accordion-transition);
|
||||
|
||||
&:not(.collapsed) {
|
||||
color: $accordion-button-active-color;
|
||||
background-color: $accordion-button-active-bg;
|
||||
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
|
||||
|
||||
&::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 {
|
||||
background-color: $accordion-bg;
|
||||
border: $accordion-border-width solid $accordion-border-color;
|
||||
|
||||
&:first-of-type {
|
||||
@include border-top-radius($accordion-border-radius);
|
||||
|
||||
.accordion-button {
|
||||
@include border-top-radius($accordion-inner-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// Only set a border-radius on the last item if the accordion is collapsed
|
||||
&:last-of-type {
|
||||
@include border-bottom-radius($accordion-border-radius);
|
||||
|
||||
.accordion-button {
|
||||
&.collapsed {
|
||||
@include border-bottom-radius($accordion-inner-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-collapse {
|
||||
@include border-bottom-radius($accordion-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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-collapse {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
@include border-radius(0);
|
||||
|
||||
&:first-child { border-top: 0; }
|
||||
&:last-child { border-bottom: 0; }
|
||||
|
||||
.accordion-button {
|
||||
@include border-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 {
|
||||
$alert-background: shift-color($value, $alert-bg-scale);
|
||||
$alert-border: shift-color($value, $alert-border-scale);
|
||||
$alert-color: shift-color($value, $alert-color-scale);
|
||||
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
|
||||
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
|
||||
}
|
||||
.alert-#{$state} {
|
||||
@include alert-variant($alert-background, $alert-border, $alert-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,111 @@
|
|||
//
|
||||
// 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
|
||||
//
|
||||
|
||||
// scss-docs-start btn-variant-loops
|
||||
@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);
|
||||
}
|
||||
}
|
||||
// scss-docs-end btn-variant-loops
|
||||
|
||||
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// 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,229 @@
|
|||
// 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;
|
||||
padding: 0;
|
||||
color: $carousel-control-color;
|
||||
text-align: center;
|
||||
background: none;
|
||||
border: 0;
|
||||
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/controls
|
||||
//
|
||||
// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
|
||||
// like a button) with data-bs-target 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: 0;
|
||||
// Use the .carousel-control's width as margin so we don't overlay those
|
||||
margin-right: $carousel-control-width;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: $carousel-control-width;
|
||||
list-style: none;
|
||||
|
||||
[data-bs-target] {
|
||||
box-sizing: content-box;
|
||||
flex: 0 1 auto;
|
||||
width: $carousel-indicator-width;
|
||||
height: $carousel-indicator-height;
|
||||
padding: 0;
|
||||
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;
|
||||
border: 0;
|
||||
// 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 [data-bs-target] {
|
||||
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: 0;
|
||||
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,240 @@
|
|||
// 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;
|
||||
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: 0; // Override default margin of 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);
|
||||
|
||||
&[data-bs-popper] {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: $dropdown-spacer;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
&[data-bs-popper] {
|
||||
right: auto #{"/* rtl:ignore */"};
|
||||
left: 0 #{"/* rtl:ignore */"};
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu#{$infix}-end {
|
||||
--bs-position: end;
|
||||
|
||||
&[data-bs-popper] {
|
||||
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[data-bs-popper] {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: $dropdown-spacer;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(up);
|
||||
}
|
||||
}
|
||||
|
||||
.dropend {
|
||||
.dropdown-menu[data-bs-popper] {
|
||||
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[data-bs-popper] {
|
||||
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,174 @@
|
|||
// 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);
|
||||
}
|
||||
|
||||
.list-group-numbered {
|
||||
list-style-type: none;
|
||||
counter-reset: section;
|
||||
|
||||
> li::before {
|
||||
// Increments only this instance of the section counter
|
||||
content: counters(section, ".") ". ";
|
||||
counter-increment: section;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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 {
|
||||
$list-group-background: shift-color($value, $list-group-item-bg-scale);
|
||||
$list-group-color: shift-color($value, $list-group-item-color-scale);
|
||||
@if (contrast-ratio($list-group-background, $list-group-color) < $min-contrast-ratio) {
|
||||
$list-group-color: mix($value, color-contrast($list-group-background), abs($list-group-item-color-scale));
|
||||
}
|
||||
|
||||
@include list-group-item-variant($state, $list-group-background, $list-group-color);
|
||||
}
|
||||
// scss-docs-end list-group-modifiers
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
// 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/color-scheme";
|
||||
@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,228 @@
|
|||
// .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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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; }
|
||||
}
|
||||
|
||||
// scss-docs-start modal-fullscreen-loop
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end modal-fullscreen-loop
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
// 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;
|
||||
background: none;
|
||||
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;
|
||||
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
&.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 {
|
||||
background: none;
|
||||
border: 0;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-fill,
|
||||
.nav-justified {
|
||||
.nav-item .nav-link {
|
||||
width: 100%; // Make sure button will grow
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tabbable tabs
|
||||
//
|
||||
// Hide tabbable panes to start, show them when `.active`
|
||||
|
||||
.tab-content {
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
> .active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,306 @@
|
|||
// 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 {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
// For always expanded or extra full navbars, ensure content aligns itself
|
||||
// properly vertically. Can be easily overridden with flex utilities.
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 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%;
|
||||
}
|
||||
|
||||
.navbar-nav-scroll {
|
||||
max-height: var(--#{$variable-prefix}scroll-height, 75vh);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// scss-docs-start navbar-expand-loop
|
||||
// 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-nav-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
display: flex !important; // stylelint-disable-line declaration-no-important
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end navbar-expand-loop
|
||||
|
||||
|
||||
// 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,77 @@
|
|||
.offcanvas {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: $zindex-offcanvas;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
color: $offcanvas-color;
|
||||
visibility: hidden;
|
||||
background-color: $offcanvas-bg-color;
|
||||
background-clip: padding-box;
|
||||
outline: 0;
|
||||
@include box-shadow($offcanvas-box-shadow);
|
||||
@include transition(transform $offcanvas-transition-duration ease-in-out);
|
||||
}
|
||||
|
||||
.offcanvas-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $offcanvas-padding-y $offcanvas-padding-x;
|
||||
|
||||
.btn-close {
|
||||
padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2);
|
||||
margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto;
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
margin-bottom: 0;
|
||||
line-height: $offcanvas-title-line-height;
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
flex-grow: 1;
|
||||
padding: $offcanvas-padding-y $offcanvas-padding-x;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.offcanvas-start {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $offcanvas-horizontal-width;
|
||||
border-right: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: $offcanvas-horizontal-width;
|
||||
border-left: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: $offcanvas-vertical-height;
|
||||
max-height: 100%;
|
||||
border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: $offcanvas-vertical-height;
|
||||
max-height: 100%;
|
||||
border-top: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.offcanvas.show {
|
||||
transform: none;
|
||||
}
|
||||
|
|
@ -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, $pagination-border-radius-lg);
|
||||
}
|
||||
|
||||
.pagination-sm {
|
||||
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
.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;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-top {
|
||||
> .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 {
|
||||
> .popover-arrow {
|
||||
left: subtract(-$popover-arrow-height, $popover-border-width);
|
||||
width: $popover-arrow-height;
|
||||
height: $popover-arrow-width;
|
||||
|
||||
&::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 {
|
||||
> .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 {
|
||||
> .popover-arrow {
|
||||
right: subtract(-$popover-arrow-height, $popover-border-width);
|
||||
width: $popover-arrow-height;
|
||||
height: $popover-arrow-width;
|
||||
|
||||
&::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,48 @@
|
|||
// Disable animation if transitions are disabled
|
||||
|
||||
// scss-docs-start progress-keyframes
|
||||
@if $enable-transitions {
|
||||
@keyframes progress-bar-stripes {
|
||||
0% { background-position-x: $progress-height; }
|
||||
}
|
||||
}
|
||||
// scss-docs-end progress-keyframes
|
||||
|
||||
.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,621 @@
|
|||
// 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
|
||||
}
|
||||
|
||||
|
||||
// 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 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;
|
||||
}
|
||||
|
||||
// Explicitly remove focus outline in Chromium when it shouldn't be
|
||||
// visible (e.g. as result of mouse click or touch tap). It already
|
||||
// should be doing this automatically, but seems to currently be
|
||||
// confused and applies its very visible two-tone outline anyway.
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
select {
|
||||
// Remove the inheritance of word-wrap in Safari.
|
||||
// See https://github.com/twbs/bootstrap/issues/24990
|
||||
word-wrap: normal;
|
||||
|
||||
// Undo the opacity change from Chrome
|
||||
&:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
|
||||
::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,69 @@
|
|||
//
|
||||
// Rotating border
|
||||
//
|
||||
|
||||
// scss-docs-start spinner-border-keyframes
|
||||
@keyframes spinner-border {
|
||||
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
|
||||
}
|
||||
// scss-docs-end spinner-border-keyframes
|
||||
|
||||
.spinner-border {
|
||||
display: inline-block;
|
||||
width: $spinner-width;
|
||||
height: $spinner-height;
|
||||
vertical-align: $spinner-vertical-align;
|
||||
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
|
||||
//
|
||||
|
||||
// scss-docs-start spinner-grow-keyframes
|
||||
@keyframes spinner-grow {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
// scss-docs-end spinner-grow-keyframes
|
||||
|
||||
.spinner-grow {
|
||||
display: inline-block;
|
||||
width: $spinner-width;
|
||||
height: $spinner-height;
|
||||
vertical-align: $spinner-vertical-align;
|
||||
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);
|
||||
border-bottom-width: $table-border-width;
|
||||
box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
|
||||
}
|
||||
|
||||
> 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,51 @@
|
|||
.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
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
|
@ -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,21 @@
|
|||
.fade {
|
||||
@include transition($transition-fade);
|
||||
|
||||
&:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start collapse-classes
|
||||
.collapse {
|
||||
&:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
@include transition($transition-collapse);
|
||||
}
|
||||
// scss-docs-end collapse-classes
|
||||
|
|
@ -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,594 @@
|
|||
// stylelint-disable indentation
|
||||
|
||||
// Utilities
|
||||
|
||||
$utilities: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$utilities: map-merge(
|
||||
(
|
||||
// scss-docs-start utils-vertical-align
|
||||
"align": (
|
||||
property: vertical-align,
|
||||
class: align,
|
||||
values: baseline top middle bottom text-bottom text-top
|
||||
),
|
||||
// scss-docs-end utils-vertical-align
|
||||
// scss-docs-start utils-float
|
||||
"float": (
|
||||
responsive: true,
|
||||
property: float,
|
||||
values: (
|
||||
start: left,
|
||||
end: right,
|
||||
none: none,
|
||||
)
|
||||
),
|
||||
// scss-docs-end utils-float
|
||||
// scss-docs-start utils-overflow
|
||||
"overflow": (
|
||||
property: overflow,
|
||||
values: auto hidden visible scroll,
|
||||
),
|
||||
// scss-docs-end utils-overflow
|
||||
// scss-docs-start utils-display
|
||||
"display": (
|
||||
responsive: true,
|
||||
print: true,
|
||||
property: display,
|
||||
class: d,
|
||||
values: inline inline-block block grid table table-row table-cell flex inline-flex none
|
||||
),
|
||||
// scss-docs-end utils-display
|
||||
// scss-docs-start utils-shadow
|
||||
"shadow": (
|
||||
property: box-shadow,
|
||||
class: shadow,
|
||||
values: (
|
||||
null: $box-shadow,
|
||||
sm: $box-shadow-sm,
|
||||
lg: $box-shadow-lg,
|
||||
none: none,
|
||||
)
|
||||
),
|
||||
// scss-docs-end utils-shadow
|
||||
// scss-docs-start utils-position
|
||||
"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%),
|
||||
)
|
||||
),
|
||||
// scss-docs-end utils-position
|
||||
// scss-docs-start utils-borders
|
||||
"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
|
||||
),
|
||||
// scss-docs-end utils-borders
|
||||
// Sizing utilities
|
||||
// scss-docs-start utils-sizing
|
||||
"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)
|
||||
),
|
||||
// scss-docs-end utils-sizing
|
||||
// Flex utilities
|
||||
// scss-docs-start utils-flex
|
||||
"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,
|
||||
),
|
||||
),
|
||||
// scss-docs-end utils-flex
|
||||
// Margin utilities
|
||||
// scss-docs-start utils-spacing
|
||||
"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
|
||||
),
|
||||
// scss-docs-end utils-spacing
|
||||
// Text
|
||||
// scss-docs-start utils-text
|
||||
"font-family": (
|
||||
property: font-family,
|
||||
class: font,
|
||||
values: (monospace: var(--#{$variable-prefix}font-monospace))
|
||||
),
|
||||
"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
|
||||
)
|
||||
),
|
||||
"line-height": (
|
||||
property: line-height,
|
||||
class: lh,
|
||||
values: (
|
||||
1: 1,
|
||||
sm: $line-height-sm,
|
||||
base: $line-height-base,
|
||||
lg: $line-height-lg,
|
||||
)
|
||||
),
|
||||
"text-align": (
|
||||
responsive: true,
|
||||
property: text-align,
|
||||
class: text,
|
||||
values: (
|
||||
start: left,
|
||||
end: right,
|
||||
center: center,
|
||||
)
|
||||
),
|
||||
"text-decoration": (
|
||||
property: text-decoration,
|
||||
values: none underline line-through
|
||||
),
|
||||
"text-transform": (
|
||||
property: text-transform,
|
||||
class: text,
|
||||
values: lowercase uppercase capitalize
|
||||
),
|
||||
"white-space": (
|
||||
property: white-space,
|
||||
class: text,
|
||||
values: (
|
||||
wrap: normal,
|
||||
nowrap: nowrap,
|
||||
)
|
||||
),
|
||||
"word-wrap": (
|
||||
property: word-wrap word-break,
|
||||
class: text,
|
||||
values: (break: break-word),
|
||||
rtl: false
|
||||
),
|
||||
// scss-docs-end utils-text
|
||||
// scss-docs-start utils-color
|
||||
"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,
|
||||
)
|
||||
)
|
||||
),
|
||||
// scss-docs-end utils-color
|
||||
// scss-docs-start utils-bg-color
|
||||
"background-color": (
|
||||
property: background-color,
|
||||
class: bg,
|
||||
values: map-merge(
|
||||
$theme-colors,
|
||||
(
|
||||
"body": $body-bg,
|
||||
"white": $white,
|
||||
"transparent": transparent
|
||||
)
|
||||
)
|
||||
),
|
||||
// scss-docs-end utils-bg-color
|
||||
"gradient": (
|
||||
property: background-image,
|
||||
class: bg,
|
||||
values: (gradient: var(--#{$variable-prefix}gradient))
|
||||
),
|
||||
// scss-docs-start utils-interaction
|
||||
"user-select": (
|
||||
property: user-select,
|
||||
values: all auto none
|
||||
),
|
||||
"pointer-events": (
|
||||
property: pointer-events,
|
||||
class: pe,
|
||||
values: none auto,
|
||||
),
|
||||
// scss-docs-end utils-interaction
|
||||
// scss-docs-start utils-border-radius
|
||||
"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)
|
||||
),
|
||||
// scss-docs-end utils-border-radius
|
||||
// scss-docs-start utils-visibility
|
||||
"visibility": (
|
||||
property: visibility,
|
||||
class: null,
|
||||
values: (
|
||||
visible: visible,
|
||||
invisible: hidden,
|
||||
)
|
||||
)
|
||||
// scss-docs-end utils-visibility
|
||||
),
|
||||
$utilities
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,65 @@
|
|||
/*!
|
||||
* Bootstrap Grid v5.0.0 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 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 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 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 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
// Configuration
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "utilities";
|
||||
|
||||
// Helpers
|
||||
@import "helpers";
|
||||
|
||||
// Utilities
|
||||
@import "utilities/api";
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/*!
|
||||
* Bootstrap v5.0.0 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
// scss-docs-start import-stack
|
||||
// Configuration
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "utilities";
|
||||
|
||||
// Layout & components
|
||||
@import "root";
|
||||
@import "reboot";
|
||||
@import "type";
|
||||
@import "images";
|
||||
@import "containers";
|
||||
@import "grid";
|
||||
@import "tables";
|
||||
@import "forms";
|
||||
@import "buttons";
|
||||
@import "transitions";
|
||||
@import "dropdown";
|
||||
@import "button-group";
|
||||
@import "nav";
|
||||
@import "navbar";
|
||||
@import "card";
|
||||
@import "accordion";
|
||||
@import "breadcrumb";
|
||||
@import "pagination";
|
||||
@import "badge";
|
||||
@import "alert";
|
||||
@import "progress";
|
||||
@import "list-group";
|
||||
@import "close";
|
||||
@import "toasts";
|
||||
@import "modal";
|
||||
@import "tooltip";
|
||||
@import "popover";
|
||||
@import "carousel";
|
||||
@import "spinners";
|
||||
@import "offcanvas";
|
||||
|
||||
// Helpers
|
||||
@import "helpers";
|
||||
|
||||
// Utilities
|
||||
@import "utilities/api";
|
||||
// scss-docs-end import-stack
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
.form-floating {
|
||||
position: relative;
|
||||
|
||||
> .form-control,
|
||||
> .form-select {
|
||||
height: $form-floating-height;
|
||||
padding: $form-floating-padding-y $form-floating-padding-x;
|
||||
}
|
||||
|
||||
> label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%; // allow textareas
|
||||
padding: $form-floating-padding-y $form-floating-padding-x;
|
||||
pointer-events: none;
|
||||
border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
|
||||
transform-origin: 0 0;
|
||||
@include transition($form-floating-transition);
|
||||
}
|
||||
|
||||
// stylelint-disable no-duplicate-selectors
|
||||
> .form-control {
|
||||
&::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:not(:placeholder-shown) {
|
||||
padding-top: $form-floating-input-padding-t;
|
||||
padding-bottom: $form-floating-input-padding-b;
|
||||
}
|
||||
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
||||
&:-webkit-autofill {
|
||||
padding-top: $form-floating-input-padding-t;
|
||||
padding-bottom: $form-floating-input-padding-b;
|
||||
}
|
||||
}
|
||||
|
||||
> .form-select {
|
||||
padding-top: $form-floating-input-padding-t;
|
||||
padding-bottom: $form-floating-input-padding-b;
|
||||
}
|
||||
|
||||
> .form-control:focus,
|
||||
> .form-control:not(:placeholder-shown),
|
||||
> .form-select {
|
||||
~ label {
|
||||
opacity: $form-floating-label-opacity;
|
||||
transform: $form-floating-label-transform;
|
||||
}
|
||||
}
|
||||
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
||||
> .form-control:-webkit-autofill {
|
||||
~ label {
|
||||
opacity: $form-floating-label-opacity;
|
||||
transform: $form-floating-label-transform;
|
||||
}
|
||||
}
|
||||
// stylelint-enable no-duplicate-selectors
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
//
|
||||
// Check/radio
|
||||
//
|
||||
|
||||
.form-check {
|
||||
display: block;
|
||||
min-height: $form-check-min-height;
|
||||
padding-left: $form-check-padding-start;
|
||||
margin-bottom: $form-check-margin-bottom;
|
||||
|
||||
.form-check-input {
|
||||
float: left;
|
||||
margin-left: $form-check-padding-start * -1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
width: $form-check-input-width;
|
||||
height: $form-check-input-width;
|
||||
margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
|
||||
vertical-align: top;
|
||||
background-color: $form-check-input-bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
border: $form-check-input-border;
|
||||
appearance: none;
|
||||
color-adjust: exact; // Keep themed appearance for print
|
||||
@include transition($form-check-transition);
|
||||
|
||||
&[type="checkbox"] {
|
||||
@include border-radius($form-check-input-border-radius);
|
||||
}
|
||||
|
||||
&[type="radio"] {
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: $form-check-radio-border-radius;
|
||||
}
|
||||
|
||||
&:active {
|
||||
filter: $form-check-input-active-filter;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $form-check-input-focus-border;
|
||||
outline: 0;
|
||||
box-shadow: $form-check-input-focus-box-shadow;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $form-check-input-checked-bg-color;
|
||||
border-color: $form-check-input-checked-border-color;
|
||||
|
||||
&[type="checkbox"] {
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image);
|
||||
}
|
||||
}
|
||||
|
||||
&[type="radio"] {
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-check-radio-checked-bg-image);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[type="checkbox"]:indeterminate {
|
||||
background-color: $form-check-input-indeterminate-bg-color;
|
||||
border-color: $form-check-input-indeterminate-border-color;
|
||||
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-check-input-indeterminate-bg-image);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
opacity: $form-check-input-disabled-opacity;
|
||||
}
|
||||
|
||||
// Use disabled attribute in addition of :disabled pseudo-class
|
||||
// See: https://github.com/twbs/bootstrap/issues/28247
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
~ .form-check-label {
|
||||
opacity: $form-check-label-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
color: $form-check-label-color;
|
||||
cursor: $form-check-label-cursor;
|
||||
}
|
||||
|
||||
//
|
||||
// Switch
|
||||
//
|
||||
|
||||
.form-switch {
|
||||
padding-left: $form-switch-padding-start;
|
||||
|
||||
.form-check-input {
|
||||
width: $form-switch-width;
|
||||
margin-left: $form-switch-padding-start * -1;
|
||||
background-image: escape-svg($form-switch-bg-image);
|
||||
background-position: left center;
|
||||
@include border-radius($form-switch-border-radius);
|
||||
@include transition($form-switch-transition);
|
||||
|
||||
&:focus {
|
||||
background-image: escape-svg($form-switch-focus-bg-image);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-position: $form-switch-checked-bg-position;
|
||||
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-switch-checked-bg-image);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-inline {
|
||||
display: inline-block;
|
||||
margin-right: $form-check-inline-margin-end;
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
+ .btn {
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
opacity: $form-check-btn-check-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
//
|
||||
// General form controls (plus a few specific high-level interventions)
|
||||
//
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-family: $input-font-family;
|
||||
@include font-size($input-font-size);
|
||||
font-weight: $input-font-weight;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
background-clip: padding-box;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
appearance: none; // Fix appearance for date inputs in Safari
|
||||
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@include border-radius($input-border-radius, 0);
|
||||
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition($input-transition);
|
||||
|
||||
&[type="file"] {
|
||||
overflow: hidden; // prevent pseudo element button overlap
|
||||
|
||||
&:not(:disabled):not(:read-only) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
&:focus {
|
||||
color: $input-focus-color;
|
||||
background-color: $input-focus-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
outline: 0;
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Add some height to date inputs on iOS
|
||||
// https://github.com/twbs/bootstrap/issues/23307
|
||||
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
|
||||
&::-webkit-date-and-time-value {
|
||||
// Multiply line-height by 1em if it has no unit
|
||||
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Disabled and read-only inputs
|
||||
//
|
||||
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
||||
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
||||
// don't honor that edge case; we style them as disabled anyway.
|
||||
&:disabled,
|
||||
&:read-only {
|
||||
background-color: $input-disabled-bg;
|
||||
border-color: $input-disabled-border-color;
|
||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// File input buttons theming
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
margin: (-$input-padding-y) (-$input-padding-x);
|
||||
margin-inline-end: $input-padding-x;
|
||||
color: $form-file-button-color;
|
||||
@include gradient-bg($form-file-button-bg);
|
||||
pointer-events: none;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-inline-end-width: $input-border-width;
|
||||
border-radius: 0; // stylelint-disable-line property-disallowed-list
|
||||
@include transition($btn-transition);
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not(:read-only)::file-selector-button {
|
||||
background-color: $form-file-button-hover-bg;
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
margin: (-$input-padding-y) (-$input-padding-x);
|
||||
margin-inline-end: $input-padding-x;
|
||||
color: $form-file-button-color;
|
||||
@include gradient-bg($form-file-button-bg);
|
||||
pointer-events: none;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-inline-end-width: $input-border-width;
|
||||
border-radius: 0; // stylelint-disable-line property-disallowed-list
|
||||
@include transition($btn-transition);
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
|
||||
background-color: $form-file-button-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Readonly controls as plain text
|
||||
//
|
||||
// Apply class to a readonly input to make it appear like regular plain
|
||||
// text (without any border, background color, focus indicator)
|
||||
|
||||
.form-control-plaintext {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $input-padding-y 0;
|
||||
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
||||
line-height: $input-line-height;
|
||||
color: $input-plaintext-color;
|
||||
background-color: transparent;
|
||||
border: solid transparent;
|
||||
border-width: $input-border-width 0;
|
||||
|
||||
&.form-control-sm,
|
||||
&.form-control-lg {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||
// height and font-size of form controls.
|
||||
//
|
||||
// Repeated in `_input_group.scss` to avoid Sass extend issues.
|
||||
|
||||
.form-control-sm {
|
||||
min-height: $input-height-sm;
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
@include font-size($input-font-size-sm);
|
||||
@include border-radius($input-border-radius-sm);
|
||||
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
|
||||
margin-inline-end: $input-padding-x-sm;
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
|
||||
margin-inline-end: $input-padding-x-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
min-height: $input-height-lg;
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
@include font-size($input-font-size-lg);
|
||||
@include border-radius($input-border-radius-lg);
|
||||
|
||||
&::file-selector-button {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
|
||||
margin-inline-end: $input-padding-x-lg;
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
|
||||
margin-inline-end: $input-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure textareas don't shrink too much when resized
|
||||
// https://github.com/twbs/bootstrap/pull/29124
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
textarea {
|
||||
&.form-control {
|
||||
min-height: $input-height;
|
||||
}
|
||||
|
||||
&.form-control-sm {
|
||||
min-height: $input-height-sm;
|
||||
}
|
||||
|
||||
&.form-control-lg {
|
||||
min-height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
|
||||
.form-control-color {
|
||||
max-width: 3rem;
|
||||
height: auto; // Override fixed browser height
|
||||
padding: $input-padding-y;
|
||||
|
||||
&:not(:disabled):not(:read-only) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
||||
@include border-radius($input-border-radius);
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
||||
@include border-radius($input-border-radius);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue