Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to modinatheme@gmail.com email us
<!-- Google Fonts ============================================ --> Rubik - <link href='https://fonts.google.com/specimen/Rubik' rel='stylesheet' type='text/css'>
<!-- =========== All Stylesheet ================= --> <!-- fontawesome css plugins ============================================ --> <link rel="stylesheet" href="assets/css/font-awesome.min.css"> <!-- meanmenu CSS ============================================ --> <link rel="stylesheet" href="assets/css/meanmenu.css"> < !-- animate CSS ============================================ --> <link rel="stylesheet" href="assets/css/animate.css"> <!-- magnific-popup CSS ============================================ --> <link rel="stylesheet" href="assets/css/magnific-popup.css"> <!-- swiper Carousel CSS ============================================ --> <link rel="stylesheet" href="assets/css/swpier.main.css"> <!-- helper CSS ============================================ --> <link href="assets/css/helper.css" rel="stylesheet"> <!-- Bootstrap CSS ============================================ --> <link href="assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Template Style CSS ============================================ --> <link rel="stylesheet" href="assets/css/main.css"> <!-- Style CSS ============================================ --> <link rel="stylesheet" href="style.css">
<!-- All JS Plugins --> <!-- jQuery ============================================ --> <script src="assets/js/jquery.min.js"></script> <!-- Bootstrap ============================================ --> <script src="assets/js/bootstrap.min.js"></script> <!-- Others jQuery Plugins ============================================ --> <script src="assets/js/jquery.easing.1.3.js"></script> <script src="assets/js/popper.min.js"></script> <script src="assets/js/scrollUp.min.js"></script> <script src="assets/js/swpier.min.js"></script> <script src="assets/js/magnific-popup.min.js"></script> <script src="assets/js/wow.min.js"></script> <script src="assets/js/meanmenu.js"></script> <!-- Main JS ============================================ --> <script src="assets/js/main.js"></script>
I'm using One SCSS files in this template. You change the SCSS Code of style.scss file
================================= |*** Table of contents: ***| ================================= 1. General styles 2. Typography 3. Helpers 4. Preloader 5. Go up button 6. Header and navigation 7. Hero Section 8. About us 9. Causes 10. Fun facts 11. Events 12. Blog *Note: Responsive css in style.css file bottom.
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
/* ---------------------------------- Hero Section - Styles ------------------------------------ */ .hero-1 { position: relative; .arry-button{ position: absolute; top: 50%; right: 19%; transform: translate(-50%,-50%); z-index: 99; display: grid; gap: 15px; @include breakpoint(max-xl){ display: none; } .arry-prev{ width: 55px; height: 55px; line-height: 50px; border-radius: 50%; background-color: $white; i{ font-size: 16px; font-weight: 400; color: #191919; } } .arry-next{ width: 55px; height: 55px; line-height: 50px; border-radius: 50%; background-color: transparent; border: 1px solid #ffffff33; i{ font-size: 16px; font-weight: 400; color: $white; } } } .arrow-shape{ position: absolute; bottom: 0; right: 60px; z-index: 99; @include breakpoint(max-xl){ display: none; } } .arrow-shape-2{ position: absolute; bottom: 0; right: 0; z-index: 9; @include breakpoint(max-xl){ display: none; } } .slide-bg{ position: relative; padding: 160px 0; background-repeat: no-repeat; background-position: center; background-size: cover; &::before{ position: absolute; width: 100%; left: 0; top: 0; height: 100%; content: ""; background: #000; z-index: 2; opacity: .6; } @include breakpoint(max-xl){ padding: 130px 0; } @include breakpoint(max-lg){ padding: 100px 0; } @include breakpoint(max-md){ padding: 80px 0; } .hero-content{ position: relative; z-index: 9; @include breakpoint(max-sm){ text-align: center; } h1{ color: $white; text-transform: initial; @include breakpoint(max-sm){ font-size: 44px; } } h3{ color: $white; margin-top: 20px; display: block; border-left: 3px solid $white; padding-left: 20px; @include breakpoint(max-sm){ padding-left: 0; border: none; } } .hero-button{ margin-top: 50px; @include flex; gap: 50px; @include breakpoint(max-xl){ gap: 30px; } @include breakpoint(max-lg){ flex-wrap: wrap; margin-top: 40px; } @include breakpoint(max-sm){ justify-content: center; } .video-play-btn{ .play-video{ border-radius: 50%; width: 90px; height: 90px; background-color: $white; color: $theme-color; line-height: 90px; text-align: center; display: inline-block; margin: 0px auto; font-size: 18px; @include breakpoint(max-lg){ width: 80px; height: 80px; line-height: 80px; } @include breakpoint(max-sm){ width: 70px; height: 70px; line-height: 70px; } } span{ font-size: 18px; color: $white; font-weight: 700; text-decoration-line: underline; @include breakpoint(max-lg){ font-size: 16px; } @include breakpoint(max-sm){ font-size: 14px; } } } } } } }
.section-padding { padding: 120px 0px; }
Change The Carousel & Others with your's choice
function loader() { $(window).on('load', function() { // Animate loader off screen $(".preloader").addClass('loaded'); $(".preloader").delay(600).fadeOut(); }); } loader(); // Hero Slider Start </ var sliderActive1 = ".hero-slider"; var sliderInit1 = new Swiper(sliderActive1, { loop: true, slidesPerView: 1, effect: "fade", speed: 2000, autoplay: { delay: 5000, disableOnInteraction: false, }, navigation: { nextEl: ".hero-arry-prev", prevEl: ".hero-arry-next", }, }); // content animation when active start here function animated_swiper(selector, init) { var animated = function animated() { $(selector + " [data-animation]").each(function() { var anim = $(this).data("animation"); var delay = $(this).data("delay"); var duration = $(this).data("duration"); $(this) .removeClass("anim" + anim) .addClass(anim + " animated") .css({ webkitAnimationDelay: delay, animationDelay: delay, webkitAnimationDuration: duration, animationDuration: duration, }) .one("animationend", function() { $(this).removeClass(anim + " animated"); }); }); }; animated(); init.on("slideChange", function() { $(sliderActive1 + " [data-animation]").removeClass("animated"); }); init.on("slideChange", animated); } animated_swiper(sliderActive1, sliderInit1);