Item: Suicide Squad Bootstrap collapse
Rating: 3.4
Author: -J0hn-

1 Downloads
65 Views
Tweet
Download Now View Demo

HTML
CSS

<!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;
  }
  
}

Comments

More from -J0hn-

Suicide Squad Bootstrap collapse

In this example below you will see how to do a Suicide Squad Bootstrap collapse with some HTML / CSS and Javascript

Technologies

Comments

More from -J0hn-

A Pen by John

Simple Responsive nav

Nav scroll animation

Title Case a Sentence

You Might Also Like

Custom CSS Transitions

Experiment with <progress>

Radial Progress bar

CSS Floated boxes masonry

SVG Cleaning

Tenable Awards Page

dmag

A Pen by Monica