JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<header class="top_header">
<div class="header_topline">
<div class="container">
<div class="col-md-12">
<div class="row">
<button class="auth_buttons hidden-md hidden-lg hidden-sm"><i class="fa fa-user"></i></button>
<div class="top_links">
<a href="#">Log in</a> /
<a href="#">Register</a>
</div>
<div class="soc_buttons">
<a href="#"><i class="fa fa-vk"></i><a>
<a href="#"><i class="fa fa-soundcloud"></i><a>
<a href="#"><i class="fa fa-apple"></i><a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-md-12">
<div class="row">
<a href="#" class="logo">WhiskeyHangover</a>
<nav class="main_mnu clearfix">
<button class="main_mnu_button hidden-md hidden-lg"><i class="fa fa-bars"></i></button>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Lester</a></li>
<li><a href="#">Liverpool</a></li>
</ul>
<div class="top_contacts"><i class="fa fa-phone-square"></i> 8-911-045-77-11</div>
</nav>
</div>
</div>
</div>
</header>
<div>
<div class="container">
<div class="col-md-12">
<div class="row">
<img class="filth" src="Filth4.jpg" alt="">
</div>
</div>
</div>
<!--[if lt IE 9]>
<script src="libs/html5shiv/es5-shim.min.js"></script>
<script src="libs/html5shiv/html5shiv.min.js"></script>
<script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
<script src="libs/respond/respond.min.js"></script>
<![endif]-->
<script src="libs/jquery/jquery-1.11.1.min.js"></script>
<script src="libs/jquery-mousewheel/jquery.mousewheel.min.js"></script>
<script src="libs/fancybox/jquery.fancybox.pack.js"></script>
<script src="libs/waypoints/waypoints-1.6.2.min.js"></script>
<script src="libs/scrollto/jquery.scrollTo.min.js"></script>
<script...
CSS
*::-webkit-input-placeholder {
color: #666;
opacity: 1;
}
*:-moz-placeholder {
color: #666;
opacity: 1;
}
*::-moz-placeholder {
color: #666;
opacity: 1;
}
*:-ms-input-placeholder {
color: #666;
opacity: 1;
}
body input:focus:required:invalid,
body textarea:focus:required:invalid {
}
body input:required:valid,
body textarea:required:valid {
}
body {
font-family: "RobotoRegular", sans-serif;
font-size: 16px;
}
.header_topline {
background-color: #43484C;
padding: 15px 0;
color:#fff;
}
.header_topline a {
color:#fff;
}
.top_links {
display: inline-block;
vertical-align: middle;
z-index: 10;
}
.top_links a{
text-decoration: underline;
}
.top_links a:hover{
text-decoration: none;
}
.soc_buttons {
float:right;
}
.soc_buttons > a{
font-size: 25px;
margin-left: 5px;
}
.auth_buttons,
.main_mnu_button {
background-color:transparent;
border: medium none;
font-size: 25px;
}
.main_mnu_button {
color: #fff;
padding: 8px 15px 0;
}
.logo {
display: block;
padding: 30px 0 15px 0;
color: #fff;
font-family:"KobzarKSRegular";
font-size: 42px;
text-align: center;
}
.top_header{
background-color: #4AAAD2;
}
.main_mnu {
background-color: #3797bf;
color:#fff;
margin-bottom: 30px;
max-height: 59px;
}
.main_mnu a{
color: #fff;
padding: 15px 15px;
display: block;
-webkit-transition: all .55s;
-o-transition: all .55s;
transition: all .55s;
}
.main_mnu a:hover{
background-color: #2787af;
}
.main_mnu ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
z-index: 12;
}
.top_contacts {
float: right;
font-size: 18px;
padding: 0 10px;
background-color: #2787af;
line-height: 56px;
text-align: center;
z-index: 14;
}
.main_mnu ul li{
display: inline-block;
}
.filth{
width: 120%;
padding-left: -140px;
margin-left: -150px;
}
/*----media.css----*/
/*========== Desktop First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only...
JavaScript
$(document).ready(function() {
$(".auth_buttons").click(function() {
$(this).next().slideToggle();
});
$(".main_mnu_button").click(function() {
$(".main_mnu ul").slideToggle();
});