Skip to content

Instantly share code, notes, and snippets.

@salmanbd96

salmanbd96/Salman Ahmed (RRF HTML MARKUP)

Last active August 29, 2015 14:27
Show Gist options
  • Save salmanbd96/034bfd8a9c89f7bc3f8e to your computer and use it in GitHub Desktop.
Save salmanbd96/034bfd8a9c89f7bc3f8e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Salman Ahmed (RRF HTML MARKUP)
Demo LINK: http://salmancreation.com/rrf/
Code MarkUp Here: Thanks Rasel Ahmed(RRF)
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>RRF Layout Desgin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Gentium+Basic:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="top_bar_area">
<div class="container">
<div class="row">
<div class="top_header_bar">
<div class="col-md-2">
<div class="left_top_bar_text">
<p>Big Fish Bite Me</p>
</div>
</div>
<div class="col-md-3">
<div class="center_top_bar_text">
<p>The Best Apparel for any anglert</p>
</div>
</div>
<div class="col-md-3 col-md-offset-4">
<div class="right_top_bar_menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Payment</a></li>
<li><a href="">Service</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="main_header_area">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="search_bar_area">
<form action="">
<select name="cat" id="cat_id">
<option value="1">All</option>
<option value="2">Web Development</option>
<option value="3">Web Desgin</option>
</select>
<input type="text" placeholder="" required/>
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="col-md-2 col-md-offset-2">
<div class="logo">
<img src="img/logo.png" alt="Logo" />
</div>
</div>
<div class="col-md-2 col-md-offset-3">
<div class="payment_text_area">
<i class="fa fa-cart-plus"></i>
<div class="info_text">
<a href=""><strong>2 Products</strong> in Cat </a>
<a href=""><strong>$ 230</strong> total</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="center_menu text-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li><a href="#">Shits</a></li>
<li><a href="#">hats</a></li>
<li><a href="#">Outwarel</a></li>
<li><a href="#">Tackle</a></li>
<li><a href="#">BFBM News</a></li>
<li><a href="#">about</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Style.css Code===>
.top_bar_area {
background: #136eb7 none repeat scroll 0 0;
color: #fff;font-size: 13px;
}
.top_header_bar {
margin: 15px 0;
overflow: hidden;
}
.center_top_bar_text::before {
background:url(img/line.png)no-repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 2px;
}
.left_top_bar_text{position: relative;}
.left_top_bar_text p{margin:0;}
.center_top_bar_text{}
.center_top_bar_text p{margin:0;}
.right_top_bar_menu{}
.right_top_bar_menu ul{list-style: outside none none;
margin: 0 0 0 -15px;
padding: 0;
text-align: right;}
.right_top_bar_menu ul li { display: inline;float: left; margin-left: 14px;}
.right_top_bar_menu ul li a{color: #fff;
display: inline-block;
font-size: 13px;text-decoration:none}
.right_top_bar_menu ul li a:hover{}
.main_header_area{}
.search_bar_area{margin-top: 60px;}
.search_bar_area form{}
.search_bar_area form select{width: 50px;}
.search_bar_area form input{}
.search_bar_area form button, .search_bar_area form select, .search_bar_area form input, .search_bar_area{background: #f0f0f0 none repeat scroll 0 0;
border: medium none;
height: 45px;}
.search_bar_area form button i{font-size: 19px;
font-weight: 400;
opacity: 0.5;}
.search_bar_area form input{
margin-left: -1px;}
.search_bar_area form button{float: right;
width: 35px;}
.logo{margin-top:20px}
.logo img{max-width: 100%;
text-align: center;}
.payment_text_area{margin-top:50px; position: relative;}
.payment_text_area i{color:#303B33;
float: left;
font-size: 35px;padding-right: 15px;}
.payment_text_area .info_text{border-left: 2px solid #0a76b7;
overflow: hidden;}
.payment_text_area .info_text a{display: inline-block;
margin-left: 9px;font-size:13px}
.payment_text_area .info_text a strong{color:#303B33;margin-right:2px}
.payment_text_area::before {
background: #136eb7 none repeat scroll 0 0;
border-radius: 500px;
color: #fff;
content: "2";
display: block;
height: 20px;
left: 21px;
position: absolute;
text-align: center;
top: -5px;
width: 20px;
z-index: 99;
}
.center_menu{margin-top: 15px;}
.center_menu ul.nav.navbar-nav{float: none;
margin: 0;
padding: 0;
text-align: center;}
.center_menu ul.nav.navbar-nav li{display: inline-block;
float: none;}
.center_menu ul.nav.navbar-nav li a{font-size: 20px;font-family: 'Gentium Basic', serif;}
.center_menu ul.nav.navbar-nav li a:hover{background: none;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment