Avalonia updates
This commit is contained in:
TheXamlGuy
Vendored
+412
@@ -0,0 +1,412 @@
|
||||
<!-- =========
|
||||
|
||||
Template Name: Play
|
||||
Author: UIdeck
|
||||
Author URI: https://uideck.com/
|
||||
Support: https://uideck.com/support/
|
||||
Version: 1.1
|
||||
|
||||
========== -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Play | Open source Project by UIdeck</title>
|
||||
|
||||
<!--====== Favicon Icon ======-->
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="assets/images/favicon.svg"
|
||||
type="image/svg"
|
||||
/>
|
||||
|
||||
<!-- ===== All CSS files ===== -->
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="assets/css/animate.css" />
|
||||
<link rel="stylesheet" href="assets/css/lineicons.css" />
|
||||
<link rel="stylesheet" href="assets/css/ud-styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- ====== Header Start ====== -->
|
||||
<header class="ud-header">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img src="assets/images/logo/logo.svg" alt="Logo" />
|
||||
</a>
|
||||
<button class="navbar-toggler">
|
||||
<span class="toggler-icon"> </span>
|
||||
<span class="toggler-icon"> </span>
|
||||
<span class="toggler-icon"> </span>
|
||||
</button>
|
||||
|
||||
<div class="navbar-collapse">
|
||||
<ul id="nav" class="navbar-nav mx-auto">
|
||||
<li class="nav-item">
|
||||
<a class="ud-menu-scroll" href="#home">Home</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="ud-menu-scroll" href="#about">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="ud-menu-scroll" href="#pricing">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="ud-menu-scroll" href="#team">Team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="ud-menu-scroll" href="#contact">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item nav-item-has-children">
|
||||
<a href="javascript:void(0)"> Pages </a>
|
||||
<ul class="ud-submenu">
|
||||
<li class="ud-submenu-item">
|
||||
<a href="about.html" class="ud-submenu-link">
|
||||
About Page
|
||||
</a>
|
||||
</li>
|
||||
<li class="ud-submenu-item">
|
||||
<a href="pricing.html" class="ud-submenu-link">
|
||||
Pricing Page
|
||||
</a>
|
||||
</li>
|
||||
<li class="ud-submenu-item">
|
||||
<a href="contact.html" class="ud-submenu-link">
|
||||
Contact Page
|
||||
</a>
|
||||
</li>
|
||||
<li class="ud-submenu-item">
|
||||
<a href="blog.html" class="ud-submenu-link">
|
||||
Blog Grid Page
|
||||
</a>
|
||||
</li>
|
||||
<li class="ud-submenu-item">
|
||||
<a href="blog-details.html" class="ud-submenu-link">
|
||||
Blog Details Page
|
||||
</a>
|
||||
</li>
|
||||
<li class="ud-submenu-item">
|
||||
<a href="login.html" class="ud-submenu-link">
|
||||
Sign In Page
|
||||
</a>
|
||||
</li>
|
||||
<li class="ud-submenu-item">
|
||||
<a href="404.html" class="ud-submenu-link">404 Page</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="navbar-btn d-none d-sm-inline-block">
|
||||
<a href="login.html" class="ud-main-btn ud-login-btn">
|
||||
Sign In
|
||||
</a>
|
||||
<a class="ud-main-btn ud-white-btn" href="javascript:void(0)">
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- ====== Header End ====== -->
|
||||
|
||||
<!-- ====== Banner Start ====== -->
|
||||
<section class="ud-page-banner">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ud-banner-content">
|
||||
<h1>404 Page</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ====== Banner End ====== -->
|
||||
|
||||
<!-- ====== Error 404 Start ====== -->
|
||||
<section class="ud-404">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ud-404-wrapper">
|
||||
<div class="ud-404-content">
|
||||
<h2 class="ud-404-title">404 - We couldn't find that page.</h2>
|
||||
<h5 class="ud-404-subtitle">
|
||||
Maybe you can find what you need here?
|
||||
</h5>
|
||||
<ul class="ud-404-links">
|
||||
<li>
|
||||
<a href="javascript:void(0)">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">Support</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">Latest News</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ====== Error 404 End ====== -->
|
||||
|
||||
<!-- ====== Footer Start ====== -->
|
||||
<footer class="ud-footer wow fadeInUp" data-wow-delay=".15s">
|
||||
<div class="shape shape-1">
|
||||
<img src="assets/images/footer/shape-1.svg" alt="shape" />
|
||||
</div>
|
||||
<div class="shape shape-2">
|
||||
<img src="assets/images/footer/shape-2.svg" alt="shape" />
|
||||
</div>
|
||||
<div class="shape shape-3">
|
||||
<img src="assets/images/footer/shape-3.svg" alt="shape" />
|
||||
</div>
|
||||
<div class="ud-footer-widgets">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-4 col-md-6">
|
||||
<div class="ud-widget">
|
||||
<a href="index.html" class="ud-footer-logo">
|
||||
<img src="assets/images/logo/logo.svg" alt="logo" />
|
||||
</a>
|
||||
<p class="ud-widget-desc">
|
||||
We create digital experiences for brands and companies by
|
||||
using technology.
|
||||
</p>
|
||||
<ul class="ud-widget-socials">
|
||||
<li>
|
||||
<a href="https://twitter.com/MusharofChy">
|
||||
<i class="lni lni-facebook-filled"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/MusharofChy">
|
||||
<i class="lni lni-twitter-filled"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/MusharofChy">
|
||||
<i class="lni lni-instagram-filled"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/MusharofChy">
|
||||
<i class="lni lni-linkedin-original"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-2 col-lg-2 col-md-6 col-sm-6">
|
||||
<div class="ud-widget">
|
||||
<h5 class="ud-widget-title">About Us</h5>
|
||||
<ul class="ud-widget-links">
|
||||
<li>
|
||||
<a href="javascript:void(0)">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">Features</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">Testimonial</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-lg-3 col-md-6 col-sm-6">
|
||||
<div class="ud-widget">
|
||||
<h5 class="ud-widget-title">Features</h5>
|
||||
<ul class="ud-widget-links">
|
||||
<li>
|
||||
<a href="javascript:void(0)">How it works</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">Privacy policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">Terms of service</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">Refund policy</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-lg-3 col-md-6 col-sm-6">
|
||||
<div class="ud-widget">
|
||||
<h5 class="ud-widget-title">Our Products</h5>
|
||||
<ul class="ud-widget-links">
|
||||
<li>
|
||||
<a
|
||||
href="https://lineicons.com/"
|
||||
rel="nofollow noopner"
|
||||
target="_blank"
|
||||
>Lineicons
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://ecommercehtml.com/"
|
||||
rel="nofollow noopner"
|
||||
target="_blank"
|
||||
>Ecommerce HTML</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://ayroui.com/"
|
||||
rel="nofollow noopner"
|
||||
target="_blank"
|
||||
>Ayro UI</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://graygrids.com/"
|
||||
rel="nofollow noopner"
|
||||
target="_blank"
|
||||
>Plain Admin</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-6 col-md-8 col-sm-10">
|
||||
<div class="ud-widget">
|
||||
<h5 class="ud-widget-title">Partners</h5>
|
||||
<ul class="ud-widget-brands">
|
||||
<li>
|
||||
<a
|
||||
href="https://ayroui.com/"
|
||||
rel="nofollow noopner"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="assets/images/footer/brands/ayroui.svg"
|
||||
alt="ayroui"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://ecommercehtml.com/"
|
||||
rel="nofollow noopner"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="assets/images/footer/brands/ecommerce-html.svg"
|
||||
alt="ecommerce-html"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://graygrids.com/"
|
||||
rel="nofollow noopner"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="assets/images/footer/brands/graygrids.svg"
|
||||
alt="graygrids"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://lineicons.com/"
|
||||
rel="nofollow noopner"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="assets/images/footer/brands/lineicons.svg"
|
||||
alt="lineicons"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://uideck.com/"
|
||||
rel="nofollow noopner"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="assets/images/footer/brands/uideck.svg"
|
||||
alt="uideck"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://tailwindtemplates.co/"
|
||||
rel="nofollow noopner"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="assets/images/footer/brands/tailwindtemplates.svg"
|
||||
alt="tailwindtemplates"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ud-footer-bottom">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<ul class="ud-footer-bottom-left">
|
||||
<li>
|
||||
<a href="javascript:void(0)">Privacy policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">Support policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">Terms of service</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p class="ud-footer-bottom-right">
|
||||
Designed and Developed by
|
||||
<a href="https://uideck.com" rel="nofollow">UIdeck</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- ====== Footer End ====== -->
|
||||
|
||||
<!-- ====== Back To Top Start ====== -->
|
||||
<a href="javascript:void(0)" class="back-to-top">
|
||||
<i class="lni lni-chevron-up"> </i>
|
||||
</a>
|
||||
<!-- ====== Back To Top End ====== -->
|
||||
|
||||
<!-- ====== All Javascript Files ====== -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/wow.min.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+234
@@ -0,0 +1,234 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/*!
|
||||
* animate.css -https://daneden.github.io/animate.css/
|
||||
* Version - 3.7.2
|
||||
* Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||||
*
|
||||
* Copyright (c) 2019 Daniel Eden
|
||||
*/
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -20px, 0);
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -20px, 0);
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-20px, 0, 0);
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-20px, 0, 0);
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInLeft {
|
||||
-webkit-animation-name: fadeInLeft;
|
||||
animation-name: fadeInLeft;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(20px, 0, 0);
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(20px, 0, 0);
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInRight {
|
||||
-webkit-animation-name: fadeInRight;
|
||||
animation-name: fadeInRight;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 20px, 0);
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 20px, 0);
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
-webkit-animation-name: fadeInUp;
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
.animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.delay-1s {
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.animated.delay-2s {
|
||||
-webkit-animation-delay: 2s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.animated.delay-3s {
|
||||
-webkit-animation-delay: 3s;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.animated.delay-4s {
|
||||
-webkit-animation-delay: 4s;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.animated.delay-5s {
|
||||
-webkit-animation-delay: 5s;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.animated.fast {
|
||||
-webkit-animation-duration: 800ms;
|
||||
animation-duration: 800ms;
|
||||
}
|
||||
|
||||
.animated.faster {
|
||||
-webkit-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
.animated.slow {
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.animated.slower {
|
||||
-webkit-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@media (print), (prefers-reduced-motion: reduce) {
|
||||
.animated {
|
||||
-webkit-animation-duration: 1ms !important;
|
||||
animation-duration: 1ms !important;
|
||||
-webkit-transition-duration: 1ms !important;
|
||||
transition-duration: 1ms !important;
|
||||
-webkit-animation-iteration-count: 1 !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
+2210
File diff suppressed because it is too large
Load Diff
+2641
File diff suppressed because it is too large
Load Diff
+27
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
+1616
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 580 KiB |
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="46" viewBox="0 0 46 46" width="46" xmlns="http://www.w3.org/2000/svg"><g fill="#3056d3" fill-opacity=".44"><circle cx="1.39737" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -43.20523 45.99997)"/><circle cx="1.39737" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 -6.59387 9.38861)"/><circle cx="13.6943" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -30.9083 58.2969)"/><circle cx="13.6943" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 5.70306 21.68554)"/><circle cx="25.9911" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -18.6115 70.5937)"/><circle cx="25.9911" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 17.99986 33.98234)"/><circle cx="38.288" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -6.3146 82.8906)"/><circle cx="38.288" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 30.29676 46.27924)"/><circle cx="1.39737" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -30.90843 33.70317)"/><circle cx="13.6943" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -18.6115 46.0001)"/><circle cx="25.9911" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -6.3147 58.2969)"/><circle cx="38.288" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 5.9822 70.5938)"/><circle cx="1.39737" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 -18.61133 21.40607)"/><circle cx="13.6943" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 -6.3144 33.703)"/><circle cx="25.9911" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 5.9824 45.9998)"/><circle cx="38.288" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 18.2793 58.2967)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="156" height="343" viewBox="0 0 156 343" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="-213" y="175.925" width="352.265" height="175.956" rx="37" transform="rotate(-47.3095 -213 175.925)" fill="#13C296"/>
|
||||
<rect x="-225" y="222.925" width="352.265" height="175.956" rx="29" transform="rotate(-47.3095 -225 222.925)" stroke="#13C296" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 380 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="215" height="157" viewBox="0 0 215 157" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="255.253" y="448.005" width="359.574" height="236.524" rx="22" transform="rotate(-135 255.253 448.005)" fill="#13C296"/>
|
||||
<rect x="307.164" y="343.427" width="342.167" height="143.513" rx="31" transform="rotate(-135 307.164 343.427)" stroke="#13C296" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 384 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 257 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="470" viewBox="0 0 1440 470" width="1440" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1=".000019" x2="1521" y1="383.5" y2="-35.5"><stop offset="0" stop-color="#13c296"/><stop offset="1" stop-color="#3056d3"/></linearGradient><mask id="b" height="470" maskUnits="userSpaceOnUse" width="1440" x="0" y="0"><path d="m0 0h1440v470h-1440z" fill="url(#a)"/></mask><g mask="url(#b)" stroke="#fff"><g stroke-opacity=".04"><circle cx="1409" cy="5" r="138" stroke-width="50"/><circle cx="55" cy="442" r="138" stroke-width="50"/><circle cx="996" cy="470" r="39" stroke-width="20"/><circle cx="446" r="39" stroke-width="20"/></g><path d="m1169.39 226.701 50.42-13.509-13.51 50.415z" stroke-opacity=".06" stroke-width="13"/><path d="m245.406 137.609-11.421-42.6238 42.624 11.4208z" stroke-opacity=".08" stroke-width="12"/></g></svg>
|
||||
|
After Width: | Height: | Size: 931 B |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="46" viewBox="0 0 46 46" width="46" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-opacity=".44"><circle cx="1.39737" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -43.20523 45.99997)"/><circle cx="1.39737" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 -6.59387 9.38861)"/><circle cx="13.6943" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -30.9083 58.2969)"/><circle cx="13.6943" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 5.70306 21.68554)"/><circle cx="25.9911" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -18.6115 70.5937)"/><circle cx="25.9911" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 17.99986 33.98234)"/><circle cx="38.288" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -6.3146 82.8906)"/><circle cx="38.288" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 30.29676 46.27924)"/><circle cx="1.39737" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -30.90843 33.70317)"/><circle cx="13.6943" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -18.6115 46.0001)"/><circle cx="25.9911" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -6.3147 58.2969)"/><circle cx="38.288" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 5.9822 70.5938)"/><circle cx="1.39737" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 -18.61133 21.40607)"/><circle cx="13.6943" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 -6.3144 33.703)"/><circle cx="25.9911" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 5.9824 45.9998)"/><circle cx="38.288" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 18.2793 58.2967)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="251" viewBox="0 0 745 251" width="745" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#3056d3" stop-opacity=".15"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-101.591" x2="49.1618" xlink:href="#a" y1="-50.4346" y2="-49.6518"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="643.409" x2="794.162" xlink:href="#a" y1="196.565" y2="197.348"/><mask id="d" height="251" maskUnits="userSpaceOnUse" width="745" x="0" y="0"><rect fill="#3056d3" height="251" rx="5" width="745"/></mask><rect fill="#3056d3" fill-opacity=".05" height="251" rx="5" width="745"/><g mask="url(#d)"><ellipse cx=".483916" cy="3.5" fill="url(#b)" rx="102.075" ry="105.5" transform="matrix(-1 0 0 -1 .967832 7)"/><ellipse cx="745.484" cy="250.5" fill="url(#c)" rx="102.075" ry="105.5"/></g></svg>
|
||||
|
After Width: | Height: | Size: 965 B |
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="52" viewBox="0 0 200 52" width="200" xmlns="http://www.w3.org/2000/svg"><path d="m19.3545 4.27083c0-2.35963 1.9247-4.27083 4.3011-4.27083h2.1505c14.2527 0 25.8065 11.4725 25.8065 25.625v21.3542c0 2.3596-1.9247 4.2708-4.3011 4.2708h-2.1505c-14.2527 0-25.8065-11.4725-25.8065-25.625z" fill="#4a6cf7" opacity=".56"/><path d="m21.5054 51.25c11.8771 0 21.5054-9.5606 21.5054-21.3542s-9.6283-21.35417-21.5054-21.35417c-11.87711 0-21.5054 9.56057-21.5054 21.35417s9.62829 21.3542 21.5054 21.3542z" fill="#4a6cf7" opacity=".88"/><path d="m81.0229 40.7165h7.1753l-10.0737-27.904h-7.8441l-10.0656 27.904h7.0931l1.6677-4.9289h10.379zm-3.4102-10.1758h-6.8532l3.4016-10.2156zm23.8303 1.8681-5.1115-13.8724h-7.5715l9 21.4248-5.0779 11.2888h7.2989l13.872-32.7136h-7.332zm21.633-1.9874c0-3.8159 1.866-4.9289 5.079-4.9289h1.857v-7.1946c-2.972 0-5.392 1.59-6.936 3.9352v-3.6967h-6.779v22.1801h6.779zm31.815-.795c0-7.0356-4.987-11.408-11.494-11.408-6.457 0-11.494 4.3724-11.494 11.408 0 7.0357 4.922 11.408 11.42 11.408s11.568-4.3723 11.568-11.408zm-16.085 0c0-3.7762 2.139-5.5251 4.591-5.5251 2.378 0 4.6 1.7489 4.6 5.5251 0 3.7364-2.255 5.5252-4.674 5.5252-2.461 0-4.517-1.7888-4.517-5.5252zm30.766.8745c0 7.1946 4.674 10.4938 10.388 10.4938 5.705 0 10.421-3.2992 10.421-10.4938v-17.4896h-3.609v17.5294c0 5.0879-2.692 7.2741-6.779 7.2741-4.079 0-6.812-2.1862-6.812-7.2741v-17.5294h-3.609zm26.828 10.2156h3.6v-27.7052h-3.6z" fill="#2d2d2d"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.7 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="886" viewBox="0 0 1440 886" width="1440" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="1308.65" x2="602.827" y1="1142.58" y2="-418.681"><stop offset="0" stop-color="#3056d3" stop-opacity=".36"/><stop offset="1" stop-color="#f5f2fd" stop-opacity="0"/><stop offset="1" stop-color="#f5f2fd" stop-opacity=".096144"/></linearGradient><path d="m193.307-273.321 1287.563 1287.561-359.02 359.02s-390.105-390.029-643.337-643.333c-252.537-252.61-644.227-644.2277-644.227-644.2277z" fill="url(#a)" opacity=".5"/></svg>
|
||||
|
After Width: | Height: | Size: 622 B |
+1
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><path d="m20 40c11.0457 0 20-8.9543 20-20s-8.9543-20-20-20-20 8.9543-20 20 8.9543 20 20 20z" fill="#fff"/><path clip-rule="evenodd" d="m11.2311 8c-1.71175 0-2.97838 1.49826-2.92168 3.1231.05445 1.5609-.01629 3.5827-.52522 5.2314-.51076 1.6533-1.37397 2.701-2.7842 2.8355v1.5183c1.41023.1348 2.27344 1.1819 2.78414 2.8355.50899 1.6487.57967 3.6704.52522 5.2314-.0567 1.6246 1.20993 3.1231 2.92194 3.1231h17.5399c1.7118 0 2.9782-1.4983 2.9214-3.1231-.0544-1.561.0163-3.5827.5253-5.2314.5107-1.6536 1.3718-2.7012 2.7821-2.8355v-1.5183c-1.4102-.1348-2.2713-1.1819-2.7821-2.8355-.5091-1.6485-.5797-3.6705-.5253-5.2314.0568-1.62463-1.2096-3.1231-2.9214-3.1231zm14.1079 14.7109c0 2.2374-1.6688 3.5942-4.4382 3.5942h-4.7144c-.1348 0-.2641-.0536-.3595-.1489-.0954-.0954-.1489-.2247-.1489-.3596v-11.6949c0-.1348.0535-.2642.1489-.3595.0954-.0954.2247-.1489.3595-.1489h4.6875c2.3093 0 3.8248 1.2508 3.8248 3.1713 0 1.3479-1.0195 2.5547-2.3184 2.7661v.0703c1.7681.1939 2.9587 1.4185 2.9587 3.1099zm-4.9523-7.5058h-2.688v3.7969h2.264c1.7502 0 2.7152-.7048 2.7152-1.9645-.0002-1.1805-.8298-1.8324-2.2912-1.8324zm-2.688 5.3034v4.1842h2.7869c1.8223 0 2.7875-.7312 2.7875-2.1053s-.9923-2.0791-2.9047-2.0791z" fill="#3056d3" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="52" viewBox="0 0 200 52" width="200" xmlns="http://www.w3.org/2000/svg"><path d="m19.3545 4.27083c0-2.35963 1.9247-4.27083 4.3011-4.27083h2.1505c14.2527 0 25.8065 11.4725 25.8065 25.625v21.3542c0 2.3596-1.9247 4.2708-4.3011 4.2708h-2.1505c-14.2527 0-25.8065-11.4725-25.8065-25.625z" fill="#4a6cf7" opacity=".56"/><path d="m21.5054 51.25c11.8771 0 21.5054-9.5606 21.5054-21.3542s-9.6283-21.35417-21.5054-21.35417c-11.87711 0-21.5054 9.56057-21.5054 21.35417s9.62829 21.3542 21.5054 21.3542z" fill="#4a6cf7" opacity=".88"/><path d="m81.0229 40.7165h7.1753l-10.0737-27.904h-7.8441l-10.0656 27.904h7.0931l1.6677-4.9289h10.379zm-3.4102-10.1758h-6.8532l3.4016-10.2156zm23.8303 1.8681-5.1115-13.8724h-7.5715l9 21.4248-5.0779 11.2888h7.2989l13.872-32.7136h-7.332zm21.633-1.9874c0-3.8159 1.866-4.9289 5.079-4.9289h1.857v-7.1946c-2.972 0-5.392 1.59-6.936 3.9352v-3.6967h-6.779v22.1801h6.779zm31.815-.795c0-7.0356-4.987-11.408-11.494-11.408-6.457 0-11.494 4.3724-11.494 11.408 0 7.0357 4.922 11.408 11.42 11.408s11.568-4.3723 11.568-11.408zm-16.085 0c0-3.7762 2.139-5.5251 4.591-5.5251 2.378 0 4.6 1.7489 4.6 5.5251 0 3.7364-2.255 5.5252-4.674 5.5252-2.461 0-4.517-1.7888-4.517-5.5252zm30.766.8745c0 7.1946 4.674 10.4938 10.388 10.4938 5.705 0 10.421-3.2992 10.421-10.4938v-17.4896h-3.609v17.5294c0 5.0879-2.692 7.2741-6.779 7.2741-4.079 0-6.812-2.1862-6.812-7.2741v-17.5294h-3.609zm26.828 10.2156h3.6v-27.7052h-3.6z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
@@ -0,0 +1,9 @@
|
||||
<svg width="570" height="492" viewBox="0 0 570 492" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="55" cy="350" rx="364" ry="364" transform="rotate(-45 55 350)" fill="url(#paint0_linear)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="55" y1="-14" x2="55" y2="714" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#13C296" stop-opacity="0.4"/>
|
||||
<stop offset="1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 429 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.3 KiB |
@@ -0,0 +1,9 @@
|
||||
<svg width="372" height="264" viewBox="0 0 372 264" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="244.343" cy="243.965" rx="199.017" ry="199.017" transform="rotate(-75 244.343 243.965)" fill="url(#paint0_linear)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="244.343" y1="44.9479" x2="244.343" y2="442.982" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3056D3" stop-opacity="0.32"/>
|
||||
<stop offset="1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 474 B |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
+83
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 57 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="22" viewBox="0 0 22 22" width="22" xmlns="http://www.w3.org/2000/svg"><path d="m21.5 21.5h-20.994299c.261905-11.477 9.517299-20.732396 20.994299-20.994303z" stroke="#13c296"/></svg>
|
||||
|
After Width: | Height: | Size: 206 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
File diff suppressed because one or more lines are too long
Vendored
+93
@@ -0,0 +1,93 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
// ======= Sticky
|
||||
window.onscroll = function () {
|
||||
const ud_header = document.querySelector(".ud-header");
|
||||
const sticky = ud_header.offsetTop;
|
||||
const logo = document.querySelector(".navbar-brand img");
|
||||
|
||||
if (window.pageYOffset > sticky) {
|
||||
ud_header.classList.add("sticky");
|
||||
} else {
|
||||
ud_header.classList.remove("sticky");
|
||||
}
|
||||
|
||||
// === logo change
|
||||
if (ud_header.classList.contains("sticky")) {
|
||||
logo.src = "assets/images/logo/logo.svg";
|
||||
} else {
|
||||
logo.src = "assets/images/logo/logo.svg";
|
||||
}
|
||||
|
||||
// show or hide the back-top-top button
|
||||
const backToTop = document.querySelector(".back-to-top");
|
||||
if (
|
||||
document.body.scrollTop > 50 ||
|
||||
document.documentElement.scrollTop > 50
|
||||
) {
|
||||
backToTop.style.display = "flex";
|
||||
} else {
|
||||
backToTop.style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
//===== close navbar-collapse when a clicked
|
||||
let navbarToggler = document.querySelector(".navbar-toggler");
|
||||
const navbarCollapse = document.querySelector(".navbar-collapse");
|
||||
|
||||
document.querySelectorAll(".ud-menu-scroll").forEach((e) =>
|
||||
e.addEventListener("click", () => {
|
||||
navbarToggler.classList.remove("active");
|
||||
navbarCollapse.classList.remove("show");
|
||||
})
|
||||
);
|
||||
navbarToggler.addEventListener("click", function () {
|
||||
navbarToggler.classList.toggle("active");
|
||||
navbarCollapse.classList.toggle("show");
|
||||
});
|
||||
|
||||
// ===== submenu
|
||||
const submenuButton = document.querySelectorAll(".nav-item-has-children");
|
||||
submenuButton.forEach((elem) => {
|
||||
elem.querySelector("a").addEventListener("click", () => {
|
||||
elem.querySelector(".ud-submenu").classList.toggle("show");
|
||||
});
|
||||
});
|
||||
|
||||
// ===== wow js
|
||||
new WOW().init();
|
||||
|
||||
// ====== scroll top js
|
||||
function scrollTo(element, to = 0, duration = 500) {
|
||||
const start = element.scrollTop;
|
||||
const change = to - start;
|
||||
const increment = 20;
|
||||
let currentTime = 0;
|
||||
|
||||
const animateScroll = () => {
|
||||
currentTime += increment;
|
||||
|
||||
const val = Math.easeInOutQuad(currentTime, start, change, duration);
|
||||
|
||||
element.scrollTop = val;
|
||||
|
||||
if (currentTime < duration) {
|
||||
setTimeout(animateScroll, increment);
|
||||
}
|
||||
};
|
||||
|
||||
animateScroll();
|
||||
}
|
||||
|
||||
Math.easeInOutQuad = function (t, b, c, d) {
|
||||
t /= d / 2;
|
||||
if (t < 1) return (c / 2) * t * t + b;
|
||||
t--;
|
||||
return (-c / 2) * (t * (t - 2) - 1) + b;
|
||||
};
|
||||
|
||||
document.querySelector(".back-to-top").onclick = () => {
|
||||
scrollTo(document.documentElement);
|
||||
};
|
||||
})();
|
||||
+3
File diff suppressed because one or more lines are too long
+99
@@ -0,0 +1,99 @@
|
||||
/* ====== Error 404 CSS ======= */
|
||||
|
||||
.ud-404 {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
|
||||
@media #{$xs} {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-404-wrapper {
|
||||
text-align: center;
|
||||
max-width: 850px;
|
||||
margin: 0px auto;
|
||||
background: var(--white);
|
||||
padding: 100px 60px;
|
||||
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
@media #{$xs} {
|
||||
padding: 50px 30px;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
&.shape-1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.shape-2 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-404-title {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media #{$md} {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
@media #{$xs} {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-404-subtitle {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media #{$md} {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
@media #{$xs} {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-404-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 12px 24px;
|
||||
color: var(--heading-color);
|
||||
background: rgba(48, 86, 211, 0.06);
|
||||
border-radius: 5px;
|
||||
margin: 5px 10px;
|
||||
|
||||
&:hover {
|
||||
background: var(--heading-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@media #{$xs} {
|
||||
margin: 5px 10px;
|
||||
font-size: 14px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
/* ===== About CSS ===== */
|
||||
|
||||
.ud-about {
|
||||
background: #f3f4fe;
|
||||
padding: 120px 0;
|
||||
|
||||
@media #{$xs} {
|
||||
padding: 80px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-about-wrapper {
|
||||
background: var(--white);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media #{$md, $xs} {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-about-content-wrapper {
|
||||
padding: 70px;
|
||||
|
||||
@media #{$xs} {
|
||||
padding: 50px 30px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-about-content {
|
||||
max-width: 500px;
|
||||
|
||||
.tag {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--white);
|
||||
background: var(--primary-color);
|
||||
padding: 5px 20px;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
line-height: 45px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media #{$xs} {
|
||||
font-size: 26px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.ud-main-btn {
|
||||
&:hover {
|
||||
background: #2748b4;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-about-image {
|
||||
@media #{$md, $xs} {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
/* ====== Banner CSS ======= */
|
||||
.ud-page-banner {
|
||||
padding-top: 130px;
|
||||
padding-bottom: 80px;
|
||||
background: var(--primary-color);
|
||||
background-image: url("../images/banner/banner-bg.svg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.ud-banner-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
+502
@@ -0,0 +1,502 @@
|
||||
/* ====== Blog Details CSS ====== */
|
||||
|
||||
.ud-blog-details {
|
||||
padding-top: 120px;
|
||||
|
||||
@media #{$xs} {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-details-image {
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
height: 500px;
|
||||
|
||||
@media #{$xs} {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
& > img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(48, 86, 211, 0) 46.88%,
|
||||
rgba(13, 21, 49, 0.72) 93.23%
|
||||
);
|
||||
border-radius: 5px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.ud-blog-overlay-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media #{$xs} {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ud-blog-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 40px;
|
||||
|
||||
@media #{$xs} {
|
||||
margin-right: 0px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: #ffffff;
|
||||
margin-right: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-details-content {
|
||||
padding-top: 60px;
|
||||
|
||||
@media #{$desktop, $laptop} {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-details-title {
|
||||
font-weight: 700;
|
||||
font-size: 35px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 35px;
|
||||
|
||||
@media #{$xs} {
|
||||
font-size: 26px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-details-para {
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.ud-blog-details-subtitle {
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media #{$xs} {
|
||||
font-size: 22px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-quote {
|
||||
background-image: url("../images/blog/quote-bg.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
@media #{$xs} {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
line-height: 1;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media #{$xs} {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
text-align: center;
|
||||
color: var(--heading-color);
|
||||
margin-bottom: 15px;
|
||||
|
||||
@media #{$xs} {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--body-color);
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-details-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@media #{$xs} {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media #{$xs} {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-right: 14px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
color: var(--primary-color);
|
||||
background: rgba(48, 86, 211, 0.06);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-color);
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-share {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: var(--body-color);
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-share-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
margin-right: 14px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 18px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: var(--white);
|
||||
|
||||
&.facebook {
|
||||
background: #4064ac;
|
||||
|
||||
&:hover {
|
||||
background: #315294;
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
background: #1c9cea;
|
||||
|
||||
&:hover {
|
||||
background: #0f8bd8;
|
||||
}
|
||||
}
|
||||
|
||||
&.linkedin {
|
||||
background: #007ab9;
|
||||
|
||||
&:hover {
|
||||
background: #03689b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-sidebar {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.ud-newsletter-box {
|
||||
background: var(--primary-color);
|
||||
padding: 60px 45px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 50px;
|
||||
|
||||
@media #{$lg, $xs} {
|
||||
padding: 50px 30px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
padding: 60px 45px;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
&.shape-1 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.shape-2 {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-newsletter-title {
|
||||
font-weight: 600;
|
||||
font-size: 25px;
|
||||
color: var(--white);
|
||||
margin-bottom: 5px;
|
||||
|
||||
@media #{$lg } {
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.ud-newsletter-form {
|
||||
margin-top: 30px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
box-shadow: 0px 4px 42px rgba(0, 0, 0, 0.01);
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
border: 2px solid transparent;
|
||||
padding: 12px 20px;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--white);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
.ud-main-btn {
|
||||
background: #13c296;
|
||||
box-shadow: 0px 4px 42px rgba(0, 0, 0, 0.01);
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
background: var(--heading-color);
|
||||
}
|
||||
}
|
||||
|
||||
.ud-newsletter-note {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-articles-box {
|
||||
margin-bottom: 50px;
|
||||
|
||||
.ud-articles-box-title {
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
padding-bottom: 25px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 2px;
|
||||
background: var(--primary-color);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-articles-list {
|
||||
li {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #f2f3f8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0px;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-article-image {
|
||||
max-width: 80px;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 20px;
|
||||
|
||||
@media #{$lg, $xs} {
|
||||
max-width: 65px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
@media #{$sm} {
|
||||
max-width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-article-title {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@media #{$lg} {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-article-author {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-banner-ad {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
/* ====== Blog CSS ====== */
|
||||
|
||||
.ud-blog-grids {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 80px;
|
||||
|
||||
&.ud-related-articles {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
@media #{$xs} {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-single-blog {
|
||||
margin-bottom: 40px;
|
||||
|
||||
&:hover {
|
||||
.ud-blog-image {
|
||||
img {
|
||||
@include transform(scale(1.1) rotate(3deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-image {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 30px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@include transition(0.3s);
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-date {
|
||||
display: inline-flex;
|
||||
font-size: 12px;
|
||||
|
||||
font-weight: 600;
|
||||
padding: 8px 16px;
|
||||
background: var(--primary-color);
|
||||
color: var(--white);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ud-blog-title {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@media #{$lg} {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-blog-desc {
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-related-articles-title {
|
||||
font-weight: 800;
|
||||
font-size: 28px;
|
||||
padding-bottom: 25px;
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 2px;
|
||||
background: var(--primary-color);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
/*===========================
|
||||
COMMON css
|
||||
===========================*/
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap");
|
||||
|
||||
:root {
|
||||
--font: "Inter", sans-serif;
|
||||
--body-color: #637381;
|
||||
--heading-color: #212b36;
|
||||
--primary-color: #3056d3;
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color: var(--body-color);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
@include transition(0.3s);
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
button:focus,
|
||||
.navbar-toggler:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i,
|
||||
span,
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 700;
|
||||
color: var(--heading-color);
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 22px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
color: var(--body-color);
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.bg_cover {
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*===== All Button Style =====*/
|
||||
|
||||
.ud-main-btn {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
padding: 15px 25px;
|
||||
border: 1px solid transparent;
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
@include transition(0.4s);
|
||||
background: var(--primary-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
background: var(--heading-color);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
@media #{$xs} {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
@media #{$sm} {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: var(--primary-color);
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
z-index: 99;
|
||||
color: var(--white);
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
background: var(--heading-color);
|
||||
}
|
||||
}
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
/* ===== Contact CSS ===== */
|
||||
.ud-contact {
|
||||
padding: 120px 0px;
|
||||
position: relative;
|
||||
|
||||
@media #{$xs} {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
background: #f3f4fe;
|
||||
|
||||
@media #{$lg} {
|
||||
height: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-contact-title {
|
||||
margin-bottom: 150px;
|
||||
|
||||
@media #{$md, $xs} {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--heading-color);
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 35px;
|
||||
line-height: 41px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-contact-info-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media #{$md, $xs} {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.ud-single-info {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
width: 330px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.ud-info-icon {
|
||||
font-size: 32px;
|
||||
color: var(--primary-color);
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.ud-info-meta {
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-contact-form-wrapper {
|
||||
box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
background: var(--white);
|
||||
padding: 60px;
|
||||
|
||||
@media #{$xs} {
|
||||
padding: 40px 30px;
|
||||
}
|
||||
|
||||
@media #{$laptop, $lg, $sm} {
|
||||
padding: 50px 40px;
|
||||
}
|
||||
|
||||
.ud-contact-form-title {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media #{$xs} {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-form-group {
|
||||
margin-bottom: 25px;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
/* ======================
|
||||
DEFAULT CSS
|
||||
========================= */
|
||||
|
||||
// Margin-top
|
||||
@for $i from 1 through 45 {
|
||||
.mt-#{5 * $i} {
|
||||
margin-top: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
// Margin-bottom
|
||||
@for $i from 1 through 45 {
|
||||
.mb-#{5 * $i} {
|
||||
margin-bottom: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
// Padding-top
|
||||
@for $i from 1 through 45 {
|
||||
.pt-#{5 * $i} {
|
||||
padding-top: 5px * $i;
|
||||
}
|
||||
}
|
||||
|
||||
// Padding-bottom
|
||||
@for $i from 1 through 45 {
|
||||
.pb-#{5 * $i} {
|
||||
padding-bottom: 5px * $i;
|
||||
}
|
||||
}
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
/* ===== FAQ CSS ===== */
|
||||
|
||||
.ud-faq {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 90px;
|
||||
background: #f3f4fe;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@media #{$xs } {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-single-faq {
|
||||
background: var(--white);
|
||||
border: 1px solid #f3f4fe;
|
||||
box-shadow: 0px 20px 95px rgba(201, 203, 204, 0.3);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.ud-faq-btn {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: var(--heading-color);
|
||||
opacity: 0.88;
|
||||
padding: 30px;
|
||||
|
||||
@media #{$lg, $xs} {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
span.icon i {
|
||||
@include transform(rotate(0deg));
|
||||
}
|
||||
}
|
||||
|
||||
span.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: rgba(48, 86, 211, 0.06);
|
||||
border-radius: 10px;
|
||||
color: var(--primary-color);
|
||||
margin-right: 24px;
|
||||
|
||||
i {
|
||||
@include transform(rotate(180deg));
|
||||
transition: all 0.3s;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-faq-body {
|
||||
padding: 0px 30px 40px 95px;
|
||||
|
||||
@media #{$lg, $xs} {
|
||||
padding: 0px 16px 20px 82px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
/* ===== Features CSS ===== */
|
||||
|
||||
.ud-features {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 90px;
|
||||
|
||||
@media #{$xs} {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-section-title {
|
||||
max-width: 620px;
|
||||
margin-bottom: 70px;
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 42px;
|
||||
line-height: 55px;
|
||||
text-transform: capitalize;
|
||||
color: var(--heading-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
|
||||
@media #{$xs} {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-single-feature {
|
||||
margin-bottom: 40px;
|
||||
|
||||
&:hover {
|
||||
.ud-feature-icon::before {
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
}
|
||||
|
||||
.ud-feature-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 14px;
|
||||
background: var(--primary-color);
|
||||
font-size: 32px;
|
||||
color: var(--white);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 14px;
|
||||
background: var(--primary-color);
|
||||
opacity: 0.2;
|
||||
z-index: -1;
|
||||
@include transform(rotate(23deg));
|
||||
@include transition(0.3s);
|
||||
}
|
||||
}
|
||||
|
||||
.ud-feature-title {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media #{$lg} {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-feature-desc {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.ud-feature-link {
|
||||
font-weight: 500;
|
||||
color: var(--body-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
/* ===== Footer CSS ===== */
|
||||
|
||||
.ud-footer {
|
||||
background: var(--heading-color);
|
||||
padding-top: 100px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
&.shape-1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.shape-2 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.shape-3 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-widget {
|
||||
margin-bottom: 50px;
|
||||
|
||||
.ud-footer-logo {
|
||||
max-width: 160px;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-widget-desc {
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
color: #f3f4fe;
|
||||
margin-bottom: 30px;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.ud-widget-socials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #dddddd;
|
||||
margin-right: 20px;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-widget-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 35px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.ud-widget-links {
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
color: #f3f4fe;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-widget-brands {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
max-width: 120px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 20px;
|
||||
|
||||
@media #{$laptop} {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-footer-bottom {
|
||||
padding: 35px 0;
|
||||
border-top: 1px solid rgba(136, 144, 164, 0.43);
|
||||
|
||||
.ud-footer-bottom-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media #{$xs} {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
color: #f3f4fe;
|
||||
margin-right: 30px;
|
||||
display: inline-block;
|
||||
|
||||
@media #{$xs} {
|
||||
margin: 0px 8px 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-footer-bottom-right {
|
||||
text-align: right;
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
color: #f3f4fe;
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$xs} {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+297
@@ -0,0 +1,297 @@
|
||||
/* ===== Header CSS ===== */
|
||||
.ud-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
@include transition(0.3s);
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(5px);
|
||||
@include box-shadow(inset 0 -1px 0 0 rgba(0, 0, 0, 0.1));
|
||||
@include transition(0.3s);
|
||||
|
||||
& .navbar {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 0px 0;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
@include transition(0.3s);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 0;
|
||||
|
||||
@media #{$md, $xs} {
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
padding: 0;
|
||||
|
||||
& .toggler-icon {
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background-color: var(--white);
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
position: relative;
|
||||
@include transition(0.3s);
|
||||
}
|
||||
|
||||
&.active {
|
||||
& .toggler-icon {
|
||||
&:nth-of-type(1) {
|
||||
@include transform(rotate(45deg));
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
@include transform(rotate(135deg));
|
||||
top: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
@media #{$md, $xs} {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
background-color: var(--white);
|
||||
z-index: 9;
|
||||
@include box-shadow(0px 15px 20px 0px rgba(0, 0, 0, 0.1));
|
||||
padding: 0px;
|
||||
display: none;
|
||||
border-radius: 5px;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
@media #{$md, $xs} {
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
& .nav-item {
|
||||
position: relative;
|
||||
padding: 0px 20px;
|
||||
|
||||
@media #{$lg} {
|
||||
padding: 0px 12px;
|
||||
}
|
||||
|
||||
@media #{$md, $xs} {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
& > a {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--white);
|
||||
@include transition(0.3s);
|
||||
padding: 25px 8px;
|
||||
position: relative;
|
||||
|
||||
@media #{$md, $xs} {
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: var(--white);
|
||||
opacity: 0.5;
|
||||
|
||||
@media #{$md, $xs} {
|
||||
color: var(--primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-submenu {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
background: var(--white);
|
||||
top: 110%;
|
||||
padding: 20px 30px;
|
||||
box-shadow: 0 15px 44px rgba(140, 140, 140, 0.18);
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@include transition(0.3s);
|
||||
|
||||
@media #{$md, $xs} {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ud-submenu-link {
|
||||
padding: 7px 0;
|
||||
color: var(--heading-color);
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > a {
|
||||
color: var(--white);
|
||||
opacity: 0.5;
|
||||
|
||||
@media #{$md, $xs} {
|
||||
color: var(--primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& > .ud-submenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-item-has-children {
|
||||
& > a {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg) translateY(-50%);
|
||||
right: -15px;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
|
||||
@media #{$md, $xs} {
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-btn {
|
||||
@media #{$md, $xs} {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50px;
|
||||
@include transform(translateY(-50%));
|
||||
}
|
||||
|
||||
.ud-main-btn {
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ud-login-btn {
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-white-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
color: var(--heading-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticky {
|
||||
& .navbar-toggler {
|
||||
& .toggler-icon {
|
||||
background-color: var(--heading-color);
|
||||
}
|
||||
}
|
||||
|
||||
& .navbar-nav {
|
||||
& .nav-item {
|
||||
&:hover {
|
||||
& > a {
|
||||
color: var(--primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--heading-color);
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-btn {
|
||||
.ud-main-btn {
|
||||
&.ud-login-btn {
|
||||
color: var(--heading-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-white-btn {
|
||||
background: var(--primary-color);
|
||||
color: var(--white);
|
||||
|
||||
&:hover {
|
||||
background: var(--heading-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
/* ===== Hero CSS ===== */
|
||||
|
||||
.ud-hero {
|
||||
background: var(--primary-color);
|
||||
padding-top: 180px;
|
||||
|
||||
@media #{$md} {
|
||||
padding-top: 160px;
|
||||
}
|
||||
|
||||
@media #{$xs} {
|
||||
padding-top: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-hero-content {
|
||||
max-width: 780px;
|
||||
margin: auto;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.ud-hero-title {
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
font-size: 45px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media #{$md} {
|
||||
font-size: 38px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
@media #{$xs} {
|
||||
font-size: 26px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-hero-desc {
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
opacity: 0.8;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media #{$xs} {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-hero-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.ud-main-btn {
|
||||
margin: 8px;
|
||||
|
||||
@media #{$xs} {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-main-btn {
|
||||
@media #{$xs} {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-white-btn {
|
||||
background: var(--white);
|
||||
color: var(--heading-color);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);
|
||||
background: #fefefe;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.ud-link-btn {
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
background: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-hero-brands-wrapper {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
img {
|
||||
transition: all 0.3s;
|
||||
opacity: 0.5;
|
||||
max-width: 250px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-hero-image {
|
||||
max-width: 845px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
&.shape-1 {
|
||||
bottom: 0;
|
||||
left: -30px;
|
||||
}
|
||||
|
||||
&.shape-2 {
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
/* ====== Login CSS ====== */
|
||||
.ud-login {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.ud-login-wrapper {
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
background: var(--white);
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.ud-login-logo {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-login-form {
|
||||
.ud-form-group {
|
||||
margin-bottom: 25px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: 2px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
padding: 12px 24px;
|
||||
background: #fcfdfe;
|
||||
color: var(--body-color);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-socials-connect {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: var(--body-color);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
height: 45px;
|
||||
background: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--white);
|
||||
font-size: 20px;
|
||||
|
||||
&.facebook {
|
||||
background: #4064ac;
|
||||
|
||||
&:hover {
|
||||
background: #315294;
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
background: #1c9cea;
|
||||
|
||||
&:hover {
|
||||
background: #0f8bd8;
|
||||
}
|
||||
}
|
||||
|
||||
&.google {
|
||||
background: #d64937;
|
||||
|
||||
&:hover {
|
||||
background: #c53b29;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forget-pass {
|
||||
font-size: 16px;
|
||||
color: var(--body-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.signup-option {
|
||||
color: var(--body-color);
|
||||
font-size: 16px;
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
@mixin transition($time) {
|
||||
-webkit-transition: all $time ease-out 0s;
|
||||
-moz-transition: all $time ease-out 0s;
|
||||
-ms-transition: all $time ease-out 0s;
|
||||
-o-transition: all $time ease-out 0s;
|
||||
transition: all $time ease-out 0s;
|
||||
}
|
||||
|
||||
|
||||
@mixin transform($value) {
|
||||
-webkit-transform: $value;
|
||||
-moz-transform: $value;
|
||||
-ms-transform: $value;
|
||||
-o-transform: $value;
|
||||
transform: $value;
|
||||
}
|
||||
|
||||
@mixin user-select($value) {
|
||||
-webkit-user-select: $value;
|
||||
-moz-user-select: $value;
|
||||
-ms-user-select: $value;
|
||||
user-select: $value;
|
||||
}
|
||||
|
||||
|
||||
@mixin box-sizing($value) {
|
||||
-webkit-box-sizing: $value;
|
||||
-moz-box-sizing: $value;
|
||||
box-sizing: $value;
|
||||
}
|
||||
|
||||
|
||||
@mixin animation($value) {
|
||||
-webkit-animation: $value;
|
||||
-moz-animation: $value;
|
||||
-o-animation: $value;
|
||||
animation: $value;
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-delay($value) {
|
||||
-webkit-animation-delay: $value;
|
||||
-moz-animation-delay: $value;
|
||||
-o-animation-delay: $value;
|
||||
animation-delay: $value;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin box-shadow($value) {
|
||||
-webkit-box-shadow: $value;
|
||||
-moz-box-shadow: $value;
|
||||
box-shadow: $value;
|
||||
}
|
||||
|
||||
|
||||
// Placeholder Mixins
|
||||
@mixin placeholder {
|
||||
&::placeholder { @content; }
|
||||
&::-moz-placeholder { @content; }
|
||||
&::-moz-placeholder { @content; }
|
||||
&::-webkit-input-placeholder { @content; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
/* ===== Pricing CSS ===== */
|
||||
|
||||
.ud-pricing {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 90px;
|
||||
|
||||
@media #{$xs} {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-single-pricing {
|
||||
margin-bottom: 40px;
|
||||
background: var(--white);
|
||||
border: 2px solid #d4deff;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
padding: 45px 30px;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(180deg, #3056d3 0%, #179bee 100%);
|
||||
border: none;
|
||||
padding: 55px 30px;
|
||||
|
||||
.ud-pricing-header {
|
||||
h3,
|
||||
h4 {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
.ud-pricing-body {
|
||||
li {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.first-item::after,
|
||||
&.last-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.first-item::after {
|
||||
background: var(--primary-color);
|
||||
left: -2px;
|
||||
bottom: -2px;
|
||||
border-radius: 0px 55px 0px 8px;
|
||||
}
|
||||
|
||||
&.last-item::after {
|
||||
background: #13c296;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
border-radius: 0px 8px 0px 55px;
|
||||
}
|
||||
|
||||
.ud-popular-tag {
|
||||
display: inline-block;
|
||||
padding: 10px 25px;
|
||||
background: var(--white);
|
||||
border-radius: 30px;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ud-pricing-header {
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-pricing-body {
|
||||
margin-bottom: 40px;
|
||||
|
||||
li {
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-main-btn {
|
||||
border-radius: 30px;
|
||||
padding: 15px 40px;
|
||||
}
|
||||
|
||||
.ud-border-btn {
|
||||
border: 1px solid #d4deff;
|
||||
color: var(--primary-color);
|
||||
background: var(--white);
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
border-color: var(--primary-color);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
}
|
||||
.ud-white-btn {
|
||||
background: var(--white);
|
||||
color: var(--heading-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
background: var(--heading-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
/* ===== Team CSS ===== */
|
||||
.ud-team {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 80px;
|
||||
|
||||
@media #{$xs} {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-single-team {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.ud-team-image-wrapper {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
position: relative;
|
||||
margin: 0px auto 25px;
|
||||
}
|
||||
.ud-team-image {
|
||||
border-radius: 50%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
&.shape-1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&.shape-2 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-team-info {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h5 {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: var(--body-color);
|
||||
}
|
||||
}
|
||||
|
||||
.ud-team-socials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0px 10px;
|
||||
color: #cdced6;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+106
@@ -0,0 +1,106 @@
|
||||
/* ===== Testimonials CSS ===== */
|
||||
.ud-testimonials {
|
||||
padding-top: 120px;
|
||||
|
||||
@media #{$xs} {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-single-testimonial {
|
||||
padding: 30px;
|
||||
box-shadow: 0px 60px 120px -20px #ebeffd;
|
||||
background: var(--white);
|
||||
margin-bottom: 50px;
|
||||
|
||||
.ud-testimonial-ratings {
|
||||
margin-bottom: 10px;
|
||||
|
||||
i {
|
||||
color: #fbb040;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-testimonial-content {
|
||||
margin-bottom: 25px;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color: #637381;
|
||||
}
|
||||
}
|
||||
|
||||
.ud-testimonial-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ud-testimonial-image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.ud-testimonial-meta {
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: #969696;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-brands {
|
||||
.ud-title {
|
||||
margin-bottom: 30px;
|
||||
|
||||
h6 {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
color: var(--body-color);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 1px;
|
||||
background: #afb2b5;
|
||||
right: -40px;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ud-brands-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -40px;
|
||||
|
||||
.ud-single-logo {
|
||||
margin-right: 40px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 140px;
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
filter: grayscale(1);
|
||||
@include transition(0.3s);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// Responsive Variables
|
||||
$xl-desktop: "only screen and (min-width: 1921px)";
|
||||
$desktop: "only screen and (min-width: 1400px) and (max-width: 1920px)";
|
||||
$laptop: "only screen and (min-width: 1200px) and (max-width: 1399px)";
|
||||
$lg: "only screen and (min-width: 992px) and (max-width: 1199px)";
|
||||
$md: "only screen and (min-width: 768px) and (max-width: 991px)";
|
||||
$xs: "(max-width: 767px)";
|
||||
$sm: "only screen and (min-width: 576px) and (max-width: 767px)";
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
/* =======
|
||||
|
||||
Template Name: Play Bootstrap
|
||||
Author: UIdeck
|
||||
Author URI: https://uideck.com/
|
||||
Support: https://github.com/uideck/
|
||||
Version: 1.0
|
||||
|
||||
======== */
|
||||
|
||||
@import "variables";
|
||||
@import "mixin";
|
||||
@import "common";
|
||||
@import "header";
|
||||
@import "hero";
|
||||
@import "features";
|
||||
@import "about";
|
||||
@import "pricing";
|
||||
@import "faq";
|
||||
@import "testimonials";
|
||||
@import "team";
|
||||
@import "contact";
|
||||
@import "footer";
|
||||
@import "banner";
|
||||
@import "login";
|
||||
@import "blog";
|
||||
@import "blog-details";
|
||||
@import "404";
|
||||
// @import "default";
|
||||
Vendored
+243
@@ -0,0 +1,243 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Walleby</title>
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<meta name="title" content="Walleby - Protect and Manage Your Digital World Securely">
|
||||
<meta name="description"
|
||||
content="Walleby - Your all-in-one digital companion for secure password management, document organization, and seamless digital life management. Simplify and secure your digital world effortlessly.">
|
||||
|
||||
<!--====== Favicon Icon ======-->
|
||||
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/svg" />
|
||||
|
||||
<!-- ===== All CSS files ===== -->
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="assets/css/animate.css" />
|
||||
<link rel="stylesheet" href="assets/css/lineicons.css" />
|
||||
<link rel="stylesheet" href="assets/css/ud-styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- ====== Header Start ====== -->
|
||||
<header class="ud-header">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img src="assets/images/logo/logo.svg" alt="Logo" />
|
||||
</a>
|
||||
<button class="navbar-toggler">
|
||||
<span class="toggler-icon"> </span>
|
||||
<span class="toggler-icon"> </span>
|
||||
<span class="toggler-icon"> </span>
|
||||
</button>
|
||||
<div class="navbar-collapse">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="ud-menu-scroll" href="#home">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="ud-menu-scroll" href="#features">Features</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- ====== Header End ====== -->
|
||||
|
||||
<!-- ====== Hero Start ====== -->
|
||||
<section class="ud-hero" id="home">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ud-hero-content wow fadeInUp" data-wow-delay=".2s">
|
||||
<h1 class="ud-hero-title">
|
||||
Meet Walleby
|
||||
</h1>
|
||||
<p class="ud-hero-desc">
|
||||
Your all-in-one digital companion for secure password management, document organization, and seamless
|
||||
digital life management. Simplify and secure your digital world effortlessly. </p>
|
||||
<ul class="ud-hero-buttons">
|
||||
<li>
|
||||
<a href="#" rel="nofollow noopener" class="ud-main-btn ud-white-btn">
|
||||
Preview Coming Soon
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ud-hero-image wow fadeInUp" data-wow-delay=".25s"
|
||||
style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInUp;">
|
||||
<img src="assets/images/hero/hero-image.png" alt="hero-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ====== Hero End ====== -->
|
||||
|
||||
<!-- ====== Features Start ====== -->
|
||||
<section id="features" class="ud-features">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ud-section-title">
|
||||
<span>Features</span>
|
||||
<h2>Features</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-3 col-sm-6">
|
||||
<div class="ud-single-feature wow fadeInUp" data-wow-delay=".1s">
|
||||
<div class="ud-feature-icon">
|
||||
<i class="lni lni-gift"></i>
|
||||
</div>
|
||||
<div class="ud-feature-content">
|
||||
<h3 class="ud-feature-title">Lorem ipsum dolor sit</h3>
|
||||
<p class="ud-feature-desc">
|
||||
Excepteur sint occaecat cupidatat non proident.
|
||||
</p>
|
||||
<a href="javascript:void(0)" class="ud-feature-link">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-3 col-sm-6">
|
||||
<div class="ud-single-feature wow fadeInUp" data-wow-delay=".15s">
|
||||
<div class="ud-feature-icon">
|
||||
<i class="lni lni-move"></i>
|
||||
</div>
|
||||
<div class="ud-feature-content">
|
||||
<h3 class="ud-feature-title">Lorem ipsum dolor sit</h3>
|
||||
<p class="ud-feature-desc">
|
||||
Excepteur sint occaecat cupidatat non proident.
|
||||
</p>
|
||||
<a href="javascript:void(0)" class="ud-feature-link">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-3 col-sm-6">
|
||||
<div class="ud-single-feature wow fadeInUp" data-wow-delay=".2s">
|
||||
<div class="ud-feature-icon">
|
||||
<i class="lni lni-layout"></i>
|
||||
</div>
|
||||
<div class="ud-feature-content">
|
||||
<h3 class="ud-feature-title">Lorem ipsum dolor sit</h3>
|
||||
<p class="ud-feature-desc">
|
||||
Excepteur sint occaecat cupidatat non proident.
|
||||
</p>
|
||||
<a href="javascript:void(0)" class="ud-feature-link">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-3 col-sm-6">
|
||||
<div class="ud-single-feature wow fadeInUp" data-wow-delay=".25s">
|
||||
<div class="ud-feature-icon">
|
||||
<i class="lni lni-layers"></i>
|
||||
</div>
|
||||
<div class="ud-feature-content">
|
||||
<h3 class="ud-feature-title">Lorem ipsum dolor sit</h3>
|
||||
<p class="ud-feature-desc">
|
||||
Excepteur sint occaecat cupidatat non proident.
|
||||
</p>
|
||||
<a href="javascript:void(0)" class="ud-feature-link">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ====== Features End ====== -->
|
||||
|
||||
<!-- ====== Footer Start ====== -->
|
||||
<footer class="ud-footer wow fadeInUp" data-wow-delay=".15s">
|
||||
<div class="ud-footer-bottom">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<p class="ud-footer-bottom-right">
|
||||
© 2024 Walleby
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- ====== Footer End ====== -->
|
||||
|
||||
<!-- ====== Back To Top Start ====== -->
|
||||
<a href="javascript:void(0)" class="back-to-top">
|
||||
<i class="lni lni-chevron-up"> </i>
|
||||
</a>
|
||||
<!-- ====== Back To Top End ====== -->
|
||||
|
||||
<!-- ====== All Javascript Files ====== -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/wow.min.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
<script>
|
||||
// ==== for menu scroll
|
||||
const pageLink = document.querySelectorAll(".ud-menu-scroll");
|
||||
|
||||
pageLink.forEach((elem) => {
|
||||
elem.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
document.querySelector(elem.getAttribute("href")).scrollIntoView({
|
||||
behavior: "smooth",
|
||||
offsetTop: 1 - 60,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// section menu active
|
||||
function onScroll(event) {
|
||||
const sections = document.querySelectorAll(".ud-menu-scroll");
|
||||
const scrollPos =
|
||||
window.pageYOffset ||
|
||||
document.documentElement.scrollTop ||
|
||||
document.body.scrollTop;
|
||||
|
||||
for (let i = 0; i < sections.length; i++) {
|
||||
const currLink = sections[i];
|
||||
const val = currLink.getAttribute("href");
|
||||
const refElement = document.querySelector(val);
|
||||
const scrollTopMinus = scrollPos + 73;
|
||||
if (
|
||||
refElement.offsetTop <= scrollTopMinus &&
|
||||
refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
|
||||
) {
|
||||
document
|
||||
.querySelector(".ud-menu-scroll")
|
||||
.classList.remove("active");
|
||||
currLink.classList.add("active");
|
||||
} else {
|
||||
currLink.classList.remove("active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.document.addEventListener("scroll", onScroll);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user