Medicat
Medicat - Medical and Health HTML5 Template
- Created: 17/09/2020
- Latest Update: 29/09/2020
- by: ThemeRunch
- email: wasimmia.info@gmail.com
Installation
Follow the steps below to get started with Medicat - Medical and Health HTML5 Template :
-
Open the
Package/MedicatFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
-
Make sure you have upload the required files and folders listed below:
-
Medicat HTML/css, js, fonts- Stylesheets, JavaScript, Fonts etc Folder -
Medicat HTML/img- Images Folder -
Medicat HTML/index.html- Index File/Homepage
-
- You're now ready to go..! Start adding your Content and show off your Brand New Website.
Features At A Glance
- HTML5 & CSS3 & jQuery
- Modern And Creative Design
- Universal menu
- 100% Responsive
- Well documented
- Bootstrap 4.x
- Fontawesome Used
- Google Font Used
- Fixed Menu
- Google Map
- Eye Catching Design
- W3C Validate Code
HTML Structure
Medicat has follows a simple coding structure. here is the sample:
<!doctype html> <html class="no-js" lang="zxx"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Medicat - Medical and Health HTML5 Template</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="site.webmanifest"> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png"> <!-- Place favicon.png in the root directory --> <!-- CSS here --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/meanmenu.css"> <link rel="stylesheet" href="css/nice-select.css"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/default.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <!-- preloader start --> <div id="preloader"> <div class="preloader"> <span></span> <span></span> </div> </div> <!-- preloader end --> <!-- header start --> <header> <div class="header-top d-none d-lg-block"> <div class="container"> <div class="row"> <div class="col-12"> <ul class="left"> <li><span><i class="fas fa-phone-alt"></i></span>+1255 - 568 - 6523</li> <li><span><i class="fas fa-envelope-open-text"></i></span>information@gmail.com</li> <li><span><i class="fas fa-map-marker-alt"></i></span>Bowery St., New York, NY 10013, USA</li> </ul> <ul class="right"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-vimeo-v"></i></a></li> <li><a href="#"><i class="fab fa-skype"></i></a></li> <li><a href="#"><i class="fas fa-rss"></i></a></li> </ul> </div> </div> </div> </div> <div class="header-bottom"> <div class="container"> <div class="row align-items-center"> <div class="col-xl-3 col-lg-2"> <div class="logo"> <a href="index.html"><img src="img/logo/logo.png" alt="logo"></a> </div> </div> <div class="col-xl-9 col-lg-10"> <div class="bar header-icon d-none d-lg-block f-right"> <a href="#"><i class="fas fa-th"></i></a> </div> <div class="main-menu f-right"> <nav id="mobile-menu"> <ul> <li class="dropdown"><a href="index.html">Home</a> <ul class="submenu"> <li><a href="index.html">Home style 1</a></li> <li><a href="index-2.html">Home style 2</a></li> <li><a href="index-3.html">Home style 3</a></li> </ul> </li> <li class="dropdown"><a href="services.html">Department</a> <ul class="submenu"> <li><a href="services.html">Services</a></li> <li><a href="services-details.html">Services Details</a></li> </ul> </li> <li class="dropdown"><a href="team.html">Doctors</a> <ul class="submenu"> <li><a href="team.html">Doctors</a></li> <li><a href="team-details.html">Doctors Details</a></li> </ul> </li> <li class="dropdown"><a href="shop.html">Shop</a> <ul class="submenu"> <li><a href="shop.html">Shop</a></li> <li><a href="product-details.html">Shop Details</a></li> <li><a href="cart.html">Shopping Cart</a></li> <li><a href="login.html">Login</a></li> <li><a href="register.html">Register</a></li> </ul> </li> <li class="dropdown"><a href="blog.html">News</a> <ul class="submenu"> <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li> <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li> <li><a href="blog.html">Blog 3 Column</a></li> <li><a href="blog-details.html">Blog Details</a></li> </ul> </li> <li class="dropdown"><a href="#">Pages</a> <ul class="submenu"> <li><a href="about.html">About</a></li> <li><a href="appointment.html">Appointment</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="portfolio-masonry.html">Portfolio Masonry</a></li> <li><a href="portfolio-details.html">Portfolio Details</a></li> <li><a href="contact.html">Contact</a></li> </ul> </li> </ul> </nav> </div> <div class="mobile-menu"></div> </div> </div> </div> <!-- info bar start --> <div class="btn-menu-main"> <div class="crose mb-30"> <button><i class="fas fa-times"></i></button> </div> <div class="logo-side mb-30"> <a href="index.html"> <img src="img/logo/logo.png" alt=""> </a> </div> <div class="side-info mb-30"> <div class="sidebar-content mb-45"> <h4>About us</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a class="thm-btn btn-icon" href="#" style="animation-delay: 0.6s;" tabindex="0">Contact us <span><i class="fas fa-arrow-right"></i></span></a> </div> <div class="contact-list mb-30"> <div class="sidebar-title"> <h4>Contact us</h4> </div> <ul class="footer-info"> <li> <div class="footer-address mt-20"> <span><i class="fas fa-map-marker-alt"></i></span> <h5>Bowery St., New York, NY 10013, USA</h5> </div> </li> <li> <div class="footer-address mt-20"> <span><i class="fas fa-phone-alt"></i></span> <h5>+1255 - 568 - 6523</h5> </div> </li> <li> <div class="footer-address mt-20"> <span><i class="fas fa-envelope-open-text"></i></span> <h5>information@gmail.com</h5> </div> </li> </ul> </div> <div class="sidebar-social mt-20"> <a href="#"> <i class="fab fa-facebook-f"></i> </a> <a href="#"> <i class="fab fa-twitter"></i> </a> <a href="#"> <i class="fab fa-google-plus-g"></i> </a> <a href="#"> <i class="fab fa-instagram"></i> </a> </div> </div> </div> <div class="offcanvas-overly"></div> <!-- info bar end --> </div> </header> <!-- header end --> <!-- footer start --> <footer> <div class="footer-area footer-height pt-120 pb-80" data-background="img/bg/footer-bg.jpg"> <div class="container"> <div class="row"> <div class="col-xl-4 col-lg-4 col-md-6 pr-0"> <div class="footer-widget footer-spache mb-40"> <h3>About us</h3> <p>Lorem ipsum dolor sit amet, consect etur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="footer-social mt-35"> <a href="#"><i> class="fab fa-twitter"></i></a> <a href="#"><i> class="fas fa-rss"></i></a> <a href="#"><i> class="fab fa-dribbble"></i></a> <a href="#"><i> class="fab fa-behance"></i></a> <a href="#"><i> class="fab fa-instagram"></i></a> </div> </div> </div> <div class="col-xl-2 col-lg-2 col-md-6 offset-xl-1"> <div class="footer-widget mb-40"> <h3>Services</h3> <ul> <li><a> href="#">Instant Medicine</a></li> <li><a> href="#">Kidney Solution</a></li> <li><a> href="#">Knee Surgery</a></li> <li><a> href="#">Eye Care</a></li> <li><a> href="#">Dental Care</a></li> <li><a> href="#">Body Surgery</a></li> </ul> </div> </div> <div class="col-xl-2 col-lg-2 col-md-6 pl-50"> <div class="footer-widget footer-widget-2 mb-40"> <h3>Links</h3> <ul> <li><a> href="#">Home</a></li> <li><a> href="#">About</a></li> <li><a> href="#">Department</a></li> <li><a> href="#">Team</a></li> <li><a> href="#">Pricing</a></li> <li><a> href="#">News</a></li> </ul> </div> </div> <div class="col-xl-3 col-lg-4 col-md-6"> <div class="footer-widget mb-40"> <h3>Infomation</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p> <ul class="footer-info"> <li> <div class="footer-address mt-20"> <span><i> class="fas fa-map-marker-alt"></i></span> <h5>Bowery St., New York, NY 10013, USA</h5> </div> </li> <li> <div class="footer-address mt-20"> <span><i> class="fas fa-phone-alt"></i></span> <h5>+1255 - 568 - 6523</h5> </div> </li> <li> <div class="footer-address mt-20"> <span><i> class="fas fa-envelope-open-text"></i></span> <h5>information@gmail.com</h5> </div> </li> </ul> </div> </div> </div> </div> </div> <div class="copyright-area pt-30 pb-30"> <div class="container"> <div class="row align-items-center"> <div class="col-xl-6 col-lg-6 col-md-6"> <div class="copyright-text text-center text-md-left"> <p> © 2020 Medicat Designed by <a> href="https://themeforest.net/user/themerunch" target="_blank">themerunch</a></p> </div> </div> <div class="col-xl-6 col-lg-6 col-md-6"> <div class="footer-menu text-center text-md-right"> <ul> <li><a> href="#">Terms of Service</a></li> <li><a> href="#">Privacy Policy</a></li> </ul> </div> </div> </div> </div> </div> </footer> <!-- footer end --> <!-- All js here --> <script src="js/vendor/modernizr-3.8.0.min.js"></script> <script src="js/vendor/jquery-1.12.4.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/waypoints.min.js"></script> <script src="js/jquery.counterup.min.js"></script> <script src="js/isotope.pkgd.min.js"></script> <script src="js/slick.min.js"></script> <script src="js/jquery.scrollUp.min.js"></script> <script src="js/jquery.meanmenu.min.js"></script> <script src="js/jquery.nice-select.min.js"></script> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> </html>
CSS Structure
We are using several CSS files in this Template. themerunch Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
- Animate css used
- Bootstrap css used
- Lightcase used
- Owl Carousel used
- slick used
- isotope used
- Favicon used
- Fontawesome used
- Style.css used
- and some other necessary css files
style.css situated on medicat/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
Project Name: Medicat - Medical and Health HTML5 Template Author: themerunch -->> (https://themeforest.net/user/themerunch) Support: themerunch@gmail.com Description: Medical and Health HTML5 Template Developer: Wasim Mia Version: 1.0 /* CSS Index ----------------------------------- 1. Theme default css 2. header 3. slider 4. about 5. servises 6. cta 7. team 8. exprience 9. pricing 10. blog 11. brand 12. subscribe 13. footer 14. department 15. counter 16. appointment 17. testimonial 18. work 19. portfolio 20. faq 21. page title 22. shop 23. contact 24. login 25. info bar 26. Preloader */
/* 2. header */ .header-top{ background-color: #1b1d21; padding: 13px 0px; } .header-top ul{ overflow: hidden; margin: 0px; } .header-top .left { float: left; } .header-top .left li { list-style: none; display: inline-block; color: #fff; margin-right: 15px; float: left; border-left: 1px solid #393a3d; padding-left: 15px; } .header-top .left li:first-child { border: 0; padding-left: 0; } .header-top .left li span{ color: #0a9aae; margin-right: 7px; } .header-top .right { float: right; } .header-top .right li { list-style: none; display: inline-block; padding: 0 11px; } .header-top .right li:last-child { padding-right: 0; } .header-top .right li a{ color: #666666; font-size: 18px; } .header-top .right li a:hover{ color: #0a9aae; } .main-menu ul li { display: inline-block; margin-left: 48px; position: relative; } .main-menu ul li a { display: block; padding: 40px 0; color: #1b1d21; font-size: 16px; font-weight: 700; position: relative; } .main-menu ul li.dropdown a::before { font-family: "Font Awesome 5 Free"; content: "\f078"; position: absolute; right: -14px; top: 0px; z-index: 5; font-weight: 900; top: 44px; font-size: 11px; } .main-menu ul li.dropdown ul.submenu li a::before { display: none; } .main-menu ul li:hover > a { color: #0a9aae; } .main-menu ul li ul.submenu { position: absolute; top: 110%; left: 0; min-width: 210px; opacity: 0; visibility: hidden; background: #fff; padding: 15px 0; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05); transition: all 0.3s ease-out 0s; border-radius: 3px; z-index: 99; border-top: 3px solid #0a9aae; } .main-menu ul li:hover ul.submenu { top: 100%; opacity: 1; visibility: visible; } .main-menu ul li ul.submenu li { margin: 0; display: block; } .main-menu ul li ul.submenu li a { padding: 9px 25px; text-transform: capitalize; } .header-icon { margin-left: 44px; } .header-icon a { background: #0a9aae; width: 120px; height: 104px; display: block; text-align: center; font-size: 45px; color: #fff; line-height: 2.3; } .transparent-header { position: absolute; left: 0; right: 0; z-index: 1; margin-top: 20px; } .header-icon-2 a { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } /* 3. slider */ .slider-height { min-height: 700px; background-position: center top; background-repeat: no-repeat; } .slider-active button.slick-arrow { position: absolute; top: 50%; left: 185px; transform: translateY(-50%); background: none; border: 0; font-size: 16px; padding: 0; color: #10111e; z-index: 2; opacity: 0; visibility: hidden; height: 70px; width: 70px; border-radius: 50%; cursor: pointer; background: #fff; line-height: 73px; transition: .3s; } .slider-active button.slick-next{left: auto;right: 185px;} .slider-active:hover button.slick-prev{left: 200px;} .slider-active:hover button.slick-next{right: 200px;} .slider-active:hover button{ opacity: 1; visibility: visible; } .slider-active button:hover{ background: #0a9aae; color: #fff; box-shadow: 0px 6px 12px 0px hsla(200, 95%, 50%, 0.357); } .silder-text .slider-caption h5 { color: #fff; text-transform: uppercase; margin-bottom: 20px; font-weight: 500; } .silder-text .slider-caption h1 { font-size: 60px; color: #fff; text-transform: capitalize; font-weight: 700; } .silder-text .slider-caption h1 { font-size: 60px; color: #fff; text-transform: capitalize; font-weight: 700; line-height: 1.2; margin-bottom: 25px; } .silder-text .slider-caption p { font-size: 18px; color: #fff; font-weight: 600; line-height: 30px; } .slider-btn a { margin-right: 25px; margin-top: 30px; } /* slider 2 */ .slider-wrapper { background: #ffffff; padding: 45px 65px; padding-bottom: 94px; margin-top: 285px; box-shadow: 0px 30px 60px 0px rgba(10, 154, 174, 0.1); border-radius: 10px; margin-bottom: 80px; } .silder-text-2 .slider-caption h5 { color: #0a9aae; } .silder-text-2 .slider-caption h1 { color: #1b1d21; } .silder-text-2 .slider-caption p { color: #999999; } .slider-active-2 button.slick-arrow { top: 40%; } /* slider 3 */ .slider-height-2 { min-height: 850px; } .slider-img { position: absolute; right: 10%; bottom: 0; }
Js Structure
We are using several Js files in this Template. themerunch Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
Js Fiile Included
- jquery.js used
- fontawesome.js used
- jquery-ui.js used
- bootstrap.min.js used
- isotope.js used
- scrollUp.min.js used
- owl.carousel.min.js used
- js/slick.min.js used
- counterup.min.js used
- active.js used
- and some other necessary css files
main.js situated on js/ contain the the all necessary custom style which is well organized and following are the main.js file structure :
(function ($) { "use strict"; // preloader $(window).on('load', function () { $('#preloader').delay(350).fadeOut('slow'); $('body').delay(350).css({ 'overflow': 'visible' }); }) // side-bar $(".bar").on("click", function () { $(".btn-menu-main,.offcanvas-overly").addClass("btn-menu-main-right"); return false; }); $(".crose,.offcanvas-overly").on("click", function () { $(".btn-menu-main,.offcanvas-overly").removeClass("btn-menu-main-right"); }); // meanmenu jQuery('#mobile-menu').meanmenu({ meanMenuContainer: '.mobile-menu', meanScreenWidth: "991" }); //data background $("[data-background]").each(function () { $(this).css("background-image", "url(" + $(this).attr("data-background") + ") ") }) //counterUp $('.counter').counterUp({ delay: 10, time: 1000 }); // slider active function mainSlider() { var BasicSlider = $('.slider-active'); BasicSlider.on('init', function(e, slick) { var $firstAnimatingElements = $('.single-slider:first-child').find('[data-animation]'); doAnimations($firstAnimatingElements); }); BasicSlider.on('beforeChange', function(e, slick, currentSlide, nextSlide) { var $animatingElements = $('.single-slider[data-slick-index="' + nextSlide + '"]').find('[data-animation]'); doAnimations($animatingElements); }); BasicSlider.slick({ autoplay: false, autoplaySpeed: 10000, dots: false, fade: true, arrows: true, prevArrow: '', nextArrow: '', responsive: [ { breakpoint: 767, settings: { dots: false, arrows: false } } ] }); function doAnimations(elements) { var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; elements.each(function() { var $this = $(this); var $animationDelay = $this.data('delay'); var $animationType = 'animated ' + $this.data('animation'); $this.css({ 'animation-delay': $animationDelay, '-webkit-animation-delay': $animationDelay }); $this.addClass($animationType).one(animationEndEvents, function() { $this.removeClass($animationType); }); }); } } mainSlider(); })(jQuery);
Customization
How to Change Logo
How to Change Copyright
How to Change Google Map
