## Medcity Html5 Template

Medcity - Medical Healthcare HTML5 Template

Thank you for purchasing Medcity template. This documentation will help to know more about template and how is structured and how to use the template features.

Medcity is a template for multi purpose sites built on `Bootstrap Framework`

#### Requirements

To be able to use HTML template, you must have the following:

- Make sure you upload the required assets files/folders listed below:
  - `assets/css` - Extra Stylesheets Folder
  - `assets/images` - Images Folder
  - `assets/js` - Javacripts Folder
  - `assets/css/style.css` - Main Stylesheet File
  - `index.html` - Index File/Homepage

#### Installation

Follow the steps below to get started with your Medcity Template:

1. Open the `Package` Folder to find all the html Templates Files
2. You will need to Upload these files to localhost server or your Web Server using FTP in order to use it on your Website.
3. Make sure you upload the required files/folders listed below:
   - `assets` - Required all file Folder.
   - Select `home-classic.html` which want to use.
   - change `index.html`name file to `index.html` - Index File

#### File Structure

unzip the compressed archive to see the following structure:

     Medcity/
      ├── Documentation/
      ├──
          ├── assets/
              ├── css
              ├── images
              ├── fonts
              ├── js
              ├── scss
          ├── index(intro)
          ├── home-classic.html
          ├── ...
          └── why-us.html

#### Html Structure

we use the bootstrap framework as a framework. You can take a look at bootstrap here and see it's feature in action.

And basic layout of the grids look like:

    <div class="row">
      <div class="col-md-9">
        Level 1: .col-md-9
        <div class="row">
          <div class="col-sm-8 col-md-6">
            Level 2: .col-sm-8 .col-md-6
          </div>
          <div class="col-sm-4 col-md-6">
            Level 2: .col-sm-4 .col-md-6
          </div>
        </div>
      </div>
    </div>

If you find that you need to change structure. Scroll down in your html file and find section that you want to change , all section have predefined html comments like below section example.

#### CSS Structure

Heads up! I'm using several CSS files in this template. Keep in mind, that these CSS files might be overridden somewhere else in other file.

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
--- | ---
`libraries.css` | This is a bunch of cool, fun, and minify for all external css resources you can found this resources in css folder. and This are generic styles, resets & normalization.you can take a look NOTE: libraries.css contains MInfied Files (bootstrap.css - magnific-popup.css - slick-carousel.css) NOTE: we have gathered these libraries inside libraries.css File because it's better in Performane
`style.css` | This is the main css file, it contains all the styles of the website.

#### sass CSS Structure

Here's a list of sass CSS files I'm using with this template, you can find more information opening each file:

File Name | Description
--- | ---
`style.scss` | This are generic styles and collect all files.
`Global Folder` | This folder contain base sass css file and variable file. If you want to change any variable you can go through it.
`Layout Folder` | This folder contain layout sass css files like accordion, align, background, list and etc..
`Module Folder` | This folder contain block and section sass css files like action, feature, screenshot, etc...

#### Javascript Structure

The js (scripts) files are loaded in footer. I loaded js Library in the bottom because it will increase the site speed and rendering.

The JS files used in this template are:

File | Description
--- | ---
`jquery-3.3.1.min.js` | jQuery is a Javascript library that greatly reduces the aMedcity of code that you must write.
`plugins.js` | this bring all javascript plugins to life which we compresed all plugins to min. NOTE: plugins.js contains MInfied Files (bootstrap.js - slick-carousel.js - magnific-popup.js - counterup.js - mixitup.js ) NOTE: we have gathered these plugins inside plugins.js File because it's better in Performane
`main.js` | this to active javascript function and add some coll function to your landing page.

#### Change Fonts

To change the font, Check head in`index.html` then in first go to google fonts choose a font and use the generated code and replace with next code.

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Roboto:wght@400;700&display=swap">

#### Next Step : change font family for body in `style.css`

    body {
    	font-family: "Roboto", sans-serif;/*Change font*/
    }
    h1,h2,h3,h4,h5,h6{
    	font-family: "Quicksand", sans-serif;/*Change font*/
    }

#### Change Spacing

we uses helper classes to space elements on Medcity template. Helper classes are used to space elements with margin and padding. This makes it easier to create your own elements in HTML without needing extra CSS to arrange them appropriately.

#### AVAILABLE CLASSES

    /* Margin  */
    .m-0 {
        margin: 0 !important;
    }

    /*  margin Top */
    .mt-0 {
        margin-top: 0 !important;
    }

    .mt-10 {
        margin-top: 10px !important;
    }

    .mt-20 {
        margin-top: 20px !important;
    }

    .mt-30 {
        margin-top: 30px !important;
    }

    .mt-40 {
        margin-top: 40px !important;
    }

    .mt-50 {
        margin-top: 50px !important;
    }

    .mt-60 {
        margin-top: 60px !important;
    }

    .mt-70 {
        margin-top: 70px !important;
    }

    .mt-80 {
        margin-top: 80px !important;
    }

    .mt-90 {
        margin-top: 90px !important;
    }

    .mt-100 {
        margin-top: 100px !important;
    }

    /* Margin Bottom */
    .mb-0 {
        margin-bottom: 0 !important;
    }

    .mb-10 {
        margin-bottom: 10px !important;
    }

    .mb-20 {
        margin-bottom: 20px !important;
    }

    .mb-25 {
        margin-bottom: 25px !important;
    }

    .mb-30 {
        margin-bottom: 30px !important;
    }

    .mb-40 {
        margin-bottom: 40px !important;
    }

    .mb-50 {
        margin-bottom: 50px !important;
    }

    .mb-60 {
        margin-bottom: 60px !important;
    }

    .mb-70 {
        margin-bottom: 70px !important;
    }

    .mb-80 {
        margin-bottom: 80px !important;
    }

    .mb-90 {
        margin-bottom: 90px !important;
    }

    .mb-100 {
        margin-bottom: 100px !important;
    }

    /* Margin Right */
    .mr-0 {
        margin-right: 0 !important;
    }

    .mr-20 {
        margin-right: 20px !important;
    }

    .mr-30 {
        margin-right: 30px !important;
    }

    .mr-40 {
        margin-right: 40px !important;
    }

    .mr-50 {
        margin-right: 50px !important;
    }

    /* Margin Left */
    .ml-0 {
        margin-left: 0 !important;
    }

    .ml-20 {
        margin-left: 20px !important;
    }

    .ml-30 {
        margin-left: 30px !important;
    }

    .ml-40 {
        margin-left: 40px !important;
    }

    .ml-50 {
        margin-left: 50px !important;
    }

    /*  padding  */
    .p-0 {
        padding: 0 !important;
    }

    /* padding Top */
    .pt-0 {
        padding-top: 0 !important;
    }

    .pt-20 {
        padding-top: 20px !important;
    }

    .pt-30 {
        padding-top: 30px !important;
    }

    .pt-40 {
        padding-top: 40px !important;
    }

    .pt-50 {
        padding-top: 50px !important;
    }

    .pt-60 {
        padding-top: 60px !important;
    }

    .pt-70 {
        padding-top: 70px !important;
    }

    .pt-80 {
        padding-top: 80px !important;
    }

    .pt-90 {
        padding-top: 90px !important;
    }

    .pt-100 {
        padding-top: 100px !important;
    }

    .pt-110 {
        padding-top: 110px !important;
    }

    .pt-120 {
        padding-top: 120px !important;
    }

    .pt-130 {
        padding-top: 130px !important;
    }

    .pt-140 {
        padding-top: 140px !important;
    }

    .pt-150 {
        padding-top: 150px !important;
    }

    /*  Padding Bottom */
    .pb-0 {
        padding-bottom: 0 !important;
    }

    .pb-10 {
        padding-bottom: 10px !important;
    }

    .pb-20 {
        padding-bottom: 20px !important;
    }

    .pb-30 {
        padding-bottom: 30px !important;
    }

    .pb-40 {
        padding-bottom: 40px !important;
    }

    .pb-50 {
        padding-bottom: 50px !important;
    }

    .pb-60 {
        padding-bottom: 60px !important;
    }

    .pb-70 {
        padding-bottom: 70px !important;
    }

    .pb-80 {
        padding-bottom: 80px !important;
    }

    .pb-90 {
        padding-bottom: 90px !important;
    }

    .pb-100 {
        padding-bottom: 100px !important;
    }

    .pb-110 {
        padding-bottom: 110px !important;
    }

    .pb-120 {
        padding-bottom: 120px !important;
    }

    .pb-130 {
        padding-bottom: 130px !important;
    }

    .pb-140 {
        padding-bottom: 140px !important;
    }

    .pb-150 {
        padding-bottom: 150px !important;
    }

    /* padding Right */
    .pr-0 {
        padding-right: 0 !important;
    }

    .pr-15 {
        padding-right: 15px !important;
    }

    .pr-20 {
        padding-right: 20px !important;
    }

    .pr-30 {
        padding-right: 30px !important;
    }

    .pr-50 {
        padding-right: 50px !important;
    }

    .pr-60 {
        padding-right: 60px !important;
    }

    .pr-70 {
        padding-right: 70px !important;
    }

    .pr-100 {
        padding-right: 100px !important;
    }

    /* padding Left */
    .pl-0 {
        padding-left: 0 !important;
    }

    .pl-15 {
        padding-left: 15px !important;
    }

    .pl-20 {
        padding-left: 20px !important;
    }

    .pl-30 {
        padding-left: 30px !important;
    }

    .pl-50 {
        padding-left: 50px !important;
    }

    .pl-60 {
        padding-left: 60px !important;
    }

    .pl-70 {
        padding-left: 70px !important;
    }

    .pl-100 {
        padding-left: 100px !important;
    }

#### Change Color

yellow hats has a number of included colour schemes that you can switch to at any time. To switch colour schemes, simply replace color code in `style.css` with what you need.

    <!-- COLORS -->
    Primary Color   : #21cdc0
    Secondary Color : #0e204d
    Body Color      : #848e9f
    Heading Color   : #1f314f

#### Change Favicon

The main favicon is located in `assets/images/favicon/favicon.png` replace with your own.

    <link href="assets/images/favicon/favicon.png" rel="icon">

#### Change logo

Just edit the `logo-light.png` from the folder `assets/images/logo/` or open `index.html` and you should see the tag there:

    <img src="assets/images/logo/logo-light.png" class="logo-light" alt="logo">

#### Change background

You can use the backgorund image using the Following code:

    <div class="bg-img" >
        <img src="assets/images/background/1.jpg" alt="Background"/>
    </div>

We used class to add backgound to feature , call to action section and etc. you can find this backgorunds in images folder`assets/images/bg`, and you can Find this background in `style.css`.

You can choose between 3 Types of background overlay while creating your section, `bg-overlay`, `bg-overlay-2`,`bg-overlay-3`.

you can change background opacity from `style.css`

#### Change Icons

we use icon fonts with easy control in color and size so feel free to use more than 600 icon , you can check this icon:

- Font Awesome – https://fontawesome.com/v4.7.0/icons/

#### Change Page Title

You can choose between 16 layouts of page title while creating your Pages. Simply adding the page title section to your page and change the page title content with that you need, you can find all page title sections in

    <!-- Page Title #1
    ============================================= -->
    <section class="page-title page-title-layout2 text-center bg-overlay bg-overlay-2">
      <div class="bg-img" >
        <img src="assets/images/page-titles/2.jpg" alt="Background"/>
      </div>
      <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-md-12">
                <h1 class="pagetitle__heading">page title</h1>
            </div><!-- .col-md-12 end -->
        </div><!-- .row end -->
      </div><!-- .container end -->
    </section>

#### Change Heading

You can choose between 3 Types of heading section while creating your Pages. Simply adding the heading section to your section and change heading content with that you need .

    <!-- Heading #1
    ============================================= -->
    <section class="bg-gray">
    	<div class="container">
    		<div class="row">
    			<div class="col-sm-12 col-md-12 col-md-8">
    				<div class="heading">
    					<h2 class="heading__title">....</h2>
    					<p class="heading__desc">...</p>
    				</div><!-- .heading end -->
    			</div><!-- .col-md-8 end -->
    		</div><!-- .row end -->
    	</div><!-- .container end -->
    </section>

#### Section Background & Parallax

#### Add Dark Backgroud to Section:

    <section class="bg-dark">
        <div class="container">

            ...

        </div>
    </section>

#### Add white Background to Section:

    <section class="bg-white">
        <div class="container">

            ...

        </div>
    </section>

#### Add gray Background to Section:

    <section class="bg-gray">
        <div class="container">

            ...

        </div>
    </section>

### Set backround img to Section:

    <section>
        <div class="bg-img">
            <img src="your img path">
        </div>
        <div class="container">

            ...

        </div>
    </section>

### Set backround img overlay to Section:

    <section class="bg-overlay bg-overlay-dark">
        <div class="bg-img">
            <img src="your img path">
        </div>
        <div class="container">

            ...

        </div>
    </section>

### Setting up Parallax Sections:

Make sure your Parallax Images are of enough `Width` & `Height`, preferably `1920x1080` or above.

    <section class="bg-parallax">
        <div class="bg-img">
            <img src="your img path">
        </div>
        <div class="container">

        ...

        </div>
    </section>

#### Carousel

    <section  id="clients1" class="clients clients-1">
         <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-md-12">
                    <div  class="slick-carousel"  data-slick="{"slidesToShow": 3, "slidesToScroll": 3, "arrows": false, "dots": true, "responsive": [ {"breakpoint": 992, "settings": {"slidesToShow": 2}}, {"breakpoint": 767, "settings": {"slidesToShow": 2}}, {"breakpoint": 480, "settings": {"slidesToShow": 1}}]}"">
                        <div class="client">
                             <img class="center-block" src="img path" alt="client">
                        </div>
                        <div class="client">
                             <img class="center-block" src="img path" alt="client">
                        </div>
                        <div class="client">
                             <img class="center-block" src="img path" alt="client">
                        </div>
                        <div class="client">
                             <img class="center-block" src="img path" alt="client">
                        </div>
                        <div class="client">
                             <img class="center-block" src="img path" alt="client">
                        </div>
                        <div class="client">
                             <img class="center-block" src="img path" alt="client">
                        </div>
                    </div>
                </div>
             </div>
         </div>
     </div>

All Carousel has some data attributes which can control carousel form it:

Attributes | Description
--- | ---
slidesToShow="`6`" | Number of carousel items to be show
slidesToScroll="`2`" | Number of carousel items to be show in scroll time
data-autoplay="`false`" | Enable or Disable carousel auto play
arrows="`false`" | Enable or Disable carousel navigation arrows
dots="`false`" | Enable or Disable carousel dots
speed="`3000`" | Speed of transition carousel

Wrap any content inside clients carousel:

#### Credit Files

I've used the following images, icons or other files as listed.

##### JavaScript Plugins

1. jQuery
2. bootstrap
3. counter up
4. slick carousel
5. magnific-popup

##### Icons

1. font awesome

#### Support

###### If you need any help. Feel free to contact me anytime. I will reply in 24 hours. Send a mail from Themeforest Profile.

#### changelog

##### Initial Release V1.0

Released on April 2021.

##### Current Release V1.3

Released on March 2023.

Top