Skip to content

Instantly share code, notes, and snippets.

@HeshamGhoniem2020

HeshamGhoniem2020/index.html

Last active August 29, 2015 13:56
Show Gist options
  • Save HeshamGhoniem2020/9011806 to your computer and use it in GitHub Desktop.
Save HeshamGhoniem2020/9011806 to your computer and use it in GitHub Desktop.
Download ZIP
Mode Theme
Raw
index.html
<html>
<head>
<title>Mode Theme</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<!-- ********************************************
* Header area start
********************************************************* -->
<header>
<!-- haeder overall wrap -->
<div class="header_wrap">
<!-- Site logo start -->
<div class="site_logo">
<a href="#"> <img src="imgs/Logo.png" alt="Mode"></a>
</div>
<!-- Site logo end -->
<!-- Navbar start -->
<nav class="nav_list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Showcase</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Navbar end -->
</div>
</header>
<!-- ********************************************
* Header area end
********************************************************* -->
<!-- overall content area wrapper -->
<div class="content_wrap">
<!-- ********************************************
* Content area start
********************************************************* -->
<!-- Content introduction area start -->
<div class="content_intro">
<div class="content_intro_heading">
<p class="content_intro_p1">easy to use, customizable, affordable & exclusively designed</p>
<p class="content_intro_p2"> premium WordPress themes</p>
</div>
<div class="content_intro_request_line">
<a href="#">
<div class="content_intro_request">
<p>request our services</p>
</div>
</a>
</div>
<div class="content_intro_gallery">
<img src="imgs/content-intro.jpg" alt="Mode work sample">
</div>
</div>
<!-- Content introduction area end -->
<!-- Content 2 rows start -->
<div class="content_rows">
<!-- top content row start -->
<div class="content_row_1">
<div class="content_row_box" >
<img class="content_row_img" src="imgs/Social-medie-icon.png" alt="Social Media Integration">
<div class="content_row_text">
<h4>Social Media Integration</h4>
<p>Our themes are easily customizable, widget ready, WC3 compliant, cross browser compatible.</p>
</div>
</div>
<div class="content_row_box">
<img class="content_row_img" src="imgs/Custom-development-Icon.png" alt="custom development">
<div class="content_row_text">
<h4>custom development</h4>
<p>We also provide custom design and development to create a website that fits your exact needs. Get in touch for a quote!</p>
</div>
</div>
<div class="content_row_box">
<img class="content_row_img" src="imgs/What-you-get-icon.png" alt="what you get">
<div class="content_row_text">
<h4>what you get</h4>
<p>New themes on a monthly basis, great support, unique functionality and Photoshop files.</p>
</div>
</div>
</div>
<!-- top content row end -->
<!-- bottom content row start -->
<div class="content_row_2">
<div class="content_row_box">
<img class="content_row_img" src="imgs/Social-Media-Icon-2.png" alt="Social Media Integration">
<div class="content_row_text">
<h4>Social Media Integration</h4>
<p>Our themes are easily customizable, widget ready, WC3 compliant, cross browser compatible.</p>
</div>
</div>
<div class="content_row_box">
<img class="content_row_img" src="imgs/Custom-development-Icon.png" alt="custom development">
<div class="content_row_text">
<h4>custom development</h4>
<p>We also provide custom design and development to create a website that fits your exact needs. Get in touch for a quote!</p>
</div>
</div>
<div class="content_row_box">
<img class="content_row_img" src="imgs/What-you-get-icon.png" alt="what you get">
<div class="content_row_text">
<h4>what you get</h4>
<p>New themes on a monthly basis, great support, unique functionality and Photoshop files.</p>
</div>
</div>
</div>
<!-- bottom content row end -->
</div>
<!-- Content 2 rows end -->
</div>
<!-- ********************************************
* Content area end
********************************************************* -->
<!-- ********************************************
* Footer area start
********************************************************* -->
<div class="footer_wrap">
<!-- Recent , Latest & social area start -->
<div class="recent_latest_social_wrap">
<!-- Recent , Latest & social area -->
<div class="recent_latest_social">
<!-- Recent blog entries start -->
<div class="recent_blog">
<!--Recent blog entries heading start -->
<div class="recent_blog_heading">
<img src="imgs/recent-RSS-icon.png" alt="recent blog entries">
<h3>recent blog entries</h3>
</div>
<!--Recent blog entries heading end -->
<!-- 1st blog entry start -->
<div class="recent_blog_entry">
<a href="#"> <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5></a>
<div class="recent_latest_date">
<img src="imgs/clock.png" alt="entry date">
<p>December 25, 2012</p>
</div>
<div class="recent_paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at lectus ac purus accumsan sagittis ut vel sem. Duis eu lorem massa, ut eleifend felis. Duis sit amet lacus velit.</p>
</div>
</div>
<!-- 1st blog entry end -->
<!-- 2nd blog entry start -->
<div class="recent_blog_entry">
<a href="#"> <h5>Aenean molestie ultricies lorem, eget blandit</h5></a>
<div class="recent_latest_date">
<img src="imgs/clock.png" alt="entry date">
<p>June 12, 2012</p>
</div>
<div class="recent_paragraph">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur accumsan, dui in dapibus condimentum, diam quam sagittis nisi, eget lacinia quam lacus ut odio.</p>
</div>
</div>
<!-- 2nd blog entry end -->
<!-- 3rd blog entry start -->
<div class="recent_blog_entry">
<a href="#"> <h5>Aliquam et nibh lorem, a dignissim velit</h5></a>
<div class="recent_latest_date">
<img src="imgs/clock.png" alt="entry date">
<p>May 11, 2012</p>
</div>
<div class="recent_paragraph">
<p>Curabitur non turpis dolor. Suspendisse vel lacus in metus molestie venenatis at eget orci. Maecenas nunc ipsum, faucibus eu facilisis nec, ullamcorper at augue.</p>
</div>
</div>
<!-- 3rd blog entry end -->
</div>
<!-- Recent blog entries end -->
<!-- Latest tweets & Social Networks links start-->
<!-- latest tweets & social networks links wraper -->
<div class="latest_social">
<!-- latest tweets haeding start -->
<div class="latest_heading">
<img src="imgs/icon-twitter.png" alt="latest tweets">
<h3>latest tweets</h3>
</div>
<!-- latest tweets haeding end -->
<!-- Latest tweets start -->
<!-- 1st tweet start -->
<div class="latest_tweets">
<div class="tweet_paragraph">
<p>Kuwait moves to ban digital camera use in public<a href="#"> http://is.gd/hF862</a></p>
</div>
<div class="recent_latest_date">
<img src="imgs/clock.png" alt="tweet time">
<p>3 Minutes Ago</p>
</div>
</div>
<!-- 1st tweet end -->
<!-- 2nd tweet start -->
<div class="latest_tweets">
<div class="tweet_paragraph">
<p>RT <a href="#">@MigrantRights</a>: Migrant Workers under the “Kafala” System in the GCC
<a href="#">http://is.gd/hEVcV</a> <a href="#">#MigrantRights</a></p>
</div>
<div class="recent_latest_date">
<img src="imgs/clock.png" alt="tweet time">
<p>About 1 Hour Ago</p>
</div>
</div>
<!-- 2nd tweet end -->
<!-- 3rd tweet start -->
<div class="latest_tweets">
<div class="tweet_paragraph">
<p>Iran: crackdown on labor activists intensifies ahead of subsidy cuts <a href="#">http://is.gd/hBV22</a>
<a href="#">#IranElection</a></p> </div>
<div class="recent_latest_date">
<img src="imgs/clock.png" alt="tweet time">
<p>About 22 Hours Ago</p>
</div>
</div>
<!-- 3rd tweet end -->
<!-- 4th tweet start -->
<div class="latest_tweets">
<div class="tweet_paragraph">
<p>RT @MigrantRights: Migrant Workers under the “Kafala” System in the GCC <a href="#">http://is.gd/hEVcV</a>
<a href="#">#MigrantRights</a></p>
</div>
<div class="recent_latest_date">
<img src="imgs/clock.png" alt="tweet time">
<p>November 22, 2012 @ 9:12 AM </p>
</div>
</div>
<!-- 4th tweet end -->
<!-- 5th tweet start -->
<div class="latest_tweets">
<div class="tweet_paragraph">
<p>Iran: crackdown on labor activists intensifies ahead of subsidy cuts <a href="#">http://is.gd/hBV22</a>
<a href="#">#IranElection</a></p>
</div>
<div class="recent_latest_date">
<img src="imgs/clock.png" alt="tweet time">
<p>November 22, 2010 @ 5:45 AM</p>
</div>
</div>
<!-- 5th tweet end -->
<!-- Latest tweets end -->
<!-- Social networks links start -->
<div class="social_links">
<div class="social_img"><a href="#"><img src="imgs/Facebook.png" alt="Facebook"></a></div>
<div class="social_img"><a href="#"><img src="imgs/Twitter.png" alt="Twitter"></a></div>
<div class="social_img"><a href="#"><img src="imgs/Flickr.png" alt="Flickr"></a></div>
<div class="social_img"><a href="#"><img src="imgs/Feedburner.png" alt="Feedburner"></a></div>
</div>
<!-- Social networks links end -->
</div>
<!-- Latest tweets & Social Networks links end-->
</div>
<!-- Recent , Latest & social area end -->
</div>
<!-- Subscribe to mail start -->
<div class="subscribe_mail">
<h3 class="Subscribe_title">subscribe to our mailing list</h3>
<div class="Subscribe_form">
<form action="index.html" method="get">
<input type="text" placeholder="your name" id="name" name="name">
<input type="text" placeholder="your email" id="mail" name="mail">
<div class="Subscribe_submit_box">
<input class="Subscribe_submit" type="submit" value="submit">
</div>
</form>
</div>
</div>
<!-- Subscribe to mail end -->
</div>
<!-- footer credit start -->
<div class="footer_credit">
<p>
&copy; 2012 LALITHMUTHALI.com <span>|</span> <a href="#">Terms & Conditions</a> <span>|</span> <a href="#">sitemap</a> <span>|</span> powered by <a href="#">wordpress</a>
</p>
</div>
<!-- footer credit start -->
<!-- ********************************************
* Footer area end
********************************************************* -->
</body>
</html>
Raw
stylesheet.css
/* Overall site background */
body{
background-color: #FFFFFF;
background: url(../imgs/background.png) ;
width: 100%;
min-width: 1200px;
}
/* ********************************************
* Header area start
******************************************** */
/* header background */
.header_wrap{
background: url(../imgs/Navigation-Background.png) no-repeat ;
height: 124px;
width: 1200px;
margin: auto;
margin-top: 23px;
border: 1px solid #FAFAFA;
}
/* site logo */
.site_logo a {
float: left;
width: 162px;
height: 51px;
margin-left: 115px;
margin-top: 35px;
}
/* Navigation list start */
.nav_list ul {
float: right;
margin-top: 20px; /* btween haeder wrap & ul box */
margin-right: 120px; /* btween haeder wrap & ul box */
padding: 0px;
}
.nav_list li {
list-style: none;
height: 51px;
display: inline-block ;
padding: 32px 30px 0px 30px;
border-left: 1px solid #EFEFEE;
}
.nav_list li:last-child{
border-right: 1px solid #EFEFEE;
}
.nav_list a {
text-decoration: none;
color:#5F6A72;
font-size: 16px;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
font-weight: bold;
}
/* Navigation list end */
/* ********************************************
* Header area end
******************************************** */
/* overall content area border */
.content_wrap {
width: 990px;
margin: auto;
}
/* ********************************************
* Content area start
******************************************** */
/* content introduction area start */
.content_intro{
height: 635px;
}
/* content introduction area general styling */
.content_intro_heading{
height: 115px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: center;
text-transform: uppercase;
color: #5F6A72;
margin-top: 56px;
}
.content_intro_p1{
font-size: 39px;
margin: 0px;
letter-spacing: -1px;
padding: 0px;
font-weight: 700;
}
.content_intro_p2{
font-size: 81px;
word-spacing: 25px;
margin: 0px;
letter-spacing: -2px;
line-height: 58px;
font-weight: 900;
}
.content_intro_request_line{
border-top: 3px solid #F5F4F3;
margin-top: 82px;
margin-bottom: 80px;
position: relative;
}
.content_intro_request {
width: 260px;
height: 60px;
border:5px solid #FAFAFA ;
background-color: #00AEE1;
border-radius: 5px;
text-align: center;
color: #FFFFFF;
font-family: 'Didact Gothic', sans-serif;
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
padding-bottom: 3px;
position: absolute;
top:-38px;
left: 360px;
}
.content_intro_request_line a {
text-decoration: none;
}
.content_intro_gallery{
height: 125px;
width: 920;
margin: auto;
border: 20px solid #FAFAFA;
border-radius: 8px;
}
/* content introduction area end */
/* Content 2 rows start */
/* content 2 rows height */
.content_rows {
height: 495px;
}
.content_row_1 , .content_row_2 {
height: 205px;
border-top: 5px solid #F5F4F3;
}
.content_row_box{
width: 315px;
height: 100%;
display: inline-block;
margin-right: 8px;
}
.content_row_img{
float: left;
height: 46px;
width: 46px;
padding-top: 30px;
padding-left: 5px;
}
.content_row_text {
float: right;
width: 240px;
padding-top: 7px;
color: #828A8F;
}
.content_row_text h4 {
font-size: 18px;
font-weight: bolder;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
margin-bottom: 5px;
}
.content_row_text p {
font-size: 14px;
line-height: 28px;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
margin: 0px;
}
/* Content 2 rows end */
/* ********************************************
* Content area end
******************************************** */
/* ********************************************
* Footer area start
******************************************** */
/* overall footer wrapper */
.footer_wrap {
background: url(../imgs/Bottom-Background.png) no-repeat;
width: 1200px;
height: 900px;
margin: auto;
}
.recent_latest_social_wrap{
width: 990px;
height: 750px;
margin: auto;
}
/* Recent , Latest & social area start */
/* Recent , Latest & social area width */
.recent_latest_social{
width: 990px;
}
/* Recent blog entries & Latest tweets & social div adjustment start */
.recent_blog {
float: left;
}
.latest_social {
float: right;
}
.recent_blog , .latest_social{
width: 475px;
display: inline-block;
}
/* Recent blog entries & Latest tweets & social div adjustment end */
/* Recent blog entries & Latest tweets Heading start */
.recent_blog_heading , .latest_heading{
height: 85px;
width: 470px;
border-bottom: 5px solid #F5F4F3;
}
.recent_blog_heading img , .latest_heading img {
float: left;
padding-top: 30px;
margin-right: 15px;
}
.recent_blog_heading h3 , .latest_heading h3 {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 23px;
color: #717F81 ;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 23px;
}
/* Recent blog entries & Latest tweets Heading end */
/* Recent blog entries start */
/* Recent blog entries bottom border start */
.recent_blog_entry {
border-bottom: 1px solid #F5F4F3;
}
.recent_blog_entry:last-child{
border-bottom: 0px ;
}
/* Recent blog entries bottom border end */
.recent_latest_date img {
float: left;
}
.recent_blog_entry h5 {
font-size: 14px;
line-height: 28px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #828A8F;
margin-top: 20px;
margin-bottom: 0px;
}
.recent_blog_entry a {
text-decoration: none;
}
.recent_paragraph {
font-size: 14px;
font-family: 'Open Sans', sans-serif;
color: #828A8F ;
line-height: 28px;
margin-top: 21px;
}
/* Recent blog entries end */
/* Recent blog entries & Latest tweets ( Date & Time ) */
.recent_latest_date p , .tweet time p {
padding-left: 8px;
font-family: 'Droid Serif', serif;
font-style: italic;
font-size: 11px;
color: #A5ACB0;
margin-left: 8px;
margin-top: 0px;
}
/* latest tweets start */
.latest_tweets{
border-bottom: 1px solid #F5F4F3;
}
.tweet_paragraph {
font-size: 14px;
color: #717F81;
font-family: 'Open Sans', sans-serif;
padding-top: 10px;
}
.tweet_paragraph a {
font-weight: bold;
font-style: italic;
color: #717F81;
text-decoration: none;
}
/* latest tweets end */
/* Social networks links start */
.social_links{
height: 150px ;
width: 475px;
}
.social_img{
width: 91px;
height: 95px;
display: inline-block;
margin-right: 30px;
margin-top: 23px;
margin-bottom: 32px;
}
.social_img:last-child {
margin-right: 0px;
}
/* Social networks links end */
/* subscribe to mail list start */
.subscribe_mail{
width: 990px;
margin: auto;
}
.Subscribe_title {
font-size: 18px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: bold;
color: #717F81 ;
text-align: center;
text-transform: uppercase ;
border-top: 5px solid #F5F4F3 ;
border-bottom: 1px solid #F5F4F3 ;
padding-top: 20px;
padding-bottom: 20px ;
}
.Subscribe_form {
width: 655px;
margin: auto;
}
#name , #mail {
height: 59px;
width: 325px;
text-align: center;
background-color: #EDEDED;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: bold;
color: #717F81;
text-transform: uppercase;
border: 5px solid #FAFAFA;
border-radius: 5px;
}
.Subscribe_submit_box {
width: 970px;
margin: auto;
border: 1px solid #FAFAFA;
position: relative ;
right: 150px;
top: 30px;
}
.Subscribe_submit {
width: 80px;
height: 35px;
background-color: #E9E9E9;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 14px;
color: #F9A445 ;
font-weight: bold;
text-transform: uppercase;
border: 5px solid #FAFAFA;
border-radius: 5px;
position: absolute;
left: 435px;
top: -20px;
}
/* subscribe to mail list end */
/* Footer credit start */
.footer_credit {
width: 1200px;
height: 52px;
border: 1px solid #F9F9F9 ;
background-color: #F1F1F1;
margin: auto;
margin-top: 90px;
margin-bottom: 25px;
padding-left: 120px;
}
.footer_credit p {
font-size: 14px;
font-family: 'Open Sans', sans-serif;
color: #717F81;
text-transform: uppercase;
word-spacing: 1px;
}
.footer_credit span {
color: #7A8788 ;
font-weight: bold;
}
.footer_credit a {
text-decoration: none ;
color: #717F81;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: bold;
}
/* Footer credit end */
/* ********************************************
* Footer area end
******************************************** */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment