Bootstrap Snippet product layout using HTML CSS

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="//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>OLIOS - Living Room</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../_build/css/main.css">
</head>
<body class='body-products'>
<!--===== LEFT ASIDE NAV =====-->
<aside class="c-aside-nav">
<!-- choose the active <a> element by adding .is-active -->
    <a href="index.html" class="fa fa-home"></a>
    <a href="" class="fa fa-shopping-basket"></a>
    <a href="search.html" class="fa fa-search"></a>
    <a href="" class="fa fa-sign-in"></a>
</aside>
<!--===== END OF LEFT ASIDE MENU =====-->
<!--===== RIGHT SLIDER MENU =====-->
<section class="c-menu-slider">
    <input type="checkbox" name="c-menu-btn" id="c-menu-btn">
    <label for="c-menu-btn" class="c-menu-btn">
        <div class="c-menu-btn__indicator">
            <div class="c-menu-btn__indicator--1"></div>
            <div class="c-menu-btn__indicator--2"></div>
            <div class="c-menu-btn__indicator--3"></div>
        </div>
    </label>
    <label for="c-menu-btn" class="c-menu-btn--is-active"></label>
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=Lato:700,400,300italic,300,100);
 @import url(https://necolas.github.io/normalize.css/4.1.1/normalize.css); 
.c-aside-nav {
  z-index: 1000;
  background-image: url(https://dl.dropboxusercontent.com/u/29650667/Front%20End/Olios-flexbox/LOGO.png);
  background-size: 33%;
  background-position: center 3vh;
  background-repeat: no-repeat;
  position: fixed;
  height: 100%;
  width: 12vh;
  background-color: #ffffff;
  box-shadow: 0px 0px 4vh 0px rgba(219, 219, 219, 0.5)
}
.c-aside-nav .fa {
  display: block;
  color: #d8d8d8;
  font-size: 3.1vh;
  text-align: center;
  padding: 3vh;
  transition: color 0.15s 0s ease-in-out, text-shadow 0.15s 0s ease-in-out
}
.c-aside-nav .fa:hover {
  color: rgba(0, 35, 255, 0.76);
  text-shadow: 0px 0px 0.8vh #0050ff
}
.c-aside-nav .is-active {
  color: #0023ff
}
.c-aside-nav .fa-home {
  margin-top: 16vh
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"product layout"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"product layout" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"product layout"
Bootstrap 3.0.0 Snippet by evarevirus