Bootstrap Snippet Side navbar with gaming hover effect using HTML CSS Bootstrap

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<head>
    <title>Sidebar2</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link media="all" type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Inspiration from: https://dribbble.com/shots/1428271-iOS7-Challenge-App-->
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-sm-3 sidebar2">
                <div class="logo text-center">
                    <img src="http://lorempixel.com/output/people-q-g-64-64-6.jpg" class="img-responsive center-block" alt="Logo">
                  <h4>Arshi S.</h4>
                    <div class="coins">
                      <i class="fa fa-dollar" aria-hidden="true"></i>
                    </div>
                      <p class="coins">2,342</p>
                      <div>
                    <button type="button" class="btn btn-default Add-friend">
  <i class="fa fa-rocket" aria-hidden="true"></i> LAUNCH A CHALLENGE
</button></div>
                </div>
                <br>
                <div class="left-navigation">
                    <ul class="list">
                        <li><i class="fa fa-safari" aria-hidden="true"></i>Activities</li>
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
body{
  font-family: 'Raleway', sans-serif;
}
html,body, .container-fluid, .sidebar2,.main-content{
  height:100%;
}
.sidebar2 {
    background-color: #1a1f27;
    padding: 0px !important;
    box-shadow: 2px 2px 5px #262a35;
    z-index: 1000;
    height: 100%;
    position: fixed;
}
.logo {
    min-height:200px;
    color:#afb1b5;
}
.logo>img {
    margin-top: 30px;
    padding: 1px;
    border: 3px solid #F17153;
    border-radius: 100%;
    background-color: #fff;
}
.btn.Add-friend
{
  background-color:#F17153;
<!--#e65e50-->
  border: 1px solid #50e6df;
  color:#eee;
}
.btn.Add-friend:hover,.btn.Add-friend:active,.btn.Add-friend:active:focus,.btn.Add-friend:active:hover,.btn.Add-friend:visited,.btn.Add-friend:focus
{
  background-color:#F17153;
  border: 0.5px solid transparent;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Side navbar with gaming hover effect"
Bootstrap 3.3.0 Snippet by Arshi_S

Related: See More

Questions / Comments:

"Side navbar with gaming hover effect" Bootstrap 3.3.0 Snippet by Arshi_S

Related: See More

Questions / Comments:

"Side navbar with gaming hover effect"
Bootstrap 3.3.0 Snippet by Arshi_S