"card"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="cont_principal">
<div class="cont_text_img">
<div class="cont_img_back">
<img class='img_1' src="http://i0.wp.com/farm1.staticflickr.com/417/19827417914_da1c83bbe6_b.jpg?w=1060" alt="" />
<img class='img_2' src="http://i1.wp.com/farm1.staticflickr.com/530/19829170113_2b312c3ced_b.jpg?w=1060" alt="" /></div>
<div class="cont_text">
<h1>San Francisco</h1>
<p>San Francisco, officially the City and County of San Francisco, is the cultural, commercial, and financial center of Northern California and the only consolidated city-county in California. San Francisco encompasses a land area of about 46.9 square miles (121 km2) on the northern end of the San Francisco Peninsula, which makes it the smallest county in the state. </p>
<button class="btn_read_m">READ MORE</button>
<div class="cont_icon_like">
<p> <i class="material-icons"></i><span>288</span></p>
</div>
</div>
<div class="cont_img_frond">
<img class='img_1' src="http://i0.wp.com/farm1.staticflickr.com/417/19827417914_da1c83bbe6_b.jpg?w=1060" alt="" />
<img class='img_2' src="http://i1.wp.com/farm1.staticflickr.com/530/19829170113_2b312c3ced_b.jpg?w=1060" alt="" />
<div class="cont_icons_img_from">
<ul>
<li><i class="material-icons"></i>
</li>
<li>
<i class="material-icons"></i>
</li>
<li><i class="material-icons"></i></li>
</ul>
</div>
</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
* {
margin:0px auto;
padding:0px;
text-aling:center;
}
.cont_principal {
position:absolute;
height: 100%;
width: 100%;
background-color: #90A4AE;
}
.cont_text_img {
position: relative;
top:50%;
margin-top:-175px;
width: 700px;
height: 350px;;
background-color:#fff;
box-shadow:0px 10px 25px -5px rgba(0,0,0,0.25);
}
.cont_text {
position:relative;
float: left;
width: 50%;
height:80%;
margin:5%;
text-align:justify;
}
.cont_text_img_act > .cont_text > * {
opacity:1;
left: 0px;
}
.cont_text > h1 {
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
/*
-------------------------------------
------------------------------------- The image changue every 10 Secons
-------------------------------------
-------------------------------------
*/
var Cont = 0;
function inic(){
if(Cont % 2 != 0){
document.querySelector('.img_1').style.opacity = '0';
document.querySelectorAll('.img_1')[1].style.opacity = '0';
setTimeout(function (){
document.querySelector('.img_1').className = 'img_1 img_d_n';
document.querySelectorAll('.img_1')[1].className = 'img_1 img_d_n';
document.querySelector('.img_2').className = 'img_2 img_d_b';
document.querySelectorAll('.img_2')[1].className = 'img_2 img_d_b';
},500);
setTimeout(function (){
document.querySelector('.img_2').style.opacity = '0.2';
document.querySelectorAll('.img_2')[1].style.opacity = '1';
},600);
Cont++;
}else{
document.querySelector('.img_2').style.opacity = '0';
document.querySelectorAll('.img_2')[1].style.opacity = '0';
setTimeout(function (){
document.querySelector('.img_2').className = 'img_2 img_d_n';
document.querySelectorAll('.img_2')[1].className = 'img_2 img_d_n';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: