Difference between revisions of "Team:DTU-Denmark/background"

Line 8: Line 8:
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <style>
 +
    #myImg {
 +
    border-radius: 5px;
 +
    cursor: pointer;
 +
    transition: 0.3s;
 +
}
 +
 +
#myImg:hover {opacity: 0.7;}
 +
 +
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* 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;
 +
}
 +
 +
.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%;
 +
    }
 +
}
 +
    </style>
 
</head>
 
</head>
  
Line 18: Line 105:
 
     <div class="container-fluid">
 
     <div class="container-fluid">
 
         <div class="row">
 
         <div class="row">
−
             <div class="col-md-12 thumbnail" style="background-image:url(https://static.igem.org/mediawiki/2016/5/56/T--DTU-Denmark--project-header.jpg)"> <!-- EDIT style url (this should lead to an image) -->
+
             <div class="col-md-12 thumbnail" style="background-image:url(https://www.spring-green.com/wp-content/uploads/2015/12/Tree-that-needs-pruning1.jpg)"> <!-- EDIT style url (this should lead to an image) -->
  
 
                 <div class="caption">
 
                 <div class="caption">
Line 45: Line 132:
 
         <div><a class="anchor" id="section-1"></a>
 
         <div><a class="anchor" id="section-1"></a>
 
         <h2 class="h2">Section 1</h2>
 
         <h2 class="h2">Section 1</h2>
 +
            <img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
 +
 +
            <!-- The Modal -->
 +
            <div id="myModal" class="modal">
 +
              <span class="close">×</span>
 +
              <img class="modal-content" id="img01">
 +
              <div id="caption"></div>
 +
            </div>
 +
 +
            <script>
 +
            // Get the modal
 +
            var modal = document.getElementById('myModal');
 +
 +
            // Get the image and insert it inside the modal - use its "alt" text as a caption
 +
            var img = document.getElementById('myImg');
 +
            var modalImg = document.getElementById("img01");
 +
            var captionText = document.getElementById("caption");
 +
            img.onclick = function(){
 +
                modal.style.display = "block";
 +
                modalImg.src = this.src;
 +
                captionText.innerHTML = this.alt;
 +
            }
 +
 +
            // Get the <span> element that closes the modal
 +
            var span = document.getElementsByClassName("close")[0];
 +
 +
            // When the user clicks on <span> (x), close the modal
 +
            span.onclick = function() {
 +
                modal.style.display = "none";
 +
            }
 +
            </script>
 +
           
 
              
 
              
 
             <blockquote class="visible-xs"> <!-- quote from masterhead duplicate -->
 
             <blockquote class="visible-xs"> <!-- quote from masterhead duplicate -->
Line 54: Line 173:
 
                 Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
 
                 Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
 
             </p>
 
             </p>
−
 
−
<!-- Button trigger modal -->
 
−
  <a data-toggle="modal" href="#myModal1" class="btn btn-primary btn-lg">Launch demo modal</a>
 
−
 
−
  <!-- Modal -->
 
−
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
−
    <div class="modal-dialog">
 
−
      <div class="modal-content">
 
−
        <div class="modal-header">
 
−
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 
−
          <h4 class="modal-title">Modal title</h4>
 
−
        </div>
 
−
        <div class="modal-body">
 
−
          ...
 
−
        </div>
 
−
        <div class="modal-footer">
 
−
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 
−
          <button type="button" class="btn btn-primary">Save changes</button>
 
−
        </div>
 
−
      </div><!-- /.modal-content -->
 
−
    </div><!-- /.modal-dialog -->
 
−
  </div><!-- /.modal -->
 
−
 
 
−
 
−
 
−
 
−
<script>
 
−
$(document).ready(function () {
 
−
    $('img').on('click', function () {
 
−
        var image = $(this).attr('src');
 
−
        //alert(image);
 
−
        $('#myModal').on('show.bs.modal', function () {
 
−
            $(".showimage").attr("src", image);
 
−
        });
 
−
    });
 
−
});
 
−
</script>
 
−
 
 
         </div> <!-- /overview-->
 
         </div> <!-- /overview-->
 
          
 
          

Revision as of 12:17, 16 October 2016

New HTML template for the wiki




Bootstrap Example

Title

leader under the title, short introduction. Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his.


Section 1

Trolltunga, Norway

Quote Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Section 2

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Section 2.1

Paragraph

Paragraph

Section 2.2

Paragraph

Paragraph

Section 2.3

Paragraph

Paragraph

Section 3

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Section 4

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Section 5

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Section 6

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Section 7

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

  • FIND US AT:
Facebook Twitter
  • DTU BIOBUILDERS
  • DENMARK
  • DTU - SØLTOFTS PLADS, BYGN. 221/002
  • 2800 KGS. LYNGBY

  • E-mail:
  • dtu-biobuilders-2016@googlegroups.com
  • MAIN SPONSORS:
Lundbeck fundation DTU blue dot Lundbeck fundation Lundbeck fundation