“Medila - Responsive Multipurpose landing page”
Created: Dec 13, 2018
By: Divine-Store
Table of Contents
A) HTML Structure - top
This theme is a Responsive layout with four column. Based on Bootstrap Framework. All of the information within the main content area is nested within a div with an id of "container". The sidebar's (column #2) content is within a div with an id of "secondaryContent". The general template structure is the same throughout the template. Here is the general structure.
If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:
For header
.overlay {
background: #151515;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.
B) CSS Files and Structure - top
I'm using Five CSS files in this theme. The first one is the main source file for bootstrap framework
The second file contains all of the specific stylings for the page. The file is separated into sections using:
1. GLOBAL STYLES 2. COMMON STYLES 3. HEADER STYLES 4. INTRO STYLES 5. ICON BOX / SERVICES STYLES 6. INFO STYLES 7. TESTIMONIAL STYLES 8. ABOUT 9. VIDEO BOX 10. FEATURES 11. PRICING TABLE 12. CLIENTS 13. PAGE HEADER 14. BLOG STYLES 15. SIDEBAR 15. PAGE HEADER 16. PORTFOLIO 17. TEAM 18. 404 STYLES 19. GOOGLE MAP 20. CONTACT 07. MAILCHIMP 22. ELEMENTS 23. COMMENTS 24. FOOTER 25. RESPONSIVE STYLES css codes etc....
The fourth file contains all of the specific stylings for Slick Carousel.
The fifth file contains all of the specific stylings for Font-Awesome Icons.
Dont change anything in first(bootstrap.css) file.
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.
C) JavaScript - top
This theme imports Thirteen Javascript files.
- jQuery
- jquery.js
- bootstrap.min.js
- vendors/slick/slick
- vendors/stellar.js
- vendors/isotope/isotope.pkgd.js
- vendors/swipebox/js/jquery.swipebox.min.js
- main.js
- vendors/mc/jquery.ketchup.all.min.js
- vendors/mc/main.js
D) Tutorial - top
Follow the steps below to change the demo contents with your own contents.
1. LOGO SECTION
To replace the logo name, find this code
2. NAVMENU
Open index.html file and find this code.
Replace "HOME", "About" with the menu name and "#" with the page link or anchor link.
3. INTRO CONTENT
Intro Content
Find this code
<
We made your medical
treatment easy
Lorem ipsum dolor sit amet consec tetur elit amet voluptas accusamus
dolorum veritatis ea odio dolor emque.
-
Laboratory services
-
Radiology and X-ray facility
-
Ambulance Services
-
Ward/ Indoor facility
replace the text between "<h3>" "</h3>" and "<p>" "</p>" with the intro title and description.
replace "Purchase Now" and "Learn More" with the button name.
replace "#" with the button links.
Same for all intro pages
4. CLIENTS SECTION
Find this code and change image in images folder.
5500
Healthy Clients
5. ABOUT - INFO CONTENT
Find this code
- SERVICES -
Our Medical Service
We're different from typical health checkup center. We're out to create magic. The goal is to WOW you with outstanding treatment.
Robotic Surgery
Lorem ipsum dolor sit amet elit convallis neque convallis est non turpis nisl ac justo rutrum sollic itudin urna interdum.
6. TESTIMONIALS
Open index.html file and find this code.
From the telephone appointment system to seeing a GP, my experience has been flawless. All the team from reception, telephone and nursing staff are polite, thorough and cheerful, which in itself is comforting.
To replace the icon, go to this link and choose your icon and replace "icon-box-square" with your icon name. or go to "css/icons" folder and open each folder and open .html file in browser and choose your icon
Replace the text between "<h4>" "</h4>" and "<p>" "</p>" with the service title and description.
This will be the same for all service columns.
7. GOOGLEMAP
Open "contact.html" and find this.
40.6700, -73.9400
Go to this link and in the search bar update your location or address and press go.
Scroll down the page to see the lattitude and longitude of your location. Update those here in both places and save.
8. CONTACT FORM
Open "contact.php" file from "PHP" folder and find this code.
define( "RECIPIENT_NAME", "YOUR_NAME_HERE" );
define( "RECIPIENT_EMAIL", "YOUR_EMAIL_HERE" );
Replace "YOUR_NAME_HERE" with your name
Replace "YOUR_EMAIL_HERE" with your email, where you want to receive the mails.
9. COPYRIGHT
© 2018. Medila. All rights reserved.
Designed by Divine-Store
Replace the Copyright contents with yours.
Intro Newsletter (mailchimp)
Open "subscribe.php" file from "PHP" folder and find this.
$apiKey = 'YOUR_API_KEY';
Replace "YOUR_API_KEY" with your mailchimp API key - How to get API key?
$listId = 'YOUR_LIST_ID';
Replace "YOUR_LIST_ID" with your mailchimp newsletter list id - How to get List ID?
$submit_url = "http://us3.api.mailchimp.com/1.3/?method=listSubscribe";
Replace "us3" with your actual data center (You can find the data center on the API key)
Thats it. You are done. Now your website is ready to launch.
E) Sources and Credits - top
I've used the following images, icons, plugins, fonts or other files as listed.
- Fonticons by - fontawesome
- Demo images from - Photodune
- Demo images from - Pixabay
All images, Icons, Logos, Fonts used in this template are free for commercial use.
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.
Author Name