Bootstrap Snippet Icons 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/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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<div class="container" style="background-color: #EAF7FF; color: #0C3C60">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 aqui" style="text-align: center">
<div class="sopraporaimg">
    <img src="https://image.flaticon.com/icons/svg/1161/1161765.svg" alt="empresa" class="imgpb">
    <img src="https://image.flaticon.com/icons/svg/1161/1161724.svg" alt="empresa" class="imgnn">
</div>
<h4>É simples! Depois do primeiro contato</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 aqui" style="text-align: center; padding: 0 30px">
<div class="sopraporaimg">
    <img src="https://image.flaticon.com/icons/svg/2446/2446410.svg" alt="empresa" class="imgpb">
    <img src="https://image.flaticon.com/icons/svg/2446/2446395.svg" alt="empresa" class="imgnn">
</div>
<h4>agendamos uma visita até vocês.</h4>
</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
.sopraporaimg {
                position: relative;
                height: 65px
            }
            .imgnn,
            .imgpb {
                width: 64px;
                position: absolute;
                top: calc(50% - 32px);
                left: calc(50% - 32px);
                transition: .2s all linear;
            }
            .imgnn {
                opacity: 0;
            }
            .aqui:hover .imgnn {
                opacity: 1;
                width: 66px;
                height: 66px;
                left: calc(50% - 33px);
                top: calc(50% - 33px);
            }
            /* .aqui:hover .imgnn {
                opacity: 0
            } */
            .aqui {
                margin-top: 50px;
            }
            .BkgCF {
                padding: 35px 0 70px 0;
            }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Icons"
Bootstrap 4.1.1 Snippet by LeandroBizzinotto

Related: See More

Questions / Comments:

"Icons" Bootstrap 4.1.1 Snippet by LeandroBizzinotto

Related: See More

Questions / Comments:

"Icons"
Bootstrap 4.1.1 Snippet by LeandroBizzinotto