Difference between revisions of "Team:Heidelberg/Achievements"

Line 11: Line 11:
 
{{#tag:html|
 
{{#tag:html|
  
−
<section class="teaser" style="padding-top: 100px">
+
<style>
−
    <div class="container">
+
.card {
−
        <div class="row">
+
  padding: 50px 15px;
−
             <div class="col-md-4">
+
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
−
                 <div class="card">
+
  -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
 +
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);
 +
  text-align: center; }
 +
   
 +
    .card p {
 +
    text-align: left;
 +
    font-size: 20px !important}
 +
    .card-button {
 +
        font-family: 'Open Sans' !important;
 +
            overflow: hidden;
 +
    width: 100%;
 +
    position: relative;
 +
    font-size: 25;
 +
    /* 20px */
 +
    font-weight: 400;
 +
   
 +
    text-overflow: ellipsis;
 +
    white-space: nowrap;
 +
    cursor: pointer;
 +
    display: inline-block;
 +
    overflow: hidden;
 +
    color: #393939;
 +
    padding: 0.625rem 1.25rem;
 +
    }
 +
    .card-button:hover {
 +
        color: #9d1c20 !important;
 +
    }
 +
           
 +
    .equal_height {
 +
    display: -webkit-flex;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-flex-wrap: wrap;
 +
  -ms-flex-wrap: wrap;
 +
  flex-wrap: wrap;
 +
    }
 +
    .equal_height > .col-md-4 {
 +
  display: -webkit-flex;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
 +
    }
 +
</style>
 +
 
 +
<section class="teaser content equal_height" style="padding-top: 100px;">
 +
             <div class="col-lg-4 col-md-4 col-xs-12">
 +
                 <div class="card" style="border-left: 10px solid #CD7F32">
 
                     <img class="card-img-top" src="https://static.igem.org/mediawiki/2017/8/83/T--Heidelberg--2017_Bronze.svg" width="60%" alt="Card image cap">
 
                     <img class="card-img-top" src="https://static.igem.org/mediawiki/2017/8/83/T--Heidelberg--2017_Bronze.svg" width="60%" alt="Card image cap">
 
                     <div class="card-body">
 
                     <div class="card-body">
−
                         <h4 class="card-title">Card title</h4>
+
                         <h4 class="card-title">Bronze</h4>
−
                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+
                         <p class="card-text content"><i class="fa fa-check" aria-hidden="true"></i> We managed to setup pace</p>
−
                         <a href="#" class="btn btn-primary">Go somewhere</a>
+
                         <p class="card-text content"><i class="fa fa-check" aria-hidden="true"></i> We did lots of other stuff</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
             <div class="col-md-4">
+
             <div class="col-lg-4 col-md-4 col-xs-12">
−
                 <div class="card">
+
                 <div class="card" style="border-left: 10px solid #C0C0C0">
 
                     <img class="card-img-top" src="https://static.igem.org/mediawiki/2017/5/5c/T--Heidelberg--2017_Silver.svg" width="60%" alt="Card image cap">
 
                     <img class="card-img-top" src="https://static.igem.org/mediawiki/2017/5/5c/T--Heidelberg--2017_Silver.svg" width="60%" alt="Card image cap">
 
                     <div class="card-body">
 
                     <div class="card-body">
−
                         <h4 class="card-title">Card title</h4>
+
                         <h4 class="card-title">Silver</h4>
−
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+
                        <p class="card-text content"><i class="fa fa-check" aria-hidden="true"></i> We managed to setup pace</p>
−
                         <a href="#" class="btn btn-primary">Go somewhere</a>
+
                         <p class="card-text content"><i class="fa fa-check" aria-hidden="true"></i> We did lots of other stuff</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
             <div class="col-md-4">
+
             <div class="col-lg-4 col-md-4 col-xs-12">
−
                 <div class="card">
+
                 <div class="card" style="border-left: 10px solid #ffd700">
 
                     <img class="card-img-top" src="https://static.igem.org/mediawiki/2017/2/2b/T--Heidelberg--2017_Gold.svg" width="60%" alt="Card image cap">
 
                     <img class="card-img-top" src="https://static.igem.org/mediawiki/2017/2/2b/T--Heidelberg--2017_Gold.svg" width="60%" alt="Card image cap">
 
                     <div class="card-body">
 
                     <div class="card-body">
−
                         <h4 class="card-title">Card title</h4>
+
                         <h4 class="card-title">Gold</h4>
−
                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+
                         <p class="card-text content"><i class="fa fa-check" aria-hidden="true"></i> We managed to setup pace</p>
−
                         <a href="#" class="btn btn-primary">Go somewhere</a>
+
                         <p class="card-text content"><i class="fa fa-check" aria-hidden="true"></i> We did lots of other stuff</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
 
−
 
−
    </div>
 
 
</section>
 
</section>
  

Revision as of 14:02, 28 October 2017

Achievements
Subtitle
Card image cap

Bronze

We managed to setup pace

We did lots of other stuff

Card image cap

Silver

We managed to setup pace

We did lots of other stuff

Card image cap

Gold

We managed to setup pace

We did lots of other stuff