Difference between revisions of "Team:Tec-Monterrey/sandboxDavid"
Davidacevedo (Talk | contribs) |
Davidacevedo (Talk | contribs) |
||
| Line 6: | Line 6: | ||
<head> | <head> | ||
<style> | <style> | ||
| + | #dropzoneWrapper { | ||
| + | position: absolute; | ||
| + | height: auto; | ||
| + | width: 100%; | ||
| + | background-color: blue; | ||
| + | } | ||
#outer-dropzone { | #outer-dropzone { | ||
| − | height: | + | height: 80vw; |
| + | width: 80vw; | ||
touch-action: none; | touch-action: none; | ||
} | } | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
.dropzone { | .dropzone { | ||
background-color: #ccc; | background-color: #ccc; | ||
| Line 63: | Line 66: | ||
} | } | ||
| − | # | + | #backgroundHolder { |
| − | + | width: 80vw; | |
| − | + | height: 80vw; | |
position: relative; | position: relative; | ||
| + | z-index: 1; | ||
| + | background-image: url("https://static.igem.org/mediawiki/2018/5/5d/T--Tec-Monterrey--cut_interactive.png"); | ||
| + | background-repeat:no-repeat; | ||
| + | background-size: 100%; | ||
| + | } | ||
| + | |||
| + | |||
| + | #interactive_Background { | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | #plasmidHolder { | ||
| + | width: 80vw; | ||
| + | height: 80vw; | ||
| + | position: absolute; | ||
| + | z-index: 3; | ||
| + | background-image:url("https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png"); | ||
| + | background-repeat:no-repeat; | ||
| + | background-size: 100%; | ||
} | } | ||
#interactive_CutPlasmidFull { | #interactive_CutPlasmidFull { | ||
| − | height: | + | height: 100%; |
| − | width: | + | } |
| + | |||
| + | #colorsWrapper { | ||
| + | width: 80vw; | ||
| + | height: 80vw; | ||
position: absolute; | position: absolute; | ||
| − | |||
| − | |||
z-index: 2; | z-index: 2; | ||
| + | background-repeat:no-repeat; | ||
| + | background-size: 100%; | ||
} | } | ||
| + | #color1 { | ||
| + | left: 48%; | ||
| + | top: 54.5%; | ||
| + | height: 8%; | ||
| + | width: 8%; | ||
| + | background-color: yellow; | ||
| + | position: absolute; | ||
| + | z-index:3; | ||
| + | } | ||
| + | #color2 { | ||
| + | left: 56%; | ||
| + | top: 54.5%; | ||
| + | height: 8%; | ||
| + | width: 8%; | ||
| + | background-color: red; | ||
| + | position: absolute; | ||
| + | z-index:3; | ||
| + | } | ||
| + | #color3 { | ||
| + | left: 48%; | ||
| + | top: 63%; | ||
| + | height: 7%; | ||
| + | width: 7.5%; | ||
| + | background-color: aqua; | ||
| + | position: absolute; | ||
| + | z-index:3; | ||
| + | } | ||
| + | #color4 { | ||
| + | left: 56%; | ||
| + | top: 63%; | ||
| + | height: 7%; | ||
| + | width: 7.5%; | ||
| + | background-color: pink; | ||
| + | position: absolute; | ||
| + | z-index:3; | ||
| + | } | ||
| + | |||
| + | |||
</style> | </style> | ||
</head> | </head> | ||
| Line 98: | Line 162: | ||
| − | + | <div id="dropzoneWrapper"> | |
<div id="outer-dropzone" class="dropzone"> | <div id="outer-dropzone" class="dropzone"> | ||
| − | < | + | <div id="backgroundHolder" style=""> |
| − | + | <div id="colorsWrapper"> | |
| − | + | <div id="color1"></div> | |
| + | <div id="color2"></div> | ||
| + | <div id="color3"></div> | ||
| + | <div id="color4"></div> | ||
| + | </div> | ||
| + | <div id="plasmidHolder" style="background-image:url('https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png')"> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
</div> | </div> | ||
<script> | <script> | ||
Revision as of 05:29, 14 October 2018
Home
