Difference between revisions of "Team:Uppsala"

Line 132: Line 132:
  
  
<!-- TODO: REMOVE
+
 
        <div class ="scroll-pointer">
+
            <svg class="arrows">
+
              <path class="a1" d="M0 20 L30 52 L60 20"></path>
+
              <path class="a2" d="M0 30 L30 62 L60 30"></path>
+
              <path class="a3" d="M0 40 L30 72 L60 40"></path>
+
          </svg>
+
        </div>
+
-->
+
  
  
Line 286: Line 278:
  
  
 
 
<!-- Pop UP -->
 
 
 
 
 
 
<style type="text/css">
 
 
 
 
 
 
<!-- 1st -->
 
 
hr{
 
border:0;
 
border-top:1px solid #0000;
 
margin-bottom:-10px
 
}
 
div#main{
 
width:824px;
 
height:764px;
 
margin:0 auto;
 
font-family:'times new roman',serif
 
}
 
div#first{
 
width:350px;
 
height:740px;
 
padding:0 25px 20px;
 
float:left;
 
text-align:center
 
}
 
.trigger1{
 
width:260px;
 
height:50px;
 
margin-left:45px
 
}
 
.trigger1{
 
width:260px;
 
height:85px;
 
margin-left:42px
 
}
 
.trigger1{
 
width:250px;
 
height:45px;
 
border:none;
 
outline:none;
 
box-shadow:0 3px 2px 0 #969696;
 
color:#fff;
 
font-size:14px;
 
text-shadow:0 1px rgba(0,0,0,0.4);
 
background-color:#8B1A32;
 
font-weight:700;
 
background-image:url(../images/1.png);
 
background-repeat:no-repeat;
 
background-position:200px
 
}
 
.trigger1:hover{
 
background-color:#910221;
 
cursor:pointer
 
}
 
.trigger1:active{
 
padding-top:2px;
 
box-shadow:none
 
}
 
 
 
<!-- 2nd button-->
 
 
 
hr{
 
border:0;
 
border-top:1px solid #0000;
 
margin-bottom:-10px
 
}
 
div#main{
 
width:824px;
 
height:764px;
 
margin:0 auto;
 
font-family:'times new roman',serif
 
}
 
div#first{
 
width:350px;
 
height:740px;
 
padding:0 25px 20px;
 
float:left;
 
text-align:center
 
}
 
.trigger2{
 
width:260px;
 
height:50px;
 
margin-left:45px
 
}
 
.trigger2{
 
width:260px;
 
height:85px;
 
margin-left:42px
 
}
 
.trigger2{
 
width:250px;
 
height:45px;
 
border:none;
 
outline:none;
 
box-shadow:0 3px 2px 0 #969696;
 
color:#fff;
 
font-size:14px;
 
text-shadow:0 1px rgba(0,0,0,0.4);
 
background-color:#8B1A32;
 
font-weight:700;
 
background-image:url(../images/1.png);
 
background-repeat:no-repeat;
 
background-position:200px
 
}
 
.trigger2:hover{
 
background-color:#910221;
 
cursor:pointer
 
}
 
.trigger2:active{
 
padding-top:2px;
 
box-shadow:none
 
}
 
 
 
 
 
<!--3rd button -->
 
 
 
 
 
 
hr{
 
border:0;
 
border-top:1px solid #0000;
 
margin-bottom:-10px
 
}
 
div#main{
 
width:824px;
 
height:764px;
 
margin:0 auto;
 
font-family:'times new roman',serif
 
}
 
div#first{
 
width:350px;
 
height:740px;
 
padding:0 25px 20px;
 
float:left;
 
text-align:center
 
}
 
.trigger3{
 
width:260px;
 
height:50px;
 
margin-left:45px
 
}
 
.trigger3{
 
width:260px;
 
height:85px;
 
margin-left:42px
 
}
 
.trigger3{
 
width:250px;
 
height:45px;
 
border:none;
 
outline:none;
 
box-shadow:0 3px 2px 0 #969696;
 
color:#fff;
 
font-size:14px;
 
text-shadow:0 1px rgba(0,0,0,0.4);
 
background-color:#8B1A32;
 
font-weight:700;
 
background-image:url(../images/1.png);
 
background-repeat:no-repeat;
 
background-position:200px
 
}
 
.trigger3:hover{
 
background-color:#910221;
 
cursor:pointer
 
}
 
.trigger3:active{
 
padding-top:2px;
 
box-shadow:none
 
}
 
 
 
 
 
 
 
 
.modal {
 
        position: fixed;
 
        left: 0;
 
        top: 0;
 
        width: 100%;
 
        height: 100%;
 
        background-color: rgba(0, 0, 0, 0.5);
 
        opacity: 0;
 
        visibility: hidden;
 
        transform: scale(1.1);
 
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
 
    }
 
    .modal-content {
 
        position: absolute;
 
        top: 50%;
 
        left: 50%;
 
        transform: translate(-50%, -50%);
 
        background-color: #8B1A32;
 
        padding: 1rem 1.5rem;
 
        width: 24rem;
 
        border-radius: 0.5rem;
 
    }
 
    .close-button {
 
        float: right;
 
        width: 1.5rem;
 
        line-height: 1.5rem;
 
        text-align: center;
 
        cursor: pointer;
 
        border-radius: 0.25rem;
 
        background-color: #ffffff;
 
    }
 
    .close-button:hover {
 
        background-color: #969696;
 
    }
 
    .show-modal {
 
        opacity: 1;
 
        visibility: visible;
 
        transform: scale(1.0);
 
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
 
    }
 
</style>
 
 
 
 
 
 
 
 
<!-- JAVA SCRIPT -->
 
<script>
 
 
<!-- 1st button->
 
 
var modal = document.querySelector(".modal");
 
    var trigger1 = document.querySelector(".trigger1");
 
    var closeButton = document.querySelector(".close-button");
 
 
    function toggleModal() {
 
        modal.classList.toggle("show-modal");
 
    }
 
 
    function windowOnClick(event) {
 
        if (event.target === modal) {
 
            toggleModal();
 
        }
 
    }
 
 
    trigger1.addEventListener("click", toggleModal);
 
    closeButton.addEventListener("click", toggleModal);
 
    window.addEventListener("click", windowOnClick);
 
 
 
 
 
<!-- 2st button->
 
 
var modal = document.querySelector(".modal");
 
    var trigger2 = document.querySelector(".trigger2");
 
    var closeButton = document.querySelector(".close-button");
 
 
    function toggleModal() {
 
        modal.classList.toggle("show-modal");
 
    }
 
 
    function windowOnClick(event) {
 
        if (event.target === modal) {
 
            toggleModal();
 
        }
 
    }
 
 
    trigger2.addEventListener("click", toggleModal);
 
    closeButton.addEventListener("click", toggleModal);
 
    window.addEventListener("click", windowOnClick);
 
 
 
 
 
 
<!-- 3st button->
 
 
 
var modal = document.querySelector(".modal");
 
    var trigger3 = document.querySelector(".trigger3");
 
    var closeButton = document.querySelector(".close-button");
 
 
    function toggleModal() {
 
        modal.classList.toggle("show-modal");
 
    }
 
 
    function windowOnClick(event) {
 
        if (event.target === modal) {
 
            toggleModal();
 
        }
 
    }
 
 
    trigger3.addEventListener("click", toggleModal);
 
    closeButton.addEventListener("click", toggleModal);
 
    window.addEventListener("click", windowOnClick);
 
  
  
  
</script>
 
  
  

Revision as of 10:03, 12 October 2018





Uppsala iGEM 2018