Introducing Medpark - HTML Theme

Licensing Terms: Please be advised, in order to use the theme in a legal manner, you need to purchase a separate license for each domain you are going to use the theme on.

A single license is limited to a single domain/application.

Thank you for purchasing our product! We are very glad that you have decided on our HTML theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the instructions and if you have further questions write us a email hi@theslathemes.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built write us a email.

Modification

To the Top

Medpark has 11 HTML Files:

  • index.html - Home Page
  • error.html - 404 error page
  • blog.html - Blog page with right sidebar
  • blog_post.html - Blog post
  • features.html - Features page include all styled elements for this theme
  • contact.html - Contact page page
  • our_doctors.html - Demonstrations of the doctors
  • services.html - Describe all services
  • single_service.html - Single service page
  • timeline.html - Calendar width all dactor aviabile for appointment

A screen of the Home Page:

theme

The themes includes javascripts files:

  • jQuery Library 1.9.2
  • project.js
  • parsley.js
  • daterangepicker.js
  • jquery.calendario.js
  • jquery.swipebox.js
  • jquery.textPlaceholder.js
  • jquery.twitwble.js

CSS Files and Structure

To the Top

This theme has been implemented as a responsive layout. The full width of the template is fluid for screen mode, 768px for tablet size screen, and for mobile 400px and the smallest one is 300px.

The CSS file is located in the css folder. The css file is registered and included in the "head"..."/head".

CSS file is very good structured and arranged so you can search very easy:

/* line 41, ../sass/lib/base.sass */
.helper-decor > p > b {
  width: 10px;
  height: 105px;
  display: block;
  position: relative;
  left: 10px;
  background: url(../img/header_line.png) 0 -10px repeat-x transparent;
}

/* line 49, ../sass/lib/base.sass */
.left-decor {
  right: auto;
  left: -21px;
}
/* line 52, ../sass/lib/base.sass */
.left-decor > p {
  left: 50px;
  background: #132f54;
}
/* line 56, ../sass/lib/base.sass */
.left-decor > p > b {
  left: 0;
}

/* line 59, ../sass/lib/base.sass */
.logo-box {
  padding: 10.5px;
  height: 126px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: table;
}
/* line 65, ../sass/lib/base.sass */
.logo-box > a {
  display: table-cell;
  vertical-align: middle;
}

/* line 71, ../sass/lib/base.sass */
.main-nav > ul {
  *zoom: 1;
  padding-top: 52.5px;
  margin-bottom: 0;
}
/* line 38, C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.main-nav > ul:after {
  content: "";
  display: table;
  clear: both;
}
/* line 76, ../sass/lib/base.sass */
.main-nav > ul > li {
  float: left;
  margin: 0 10.5px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 42px;
}
/* line 84, ../sass/lib/base.sass */
.main-nav > ul > li:hover > ul {
  display: block;
}
/* line 87, ../sass/lib/base.sass */
.main-nav > ul > li > a {
  padding: 7px 10.5px;
  color: white;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  position: relative;
}
/* line 95, ../sass/lib/base.sass */
.main-nav > ul > li > a:hover {
  background: white;
  color: #132f54;
  -webkit-box-shadow: 0 2px 0 #1c7f88;
  -moz-box-shadow: 0 2px 0 #1c7f88;
  box-shadow: 0 2px 0 #1c7f88;
}
/* line 100, ../sass/lib/base.sass */
.main-nav > ul > li > a:hover + ul {
  display: block;
}
/* line 103, ../sass/lib/base.sass */
.main-nav > ul > li > a:active {
  -webkit-box-shadow: 0 1px 0 #1c7f88;
  -moz-box-shadow: 0 1px 0 #1c7f88;
  box-shadow: 0 1px 0 #1c7f88;
  top: 1px;
  background: white;
  color: #132f54;
}
/* line 109, ../sass/lib/base.sass */
.main-nav > ul > li ul {
  display: none;
  position: absolute;
  top: 42px;
  left: 50%;
  margin-left: -75px;
  background: white;
  width: 150px;
  border-radius: 5px;
  padding-bottom: 10.5px;
  -webkit-box-shadow: 0 3px 0 #939c9a, inset 0 0 0 1px #f1f2e4;
  -moz-box-shadow: 0 3px 0 #939c9a, inset 0 0 0 1px #f1f2e4;
  box-shadow: 0 3px 0 #939c9a, inset 0 0 0 1px #f1f2e4;
  z-index: 100;
}
/* line 122, ../sass/lib/base.sass */
.main-nav > ul > li ul:hover {
  display: block;
}
/* line 125, ../sass/lib/base.sass */
.main-nav > ul > li ul > li {
  text-align: center;
  position: relative;
}
/* line 130, ../sass/lib/base.sass */
.main-nav > ul > li ul > li:hover > ul {
  left: 220px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
/* line 135, ../sass/lib/base.sass */
.main-nav > ul > li ul > li:hover ~ a {
  background: white;
  color: #132f54;
  -webkit-box-shadow: 0 2px 0 #1c7f88;
  -moz-box-shadow: 0 2px 0 #1c7f88;
  box-shadow: 0 2px 0 #1c7f88;
}
/* line 139, ../sass/lib/base.sass */
.main-nav > ul > li ul > li > ul {
  position: absolute;
  left: 75px;
  display: block;
  top: 10.5px;
  z-index: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: left 0.4s ease-out, opacity 0.8s ease-out;
  -moz-transition: left 0.4s ease-out, opacity 0.8s ease-out;
  -o-transition: left 0.4s ease-out, opacity 0.8s ease-out;
  transition: left 0.4s ease-out, opacity 0.8s ease-out;
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* line 152, ../sass/lib/base.sass */
.main-nav > ul > li ul > li > a {
  color: #656565;
  padding-top: 10.5px;
  display: block;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  font-size: 13px;
}
/* line 159, ../sass/lib/base.sass */
.main-nav > ul > li ul > li > a:before {
  content: "\2022";
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  position: relative;
  left: -3px;
  color: transparent;
}
/* line 166, ../sass/lib/base.sass */
.main-nav > ul > li ul > li > a:hover {
  color: #132f54;
}
/* line 169, ../sass/lib/base.sass */
.main-nav > ul > li ul > li > a:hover:before {
  color: #132f54;
  left: -10px;
}
/* line 174, ../sass/lib/base.sass */
.main-nav > ul .current-menu-item > a {
  background: white;
  color: #132f54;
  -webkit-box-shadow: 0 2px 0 #1c7f88;
  -moz-box-shadow: 0 2px 0 #1c7f88;
  box-shadow: 0 2px 0 #1c7f88;
}

                    

Credits and Sources

To the Top

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

Fonts used:

Thank you so much for choosing "Medpark" we hope you will enjoy using it!