Caremed – Medical & Healthcare HTML Template
Caremed is a premium multipurpose HTML template that is suitable for any kind of medical or healthcare related websites. It comes with 7 different homepages and one homepage dedicated to the latest COVID-19 Pandemic. It has everything you'd need to setup a medical website for yourself or your clients.
Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
Markup Markup customization and highlights
- Animated Preloader Section
- Premium Creative Design
- Fully Responsive
- Soft Page Transition
- Amazing Hamburger Menu
- Valid HTML5 - CSS3 files
- Based on Bootstrap 4.x
- Amazing Fullscreen Navigation
- Flowless CSS transition
- Cross browsers support
- Retina ready
- Parallax backgrounds
- Google fonts
- Free quick support
General Markup
The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Caremed - Home 1</title>
<meta name="keywords" content="Caremed HTML5 Responsive Template Medicine COVID-19 Corona Hospital" />
<meta name="description" content="Caremed - Hospital HTML5 Responsive Template">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<!-- Plugins CSS File -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/plugins/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/plugins/datepicker.min.css">
<!-- Main CSS File -->
<link rel="stylesheet" href="assets/css/style.min.css">
<link rel="stylesheet" href="assets/vendor/fontawesome/css/all.min.css">
</head>
<body>
Edit loading and page transition
Here is the css style for preloader found in the _loading-overlay.scss file.
@keyframes bouncedelay {
0%,
80%,
100% {
transform:scale(0);
}
40% {
transform:scale(1);
}
}
.loading-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all .5s ease-in-out;
background: #fff;
opacity: 1;
visibility: visible;
z-index: 999999;
}
.bounce-loader {
position: absolute;
top: 50%;
left: 50%;
width: 70px;
margin: -9px 0 0 -35px;
transition: all .2s;
text-align: center;
z-index: 10000;
.bounce1,
.bounce2,
.bounce3 {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 100%;
background-color: #CCC;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);
animation: 1.4s ease-in-out 0s normal both infinite bouncedelay;
}
.bounce1 {
animation-delay: -.32s;
}
.bounce2 {
animation-delay: -.16s;
}
}
body:not(.loaded) * {
transition: none !important;
}
.loaded .loading-overlay {
opacity: 0;
visibility: hidden;
}
Styles Styles customization and highlights
Stylesheets
Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:
| File Name | Description |
|---|---|
bootstrap.min.css |
Detault bootstrap css file |
datepicker.min.css |
Datepicker css |
font-awesome.min.css |
Font Awesome font icons |
owl.carousel.min.css |
Owl Carousel Slider css file |
bs-rating.css |
Rating css file |
style.min.css |
Template main css |
JavaScript JavaScript customization and highlights
JavaScript Files
This is the list of all the jquery files are we used for our theme.
| Tag | Description |
|---|---|
bootstrap.bundle.min.js |
Bootstrap Javascript file |
jquery.waypoints.min.js |
Jquery waypoints Javascript file |
imagesloaded.pkgd.min.js |
Images Loaded Javascript file |
datepicker.min.js |
Datepicker Javascript file |
isotope.pkgd.min.js |
Isotope Javascript file |
owl.carousel.min.js |
Owl Carousel Javascript file |
star-rating.js |
Star Rating Javascript file |
jquery.min.js |
jQuery library |
main.js |
All the plug-ins initializing |
Photoshop Files Photoshop customization and highlights
There is no included psd file with this item but you can purchase it separately by clicking here.
Credits Files Some of your credits and sources
I've used the following images, icons or other files as listed.
JavaScript
Images
- http://www.istockphoto.com/ — Some of images we used from here
- http://www.shutterstock.com/ — Some of images we used from here
- https://www.pexels.com/ — Some of images we used from here
Once again, thanks for purchasing this template and if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.