Bootstrap Snippet card 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
<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 ---------->
<div class='split-pane col-xs-12 col-sm-6 uiux-side'>
  <div>
    <img src='http://bit.ly/BCR-design'>
    <div class='text-content'>
      <div>You want</div>
      <div class='big'>UI/UX?</div>
    </div>
    <button>
      SHOW ME THE DESIGN
    </button>
  </div>
</div>
<div class='split-pane col-xs-12 col-sm-6 frontend-side'>
  <div>
    <img src='http://bit.ly/bcr-dev'>
    <div class='text-content'>
      <div>You want</div>
      <div class='big'>FRONT-END?</div>
    </div>
    <a class='button'>
      SHOW ME THE CODE
    </a>
  </div>
</div>
<div id='split-pane-or'>
  <div>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/bcr-white.png'>
  </div>
</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
@import url("https://dl.dropboxusercontent.com/u/2821967/fonts/proxima-nova.css");
@media (min-width: 500px) {
  .col-sm-6 {
    width: 50%;
  }
}
html, body {
  height: 100%;
  min-height: 18em;
}
.frontend-side {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-code.png");
}
.uiux-side {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-post-its.png");
}
.split-pane {
  padding-top: 1em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 50%;
  min-height: 9em;
  font-size: 2em;
  color: white;
  font-family: "proxima-bold";
}
@media(min-width: 500px) {
  .split-pane {
    padding-top: 2em;
    height: 100%;
  }
}
.split-pane > div {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"card"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"card" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"card"
Bootstrap 3.3.0 Snippet by evarevirus