<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 ---------->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web World</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<div class="top-header">
<div class="container">
<h2>Web<span>World</span></h2>
<ul>
<li><i class="fa fa-rss fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus-official fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<div class="navbar">
<div class="container">
<ul>
<li class="active underline"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<input type="text" name="search" placeholder="Search Something">
</div>
</div>
<div class="slider">
<div class="container">
<div class="intro">
<h2>Welcome To Our Web Site</h2>
<p>Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.</p>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Header -->
<!-- Start Features -->
<div class="features">
<div class="container">
<h2>Lorem Ipsum is <span>simply dummy</span> of the printing.</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <br>
1500s, when an unknown printer took a galley of type and scrambled it to make atype specimen book.<br>
It has survived not only five centuries.
</p>
</div>
</div>
<!-- End Features -->
<!-- Start About Me -->
<div class="about-me">
<div class="container">
<div class="content">
<div class="icon">
<i class="fa fa-desktop" aria-hidden="true"></i>
</div>
<div class="text">
<h3><span>Lorem Ipsum</span> is simply</h3>
<p>Lorem Ipsum is simply dummy text of the printing <br> and typesetting of the industry. Lorem <br> Ipsum has been</p>
</div>
</div>
<div class="marg content">
<div class="icon">
<i class="active fa fa-pencil-square-o" aria-hidden="true"></i>
</div>
<div class="text">
<h3><span>Lorem Ipsum</span> is simply</h3>
<p>Lorem Ipsum is simply dummy text of the printing <br> and typesetting of the industry. Lorem <br> Ipsum has been</p>
</div>
</div>
<div class="content">
<div class="icon">
<i class="fa fa-picture-o" aria-hidden="true"></i>
</div>
<div class="text">
<h3><span>Lorem Ipsum</span> is simply</h3>
<p>Lorem Ipsum is simply dummy text of the printing <br> and typesetting of the industry. Lorem <br> Ipsum has been</p>
</div>
</div>
</div>
</div>
<!-- End About Me -->
<!-- Start Portfolio -->
<div class="portfolio">
<div class="container">
<div class="our-work">
<div>
<img src="http://www.4shared.com/img/lYpG3Fxgba/s25/15912841090/1_online"alt="">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting of the</p>
</div>
<div>
<img src="http://www.4shared.com/img/mEzeqIGSce/s25/15912842418/2_online"alt="">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting of the</p>
</div>
<div>
<img src="http://www.4shared.com/img/ewPDm2MRba/s25/15912842fd0/3_online"alt="">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting of the</p>
</div>
<div>
<img src="http://www.4shared.com/img/iHMaCLVFce/s25/15912844f10/4_online"alt="">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting of the</p>
</div>
<div>
<img src="http://www.4shared.com/img/4-gbITpHba/s25/159128456e0/5_online"alt="">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting of the</p>
</div>
<div>
<img src="http://www.4shared.com/img/78jyqELSba/s25/15912846a68/6_online"alt="">
<h3>Lorem Ipsum is simply</h3>
<p>Lorem Ipsum is simply dummy text of the <br> printing and typesetting of the</p>
</div>
</div>
</div>
</div>
<!-- End Portfolio -->
<!-- Start Brand -->
<div class="brand">
<div class="container">
<img src="http://www.4shared.com/img/QvhNojEyba/s25/159d13f4630/7__1_" border="0"" alt="">
</div>
</div>
<!-- End Brand -->
<!-- Start Contact Me -->
<div class="contact-me">
<div class="container">
<div class="details">
<div>
<h3>Populr Post</h3>
<p>Lorem Ipsum is simply dummy text of the printing.</p>
<div class="content under-line float-left">
<div class="icon float-left">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</div>
<div class="text float-left">
<p>25-September 2013</p>
</div>
</div>
<div class="content float-left">
<p>Lorem Ipsum is simply dummy text of the printing.</p>
<div class="icon float-left">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</div>
<div class="text float-left">
<p>25-September 2013</p>
</div>
</div>
</div>
<div>
<h3>Tags</h3>
<p>apps <span>blog</span> blogroll christmas cms coda concert <span>daily</span> <span>design</span> develop dialog drinks envato food fun gallery gift holiday icon <span>illustration</span> ipad iphone journal <span>jquery</span> label link marketing mobile motion music photo <span>profession</span> quotation recipes show sound strategy tv typography <span>video</span></p>
</div>
<div>
<h3>A little about us</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.<br><br><br>
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything.</p>
</div>
<div>
<h3>Get in touch</h3>
<p>Lorem Ipsum is simply dummyof the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.</p>
</div>
<div class="content float-left">
<div class="icon float-left">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
<div class="text float-left">
<p>Texas, US</p>
</div>
<div class="icon float-left">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="text float-left">
<p>email@email.com</p>
</div>
<div class="icon float-left">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div class="text float-left">
<p>890-09880-45590</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Contact Me -->
<!-- Start Footer -->
<div class="footer">
<div class="container">
<span>
Copyright © 2017 Mohamed Abdullah
</span>
<ul>
<li><i class="fa fa-rss fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus-official fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<!-- End Footer -->
</body>
/* Start Main Rulez */
.container {
width:1170px;
margin:auto;
}
.clearfix {
clear:both;
}
/* latin */
@font-face {
font-family: 'Dancing Script';
font-style: normal;
font-weight: 400;
src: local('Dancing Script'), local('DancingScript'), url(https://fonts.gstatic.com/s/dancingscript/v7/DK0eTGXiZjN6yA8zAEyM2Ud0sm1ffa_JvZxsF_BEwQk.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* End Main Rulez */
/* Start Header */
.header .top-header {
background-color:black;
overflow:hidden;
}
.header .top-header h2 {
color:#fff;
float:left;
margin:12px 0 12px 150px;
font-family: 'Dancing Script';
}
.header .top-header span {
color:#00bac6;
}
.header .top-header ul {
list-style:none;
padding-left:0;
overflow: hidden;
float:right;
margin:12px 100px 12px 0;
}
.header .top-header ul li {
display:inline-block;
}
.header .top-header ul li i {
color:#c1c1c1;
padding-right:15px;
}
/*------------------------------------------------------------------*/
.header .navbar {
overflow: hidden;
}
.header .navbar ul {
list-style:none;
padding-left:0;
float:left;
margin:35px 0 2px 100px;
}
.header .navbar ul li {
display:inline-block;
padding-right:10px;
padding-left:10px;
font-size:14px;
}
.header .navbar ul li a {
text-decoration:none;
color:#8b8b8b;
}
.header .navbar ul li.active a{
text-decoration:none;
}
.header .navbar ul li.active a,
.header .navbar ul li a:hover {
color:#00bac6;
}
.header .navbar input {
float:right;
display:block;
margin:25px 125px 0 0;
padding:5px;
background-image: url('http://www.4shared.com/img/-Q6BqAMSce/s25/1591284c828/searchicon');
background-size: 25px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-position:150px;
background-repeat: no-repeat;
padding: 10px 10px 10px 10px;
color:#00bac6;
}
/*--------------------------------------------------------------------------*/
.header .slider {
background-image:url('http://www.4shared.com/img/H62VBzBFce/s25/15912849178/Manesar');
-webkit-background-size:cover;/* CSS3 */
-moz-background-size:cover;/* CSS3 */
-o-background-size:cover;/* CSS3 */
background-size:cover;/* CSS3 */
height:454px;
}
.header .slider .intro {
padding-top:120px;
text-align:center;
color:#FFF;
}
.header .slider .intro h2 {
font-size:40px;
margin-bottom: 5px;
}
.header .slider .intro p {
font:14px/1.8 Arial, Tahoma;
}
.header .slider .intro ul {
border-style: none;
padding-left:0;
}
.header .slider .intro ul li {
width:10px;
height:10px;
border:3px solid #FFF;
display:inline-block;
cursor:pointer;
border-radius:50%;
margin-top: 120px;
}
.header .slider ul li.active,
.header .slider ul li:hover {
background-color:#00bac6;
}
/* End Header */
/* Start Features */
.features {
margin-bottom: 50px;
}
.features h2 {
text-align: center;
color:#818181;
font-size:30px;
}
.features span {
color:#646464;
}
.features p {
text-align: center;
line-height: 1.8;
color:#9a9a9a;
}
/* End Features */
/* Start About Me */
.about-me .content {
overflow:hidden;
width: 33%;
display: inline-block;
}
.about-me .content .icon i {
text-align: center;
display: block;
font-size: 130px;
color:#9a9a9a;
}
.about-me .content .icon i.active,
.about-me .content .icon i:hover {
color:#00bac6;
cursor:pointer;
}
.about-me .marg {
position:relative;
top: 50px;
}
.about-me .content .text span {
color:#646464;
}
.about-me .content .text h3,.about-me .content .text p {
text-align: center;
line-height: 1.8;
color:#9a9a9a;
}
/* End About Me */
/* Start Portfolio */
.portfolio {
padding-top:35px;
padding-bottom:35px;
background-color:#eeeeee;
margin-top:100px;
text-align:center;
}
.portfolio .our-work {
overflow:hidden;
margin: 5px 100px 5px 135px;
}
.portfolio .our-work > div {
display:inline-block;
width:30%;
margin-bottom:20px;
margin-right: 20px;
border:1px solid #CCC;
cursor:pointer;
}
.portfolio .our-work h3{
color:#717070;
font-size:14px;
margin:20px 0 0 20px;
}
.portfolio .our-work p {
color:#818181;
font-size:12px;
margin:0 30px 20px 20px;
}
.portfolio .our-work h3,.portfolio .our-work p {
line-height:1.8;
text-align: left;
}
.portfolio .our-work > div img,.portfolio .our-work > div h3,.portfolio .our-work > div p {
width:100% !important;
}
/* End Portfolio */
/* Start Brand */
.brand {
background-color: #fff;
text-align:center;
padding:20px 60px;
}
.brand img {
height:100px;
}
/* End Brand */
/* Start Contact ME */
.contact-me{
background-color:#4e4f52;
overflow:hidden;
}
.contact-me .details{
overflow:hidden;
margin:20px 30px 20px 100px;
}
.contact-me .details{
color:#c0c0c0;
font-size: 14px;
}
.contact-me .details h3{
color:#fff;
}
.contact-me .details >div{
width:20%;
margin: 0 20px;
float: left;
}
.contact-me .details .content{
overflow:hidden;
}
.contact-me .details .content .icon{
width:12%;
margin-right:5%;
}
.contact-me .details .content .icon i{
margin:0;
color:#00bac6;
}
.contact-me .details .content .text{
width:83%;
}
.contact-me .details .content .text p{
margin-top: -20px;
margin-left: 30px;
line-height: 1.8;
color:#fff;
font-size: 14px;
}
.contact-me .details span{
font-size: 20px;
color:#fff;
line-height: 1.2;
}
/* End Contact Me */
/* Start Footer */
.footer {
background-color:#2e2d2b;
color:#6A6E71;
padding:20px 0;
text-align:center;
}
.footer ul {
list-style: none;
padding-left: 0;
margin:10px 0 0;
}
.footer ul li {
display:inline-block;
}
/* End Footer */
/* Start My Framework */
.underline {
padding-bottom: 20px;
border-bottom:2px solid #00bac6;
}
.under-line {
padding-bottom: 20px;
border-bottom:1px solid #5c5c5c;
margin-bottom: 15px;
}
float-left{float:left;}
float-right{float:right;}
/* End My Framework */
