Medicina new and modern html5 medical template builded on Bootstrap framework. Fancy colour schemes, makes medicina more reliable and useful. Amazing and simple appoinment form will make your patients life more easier
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
This theme is a builted on bootstrap framework with four columns. All of the information within the main content area is nested within a 'section'.
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 http-equiv="X-UA-Compatible" content="IE=edge">
<title>Medicina</title>
<meta name="author" content="Themezinho">
<meta name="description" content="Medical html5 template">
<meta name="keywords" content="html, template, carousel, theme, zinho, medical, html5">
<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="Medicina - Medical Care HTML5 Template">
<meta property="og:image" content="http://www.acrocapoeira.com/medicina/preview.png">
<meta property="og:site_name" content="Medicina">
<meta property="og:title" content="Medicina">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.acrocapoeira.com/medicina">
<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@themezinho">
<meta name="twitter:creator" content="@themezinho">
<meta name="twitter:title" content="Medicina">
<meta name="twitter:description" content="Medicina - Medical Care HTML5 Template">
<meta name="twitter:image" content="http://www.acrocapoeira.com/medicina/preview.png">
<!-- FAVICON FILES -->
<link href="ico/apple-touch-icon-144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144">
<link href="ico/apple-touch-icon-114-precomposed.png" rel="apple-touch-icon-precomposed" sizes="114x114">
<link href="ico/apple-touch-icon-72-precomposed.png" rel="apple-touch-icon-precomposed" sizes="72x72">
<link href="ico/apple-touch-icon-57-precomposed.png" rel="apple-touch-icon-precomposed">
<link href="ico/favicon.png" rel="shortcut icon">
<!-- CSS FILES -->
<link href="css/ionicons.min.css" rel="stylesheet">
<link href="css/jquery.fancybox.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
</noscript>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head><body>
content goes here
<script type='text/javascript' src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/smooth-scroll.js"></script>
<script src="js/queryloader2.min.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/jquery.maskedinput.js"></script>
<script src="js/jquery.ba-cond.min.js" type="text/javascript" ></script>
<script src="js/jquery.slitslider.js" type="text/javascript" ></script>
<script src="js/slider-settings.js"></script>
<script src="js/medicina.js"></script>
</body>
</html>
It is very easy to change link color btn turquaz and ghost buttons
/* Site Links - Buttons */
a{color:#1dd2c8;}
a:hover{color:#1dd2c8; text-decoration:underline;}
.btn-turquaz-lg{ background:#1dd2c8; line-height:42px; padding:0 10px 0 15px; color:#fff; border-bottom:1px solid #17a8a0; text-shadow:0 1px 1px rgba(-255,-255,-255,0.3);}
.btn-turquaz-lg{ font-weight:800; display:inline-block; font-size:20px; letter-spacing:-1px; border-radius:2px;}
.btn-turquaz-lg:hover{text-decoration:none; color:#fff; background:#20c0b7;}
.btn-turquaz-lg:after{content:'+'; margin-left:15px; padding-left:10px; border-left:1px solid #4adbd3;}
.btn-turquaz-md{ background:#1dd2c8; line-height:32px; padding:0 10px 0 15px; color:#fff; border-bottom:1px solid #17a8a0; text-shadow:0 1px 1px rgba(-255,-255,-255,0.3);}
.btn-turquaz-md{ font-weight:800; display:inline-block; font-size:16px; letter-spacing:-1px; border-radius:2px;}
.btn-turquaz-md:hover{text-decoration:none; color:#fff; background:#20c0b7;}
.btn-turquaz-md:after{content:'+'; margin-left:15px; padding-left:10px; border-left:1px solid #4adbd3;}
.btn-ghost-md{color:#fff; border:1px solid #fff; padding:5px 12px; display:inline-block; font-weight:700; border-radius:2px;}
.btn-ghost-md:hover{text-decoration:none; background:#fff; color:#1dd2c8;}
.btn-ghost-lg{color:#fff; border:1px solid #fff; padding:10px 15px; display:inline-block; font-weight:700; font-size:20px; border-radius:2px;}
.btn-ghost-lg:hover{text-decoration:none; background:#fff; color:#1dd2c8;}
Here is the css style for site general title typography.
/* Titles */
.title-bottom-line{ color:#1dd2c8; font-weight:300; margin-bottom:30px; padding-bottom:40px; position:relative; border-bottom:1px solid #eee; margin-top:0;}
.title-bottom-line:after{content:''; width:80px; height:1px; float:left; background:#1dd2c8; position:absolute; left:0; bottom:-1px;}
Here is the css style for faq acordeon
/* Acordeon */
#accordion { width:100%; float:left;}
.panel-group .panel{ border:none; border-radius:0;}
.panel-default>.panel-heading{ background:#1dd2c8; border-radius:0; padding:15px 10px;}
.panel-default>.panel-heading img{ width:20px; float:left; margin:-4px 6px 0 0;}
.panel-default>.panel-heading a{ width:100%; display:block; color:#fff; font-weight:700;}
.panel-default>.panel-heading a:hover{ text-decoration:none;}
.panel-default>.panel-heading a:focus{ text-decoration:none;}
.panel-group .panel-heading+.panel-collapse>.panel-body, .panel-group .panel-heading+.panel-collapse>.list-group{border:none;}
.panel{box-shadow:none;}
.panel-body a{ color:#1dd2c8; text-decoration:underline; margin-top:12px; font-weight:700;}
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 |
|---|---|
animate.css |
Wow animation css file |
bootstrap.min.css |
Detault bootstrap css file |
custom.css |
Slider setting css |
datepicker.css |
Bootstrap datepicker css |
ionicons.min.css |
ION Icons font css |
jquery.fancybox.css |
Fancybox litebox css |
owl.carousel.css |
OWL Carousel css file |
style.css |
General CSS file |
styleNoJS.css |
Slider css file |
The second file contains all of the specific stylings for the page. The file is separated into sections using:
1. Body 1.1 Main section 1.2 Spacing 1.3 Tools 1.4 Overlay 1.5 Titles 1.6 Links - Buttons 1.7 Form Elements 1.8 Form Placeholders 2. Header 2.1 Top Bar 2.1.1 Top Bar - Phone 2.1.2 Top Bar - Language 2.1.3 Top Bar - Search 2.2 Nav Bar 2.2.1 Navbar Nav 2.2.2 Social Media 3. Slider 3.1 Element of Slider 4. Appointment Form 4.1 Elements of form 4.2 Datepicker 5. Home Services 5.1 Elements of services 5.2 Content 5.3 Icons 5.4 Lines 6. Box Content 6.1 Elements of box content 6.2 First Box 6.3 Second Box 6.4 Third Box 6.5 Icon 6.6 Content 7.Latest News 7.1 Elements of news 7.2 Headlines 7.3 Rated article ribbon 8.Frase 8.1 Elements of frase 8.2 Headlines 9.Gallery 9.1 Elements of gallery 9.2 Headlines 9.3 Thumb 10.Departments 10.1 Elements of departments 10.2 Content Box 10.3 Headlines 11.Logos 11.1 Elements of logos 11.2 Headlines 11.3 Item 12.Inner Header 12.1 Elements of inner header 13.Inner Content 13.1 Elements of inner content 13.2 Headlines 13.3 Side Bar 14. News List 14.1 Elements of news list 14.2 Headlines 14.3 HR 15. FAQ 15.1 Elements of FAQ 16. Contact Form 16.1 Elements of contact form 16.2 Success 16.3 Error 17. Footer Bar 17.1 Elements of footer bar 17.2 Headlines 17.3 Social Media 18. Footer 18.1 Elements of footer 18.2 Headlines 18.3 Newsletter 18.4 Footer menu 19. Error Pages 19.1 Elements of Error Pages 20. Acordeon 20.1 Elements of acordeon
This is the list of all the jquery files are we used for our theme.
| Tag | Description |
|---|---|
bootstrap-datepicker.js |
Bootstrap datepicker script |
bootstrap.min.js |
Default bootstrap framework jquery |
jquery.ba-cond.min.js |
Simple jquery code it helps for slider |
jquery.fancybox.js |
Fancybox litebox jquery |
jquery.form.js |
Jquery form validation |
jquery.maskedinput.js |
Input numbers masks (phone-credit card) |
jquery.min.js |
Main jquery library |
jquery.slitslider.js |
Amazing slit slider jquery |
jquery.stellar.js |
Parallax jquery |
jquery.validate.min.js |
Form validation |
medicina.js |
Main jquery parameters file |
owl.carousel.js |
OWL Carousel jquery |
modernizr.custom.js |
Mozernizr jquery |
queryloader2.min.js |
Preloader jquery |
slider-settings.js |
Slit slider settings jquery |
smooth-scroll.js |
Smooth scrolling jquery |
wow.js |
WOW animations jquery |
This is masked text inputs for phone or credit card numbers and easy to customize, open up the file medicina.js and change the following code:
// Phone mask
$("#phone").mask("(999) 999-99-99");
ajax contact form is very easy to setup , open up the file process.php and change the your@domain.com part.
< ?php
$to = "your@domain.com";
$from = $_REQUEST['email'];
$name = $_REQUEST['name'];
$surname = $_REQUEST['surname'];
$phone = $_REQUEST['phone'];
$city = $_REQUEST['city'];
$state = $_REQUEST['state'];
$subject = $_REQUEST['subject'];
$headers = "From: $from";
$fields = array();
$fields{"name"} = "Name";
$fields{"surname"} = "Surname";
$fields{"phone"} = "Phone";
$fields{"email"} = "E-mail";
$fields{"city"} = "City";
$fields{"state"} = "State";
$fields{"subject"} = "Subject";
$fields{"message"} = "Message";
$body = "Here is the message from conceito:\n\n"; foreach($fields as $a => $b){ $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }
$send = mail($to, $subject, $body, $headers);
?>
Also it is easy to change contact form messages.
<div id="success">
<p>Your message was sent successfully! We will be in touch as soon as we can.</p>
</div>
<div id="error">
<p>Something went wrong, try refreshing and submitting the form again.</p>
</div>
There is no PSD file with this theme:
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my 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.