<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="header">
<div class="container">
<a href="#" class="logo">Website</a>
<ul class="nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contacts</a></li>
</ul> <!-- end nav -->
</div> <!-- end container -->
</div> <!-- end header -->
<div class="billboard">
<div class="container">
<h1 class="billboard-intro-big">Create cool websites</h1>
<h2 class="billboard-intro-med">fast with us</h2>
<a href="" class="cta-green">Buy Now!</a>
<a href="" class="cta-trans">Learn More</a>
</div> <!-- end container -->
</div> <!-- end billboard -->
<div class="feature-wht">
<div class="container">
<h1>Present your site in the most beautiful way</h1>
<p>We are the unique set-up, that is ready to challenge and knock out such a global problem as unemployment. Our company gladly helps those, who are ready to learn, to develop and to gain new experience. company unifies people all over the world. Everything we do, we do it for YOU - totally gratuitously and with great enjoyment. We work so that you could work!</p>
<div class="row">
<div class="box-3-col">
<div class="col-3-img" id="img-1">
</div> <!-- end feature-image -->
<h3 class="box-3-title">Responsive Design</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labor. </p>
</div> <!-- end box-3-col -->
<div class="box-3-col">
<div class="col-3-img" id="img-1">
</div> <!-- end feature-image -->
<h3 class="box-3-title">Responsive Design</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labor. </p>
</div> <!-- end box-3-col -->
<div class="box-3-col">
<div class="col-3-img" id="img-1">
</div> <!-- end feature-image -->
<h3 class="box-3-title">Responsive Design</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labor. </p>
</div> <!-- end box-3-col -->
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end feature-wht -->
<div class="feature-gry">
<div class="container">
<div class="row">
<div class="box-3-col">
<h3 class="feat-gry-title">
Cross-Browser Support</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labore et dolore magn.</p>
<a href="#" class="read-more">Read More</a>
</div> <!-- end box-3-col -->
<div class="box-3-col">
<h3 class="feat-gry-title">
Cross-Browser Support</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labore et dolore magn.</p>
<a href="#" class="read-more">Read More</a>
</div> <!-- end box-3-col -->
<div class="box-3-col">
<h3 class="feat-gry-title">
Cross-Browser Support</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labore et dolore magn.</p>
<a href="#" class="read-more">Read More</a>
</div> <!-- end box-3-col -->
</div> <!-- end row -->
<div class="row">
<div class="box-3-col">
<h3 class="feat-gry-title">
Cross-Browser Support</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labore et dolore magn.</p>
<a href="#" class="read-more">Read More</a>
</div> <!-- end box-3-col -->
<div class="box-3-col">
<h3 class="feat-gry-title">
Cross-Browser Support</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labore et dolore magn.</p>
<a href="#" class="read-more">Read More</a>
</div> <!-- end box-3-col -->
<div class="box-3-col">
<h3 class="feat-gry-title">
Cross-Browser Support</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labore et dolore magn.</p>
<a href="#" class="read-more">Read More</a>
</div> <!-- end box-3-col -->
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end feature-gry -->
<div class="feature-wht">
<div class="container">
<div class="row">
<div class="box-3-col">
<img class="feat-ipad" src="http://images.e-shop.gr/images/PER/BIG/PER.903338.jpg" />
</div> <!-- end box-3-col -->
<div class="box-lg-col discover">
<h1>Discover the Advantages</h1>
<p>Lorem ipsum dolor sit amet conse ctetur adiisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<ul class="feat-list">
<li class="feat-info"><a href="">Lorem ipsum dolor sit amet</a></li>
<li class="feat-info"><a href="">Lorem ipsum dolor sit amet</a></li>
<li class="feat-info"><a href="">Lorem ipsum dolor sit amet</a></li>
<li class="feat-info"><a href="">Lorem ipsum dolor sit amet</a></li>
</ul> <!-- end feat-list -->
</div> <!-- end box-lg-col -->
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end feature-wht -->
<div class="row grn-boxes">
<div class="box-3-col" id="grn-lite">
<img src="https://s3.amazonaws.com/launchkey-resources/logo/logo/launchkey-logos_launchkey-icon-white.png"/>
<h3>Your Data in Cloud</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labore et dolore magn.</p>
</div> <!-- box-3-col -->
<div class="box-3-col" id="grn-med">
<img src="https://s3.amazonaws.com/launchkey-resources/logo/logo/launchkey-logos_launchkey-icon-white.png"/>
<h3>Your Data in Cloud</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labore et dolore magn.</p>
</div> <!-- box-3-col -->
<div class="box-3-col" id="grn-dark">
<img src="https://s3.amazonaws.com/launchkey-resources/logo/logo/launchkey-logos_launchkey-icon-white.png"/>
<h3>Your Data in Cloud</h3>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incid idunt ut labore et dolore magn.</p>
</div> <!-- box-3-col -->
</div> <!-- end grn-boxes -->
<div class="blog">
<div class="container">
<h1>From the Blog</h1>
<div class="row">
<div class="box-3-col">
<div class="col-3-img" id="blog-img-1">
</div> <!-- end feature-image -->
<h3 class="box-3-title blog-title">+1 step on the career ladder</h3>
<p>The 20th course of the up-grade program has just finished and 87 participants from 49 countries ...</p>
<ul class="blog-info">
<li><a href="" class="blog-writer">Timmy Jowe</a></li>
<li class="blog-date">5 December 2016</li>
</ul> <!-- end blog info -->
</div> <!-- box-3-col -->
<div class="box-3-col">
<div class="col-3-img" id="blog-img-1">
</div> <!-- end feature-image -->
<h3 class="box-3-title blog-title">+1 step on the career ladder</h3>
<p>The 20th course of the up-grade program has just finished and 87 participants from 49 countries ...</p>
<ul class="blog-info">
<li><a href="" class="blog-writer">Timmy Jowe</a></li>
<li class="blog-date">5 December 2016</li>
</ul> <!-- end blog info -->
</div> <!-- box-3-col -->
<div class="box-3-col">
<div class="col-3-img" id="blog-img-1">
</div> <!-- end feature-image -->
<h3 class="box-3-title blog-title">+1 step on the career ladder</h3>
<p>The 20th course of the up-grade program has just finished and 87 participants from 49 countries ...</p>
<ul class="blog-info">
<li><a href="" class="blog-writer">Timmy Jowe</a></li>
<li class="blog-date">5 December 2016</li>
</ul> <!-- end blog info -->
</div> <!-- box-3-col -->
</div> <!-- end row -->
<a href="" class="cta-green">More Post</a>
</div> <!-- end container -->
</div> <!-- end blog -->
<div class="numbers">
<div class="container">
<div class="row">
<div class="box-4-col">
<img src="http://www.zdraveto.com/zaparka/wp-content/uploads/2016/03/8XK-utW8.png"/>
<h1 class="big-number">258</h1>
<h3>Elit sed do eiusmod tempo</h3>
</div> <!-- end box-4-col -->
<div class="box-4-col">
<img src="http://www.zdraveto.com/zaparka/wp-content/uploads/2016/03/8XK-utW8.png"/>
<h1 class="big-number">258</h1>
<h3>Elit sed do eiusmod tempo</h3>
</div> <!-- end box-4-col -->
<div class="box-4-col">
<img src="http://www.zdraveto.com/zaparka/wp-content/uploads/2016/03/8XK-utW8.png"/>
<h1 class="big-number">258</h1>
<h3>Elit sed do eiusmod tempo</h3>
</div> <!-- end box-4-col -->
<div class="box-4-col">
<img src="http://www.zdraveto.com/zaparka/wp-content/uploads/2016/03/8XK-utW8.png"/>
<h1 class="big-number">258</h1>
<h3>Elit sed do eiusmod tempo</h3>
</div> <!-- end box-4-col -->
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end numbers -->
<div class="packages">
<div class="container">
<h1>Affordable Packages</h1>
<div class="row">
<div class="box-3-col">
<ul class="price-table personal-pkg">
<li class="large">Personal</li>
<li class="price lg-per-pkg"><span class="lg-numb">75</span> /month</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Conse ctetur adipisicing</li>
<li>Elit sed do eiusmod tempor</li>
<li>Incididunt ut labore</li>
<li>Et dolore magna aliqua</li>
<li>Ut enim ad minim veniam</li>
</ul> <!-- end price-table -->
</div> <!-- end box-3-col -->
<div class="box-3-col">
<ul class="price-table">
<li class="large">Business</li>
<li class="price regular"><span class="lg-numb">95</span> /month</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Conse ctetur adipisicing</li>
<li>Elit sed do eiusmod tempor</li>
<li>Incididunt ut labore</li>
<li>Et dolore magna aliqua</li>
<li>Ut enim ad minim veniam</li>
</ul> <!-- end price-table -->
</div> <!-- end box-3-col -->
<div class="box-3-col">
<ul class="price-table">
<li class="large">Ultimate</li>
<li class="price regular"><span class="lg-numb">125</span> /month</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Conse ctetur adipisicing</li>
<li>Elit sed do eiusmod tempor</li>
<li>Incididunt ut labore</li>
<li>Et dolore magna aliqua</li>
<li>Ut enim ad minim veniam</li>
</ul> <!-- end price-table -->
</div> <!-- end box-3-col -->
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end packages -->
<div class="team-members">
<div class="container">
<div class="team-memb-pic">
</div> <!-- end team-memb-pic -->
<p class="member-quote">After graduating from the university, I faced with the problem. There were no company where I had not heard a refusal. My friend advised me company. I have chosen a probation program. I was lucky enough to undergo a training in 'Google' company. That was 3 years ago, and nowadays I am a happy top-manager of this company.</p>
<h3 class="member-name">Federico Blancato, Italy</h3>
<p class="member-role">Designer</p>
</div> <!-- end container -->
</div> <!-- end team-members -->
<div class="footer">
<div class="container">
<h1>Get in Touch With Us</h1>
<h4 class="address">4578 Marmora Road,Glasgow D04 89GR</h4>
<h3>800-2345-678</h3>
<p>Mon-Sat 8:00 am to 8:00 pm</p>
<p class="copyright"><span class="color">© 2016</span> Website. This page was created for <span class="color">practice purposes.</span> Please visit the <a href="http://www.templatemonster.com/demo/53576.html">wegy<a/> theme on <a href="http://www.templatemonster.com/#gref">Template Monster for more information.</a></p>
</div> <!-- end container -->
</div> <!-- end footer -->
* {
padding: 0px;
margin: 0px;
font-family: arial;
}
/* ====== HEADER ====== */
.header {
width: 100%;
background-color: #fff;
height: 80px;
line-height: 70px;
}
.logo {
text-decoration: none;
color: #222;
font-weight: bold;
font-size: 2em;
display: inline-block;
padding: 5px 20px;
}
/* ====== NAV BAR ====== */
.nav {
float: right;
overflow: hidden;
}
.nav li {
float: left;
list-style: none;
}
.nav li a {
display: block;
padding: 5px 25px;
color: #999;
text-decoration: none;
}
.nav .active {
color: #389c60;
}
/* ====== BILLBOARD SECTION ====== */
.billboard {
width: 100%;
height: 600px;
background-image: url("http://cdn-media-4.lifehack.org/wp-content/files/2015/12/06144522/Fotolia_74087814_Subscription_Monthly_M.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
overflow: hidden;
padding: 160px 0px;
box-sizing: border-box;
color: #fff;
position: relative;
}
.billboard-intro-big {
font-size: 3em;
font-family: calibri;
letter-spacing: 10px;
}
.billboard-intro-med {
font-size: 4em;
margin-bottom: 30px;
font-family: calibri;
letter-spacing: 10px;
}
.cta-green {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 10px 40px;
background-color: #389c60;
border: 1px solid #389c60;
border-radius: 20px;
margin: 0px 10px;
}
.cta-trans {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 10px 40px;
border: 1px solid #fff;
border-radius: 20px;
margin: 0px 10px;
}
/* ====== SITE FEATURES ====== */
.feature-wht {
width: 100%;
padding: 30px 0px;
box-sizing: border-box;
text-align: center;
background-color: #fff;
min-height: 1px;
}
.feature-gry {
width: 100%;
padding: 30px 0px;
box-sizing: border-box;
text-align: center;
background-color: #d9d9d9;
min-height: 1px;
text-align: left;
}
.feature-wht .discover {
text-align: left !important;
}
.feature-wht p {
font-size: .9em;
margin: 20px 0px;
color: #555;
line-height: 20px;
}
.col-3-img {
width: 100%;
height: 250px;
margin-bottom: 30px;
}
.box-3-title {
color: #389c60;
}
#img-1 {
background: url("http://media.gettyimages.com/videos/young-creative-man-using-laptop-video-id466117686?s=640x640");
background-size: cover;
}
.feature-image img {
width: 100%;
}
.feat-gry-title {
margin-bottom: 30px;
}
.read-more {
color: #389c60;
text-decoration: none;
display: block;
margin-top: 30px;
}
.feature-gry .row {
margin: 20px 0px !important;
}
.feat-gry-title:before {
content: "";
display: block;
height: 150px;
width: 50px;
background-color: #fff;
background: url("http://www.zdraveto.com/zaparka/wp-content/uploads/2016/03/8XK-utW8.png");
background-size: 100%;
background-repeat: no-repeat;
float: left;
}
.feat-ipad {
width: 100%;
}
.feat-list {
overflow: hidden;
}
.feat-list li {
list-style: none;
}
.feat-list li a {
text-decoration: none;
color: #389c60;
padding: 20px 0px;
display: block;
font-size: 1.5em;
}
.feat-list li a:before {
content: "";
display: block;
height: 50px;
width: 50px;
background-color: #fff;
background: url("http://www.zdraveto.com/zaparka/wp-content/uploads/2016/03/8XK-utW8.png");
background-size: 100%;
background-repeat: no-repeat;
float: left;
margin: -10px 20px 0px 0px;
}
/* ====== GREEN BOXES ====== */
.grn-boxes {
text-align: center;
color: #fff;
}
.grn-boxes img {
height: 60px;
width: 70px;
display: block;
margin: 0 auto 20px auto;
}
.grn-boxes h3 {
margin-bottom: 20px;
}
#grn-lite {
background-color: #3faf6c;
padding: 50px 50px;
}
#grn-med {
background-color: #389c60;
padding: 50px 50px;
}
#grn-dark {
background-color: #328a55;
padding: 50px 50px;
}
/* ====== BLOG CSS ====== */
.blog {
text-align: center;
padding: 100px 0px;
box-sizing: border-box;
}
.blog-title {
color: #444;
}
.blog p {
font-size: .9em;
margin-top: 20px;
color: #999;
}
.blog-info {
margin-top: 20px;
list-style: none;
overflow: hidden;
}
.blog-info li {
display: inline-block;
margin: 0px 10px;
}
.blog-info .blog-writer {
text-decoration: none;
color: #389c60;
}
.blog-date {
color: #389c60;
}
.blog .row {
margin-bottom: 30px !important;
}
#blog-img-1 {
background: url("http://media.gettyimages.com/videos/young-creative-man-using-laptop-video-id466117686?s=640x640");
background-size: cover;
}
/* ====== NUMBERS SECTION ====== */
.numbers {
padding: 80px 0px;
box-sizing: border-box;
min-height: 1px;
background: url("https://static.pexels.com/photos/232/apple-iphone-books-desk.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
}
.numbers img {
height: 100px;
width: 100px;
margin: 0 auto 20px auto;
}
.big-number {
font-size: 4em;
color: #389c60;
margin-bottom: 20px;
}
.numbers h3 {
color: #444;
}
/* ====== PRICING PACKAGES ====== */
.packages {
text-align: center;
padding: 80px 0px;
box-sizing: border-box;
overflow: hidden;
}
.packages h1 {
margin-bottom: 40px;
}
.price-table {
background-color: #f5f5f5;
color: #888;
list-style: none;
}
.price-table li {
padding: 10px 0px;
}
.price-table .large {
padding: 30px 0px;
}
.price-table .price {
padding: 15px 0px;
}
.price-table .regular {
background-color: #389c60;
color: #fff;
}
.price-table .lg-numb {
font-size: 3em;
}
/*====== PERSONAL PACKAGE ======*/
.personal-pkg {
background-color: #389c60;
color: #fff;
}
.lg-per-pkg {
background-color: #f5f5f5;
color: #389c60;
}
/* ====== TEAM MEMBERS ====== */
.team-members {
padding: 100px 0px;
box-sizing: border-box;
text-align: center;
color: #444;
background-color: #f5f5f5;
}
.team-memb-pic {
height: 150px;
width: 150px;
border-radius: 100%;
margin: 0 auto 20px auto;
background: url("http://www.vtsnis.edu.rs/predmeti_2012/web_dizajn/projekti_2016/9_Fotografska_Radnja/img/albumi/portreti/p11.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.member-quote {
font-size: 1.2em;
color: #777;
margin-bottom: 20px;
}
.member-name {
color: #444;
}
.member-role {
color: #389c60;
}
/* ====== FOOTER ====== */
.footer {
text-align: center;
padding: 100px 0px;
box-sizing: border-box;
}
.footer h1 {
margin-bottom: 30px;
color: #444;
}
.footer h4 {
color: #888;
font-size: .9em;
margin-bottom: 20px;
}
.footer h3 {
color: #555;
margin-bottom: 20px;
}
.copyright {
font-size: .8em;
margin-top: 20px;
color: #888;
}
.color {
color: #389c60;
}
.copyright a {
text-decoration: none;
color: #389c60;
}
/* ====== GRID SYSTEM ====== */
.container {
margin: 0 auto;
width: 100%;
max-width: 1200px;
box-sizing: border-box;
}
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
.box-2-col {
float: left;
min-height: 1px;
width: 50%;
background-color: #444;
padding: 12px;
box-sizing: border-box;
}
.box-3-col {
float: left;
min-height: 1px;
width: 33.33%;
padding: 12px;
box-sizing: border-box;
}
.box-4-col {
float: left;
min-height: 1px;
width: 25%;
padding: 12px;
box-sizing: border-box;
}
.box-5-col {
float: left;
min-height: 1px;
width: 20%;
padding: 12px;
box-sizing: border-box;
}
.box-6-col {
float: left;
min-height: 1px;
width: 16.66%;
padding: 12px;
box-sizing: border-box;
}
.box-7-col {
float: left;
min-height: 1px;
width: 14.28%;
padding: 12px;
box-sizing: border-box;
}
.box-lg-col {
float: left;
min-height: 1px;
width: 60%;
padding: 12px;
box-sizing: border-box;
}
