HeshamGhoniem2020/index.html

## index.html
<!DOCTYPE html >
<html lang="us">
    <head>
        <title>
            Gerry Clutterbuck interactive designer
        </title>
        <link rel="stylesheet" href="css/main.css">
        <meta charset="utf-8">

        <!--[if lt IE 9]>
<script src="js/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
    </head>
    <body>
        <!------------------------------ HEADER START -------------------------->
        <header>
            <h1 class="site-title">Gerry Clutterbuck <br> <span>interactive designer</span></h1>
            <nav>
                <ul class="site-nav">
                    <li class="bg-orange"><a href="#">home</a></li>
                    <li class="bg-purple"><a href="#">about</a></li>
                    <li class="bg-yellow"><a href="#">services</a></li>
                    <li class="bg-green"><a href="#">blog</a></li>
                    <li class="bg-blue"><a href="#">contact</a></li>
                </ul>
            </nav>
        </header>
        <!------------------------------ HEADER END -------------------------->


        <!------------------------------ SITE CONTENT START -------------------------->
        <div class="warper">
            <section class="content-slider">
                <a href="#" class="slider-prev"></a>
                <a href="#" class="slider-next"></a>
                <ul class="nav-bulltes">
                    <li class="active"><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
                <div class="web-design-services">
                    <h2>Web Design Services</h2>
                    <p>Gerry Clutterbuck has been designing professional websites for over a decade. Learn more about how he can help your business find the online presence it deserves.</p>
                    <a href="#" class="slider-button bg-orange"> Click Here To Learn More </a>
                </div>
                <img src="imgs/portfolio-pieces.jpg" alt="web design services">
            </section>

            <section class="main-content">
                <div class="coulmn-half bg-green">
                    <img src="imgs/mointer.png" alt="Web & Graphic Design">
                    <h2><a href="#">Web &amp; Graphic Design</a></h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
                    <a href="#" class="read-more"><p>Read more &gt; &gt; </p></a>

                </div>

                <div class="coulmn-half bg-dark-green">
                    <img src="imgs/video-camera.png" alt="Video Production">
                    <h2><a href="#">Video Production</a></h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam  </p>
                    <a href="#" class="read-more"><p>Read more &gt; &gt; </p></a>
                </div>
            </section>

            <section class="footer clearfixAutoprefixer ">
                <div class="one-three-half from-blog">
                    <h2>From The Blog</h2>
                    <ul>
                        <li><a href="#">Flat Design - Here To Stay &#63; </a></li>
                        <li><a href="#"> Determining  Your Audience </a></li>
                        <li><a href="#">Han Shot First</a></li>
                    </ul>
                </div>
                <div class="one-three-half connect-with-me">
                   <h2>Connect With Me </h2>
                    <a href=""><img src="imgs/facebook.png" alt="FaceBook"></img></a>
                <a href=""><img src="imgs/twitter.png" alt="twitter"></img></a>
            <a href=""><img src="imgs/google-plus.png" alt="Google Plus"></img></a>
        <a href=""><img src="imgs/youtube.png" alt="YouTube"></img></a>
    </div>
<div class="one-three-half registeration-from ">
    <h2>Register For Updates </h2>
    <form action="" method="get">
        <input type="text" id="username" name="username" placeholder="name">
        <input type="email" id="email" name="email" placeholder="email">
        <button class="bg-yellow register-button"><p>sign me up</p></button>
    </form>
</div>
</section>
</div>
<!------------------------------ SITE CONTENT END -------------------------->
</body>
</html>

## style.css
@import url(normalize.css);
@import url(http://fonts.googleapis.com/css?family=Acme|Sintony:400,700);

body {
    background-color: #dfdfdf;
    font-family: 'Sintony' , sans-serif;
    font-size: 14px;
}

h1,
h2 {
    font-family: 'Acme' , sans-serif;
}

.bg-orange {
    background-color: #f26c4e;
}

.bg-orange:hover {
    background-color: #fd856a;
}

.bg-purple {
    background-color: #cf6baa;
}

.site-nav .bg-purple:hover {
    background-color: #df82bd;
}

.bg-yellow {
    background-color: #f2c24d;
}

.site-nav .bg-yellow:hover {
    background-color: #f9cd63;
}

.bg-green {
    background-color: #a3d178;
}

.site-nav .bg-green:hover {
    background-color: #b5e08d;
}

.bg-dark-green {
    background-color: #8ebe5f;
}

.bg-blue {
    background-color: #78ccd0;
}

.site-nav .bg-blue:hover {
    background-color: #8cd7db;
}

.bg-orange,
.site-nav .bg-purple,
.site-nav .bg-yellow,
.site-nav .bg-green,
.site-nav .bg-blue {
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

/* ------------------------ HEADER START --------------------------- */

.site-title {
    width: 100%;
    text-align: center;
    font-size: 48px;
    font-weight: 400;
    color: #868686;
    line-height: 40px;
    margin-top: 40px;
    margin-bottom: 30px;
    padding: 0;
}

.site-title span {
    font-size: 24px;
    letter-spacing: 5px;
}

nav {
    width: 100%;
    background-color: #cdcdcd;
    height: 70px;
    margin-bottom: 4px;
}

.site-nav {
    list-style: none;
    font-size: 18px;
    padding-left: 0px;
    width: 1000px;
    margin: 0 auto;
    position: relative;
    left: -4px;
}

.site-nav li {
    width: 150px;
    height: 70px;
    float: left;
    border-left: 5px solid #dfdfdf;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.site-nav li:last-child {
    border-right: 5px solid #dfdfdf;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.site-nav a {
    -webkit-text-decoration: none;
    -moz-text-decoration: none;
    -ms-text-decoration: none;
    -o-text-decoration: none;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
    position: absolute;
    width: 150px;
    height: 70px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 24px;
    text-align: center;
}

.site-nav a:before {
    content: ' ';
    position: absolute;
    left: -10px;
    top: 29px;
    width: 10px;
    height: 10px;
    border: 3px solid #dfdfdf;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    background-color: #f26c4e;
}

.site-nav li:last-child a:after {
    content: ' ';
    position: absolute;
    right: 0px;
    top: 29px;
    width: 10px;
    height: 10px;
    border: 3px solid #dfdfdf;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    background-color: #f26c4e;
}

/* ------------------------ HEADER END --------------------------- */

.warper {
    width: 1000px;
    margin: auto;
}

/* ------------------------ CONTENT SLIDER START --------------------------- */

.content-slider {
    position: relative;
    background-color: #ffffff;
    height: 320px;
}

.slider-prev,
.slider-next {
    position: absolute;
    top: 131px;
    width: 53px;
    height: 53px;
}

.slider-prev {
    background: url(../imgs/prev.png) no-repeat;
    left: -10px;
}

.slider-next {
    background: url(../imgs/next.png) no-repeat;
    right: -10px;
}

.nav-bulltes {
    list-style: none;
    position: absolute;
    bottom: 10px;
    left: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
}

.nav-bulltes li {
    width: 10px;
    height: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    background-color: #d9d9d9;
    float: left;
    margin-right: 10px;
}

.nav-bulltes li.active {
    background-color: #f26c4e;
}

.nav-bulltes a {
    position: absolute;
    width: 10px;
    height: 10px;
}

.web-design-services {
    float: left;
    width: 315px;
    margin: 60px 0 0 90px;
}

.web-design-services h2 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #f26c4e;
    font-size: 24px;
    font-family: Sintony;
}

.web-design-services p {
    margin: 0 0 20 0;
    color: #cecece;
}

.slider-button {
    display: inline-block;
    padding: 20px 50px;
    -webkit-text-decoration: none;
    -moz-text-decoration: none;
    -ms-text-decoration: none;
    -o-text-decoration: none;
    text-decoration: none;
    color: #ffffff;
    font-size: 18px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

.content-slider img {
    position: absolute;
    bottom: 0;
    right: 90px;
}

/* ------------------------ CONTENT SLIDER END --------------------------- */

/* ------------------------ Main Content START --------------------------- */

.coulmn-half {
    display: table-cell;
    width: 50%;
    padding: 40px;
}

.main-content {
    display: table;
}

.coulmn-half img {
    display: block;
    margin: auto;
    padding-bottom: 30px;
}

.coulmn-half h2 {
    text-align: center;
    margin-bottom: 25px;
    margin-top: 0;
}

.coulmn-half h2 a {
    font-size: 30px;
    color: #ffffff;
    -webkit-text-decoration: none;
    -moz-text-decoration: none;
    -ms-text-decoration: none;
    -o-text-decoration: none;
    text-decoration: none;
    font-weight: 400;
}

.coulmn-half p {
    color: #ffffff;
}

.read-more {
    -webkit-text-decoration: none;
    -moz-text-decoration: none;
    -ms-text-decoration: none;
    -o-text-decoration: none;
    text-decoration: none;
    font-weight: 700;
}

.read-more:hover {
    -webkit-text-decoration: underline;
    -moz-text-decoration: underline;
    -ms-text-decoration: underline;
    -o-text-decoration: underline;
    text-decoration: underline;
    color: #ffffff;
}

.read-more:active {
    -webkit-text-decoration: none;
    -moz-text-decoration: none;
    -ms-text-decoration: none;
    -o-text-decoration: none;
    text-decoration: none;
    font-size: 12px;
}

/* ------------------------ Main Content END --------------------------- */

/* ------------------------ FOOTER START --------------------------- */

.footer {
    background-color: #ededed;
    width: 100%;
}

.one-three-half {
    float: left;
    width: 33.333%;
    padding-left: 40px;
    padding-top: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.from-blog h2,
.connect-with-me h2,
.registeration-from h2 {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    color: #858585;
}

.from-blog ul {
    color: #99c86c;
    padding-left: 20px;
}

.from-blog li {
    padding-top: 20px;
    font-weight: 700;
}

.from-blog a {
    color: #5eb9bd;
    -webkit-text-decoration: none;
    -moz-text-decoration: none;
    -ms-text-decoration: none;
    -o-text-decoration: none;
    text-decoration: none;
}

.from-blog a:hover {
    color: #5eb9bd;
    -webkit-text-decoration: underline;
    -moz-text-decoration: underline;
    -ms-text-decoration: underline;
    -o-text-decoration: underline;
    text-decoration: underline;
}

.connect-with-me a {
    display: block;
    float: left;
    margin: 20px 10px 0 0;
}

.registeration-from {
    background-color: #f26c4e;
    padding-left: 40px;
}

.registeration-from h2 {
    color: #ffffff;
    margin-bottom: 15px;
}

.registeration-from input {
    height: 45px;
    width: 235px;
    margin-bottom: 15px;
    padding-left: 15px;
    font-size: 18px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    color: #858585;
}

.register-button {
    height: 45px;
    width: 235px;
    border: 1px solid #f2c24d;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 50px;
}

.register-button p {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}

.one-three-half:last-child {
    float: right;
}

/* ------------------------ FOOTER END --------------------------- */

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
	<!DOCTYPE html >
	<html lang="us">
	<head>
	<title>
	Gerry Clutterbuck interactive designer
	</title>
	<link rel="stylesheet" href="css/main.css">
	<meta charset="utf-8">

	<!--[if lt IE 9]>
	<script src="js/html5shiv/dist/html5shiv.js"></script>
	<![endif]-->
	</head>
	<body>
	<!------------------------------ HEADER START -------------------------->
	<header>
	<h1 class="site-title">Gerry Clutterbuck <br> <span>interactive designer</span></h1>
	<nav>
	<ul class="site-nav">
	<li class="bg-orange"><a href="#">home</a></li>
	<li class="bg-purple"><a href="#">about</a></li>
	<li class="bg-yellow"><a href="#">services</a></li>
	<li class="bg-green"><a href="#">blog</a></li>
	<li class="bg-blue"><a href="#">contact</a></li>
	</ul>
	</nav>
	</header>
	<!------------------------------ HEADER END -------------------------->


	<!------------------------------ SITE CONTENT START -------------------------->
	<div class="warper">
	<section class="content-slider">
	<a href="#" class="slider-prev"></a>
	<a href="#" class="slider-next"></a>
	<ul class="nav-bulltes">
	<li class="active"><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	</ul>
	<div class="web-design-services">
	<h2>Web Design Services</h2>
	<p>Gerry Clutterbuck has been designing professional websites for over a decade. Learn more about how he can help your business find the online presence it deserves.</p>
	<a href="#" class="slider-button bg-orange"> Click Here To Learn More </a>
	</div>
	<img src="imgs/portfolio-pieces.jpg" alt="web design services">
	</section>

	<section class="main-content">
	<div class="coulmn-half bg-green">
	<img src="imgs/mointer.png" alt="Web & Graphic Design">
	<h2><a href="#">Web & Graphic Design</a></h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
	<a href="#" class="read-more"><p>Read more > > </p></a>

	</div>

	<div class="coulmn-half bg-dark-green">
	<img src="imgs/video-camera.png" alt="Video Production">
	<h2><a href="#">Video Production</a></h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
	<a href="#" class="read-more"><p>Read more > > </p></a>
	</div>
	</section>

	<section class="footer clearfixAutoprefixer ">
	<div class="one-three-half from-blog">
	<h2>From The Blog</h2>
	<ul>
	<li><a href="#">Flat Design - Here To Stay ? </a></li>
	<li><a href="#"> Determining Your Audience </a></li>
	<li><a href="#">Han Shot First</a></li>
	</ul>
	</div>
	<div class="one-three-half connect-with-me">
	<h2>Connect With Me </h2>
	<a href=""><img src="imgs/facebook.png" alt="FaceBook"></img></a>
	<a href=""><img src="imgs/twitter.png" alt="twitter"></img></a>
	<a href=""><img src="imgs/google-plus.png" alt="Google Plus"></img></a>
	<a href=""><img src="imgs/youtube.png" alt="YouTube"></img></a>
	</div>
	<div class="one-three-half registeration-from ">
	<h2>Register For Updates </h2>
	<form action="" method="get">
	<input type="text" id="username" name="username" placeholder="name">
	<input type="email" id="email" name="email" placeholder="email">
	<button class="bg-yellow register-button"><p>sign me up</p></button>
	</form>
	</div>
	</section>
	</div>
	<!------------------------------ SITE CONTENT END -------------------------->
	</body>
	</html>
	@import url(normalize.css);
	@import url(http://fonts.googleapis.com/css?family=Acme\|Sintony:400,700);

	body {
	background-color: #dfdfdf;
	font-family: 'Sintony' , sans-serif;
	font-size: 14px;
	}

	h1,
	h2 {
	font-family: 'Acme' , sans-serif;
	}

	.bg-orange {
	background-color: #f26c4e;
	}

	.bg-orange:hover {
	background-color: #fd856a;
	}

	.bg-purple {
	background-color: #cf6baa;
	}

	.site-nav .bg-purple:hover {
	background-color: #df82bd;
	}

	.bg-yellow {
	background-color: #f2c24d;
	}

	.site-nav .bg-yellow:hover {
	background-color: #f9cd63;
	}

	.bg-green {
	background-color: #a3d178;
	}

	.site-nav .bg-green:hover {
	background-color: #b5e08d;
	}

	.bg-dark-green {
	background-color: #8ebe5f;
	}

	.bg-blue {
	background-color: #78ccd0;
	}

	.site-nav .bg-blue:hover {
	background-color: #8cd7db;
	}

	.bg-orange,
	.site-nav .bg-purple,
	.site-nav .bg-yellow,
	.site-nav .bg-green,
	.site-nav .bg-blue {
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
	}

	/* ------------------------ HEADER START --------------------------- */

	.site-title {
	width: 100%;
	text-align: center;
	font-size: 48px;
	font-weight: 400;
	color: #868686;
	line-height: 40px;
	margin-top: 40px;
	margin-bottom: 30px;
	padding: 0;
	}

	.site-title span {
	font-size: 24px;
	letter-spacing: 5px;
	}

	nav {
	width: 100%;
	background-color: #cdcdcd;
	height: 70px;
	margin-bottom: 4px;
	}

	.site-nav {
	list-style: none;
	font-size: 18px;
	padding-left: 0px;
	width: 1000px;
	margin: 0 auto;
	position: relative;
	left: -4px;
	}

	.site-nav li {
	width: 150px;
	height: 70px;
	float: left;
	border-left: 5px solid #dfdfdf;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	}

	.site-nav li:last-child {
	border-right: 5px solid #dfdfdf;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	}

	.site-nav a {
	-webkit-text-decoration: none;
	-moz-text-decoration: none;
	-ms-text-decoration: none;
	-o-text-decoration: none;
	text-decoration: none;
	text-transform: uppercase;
	color: #ffffff;
	position: absolute;
	width: 150px;
	height: 70px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 24px;
	text-align: center;
	}

	.site-nav a:before {
	content: ' ';
	position: absolute;
	left: -10px;
	top: 29px;
	width: 10px;
	height: 10px;
	border: 3px solid #dfdfdf;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	background-color: #f26c4e;
	}

	.site-nav li:last-child a:after {
	content: ' ';
	position: absolute;
	right: 0px;
	top: 29px;
	width: 10px;
	height: 10px;
	border: 3px solid #dfdfdf;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	background-color: #f26c4e;
	}

	/* ------------------------ HEADER END --------------------------- */

	.warper {
	width: 1000px;
	margin: auto;
	}

	/* ------------------------ CONTENT SLIDER START --------------------------- */

	.content-slider {
	position: relative;
	background-color: #ffffff;
	height: 320px;
	}

	.slider-prev,
	.slider-next {
	position: absolute;
	top: 131px;
	width: 53px;
	height: 53px;
	}

	.slider-prev {
	background: url(../imgs/prev.png) no-repeat;
	left: -10px;
	}

	.slider-next {
	background: url(../imgs/next.png) no-repeat;
	right: -10px;
	}

	.nav-bulltes {
	list-style: none;
	position: absolute;
	bottom: 10px;
	left: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	}

	.nav-bulltes li {
	width: 10px;
	height: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	background-color: #d9d9d9;
	float: left;
	margin-right: 10px;
	}

	.nav-bulltes li.active {
	background-color: #f26c4e;
	}

	.nav-bulltes a {
	position: absolute;
	width: 10px;
	height: 10px;
	}

	.web-design-services {
	float: left;
	width: 315px;
	margin: 60px 0 0 90px;
	}

	.web-design-services h2 {
	margin-top: 0;
	margin-bottom: 25px;
	color: #f26c4e;
	font-size: 24px;
	font-family: Sintony;
	}

	.web-design-services p {
	margin: 0 0 20 0;
	color: #cecece;
	}

	.slider-button {
	display: inline-block;
	padding: 20px 50px;
	-webkit-text-decoration: none;
	-moz-text-decoration: none;
	-ms-text-decoration: none;
	-o-text-decoration: none;
	text-decoration: none;
	color: #ffffff;
	font-size: 18px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	}

	.content-slider img {
	position: absolute;
	bottom: 0;
	right: 90px;
	}

	/* ------------------------ CONTENT SLIDER END --------------------------- */

	/* ------------------------ Main Content START --------------------------- */

	.coulmn-half {
	display: table-cell;
	width: 50%;
	padding: 40px;
	}

	.main-content {
	display: table;
	}

	.coulmn-half img {
	display: block;
	margin: auto;
	padding-bottom: 30px;
	}

	.coulmn-half h2 {
	text-align: center;
	margin-bottom: 25px;
	margin-top: 0;
	}

	.coulmn-half h2 a {
	font-size: 30px;
	color: #ffffff;
	-webkit-text-decoration: none;
	-moz-text-decoration: none;
	-ms-text-decoration: none;
	-o-text-decoration: none;
	text-decoration: none;
	font-weight: 400;
	}

	.coulmn-half p {
	color: #ffffff;
	}

	.read-more {
	-webkit-text-decoration: none;
	-moz-text-decoration: none;
	-ms-text-decoration: none;
	-o-text-decoration: none;
	text-decoration: none;
	font-weight: 700;
	}

	.read-more:hover {
	-webkit-text-decoration: underline;
	-moz-text-decoration: underline;
	-ms-text-decoration: underline;
	-o-text-decoration: underline;
	text-decoration: underline;
	color: #ffffff;
	}

	.read-more:active {
	-webkit-text-decoration: none;
	-moz-text-decoration: none;
	-ms-text-decoration: none;
	-o-text-decoration: none;
	text-decoration: none;
	font-size: 12px;
	}

	/* ------------------------ Main Content END --------------------------- */

	/* ------------------------ FOOTER START --------------------------- */

	.footer {
	background-color: #ededed;
	width: 100%;
	}

	.one-three-half {
	float: left;
	width: 33.333%;
	padding-left: 40px;
	padding-top: 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	}

	.from-blog h2,
	.connect-with-me h2,
	.registeration-from h2 {
	font-size: 24px;
	font-weight: 400;
	margin: 0;
	color: #858585;
	}

	.from-blog ul {
	color: #99c86c;
	padding-left: 20px;
	}

	.from-blog li {
	padding-top: 20px;
	font-weight: 700;
	}

	.from-blog a {
	color: #5eb9bd;
	-webkit-text-decoration: none;
	-moz-text-decoration: none;
	-ms-text-decoration: none;
	-o-text-decoration: none;
	text-decoration: none;
	}

	.from-blog a:hover {
	color: #5eb9bd;
	-webkit-text-decoration: underline;
	-moz-text-decoration: underline;
	-ms-text-decoration: underline;
	-o-text-decoration: underline;
	text-decoration: underline;
	}

	.connect-with-me a {
	display: block;
	float: left;
	margin: 20px 10px 0 0;
	}

	.registeration-from {
	background-color: #f26c4e;
	padding-left: 40px;
	}

	.registeration-from h2 {
	color: #ffffff;
	margin-bottom: 15px;
	}

	.registeration-from input {
	height: 45px;
	width: 235px;
	margin-bottom: 15px;
	padding-left: 15px;
	font-size: 18px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	color: #858585;
	}

	.register-button {
	height: 45px;
	width: 235px;
	border: 1px solid #f2c24d;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	margin-bottom: 50px;
	}

	.register-button p {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
	}

	.one-three-half:last-child {
	float: right;
	}

	/* ------------------------ FOOTER END --------------------------- */

	.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}

	.clearfix {
	display: inline-block;
	}

	html[xmlns] .clearfix {
	display: block;
	}

	* html .clearfix {
	height: 1%;
	}