HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<section class="services" id="services">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="services-circle">
              <div class="services-subcircle" data-circle-index="0"><i class="fas fa-user-tie"></i>
              </div>
              <div class="services-subcircle active" data-circle-index="1"><i class="far fa-id-card"></i>
              </div>
              <div class="services-subcircle" data-circle-index="2"><i class="fas fa-charging-station"></i>
              </div>
              <div class="services-subcircle" data-circle-index="3"><i class="far fa-building"></i>
              </div>
              <div class="services-subcircle" data-circle-index="4"><i class="fas fa-brain"></i>
              </div>
              <div class="services-subcircle" data-circle-index="5"><i class="fas fa-box-open"></i>
              </div>
              <div class="services-subcircle" data-circle-index="6"><i class="fas fa-award"></i>
              </div>
              <div class="services-subcircle" data-circle-index="7"><i class="fas fa-archive"></i>
              </div>
              <div class="services-content-wrapper">
                <div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">PERSONNEL IMPROVEMENT</a></span>
                  <p class="description">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                </div>
                <div class="services-content-item active"><span class="title"><a class="underlined-link" href="./service-detail.html">BRANDING</a></span>
                  <p class="description">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
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
  .services {
  background: #fff;
  background-image: url("../img/services_bg.png");
  background-repeat: no-repeat;
  background-position: bottom;
  margin-top: 30px;
  padding-top: 35px;
}
.services-circle {
  display: block;
  border-radius: 50%;
  position: relative;
  width: 80%;
  height: 0;
  padding-bottom: 80%;
  margin: 70px auto;
  border: 1px solid #e1e1e1;
  box-sizing: content-box;
}
.services-circle::before,
.services-circle::after {
  display: none;
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid #e1e1e1;
  border-radius: 50%;
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
jQuery(function($) {
  "use strict";
  var _extends =
    Object.assign ||
    function(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
  // parallax effect
  var parallaxEffect = function parallaxEffect(container, els) {
    var moveX, moveY;
    if (container && els) {
      container.addEventListener("mousemove", function(e) {
        moveX = (e.clientX * -1) / 20;
        moveY = (e.clientY * -1) / 20;
        els.forEach(function(el, index) {
          if (index % 2 != 0) {
            moveX = -1 * moveX;
            moveY = -1 * moveY;
          }
          el.style.transform = "translate3d(" + moveX + "px," + moveY + "px,0)";
        });
      });
    }
  };
  // isScrolledIntoView
  var isScrolledIntoView = function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect(),
      elemTop = rect.top,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"services - circle"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"services - circle" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"services - circle"
Bootstrap 4.1.1 Snippet by koshikojha