<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Suicide Squad Bootstrap collapse</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- <div class="jumbotron">
<img class="img-responsive" src="http://vignette1.wikia.nocookie.net/dccu/images/0/00/Suicide_squad_png_by_bashxna-d91b5t7.png/revision/latest?cb=20160728153939">
</div><!--jumbotron-->
<div class="container">
<section>
<div class="row">
<div class="col-sm-3">
<a data-toggle="collapse" data-target="#harley"><img class="img-responsive" src="https://avatanplus.com/files/resources/mid/57b8903f7ac38156a8f3780f.png"></a>
<h2 class="text-center h" >Harley</h2>
<div class="collapse" id="harley">
<ul class="list-unstyled">
<li><strong class="bold">Repuration:</strong> Daddy's 'Lil' Monster</li>
<li><strong class="bold">Real Name:</strong> Dr. Harleen Quinzel</li>
<li><strong class="bold">Bio:</strong> Psychiatrist who treated criminally insane patients until the Joker turned the tables on her</li>
<li><strong class="bold">Abilities:</strong> Skilled gymnast and as crazy as she is desirable</li>
</ul>
</div>
</div><!--col-sm-3-->
<div class="col-sm-3">
<a data-toggle="collapse" data-target="#deadshot"><img class="img-responsive" src="https://avatanplus.com/files/resources/mid/57b89053319d7156a8f3c503.png"></a>
<h2 class="text-center d">Deadshot</h2>
<div class="collapse" id="deadshot">
<ul class="list-unstyled">
<li><strong class="bold">Reputation:</strong> The best marksman in the world</li>
<li><strong class="bold">Real Name:</strong> Floyd Lawton</li>
<li><strong class="bold">Bio:</strong> A career mafia hit man with a 100% hit rate and signature wrist-mounted guns</li>
<li><strong class="bold">Abilities:</strong> Unparalled accuracy</li>
</ul>
</div>
</div><!--col-sm-3-->
<div class="col-sm-3">
<a data-toggle="collapse" data-target="#rickFlag"><img class="img-responsive" src="https://vgboxart.com/resources/render/13552_suicide-squad-prev.png"></a>
<h2 class="text-center r">Rick Flag</h2>
<div class="collapse" id="rickFlag">
<ul class="list-unstyled">
<li><strong class="bold">Reputation: </strong>The Soldier</li>
<li><strong class="bold">Real Name: </strong>Richard Flag</li>
<li><strong class="bold">Bio: </strong>A military man through and through, Flag is in charge of keeping this disparate group in line and on side</li>
<li><strong class="bold">Abilities: </strong>Experts in demolitions guerrilla tactics and strategy</li>
</ul>
</div>
</div><!--col-sm-3-->
<div class="col-sm-3">
<a data-toggle="collapse" data-target="#katana"><img class="img-responsive" src="https://vgboxart.com/resources/render/13551_suicide-squad-prev.png"></a>
<h2 class="text-center k">Katana</h2>
<div class="collapse" id="katana">
<ul class="list-unstyled">
<li><strong class="bold">Reputation: </strong>The slicer and dicer</li>
<li><strong class="bold">Real name: </strong>Tatsu Yamashiro</li>
<li><strong class="bold">Bio: </strong>A cold-blooded member of the squad, helping colonel Rick Flag keep the others in line</li>
<li><strong class="bold">Abilities: </strong>Trained sumarai</li>
</ul>
</div>
</div><!--col-sm-3-->
</div><!--row-->
<div class="row">
<div class="col-sm-3">
<a data-toggle="collapse" data-target="#diablo"><img class="img-responsive" src="https://vgboxart.com/resources/render/13547_suicide-squad-prev.png"></a>
<h2 class="text-center e">El Diablo</h2>
<div class="collapse" id="diablo">
<ul class="list-unstyled">
<li><strong class="bold">Reputation: </strong> The hot head</li>
<li><strong class="bold">Real name: </strong>Chato Santana</li>
<li><strong class="bold">Bio: </strong>Haunted by the misdeeds of his past, he is known to get heated on the pitch</li>
<li><strong class="bold">Abilities: </strong>Pyrokinesis</li>
</ul>
</div>
</div><!--col-sm-3-->
<div class="col-sm-3">
<a data-toggle="collapse" data-target="#croc"><img class="img-responsive" src="https://vgboxart.com/resources/render/13545_suicide-squad-prev.png"></a>
<h2 class="text-center kc">Killer Croc</h2>
<div class="collapse" id="croc">
<ul class="list-unstyled">
<li><strong class="bold">Reputation: </strong>The muscle</li>
<li><strong class="bold">Real name: </strong>Waylon Jones</li>
<li><strong class="bold">Bio :</strong>A huge man for whom evolution is working backward. No injuries this season due to advanced healing</li>
<li><strong class="bold">Abilities: </strong>Super-strength, durability and senses</li>
</ul>
</div>
</div><!--col-sm-3-->
<div class="col-sm-3">
<a data-toggle="collapse" data-target="#boomerang"><img class="img-responsive" src="https://avatanplus.com/files/resources/mid/57b89031727ae156a8f3413d.png"></a>
<h2 class="text-center cb">Captain Boomerang</h2>
<div class="collapse" id="boomerang">
<ul class="list-unstyled">
<li><strong class="bold">Reputation: </strong>Short fuse</li>
<li><strong class="bold">Real name: </strong>Digger Harkness</li>
<li><strong class="bold">Bio: </strong>An Australian roughneck, Boomerang is devious, scheming and ruthless - on and off the pitch</li>
<li><strong class="bold">Abilities: </strong>Master of the bommerang</li>
</ul>
</div>
</div><!--col-sm-3-->
<div class="col-sm-3">
<a data-toggle="collapse" data-target="#slipknot"><img class="img-responsive" src="https://vgboxart.com/resources/render/13553_suicide-squad-prev.png"></a>
<h2 class="text-center s">Slipknot</h2>
<div class="collapse" id="slipknot">
<ul class="list-unstyled">
<li><strong class="bold">Reputation: </strong>The escape plan</li>
<li><strong class="bold">Real name:</strong>Christopher Weiss</li>
<li><strong class="bold">Bio: </strong>A master in the use of elaborate ropes, this trained assassin can tackle anything</li>
<li><strong class="bold">Abilities: </strong>Mastery of ropes</li>
</ul>
</div>
</div><!--col-sm-3-->
</div><!--row-->
<div class="row">
<div class="col-sm-3">
<a data-toggle="collapse" data-target="#enchantress"><img class="img-responsive" src="https://vgboxart.com/resources/render/13548_suicide-squad-prev.png"></a>
<h2 class="text-center ec">Enchantress</h2>
<div class="collapse" id="enchantress">
<ul class="list-unstyled">
<li><strong class="bold">Reputation: </strong>The seacret weapon</li>
<li><strong class="bold">Real name: </strong>June Moone</li>
<li><strong class="bold">Bio: </strong>Possessed by Enchantress - a diaphanous, ethereal, wickedly beautiful witch as old as time</li>
<li><strong class="bold">Abilities: </strong>Bewitching the oppisition</li>
</ul>
</div>
</div><!--col-sm-3-->
</div><!--row-->
</section>
</div><!--container-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-J0hn-/suicide-squad-bootstrap-collapse-NRgGGB */
@import 'https://fonts.googleapis.com/css?family=Anton';
@import 'https://fonts.googleapis.com/css?family=Rock+Salt';
body {
box-sizing: border-box;
margin: 0;
paddign: 0;
overflow-x: hidden;
background-image:url("http://www.hdwallpaperup.com/wp-content/uploads/2015/08/Blue-Textured-wallpaper-1024x768.jpg");
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
}
/* .jumbotron {
height: 100vh;
background-image: url("http://img05.deviantart.net/d59f/i/2016/103/8/3/suicide_squad_background_by_matzell-d9yrtud.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron img {
display: block;
margin: auto;
animation-name: rotate;
animation-duration: 8s;
} */
/*
container-fluid
*/
.container{
background:rgba(250,250,250,.5);
margin:10px auto;
border-radius:5px;
}
/* section{
height:100vh;
} */
.row{
font-family: 'Rock Salt', cursive;
margin-top:50px;
}
.row img:hover{
/* border-left:solid 4px;
border-bottom:solid 4px;
-moz-border-image: -moz-linear-gradient(top, red 0%, blue 50%, purple 100%);
-webkit-border-image: -webkit-linear-gradient(top, red 0%, blue 50%, purple 100%);
border-image: linear-gradient(to bottom, red 30%, blue 90%, purple 105%);
border-image-slice: 1; */
}
.col-sm-3 a{
text-decoration:none;
cursor:pointer;
}
.h{
background:linear-gradient( to right top,blue 20%,red 70%,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* text-shadow:2px 1px rgba(255,255,255, .2); */
}
.d{
background:linear-gradient( to right top,black,crimson);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.r{
background:linear-gradient( to right top,black,#009900);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.k{
background:linear-gradient( to right bottom,black,red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.e{
background:linear-gradient( to right bottom,black,orange);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.kc{
background:linear-gradient( to left ,black,green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cb{
background:linear-gradient( to right ,black,blue,black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s{
background:linear-gradient( to right ,black,brown,black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ec{
background:linear-gradient( to right ,purple,green,purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bold{
font-family: 'Anton', sans-serif;
font-size:1.2em;
letter-spacing:5px;
color:rgb(250, 250, 250);
text-shadow:2px 2px black;
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
ul li{
letter-spacing:2px;
padding-bottom:5px;
color:rgb(0,0,0);
font-weight:bold;
/* background:linear-gradient(to bottom right,blue,crimson,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
text-shadow:1px 1px rgb(250,250,250);
}
@media (min-width:760px){
.row{
display:flex;
align-items:baseline;
}
}
@keyframes rotate{
10%{
-webkit-transform:scale(90);
}
25%{
opacity:0.3;
}
50%{
-webkit-transform:rotate(-15deg);
}
80%{
-webkit-transform:rotate(-3deg);
-webkit-transform:scale(1.2);
}
90%{
}
100%{
-webkit-transform:rotate(0deg);
}
}
@media (max-width:768px){
.jumbotron img{
height:450px;
margin-top:50px;
}
}
@media (min-width:1000px){
.jumbotron img{
height:500px;
}
}
@media (min-width:1440px){
.jumbotron{
height:80vh;
}
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
jQuery
v3.1.0
