Difference between revisions of "Template:Team:DTU-Denmark/header.html"

Line 167: Line 167:
 
             .mobile-scrole{
 
             .mobile-scrole{
 
               display: none;
 
               display: none;
 +
            }
 +
 +
#myImg {
 +
                border-radius: 5px;
 +
                cursor: pointer;
 +
                transition: 0.3s;
 +
            }
 +
 +
 +
            /* The Modal (background) */
 +
            .modal {
 +
                display: none; /* Hidden by default */
 +
                position: fixed; /* Stay in place */
 +
                z-index: 100; /* Sit on top */
 +
                padding-top: 100px; /* 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: 80%;
 +
                max-width: 700px;
 +
            }
 +
 +
            /* Caption of Modal Image */
 +
            #caption {
 +
                margin: auto;
 +
                display: block;
 +
                width: 80%;
 +
                max-width: 700px;
 +
                text-align: center;
 +
                color: #ccc;
 +
                padding: 10px 0;
 +
                height: 150px;
 +
            }
 +
 +
            /* Add Animation */
 +
            .modal-content, #caption {
 +
                -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;
 +
                z-index: 100;
 +
            }
 +
 +
            .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%;
 +
                }
 
             }
 
             }
  

Revision as of 14:57, 16 October 2016

New HTML template for the wiki