
Created: 22 May, 2024
Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to Support
<!-- Google Fonts
============================================ -->
Roboto - <link href='https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap rel='stylesheet' type='text/css'>
<!-- =========== All Stylesheet ================= -->
<link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/vendor/animate.min.css">
<link rel="stylesheet" href="assets/css/plugins/swiper.min.css">
<link rel="stylesheet" href="assets/css/vendor/magnific-popup.css">
<link rel="stylesheet" href="assets/css/vendor/fontawesome-pro.css">
<link rel="stylesheet" href="assets/css/vendor/spacing.css">
<link rel="stylesheet" href="assets/css/plugins/odometer-theme-default.css">
<link rel="stylesheet" href="assets/css/main.css">
<!-- All JS Plugins -->
<!-- JS here -->
<script src="assets/js/vendor/jquery-3.7.1.min.js"></script>
<script src="assets/js/plugins/waypoints.min.js"></script>
<script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
<script src="assets/js/plugins/meanmenu.min.js"></script>
<script src="assets/js/plugins/odometer.min.js"></script>
<script src="assets/js/plugins/swiper.min.js"></script>
<script src="assets/js/plugins/wow.js"></script>
<script src="assets/js/vendor/magnific-popup.min.js"></script>
<script src="assets/js/vendor/type.js"></script>
<script src="assets/js/plugins/nice-select.min.js"></script>
<script src="assets/js/vendor/jquery-ui.min.js"></script>
<script src="assets/js/vendor/jquery.appear.js"></script>
<script src="assets/js/plugins/parallax.min.js"></script>
<script src="assets/js/plugins/parallax-scroll.js"></script>
<script src="assets/js/plugins/gsap.min.js"></script>
<script src="assets/js/plugins/ScrollTrigger.min.js"></script>
<script src="assets/js/plugins/SplitText.js"></script>
<script src="assets/js/plugins/tween-max.min.js"></script>
<script src="assets/js/plugins/draggable.min.js"></script>
<script src="assets/js/plugins/smoothscroll.js"></script>
<script src="assets/js/vendor/ajax-form.js"></script>
<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
/*-----------------------------------------------------------------------------------
Template Name: Medilix - Healthcare & Medical Bootstrap HTML5 Template
Author: RRDevs
Support: https://support.rrdevs.net
Description: Medilix - Healthcare & Medical Bootstrap HTML5 Template.
Version: 1.0
Developer: Sabbir Ahmmed (https://github.com/ahmmedsabbirbd)
-----------------------------------------------------------------------------------
/************ TABLE OF CONTENTS ***************
-----------------
01. THEME CSS
-----------------
1.1 @forward 'colors';
1.2 @forward 'mixins';
1.3 @forward 'extends';
1.4 @forward 'breakpoints';
1.5 @forward 'typography';
1.6 @forward 'root';
1 index
-----------------
02. COMPONENTS CSS
-----------------
2.1 @forward 'custom-class';
2.2 @forward 'background';
2.3 @forward 'buttons';
2.4 @forward 'offcanvas';
2.5 @forward 'section-title';
2.6 @forward 'breadcrumb';
2.7 @forward 'backtotop';
2.8 @forward 'animation';
2.9 @forward 'preloader';
2.10 @forward 'rangeSlider';
2.11 @forward 'search';
2 index
-----------------
03. HEADER CSS
-----------------
3.1 @forward 'header-common';
3.2 @forward 'header-1';
3.3 @forward 'header-2';
3.4 @forward 'header-3';
3.5 @forward 'header-4';
3 index
---------------------------------
04. MENU CSS
---------------------------------
4.1 @forward 'menu';
4.2 @forward 'meanmenu';
4 index
---------------------------------
05. BLOG CSS
---------------------------------
5.1 @forward 'blog';
5.2 @forward 'sidebar';
5.3 @forward 'blog-details';
5.4 @forward 'blog-2';
5.5 @forward 'blog-3';
5.6 @forward 'blog-4';
5 index
---------------------------------
06. FOOTER CSS
---------------------------------
6.1 @forward 'footer';
6.2 @forward 'footer-copyright';
6.3 @forward 'footer-2';
6.4 @forward 'footer-3';
6.5 @forward 'footer-cta';
6 index
---------------------------------
07. CTA CSS
---------------------------------
7.1 @forward 'cta';
7.2 @forward 'cta-2';
7 index
---------------------------------
08. BRAND CSS
---------------------------------
8.1 @forward 'brand';
8 index
---------------------------------
09. Banner CSS
---------------------------------
9.1 @forward 'banner-1';
9.2 @forward 'banner-2';
9.3 @forward 'banner-3';
9 index
---------------------------------
10. PAGES CSS
---------------------------------
10.1 @forward './service';
10.2 @forward './treatment-process';
10.3 @forward './pricing';
10.4 @forward './team';
10.5 @forward './ask-question';
10.6 @forward './testimonial';
10.7 @forward './take-appointment';
10.8 @forward './about-us';
10.9 @forward './appointment-2';
10.10 @forward './filter';
10.11 @forward './service-2';
10.12 @forward './service-3';
10.13 @forward './experience';
10.14 @forward './pricing-action';
10.15 @forward './testimonial-2';
10.16 @forward './slider-text';
10.17 @forward './our-projects';
10.18 @forward './about-us-2';
10.19 @forward './service-4';
10.20 @forward './client-testimonial';
10.21 @forward './take-appointment-2';
10.22 @forward './doctor';
10.23 @forward './specialist-doctor';
10.24 @forward './experience-2';
10.25 @forward './latest-work';
10.26 @forward './home-2';
10.27 @forward './pricing-action-2';
10.28 @forward './about-us-3';
10.29 @forward './home-3';
10.30 @forward './why-choose-us';
10.31 @forward './wellness-expertise';
10.32 @forward './faq-page';
10.33 @forward './pricing-appointment';
10.34 @forward './contact';
10.35 @forward './404';
10.36 @forward './take-appointment-3';
10.37 @forward './pricing-action-3';
10.38 @forward './portfolio-details';
10.39 @forward './doctors-details';
10.40 @forward './service-details';
10 index
*/
*Note: Responsive css in assests/css/main.css.
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.
/*----------------------------------------*/
/* 9.1 banner Style 1
/*----------------------------------------*/
// Banner style
.banner {
position: relative;
z-index: 1;
&__shape {
position: absolute;
z-index: -1;
top: -150px;
left: -232.5px;
}
&__space {
padding: 150px 0 80px;
@media #{$md, $sm, $xs} {
padding: 140px 0 75px;
}
}
.container {
z-index: 1;
position: relative;
}
&__media {
overflow: hidden;
@include border-radius(40px);
@media #{$sm, $xs} {
@include border-radius(20px);
height: 300px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
&__content {
h1 {
max-width: 935px;
margin-left: auto;
margin-right: auto;
font-style: normal;
font-weight: 600;
font-size: 88px;
line-height: 100px;
text-align: center;
@media #{$lg} {
font-size: 65px;
line-height:75px;
}
@media #{$md} {
font-size: 55px;
line-height:65px;
}
@media #{$sm} {
font-size: 45px;
line-height:55px;
}
@media #{$xs} {
font-size: 35px;
line-height:45px;
}
}
}
}