Medin HTML5 Website Template

Premium HTML 5 website

Created: January 2018
By: websmirno - Envato author Profile

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us. Thank you very much!

Medin HTML5 Website Template is HTML5 + CSS3 Website template and works fine in all major browsers and IE from version 10. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each considerable parts.

Lets take a closer look at the structure of Html, Css, JavaScript.

Folder Structure

When you unpack the archive from ThemeForest.net you'll get the folder containing 3 folders.

Here they are, sorted alphabetically:

documentation - The Documentation for Medin Website Template HTML site template
html - The main folder of the template. There are three layouts in this folder: Medin-html, dentco-html, surgery-html. You can upload any layout content to your Web Server using FTP. You can use any of layouts:
psd - Design source files

The HTML folder structure:

/HTML
- /css (Template CSS)
- /font (Font Iconmoon)
- /images (All Images)
- - // Default Template Images
  - /content (Content Images)
    - content/slider (Index Page Slider Images)
    - content/blog (Blog Page Images)
    - content/product (Shop Page Images)
- /js (JS files)
- /vendor (JS external plugins)
- /forms (PHP form initialization)
- scss (SCSS files)

CONTENT

The content is divided on pages listed below:

index.html - Home page
index-landing.html - Home page Landing
about.html - About page
our-specialist.html - Our Specialists page
doctor-page.html - Doctor info page
services.html - All services page
service-page.html - Service page
blog.html, blog-post-page.html, blog-grid.html - Blog pages
contact.html - Contact Form page
smiles-gallery.html, smiles-gallery-simple.html - Gallery pages
testimonials.html - Testimonials page
schedule.html - Schedule page
prices.html - Prices page
shop-product.html, shop-listing.html - Shop pages

HTML Structure

The body part of the HTML file is divided in three main sections: header, content and footer.

HEADER

Header HTML structure:

Header Navigation

Default menu HTML structure:

									
										
											About Us
										
										
											Services
											
												All Services
												Service Page
												Prices
											
										
										...

Navigation menu in resolution more than 991px looks like horizontal navbar. And navigation menu is collapsed for smaller viewports:

Slider

Main Slider HTML structure:

						
						
							
								
									
									
										
											
												Slider Content
											
										
									
								
								
										...
								
								
										...

Each sliders item has individual style of the animation: the transition style (data-animation) and the animation delay (data-animation-delay).
You can use any the animation transition type from the site https://daneden.github.io/animate.css/.

Content

Content HTML structure:

	
	
		
		
			
				
					Section Titte
				 
                 Section Content
            
        
        
        ....
        
		
			
				Section Tilte
                 Section Content

FOOTER

Footer toggle HTML structure:

Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1

span 4

span 8

span 6

span 12

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Grid System Rules

Some Bootstrap 4 grid system rules:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
Column widths are in percentage, so they are always fluid and sized relative to their parent element
The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as equal width columns. Example: Three elements with .col-sm will each automatically be 33.33% wide from the small breakpoint and up. Tip: If you want to learn more about Flexbox, you can read our CSS Flexbox Tutorial

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:

CSS Files

Theme css files is located at css folder.

custom.css - Theme main CSS file

SCSS Files

All SCSS files are located at scss folder. You can edit them and compile new CSS files.

Bootstrap CSS core is already included in the style.css. You can modify all bootstrap an custom variables in the file scss/_hotel_variables.scss. For example you can change the theme color or the grid breikpots

$primary: #af3c65;
...
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1025px, xl: 1230px);

JavaScript

Custom JS file is located at js folder. All external JS plugins are located at js/vendor folder.

If you need more information about external plugins, please visit plugins official sites.

Icons Font

Pool Service HTML Template uses simply and flexible icon library IcoMoon.

You can see all demo icons in file font/icons/demo.html.
Use the icon class on "display:inline" elements:

        	...
        	<i class="icon icon-museum"></i>
            ...

or

        	...
        	<span class="icon icon-museum"></span>
            ...

How to Add the New Icon(s)

For adding the new icon (or icons) to the library follow the instruction, provided below:

1. Go to IcoMoon - Free -> Click Import Icons -> Upload there font/icons/selection.json -> Select 'Yes' in modal window:

All default icons will be imported!

2. Then search and select the new icon(s) and generate your custom font

3. Download the new Icons Set, unzip the archive and copy all files to 'font/icons/' folder of your project

4. Find the new icon in demo.html and use it in your html code.

For example like this:

Fonts

To change the custom font, please change these line in HEAD section of the page:

To change fonts, go to http://www.google.com/webfonts, choose new fonts and use the generated code.

Forms

You can use default pattern for all themes form: contact forrm, booking form, question form, request form. The HTML form validation script (form/forms.js) makes sure the data sent through the form is accurate and well formatted. For change the email recipient for those form change the address listed in form/process-*.php:

 $to = "youremail here";

Google Map

You can add the google map one of two ways provided below. But before you need to get own API Key for Google Maps here https://maps-generator.com/en/google-maps-api-key.

Add API Key in the google map script path:

To set map location please change the latitude and the longitude options in the file js/app.js:

	googleMapOption = {
		latitude: 59.3,
		longitude: 18.0941403
	},

To set marker position (header mobile map) please edit the marker settings in the file js/app.js:

	googleMapOption = {
		marker: [
			['Medin', 59.3,18.0941403, 1,'images/map-marker.png']
		]
	},

To set markers position (footer map) please edit the markers array in the file js/app.js:

	googleMapOption = {
		markers: [
			['Object number four', 59.302627, 18.1073223, 4, 'images/map-marker-4.png'],
			['Object number three', 59.305004,18.0733833, 3, 'images/map-marker-3.png'],
			['Object number two', 59.29383,18.0814213, 2, 'images/map-marker-2.png'],
			['Object number one', 59.291129,18.0931024, 1,'images/map-marker-1.png']
		]
	},

PSD Files

Design source files located at PSD folder.

Sources and Credits

We have used the following files as listed.

jQuery - JavaScript Library
jQuery UI - jQuery UI custom build
jQuery Migrate - APIs and features removed from jQuery core
Bootstrap - Bootstrap by Twitter
Instagram Feed - jQuery Tooltips and Popovers plugin
Slick - jQuery carousel plugin
Isotope - jQuery plugin filter & sort plugin
Images Loaded - jQuery plugin for detect when images are loaded
jQuery Validation Plugin
jQuery Form Plugin
Waypoint - jQuery 'inview' event plugin
Magnific Popup - jQuery popup plugin
CSS Animation Library
jQuery Scroll Ease
jQuery NoUISlider Plugin
jQuery TwentyTwenty Plugin - Plugin for showcase the visual differences between two images

Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. For more general question related to this Theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you are satisfied with Medin HTML5 Website Template please go to your downloads section on ThemeForest.net and rate Medin Website Template HTML with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)

Hope that you will enjoy in Medin HTML5 Website Template as much as I've enjoyed designing this template.

Kind Regards,
websmirno