Bootstrap Snippet info card 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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
    <head>
        <meta charset="UTF-8"/>
        <link href='https://fonts.googleapis.com/css?family=Domine:400,700' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
            <div class="info-card-container">
                <div class="info-card">
                    <div class="info-card__image-exposure info-card__content">
                        <div class="info-card__image-exposure--blend">
                        </div>
                        <div class="info-card__image-exposure__item">
                        </div>
                    </div>
                    <div class="info-card__bio info-card__content">
                        <h2 class="info-card__bio--title">John Legend</h2>
                        <p class="info-card__bio--copy">John Roger Stephens (born December 28, 1978), better
                            known by his stage name John Legend, is an American
                            singer, songwriter and actor. He has won ten Grammy
                            Awards, one Golden Globe, and one Academy Award. In
                            2007, Legend received the Hal David Starlight Award
                            from the Songwriters Hall of Fame.</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
/***** Info Card Component *****/
/*******************************/
html {
  font-size: 62.5%;
}
body {
  font-size: 1.4rem;
}
/* =14px */
h1 {
  font-size: 2.4rem;
}
/* =24px */
.info-card-container {
  width: 100%;
  min-height: 100%;
  height: 83rem;
  overflow: hidden;
  background: -webkit-linear-gradient(left, #0C1B23 0%, #0C1B23 70%, #fff 70%, #fff 100%);
  background: linear-gradient(to right, #0C1B23 0%, #0C1B23 70%, #fff 70%, #fff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$white', endColorstr='$white',GradientType=1 );
  /* IE6-9 */
  position: relative;
}
.info-card {
  min-width: 80%;
  max-width: 90rem;
  min-height: 70%;
  height: 70rem;
  margin: 0 auto;
  position: relative;
  background-color: #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"info card"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"info card" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"info card"
Bootstrap 3.3.0 Snippet by evarevirus