Bootstrap Snippet Quote Box CSS Effect 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 ---------->
<html>
    <head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
        <title>quote box</title>
        <style>
        
        </style>
    <head>
<body>
<div class="qbox">
<div class="col-lg-12">
    <div class="col-lg-6">
        <h1 style="text-align:left;margin-left:5%;font-variant:small-caps;">Famous<span style="color:#f54287">Q<span style="color:#19e6c3" >u</span>o<span style="color:#19e6c3" >t</span>e</span> Box</h1>
    <div class="col-lg-6">
        <div class="qicons">
            <i class="fas fa-search" id="qicon"></i>
            <i class="fas fa-home" id="qicon"></i>
            <i class="fas fa-igloo" id="qicon"></i>
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
.qbox{
    margin:0;
    padding:0px;
    display:lnline-block;
    justify-content:center;
    align-items:center;
    font-family:'poppins',sans-serif;
    margin-bottom:50px;
}
.qute{
    top:20%;
}
.quote{
    
    width:100%;
    height:70%;
    display:inline-flex;
    flex-wrap:wrap;
    justify-content:space-between;
    z-index:2;
    
    padding:0px;
    margin:0px;
}
.quote .box{
    margin-top:0%;
    width:400px;
    height:400px;
    position:relative;
    grid-row-end:400px;
    background: #fff;
    overflow:hidden;
    transition:0.5s;
    z-index:2;
    box-sizing:border-box;
    padding:40px;
    box-shadow: -10px 25px 50px rgba(0,0,0,.2);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Quote Box CSS Effect"
Bootstrap 4.1.1 Snippet by neerajposwal

Related: See More

Questions / Comments:

"Quote Box CSS Effect" Bootstrap 4.1.1 Snippet by neerajposwal

Related: See More

Questions / Comments:

"Quote Box CSS Effect"
Bootstrap 4.1.1 Snippet by neerajposwal