|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| − |
| |
| − | <style>
| |
| − |
| |
| − | /* Style the Image Used to Trigger the Modal */
| |
| − | #PosLuxR, #NegLuxR, #NegLuxRExtAHLdeg, #NegLuxRLuxRdeg, #PosLuxRExtAHLdeg, #PosLuxRLuxRdeg {
| |
| − | border-radius: 5px;
| |
| − | cursor: pointer;
| |
| − | transition: 0.3s;
| |
| − | }
| |
| − |
| |
| − | #PosLuxR:hover {opacity: 0.7;}
| |
| − | #NegLuxR:hover {opacity: 0.7;}
| |
| − |
| |
| − | #NegLuxRExtAHLdeg:hover {opacity: 0.7;}
| |
| − | #NegLuxRLuxRdeg:hover {opacity: 0.7;}
| |
| − | #PosLuxRExtAHLdeg:hover {opacity: 0.7;}
| |
| − | #PosLuxRLuxRdeg:hover {opacity: 0.7;}
| |
| − |
| |
| − |
| |
| − | /* The Modal (background) */
| |
| − | .modal {
| |
| − | display: none; /* Hidden by default */
| |
| − | position: fixed; /* Stay in place */
| |
| − | z-index: 90; /* Sit on top */
| |
| − | padding-top: 50px; /* Location of the box */
| |
| − | left: 0;
| |
| − | top: 0;
| |
| − | width: 100%; /* Full width */
| |
| − | height: 100%; /* Full height */
| |
| − | overflow: auto; /* Enable scroll if needed */
| |
| − | background-color: rgb(0,0,0); /* Fallback color */
| |
| − | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
| |
| − | }
| |
| − |
| |
| − | /* Modal Content (Image) */
| |
| − | .modal-content {
| |
| − | margin: auto;
| |
| − | display: block;
| |
| − | width: 90%;
| |
| − | max-width: 1366px;
| |
| − | }
| |
| − |
| |
| − | /* Caption of Modal Image (Image Text) - Same Width as the Image */
| |
| − | .caption {
| |
| − | margin: auto;
| |
| − | display: block;
| |
| − | width: 90%;
| |
| − | max-width: 1366px;
| |
| − | text-align: center;
| |
| − | color: #ccc;
| |
| − | padding: 10px 0;
| |
| − | height: 150px;
| |
| − | }
| |
| − |
| |
| − | /* Add Animation - Zoom in the Modal */
| |
| − | .modal-content {
| |
| − | -webkit-animation-name: zoom;
| |
| − | -webkit-animation-duration: 0.6s;
| |
| − | animation-name: zoom;
| |
| − | animation-duration: 0.6s;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes zoom {
| |
| − | from {-webkit-transform:scale(0)}
| |
| − | to {-webkit-transform:scale(1)}
| |
| − | }
| |
| − |
| |
| − | @keyframes zoom {
| |
| − | from {transform:scale(0)}
| |
| − | to {transform:scale(1)}
| |
| − | }
| |
| − |
| |
| − | /* The Close Button */
| |
| − | .close {
| |
| − | position: absolute;
| |
| − | top: 15px;
| |
| − | right: 35px;
| |
| − | color: #f1f1f1;
| |
| − | font-size: 40px;
| |
| − | font-weight: bold;
| |
| − | transition: 0.3s;
| |
| − | }
| |
| − |
| |
| − | .close:hover,
| |
| − | .close:focus {
| |
| − | color: #bbb;
| |
| − | text-decoration: none;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | /* 100% Image Width on Smaller Screens */
| |
| − | @media only screen and (max-width: 700px){
| |
| − | .modal-content {
| |
| − | width: 100%;
| |
| − | }
| |
| − | }
| |
| | | | |
| | | | |
| Line 190: |
Line 94: |
| | </style> | | </style> |
| | | | |
| − | <script>
| |
| − |
| |
| − | $(function() {
| |
| − | $('#PosLuxR').on('click', function() {
| |
| − | $('#PosLuxR-Modal').toggle();
| |
| − | });
| |
| − | $('#PosLuxR-Modal').on('click', function() {
| |
| − | $('#PosLuxR-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − | $('#NegLuxR').on('click', function() {
| |
| − | $('#NegLuxR-Modal').toggle();
| |
| − | });
| |
| − | $('#NegLuxR-Modal').on('click', function() {
| |
| − | $('#NegLuxR-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − |
| |
| − | $('#NegLuxRExtAHLdeg').on('click', function() {
| |
| − | $('#NegLuxRExtAHLdeg-Modal').toggle();
| |
| − | });
| |
| − | $('#NegLuxRExtAHLdeg-Modal').on('click', function() {
| |
| − | $('#NegLuxRExtAHLdeg-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − | $('#NegLuxRLuxRdeg').on('click', function() {
| |
| − | $('#NegLuxRLuxRdeg-Modal').toggle();
| |
| − | });
| |
| − | $('#NegLuxRLuxRdeg-Modal').on('click', function() {
| |
| − | $('#NegLuxRLuxRdeg-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − | $('#PosLuxRExtAHLdeg').on('click', function() {
| |
| − | $('#PosLuxRExtAHLdeg-Modal').toggle();
| |
| − | });
| |
| − | $('#PosLuxRExtAHLdeg-Modal').on('click', function() {
| |
| − | $('#PosLuxRExtAHLdeg-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − | $('#PosLuxRLuxRdeg').on('click', function() {
| |
| − | $('#PosLuxRLuxRdeg-Modal').toggle();
| |
| − | });
| |
| − | $('#PosLuxRLuxRdeg-Modal').on('click', function() {
| |
| − | $('#PosLuxRLuxRdeg-Modal').toggle();
| |
| − | });
| |
| − |
| |
| − |
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| | | | |
| | | | |
| | </html> | | </html> |
#Rollout-img {
width:100%;
margin:auto;
height:auto;
}
.expert-box {
background-color:#F2F2ed;
border: 1px solid grey;
padding:1rem;
display:table;
border-radius: 15px;
margin-left:auto;
margin-right:auto;
width:80%;
margin-top:1rem;
background-image: url(https://static.igem.org/mediawiki/2017/2/2c/Roll-out-plan-Expert-Box.png);
background-position:bottom;
background-repeat:repeat-x;
background-size: 100% 100%;
}
.expert-photo-wrapper-left{
width:16%;
float: left;
}
.expert-photo-wrapper-right{
width:16%;
float: right;
}
.expert-name-left {
margin-bottom:0.4rem;
}
.expert-name-right {
margin-bottom:0.4rem;
text-align:right;
}
.expert-photo img{
width:100%;
border-radius: 100%;
}
.expert-link{
font-size: 2000%;
}
.expert-text-left {
float:right;
width:84%;
padding-left: 20px;
padding-right: 20px;
float:right
}
.expert-text-right {
float:right;
width:84%;
padding-left: 20px;
padding-right: 20px;
text-align:right;
}
.expert-title {
margin-top:0.4rem;
}
.expert-quote p {
font-size:1.2rem;
font-style: italic;
}
q,
blockquote {
quotes: "\201C" "\201D" "\2018" "\2019";
}
#Step1, #Step2, #Step3, #Step4, #Step5, #Step6, #Step7, #Step8, #Step9, #Step10, #Step11, #Step12 {
display:none;
}
