Bootstrap Snippet mobile 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="//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 ---------->
<div class="wrapper">
      <div class="sidebar">
        <div class="brand">JUUCE</div>
        <div class="menu">
          <ul>
            <li><i class="glyph-icon flaticon-user"></i> Profile</li>
            <li><i class="glyph-icon flaticon-like"></i> Wish list</li>
            <li><i class="glyph-icon flaticon-like-1"></i> Why buy juuce?</li>
            <li><i class="glyph-icon flaticon-vision"></i> About us</li>
            <li><i class="glyph-icon flaticon-mail"></i> Contact us</li>
            <li><i class="glyph-icon flaticon-info"></i> FAQ</li>
          </ul>
        </div>
      </div>
      <div class="content no-animation" data-pos="0">
        <div>
          <div id="openMenu">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div id="shoppingIcon">
            <span>4</span>
            <i class="glyph-icon flaticon-cart"></i>
          </div>
          <div class="header">
            <h3>Cold pressed juices</h3>
            <small>shop category</small>
          </div>
          <div class="triangle"></div>
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
.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slider__slides {
  position: relative;
  width: 300%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1), -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  will-change: transform;
}
.slider__slide {
  float: left;
  width: 33.33333%;
  height: 100%;
}
.slider__dots {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 1.5em;
  left: 50%;
  top: 70px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.slider__dot, .slider__indicator {
  display: block;
  margin: 0 0.5em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"mobile"
Bootstrap 4.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"mobile" Bootstrap 4.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"mobile"
Bootstrap 4.0.0 Snippet by evarevirus