Difference between revisions of "Team:iTesla-SoundBio/Protocols"

Line 10: Line 10:
  
 
<style>
 
<style>
.center {
+
div.protocols {
  width: 60%;
+
    margin: 5px;
  margin: auto;
+
    border: 1px solid #ccc;
 +
    float: left;
 +
    width: 30%;
 
}
 
}
button {
 
  background-color: #008CBA;
 
    border: none;
 
    color: white;
 
    padding: 15px 32px;
 
    text-align: center;
 
    text-decoration: none;
 
    display: inline-block;
 
    font-size: 16px;
 
    margin: 4px 2px;
 
    cursor: pointer;
 
  display: flex; justify-content: center;
 
}
 
h1 {
 
    font: 600 1.5em/1 'Raleway', sans-serif;
 
    color: rgba(0,0,0,.5);
 
    text-align: center;
 
    text-transform: uppercase;
 
    letter-spacing: .5em;
 
    top: 25%;
 
    width: 100%;
 
padding-top: 50px;
 
        padding-bottom: 50px;
 
  
}
+
div.protocols:hover {
span, span:after {
+
     border: 1px solid #777;
     font-weight: 900;
+
    color: #efedce;
+
    white-space: nowrap;
+
    display: inline-block;
+
    letter-spacing: .1em;
+
    padding: .2em 0 .25em 0;
+
 
}
 
}
  
span {
+
div.protocols img {
     font-size: 4em;
+
     width: 100%;
    z-index: 100;
+
     height: auto;
     text-shadow: .04em .04em 0 #9cb8b3;
+
 
}
 
}
  
span:after {
+
div.desc {
     content: attr(data-shadow-text);
+
     padding: 15px;
    color: rgba(0,0,0,.35);
+
     text-align: center;
     text-shadow: none;
+
    position: absolute;
+
    left: .0875em;
+
    top: .0875em;
+
    z-index: -1;
+
    -webkit-mask-image: url(https://f.cl.ly/items/1t1C0W3y040g1J172r3h/mask.png);
+
 
}
 
}
 
+
</style><body>
</style>
+
<div class="protocol">
<body>
+
  <a target="_blank" href="https://static.igem.org/mediawiki/2018/0/05/T--iTesla-Soundbio--Gel_Image.png">
 +
    <img src="https://static.igem.org/mediawiki/2018/0/05/T--iTesla-Soundbio--Gel_Image.png" alt="Cinque Terre" width="300" height="200">
 +
  </a>
 +
  <div class="desc">Gel Extraction</div>
 +
</div>
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 05:05, 6 September 2018

Building and Modulizing Biology

Design it like Lego Pieces

Cinque Terre
Gel Extraction