Bootstrap Snippet My account 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="container">
    <div class="row">
    <div class="col-md-4  prev-account-item">
        <a href="#">
        <div class="row">
            <div class="col-md-4 ">
             <i class="fa fa-cubes"></i>
            </div>
            <div class="col-md-8">
               <h5>Commandes</h5>
         Suivi, Retour, Réclammation
            </div>
        </div>
        </a>
    </div> 
        <div class="col-md-4 prev-account-item">
            <a href="#">
        <div class="row">
            <div class="col-md-4 ">
             <i class="fa fa-map-marker"></i>
            </div>
            <div class="col-md-8">
               <h3>Adresses</h3>
                 Livraison, Facturation
            </div>
        </div>
        </a>
    </div> 
      <div class="col-md-4  prev-account-item">
            <a href="#">
        <div class="row">
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
.prev-account-item i{
    font-size: 4em;
    opacity: 0.2;
}
.fa-cubes{
    color:#fbd885;
}
.fa-map-marker{
    color:#FFFF00;
}
.fa-cog{
    color:#48708d;
}
 .prev-account-item{
    box-shadow: 1px 1px 5px 1px #DADADA;
    margin: 5px;
    padding: 15px 10px;
    background-color: #fff;
    height: auto;
    border-radius: 5px;
    transition: .3s linear all;
    border: 1px solid #DADADA;
  }
/* Transition to a bigger shadow on hover */
.prev-account-item:hover {
background: #eee;
  
}
.prev-account-item a{
    color:inherit;
} 
.prev-account-item a:hover { 
    text-decoration: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"My account"
Bootstrap 4.1.1 Snippet by kodakro

Related: See More

Questions / Comments:

"My account" Bootstrap 4.1.1 Snippet by kodakro

Related: See More

Questions / Comments:

"My account"
Bootstrap 4.1.1 Snippet by kodakro