Difference between revisions of "Team:NAIT Edmonton/Trial11"

Line 68: Line 68:
  
 
.btn2 {cursor: pointer;background: none;padding: none;color:none; border-radius: none;}
 
.btn2 {cursor: pointer;background: none;padding: none;color:none; border-radius: none;}
 +
 +
/* Modal */
 +
.modal {opacity: 0;visibility: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: left;background: rgba(0,0,0, .9);transition: opacity .25s ease;z-index:999;}
 +
.modal__bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;}
 +
.modal-state { display: none;}
 +
.modal-state:checked + .modal {opacity: 1;visibility: visible;}
 +
.modal-state:checked + .modal .modal__inner {top: 0;}
 +
.modal__inner {transition: top .25s ease;position: absolute;top: -20%; right: 0;bottom: 0;left: 0;height:100px;width: 750px;margin: auto;overflow: auto;background:#FFFFFF;border-radius: 0px;padding: 1em 2em;height: 458px;}
 +
.modal__close {position: absolute;right: 1em;top: 1em;width: 1.1em;height: 1.1em;cursor: pointer;}
 +
.modal__close:after,
 +
.modal__close:before {content: '';position: absolute;width: 2px;height: 1.5em;background: #ccc;display: block;transform: rotate(45deg);left: 50%;margin: -3px 0 0 -1px;top: 0;}
 +
.modal__close:hover:after,
 +
.modal__close:hover:before {background: #aaa;}
 +
.modal__close:before {transform: rotate(-45deg);}
  
 
</style>
 
</style>
Line 81: Line 95:
  
  
−
<label class="btn2" for="modal-1"><img src="https://static.igem.org/mediawiki/2015/5/5e/NAIT_Band_Marcelo.png" style="position:absolute;top:625px;margin-left:60px"></label>
+
<label class="btn2" for="Marcelo"><img src="https://static.igem.org/mediawiki/2015/5/5e/NAIT_Band_Marcelo.png" style="position:absolute;top:625px;margin-left:60px"></label>
  
  
Line 87: Line 101:
 
   </div>
 
   </div>
 
   </div>
 
   </div>
 +
 +
<input class="modal-state" id="marcelo" type="checkbox" />
 +
<div class="modal">
 +
  <label class="modal__bg" for="marcelo"></label>
 +
  <div class="modal__inner">
 +
 +
    <center><h1>Double Digest</h1></center>
 +
  <center><img src="https://media.licdn.com/media/p/8/000/25f/329/06cf107.png" alt=""/></center>
 +
    <br><br>
 +
    <p>DINOSAUR <br> - juice<br> - eggs <br>
  
  
 +
</p>
 +
  </div>
 +
</div>
  
  

Revision as of 06:10, 23 July 2015