Home > Tips

Metro Style Website Template Free download

With the popularization of windows 8, Metro Style has become the new fashion trend in both web and UI design. Now I want to show a kind of metro style website template. This metro style template contains exact all the elements you want in web design: Navigation, login form, drop-down menu, search form, custom dialog, clock, loading progress bar, calendar, metro style icon, function button, price lists, color panel, video player and some other common website element.

Whats more, all the animation effect is made with css3 such as custom time animation, loading animation and tooltop box animation.

 

 

Next, Ill show the html and css code of each part in the template one by one to help you better understand how to use it.

For better understanding, lets see the basic style for the whole template first:

 

body {
  background-color: #dbdbdb;
}

[class^='icon-']:before {
  font-family: 'icomoon';
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  color: #fff;
}

@font-face {
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot');
  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.mt-20 {
  margin-top: 20px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-60 {
  margin-top: 60px;
}
.mr-10 {
  margin-right: 10px;
}

.fl {
  float: left;
}
.fr {
  float: right;
}
.inline {
  display: inline-block;
}

.fsize20 {
  font-size: 20px;
}
.fsize10 {
  font-size: 10px;
}
.demo {
  width: 950px;
  margin: 40px auto 0;
}
.demo a,
.demo a:hover {
  color: #fff;
  text-decoration: none;

.span-1 {
  width: 320px;
}
.span-2 {
  width: 350px;
  margin: 0 40px;
}
.span-3 {
  width: 200px;
}
.span-4 {
  width: 588px;
  margin-left: 40px;
}
::-webkit-input-placeholder,:-moz-placeholder {
  font-size: 14px;
  font-style: italic;

 

 

 Navigation


 

 

HTML code:

 <div class='nav'>
  <ul class='nav-item clearfix'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Services</a></li>
    <li><a href='#'>Products</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Blog</a></li>
    <li>
      <a href='#'>Shop On-line</a>
      <ul class='nav-sub-item'>
       <li><a href='#'>Videogames</a></li>
       <li><a href='#'>Software</a></li>
       <li><a href='#'>Electronics</a></li>
       <li><a href='#'>Music</a></li>
       <li><a href='#'>Books</a></li>
      </ul>
    </li>
  </ul>
</div> 

 

CSS code:

 .nav-item {
  line-height: 60px;
  background-color: #00aec7;
}
.nav-item > li {
  position: relative;
  float: left;
}
.nav-item > li a {
  display: block;
}
.nav-item > li > a {
  font-size: 19px;
  font-weight: bold;
  padding: 0 31px;
  border-left: 1px solid #3bc1d4;
}
.nav-item > li:first-child > a {
  border-left: none;
}
.nav-item li a:hover,.nav-item > li:hover > a {
  background-color: #006675;
}
/*nav-sub-item*/
.nav-item > li .nav-sub-item {
  display: none;
  position: absolute;
  left: 1px;
  font-size: 14px;
  width: 100%;
  line-height: 40px;
  background-color: #00aec7;
}
.nav-sub-item li a{
  padding-left: 31px;
}
/*drop-down display*/
.nav-item > li:hover .nav-sub-item {
  display: block;
 

 

 

 

 Search Box and Select Box


 

 

HTML code

 < form action='' method='get' accept-charset='utf-8'>
  < !--search-box-->
  < div class='form-item search'>
     < input type='search' name='search' id='search' placeholder='Search'> 
     < button type='button' class='icon-search'> < /button>
  < /div>
  < !--select-box-->
  < div class='select mt-20'>
     < select name='select' class='icon-select'>
       < option value=''> United States< /option>
       < option value=''> Europe< /option>
       < option value=''> Asia Pacific< /option>
       < option value=''> Africa, Middle East, India< /option>
     < /select>
  < /div>
  < div class='select'>
     < div class='select-item'>
       < ul class='select-value'>
        < li> < a href='' title=''> United States< /a> < /li>
        < li> < a href='' title=''> Europe< /a> < /li>
        < li> < a href='' title=''> Asia Pacific< /a> < /li>
        < li> < a href='' title=''> Africa, Middle East, India< /a> < /li>
       < /ul>
     < /div>
  < /div>
< /form>  

 

CSS code:

 /*==drop-down-control==*/
.controls-drop-down {
  height: 362px;
}
.controls-drop-down .form-item {
  position: relative;
  font-size: 14px;
}
/*search-box*/
.search input[type='search'] {
  width: 298px;
  height: 40px;
  border: 10px solid #00aec7;
  text-indent: 5px;
}
/*search-button*/
.search .icon-search {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  border: none;
  background-color: #00aec7;
}
.icon-search:before {
  content: '\7d';
}
/*select-box*/
.select {
  position: relative;
}
.select:after {
  position: absolute;
  top: 25px;
  right: 15px;
  content: '';
  border: 8px solid transparent;
  border-top-color: #00aec7;
}
.select select {
  appearance: none;
  width: 320px;
  height: 60px;
  border: 10px solid #00aec7;
  text-indent: 5px;
}
.select .select-item {
  margin-top: 20px;
  width: 300px;
  height: 40px;
  border: 10px solid #00aec7;
}
.select .select-value {
  line-height: 40px;
  box-shadow: 0 0 5px 1px rgba(0,0,0,.2);
  background-color: #fff;
}
.select-value li {
  margin-bottom: 10px;
}
.select-value a,.select-value a:hover {
  display: block;
  color: #444;
  padding-left: 10px;
}
.select-value li:not(:first-child) a:hover {
  color: #fff;
  background-color: #00aec7;
}
.select-value li:not(:first-child) {
  display: none;
}
.select-value:hover li {
  display: block;

 

 

 

 Tabs

 

 

HTML code:

 <div class='tab-menu mt-40'>
  <div class='tab-menu-container'>
    <div class='tab-1' id='tab-1'>
      <h2><a href='#tab-1' title='Option 1' class='active'>Option 1</a></h2>
      <div class='filters-bar clearfix'>
        <strong># <i class='icon-menu'></i></strong>
        <strong>Title <i class='icon-menu'></i></strong>
        <strong>Status</strong>
        <strong>Price <i class='icon-menu'></i></strong>
      </div>
      <div class='text-columns clearfix'>
        <ul class='nostyle'>
         <li>
              <span>1</span>
              <span>Loremt ipsum</span>
              <span>Deactive</span>
              <span>$0.99</span>
         </li>
         <li class='active'>
              <span>2</span>
              <span>Consectetuer</span>
              <span>Deactive</span>
              <span>$1.99</span>
         </li>
         <li>
              <span>3</span>
              <span>Nonummy</span>
              <span>Deactive</span>
              <span>$0.78</span>
         </li>
         <li>
              <span>4</span>
              <span>Euismod</span>
              <span>Deactive</span>
              <span>$1.99</span>
         </li>
         <li>
              <span>5</span>
              <span>Consequat</span>
              <span>Deactive</span>
              <span>$22.50</span>
         </li>
         <li>
              <span>6</span>
              <span>Lobortis</span>
              <span>Deactive</span>
              <span>$0.99</span>
         </li>
         <li>
              <span>7</span>
              <span>Vulputate velit</span>
              <span>Deactive</span>
              <span>$0.99</span>
         </li> 
        </ul>
      </div>
    </div>
    <div class='tab-2' id='tab-2'>
      <h2><a href='#tab-2' title='Option 2'>Option 2</a></h2>
      <div class='filters-bar clearfix'>
        <strong># <i class='icon-menu'></i></strong>
        <strong>Title <i class='icon-menu'></i></strong>
        <strong>Status</strong>
        <strong>Price <i class='icon-menu'></i></strong>
      </div>
      <div class='text-columns clearfix'>
        <ul class='nostyle'>
         <li>
              <span>1</span>
              <span>Consectetuer</span>
              <span>Deactive</span>
              <span>$1.99</span>
         </li>
         <li>
              <span>2</span>
              <span>Nonummy</span>
              <span>Deactive</span>
              <span>$0.78</span>
         </li>
         <li>
              <span>3</span>
              <span>Loremt ipsum</span>
              <span>Deactive</span>
              <span>$0.99</span>
         </li>
         <li class='active'>
              <span>4</span>
              <span>Consequat</span>
              <span>Deactive</span>
              <span>$22.50</span>
         </li>
         <li>
              <span>5</span>
              <span>Euismod</span>
              <span>Deactive</span>
              <span>$1.99</span>
         </li>
         <li>
              <span>6</span>
              <span>Vulputate velit</span>
              <span>Deactive</span>
              <span>$0.99</span>
         </li>
         <li>
              <span>7</span>
              <span>Lobortis</span>
              <span>Deactive</span>
              <span>$0.99</span>
         </li> 
        </ul>
      </div>
    </div>
  </div>
</div> 

 

CSS code:

 /*tab-menu*/
.tab-menu-container {
  position: relative;
  padding-top: 35px;
  height: 352px;
}
.tab-1,.tab-2 {
  position: absolute;
  width: 588px;
  height: 352px;
}
.tab-1 h2 {
  position: absolute;
  top: -35px;
  left: 0;
}
.tab-2 h2 {
  position: absolute;
  top: -35px;
  left: 140px;
  margin-left: 20px;
}
.tab-1:target, .tab-2:target {
  z-index: 1;
}
.tab-menu h2 {
  padding-left: 10px;
  height: 35px;
  line-height: 35px;
}
.tab-menu h2 a {
  display: inline-block;
  font-size: 18px;
  padding: 0 10px;
  width: 130px;
  background-color: #00aec7;
}
.tab-2 h2 a {
  background-color: #006675;
}
.tab-1:target + .tab-2 h2 a {
  background-color: #00aec7;
}
.tab-1:target h2 a,.tab-2:target h2 a,.tab-menu h2 a:hover {
  background-color: #006675;
}
.filters-bar {
  color: #fff;
  line-height: 40px;
  background-color: #006675;
}
.filters-bar strong:first-child,
.text-columns span:first-child {
  width: 19%;
}
.filters-bar strong,.text-columns span {
  float: left;
  width: 27%;
  text-indent: 20px; 
}
.filters-bar i:before {
  font-size: 14px;
}
.text-columns {
  padding-bottom: 20px;
  background-color: #fff;
}
.text-columns li {
  margin: 10px 0;
  height: 30px;
  line-height: 30px;
}
.text-columns li:hover,.text-columns .active {
  color: #fff;
  background-color: #00aec7;
}  

 

 

                                                          

 

 

 

 Terms of Use

This template is created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the template and then edit it for their own use. If you are interested in this template, please feel free to download it. If you have problem understanding or editing the template, please feel free to contact our support team (support@slicemaker.com) for help.

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0