Bootstrap Snippet css3 box animation effects 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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
    <div class="row">
    <div class="strt-up-box">
                <ul>
                    <li>
                        <a href="">
                            <span class="outer">
                                <span class="icon"><i class="fb fa-envelope-o"></i></span>
                                <span class="title">A Life Worth Living</span>
                                <span class="data">who struggle with Anxiety, Depression, or Fatigue 
and look for ways to heal naturally</span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="outer">
                                <span class="icon"><i class="fa fa-envelope-o"></i></span>
                                <span class="title">A Life Worth Living</span>
                                <span class="data">who struggle with Anxiety, Depression, or Fatigue 
and look for ways to heal naturally</span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="outer">
                                <span class="icon"><i class="fa fa-envelope-o"></i></span>
                                <span class="title">A Life Worth Living</span>
                                <span class="data">who struggle with Anxiety, Depression, or Fatigue 
and look for ways to heal naturally</span>
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
.strt-up-box {
    padding: 0 25px;
    margin-bottom: 40px;
}
.strt-up-box ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin: 0 -20px;
    list-style-type: none;
}
.strt-up-box ul li {
    padding: 0 20px;
    -webkit-flex: 0 0 20%;
    -moz-flex: 0 0 20%;
    -ms-flex: 0 0 20%;
    -o-flex: 0 0 20%;
    flex: 0 0 20%;
}
.strt-up-box ul li a {
    display: block;
    border-width: 1px;
    border-color: rgb(33, 136, 186);
    border-style: dashed;
    border-radius: 6px;
    padding: 4px;
}
.strt-up-box ul li a span.outer {
    display: block;
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"css3 box animation effects"
Bootstrap 4.0.0 Snippet by dkstudio

Related: See More

Questions / Comments:

"css3 box animation effects" Bootstrap 4.0.0 Snippet by dkstudio

Related: See More

Questions / Comments:

"css3 box animation effects"
Bootstrap 4.0.0 Snippet by dkstudio