Skip to content

Instantly share code, notes, and snippets.

@HeshamGhoniem2020

HeshamGhoniem2020/index.html

Created October 13, 2014 21:08
Show Gist options
  • Save HeshamGhoniem2020/00b1f38401843c1bd6cc to your computer and use it in GitHub Desktop.
Save HeshamGhoniem2020/00b1f38401843c1bd6cc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment