"urban"
Bootstrap 4.0.0 Snippet by evarevirus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ---------->
<header>
<div id="circular-bg"></div>
<div id="logo"> <a href="#">URBANEARS</a></div>
<nav><a href="#">Headphones</a><a href="#">Speakers</a><a href="#">Accessories</a></nav>
<div id="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
<h1 id="platten">PLATTEN</h1><img src="http://res.cloudinary.com/prvnbist/image/upload/v1496378767/urbanearshdphn.png" alt="headphone"/>
<h2 id="headline">
The perfect <br/>classic headphone colors</h2>
<button><a href="#">Shop Now</a></button>
<div id="left"><i class="fa fa-long-arrow-left"></i></div>
<div id="right"><i class="fa fa-long-arrow-right"></i></div>
<div id="small-screen"></div>
</header><!--Urban Ears Website - Dribbble shot by Nathan Riley ( https://dribbble.com/shots/3536062-Urbanears-Landing-Screen/attachments/784984 ) -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("https://fonts.googleapis.com/css?family=Cabin:400,500,600,700");
.center, header #circular-bg, header img, header #headline {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
* {
box-sizing: border-box;
text-align: center;
text-decoration: none;
color: #fff;
}
body {
background: #A2C2AB;
font-family: "Cabin", sans-serif;
overflow: hidden;
}
.nav-hover:before, header nav a:before {
content: "";
position: absolute;
width: 120%;
height: 10px;
bottom: 0;
left: -10%;
border-radius: 60px;
z-index: -1;
-webkit-transition: 0.3s cubic-bezier(0.63, -0.18, 0.44, 1.17);
transition: 0.3s cubic-bezier(0.63, -0.18, 0.44, 1.17);
}
.nav-hover:hover:before, header nav a:hover:before {
background: #B2CDBA;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: