Difference between revisions of "Team:Potsdam/ContentPageTemplateNew"

Line 20: Line 20:
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
 
<style>
 
<style>
−
#asdfMAIN_2 {
 
−
    box-sizing: border-box;
 
−
    color: rgba(0, 0, 0, 0.87);
 
−
    height: 392.766px;
 
−
    text-decoration: none solid rgba(0, 0, 0, 0.87);
 
−
    text-size-adjust: 100%;
 
−
    width: 1608px;
 
−
    column-rule-color: rgba(0, 0, 0, 0.87);
 
−
    perspective-origin: 804px 196.375px;
 
−
    transform-origin: 804px 196.375px;
 
−
    caret-color: rgba(0, 0, 0, 0.87);
 
−
    border: 0px none rgba(0, 0, 0, 0.87);
 
−
    font: normal normal normal normal 15px / 22.5px Roboto, sans-serif;
 
−
    outline: rgba(0, 0, 0, 0.87) none 0px;
 
−
    padding: 0px 0px 0px 300px;
 
−
}/*#asdfMAIN_2*/
 
−
 
−
#asdfDIV_3 {
 
−
    box-sizing: border-box;
 
−
    color: rgba(0, 0, 0, 0.87);
 
−
    height: 392.766px;
 
−
    max-width: 1280px;
 
−
    text-decoration: none solid rgba(0, 0, 0, 0.87);
 
−
    text-size-adjust: 100%;
 
−
    width: 1111.8px;
 
−
    column-rule-color: rgba(0, 0, 0, 0.87);
 
−
    perspective-origin: 555.891px 196.375px;
 
−
    transform-origin: 555.891px 196.375px;
 
−
    caret-color: rgba(0, 0, 0, 0.87);
 
−
    border: 0px none rgba(0, 0, 0, 0.87);
 
−
    font: normal normal normal normal 15px / 22.5px Roboto, sans-serif;
 
−
    margin: 0px 98.1094px 0px 98.0938px;
 
−
    outline: rgba(0, 0, 0, 0.87) none 0px;
 
−
}/*#asdfDIV_3*/
 
−
 
−
#asdfDIV_4 {
 
−
    box-sizing: border-box;
 
−
    color: rgba(0, 0, 0, 0.87);
 
−
    height: 392.766px;
 
−
    text-decoration: none solid rgba(0, 0, 0, 0.87);
 
−
    text-size-adjust: 100%;
 
−
    width: 1134.3px;
 
−
    column-rule-color: rgba(0, 0, 0, 0.87);
 
−
    perspective-origin: 567.141px 196.375px;
 
−
    transform-origin: 567.141px 196.375px;
 
−
    caret-color: rgba(0, 0, 0, 0.87);
 
−
    border: 0px none rgba(0, 0, 0, 0.87);
 
−
    font: normal normal normal normal 15px / 22.5px Roboto, sans-serif;
 
−
    margin: 0px -11.25px 20px;
 
−
    outline: rgba(0, 0, 0, 0.87) none 0px;
 
−
}/*#asdfDIV_4*/
 
−
 
−
#asdfDIV_5 {
 
−
    box-sizing: border-box;
 
−
    color: rgba(0, 0, 0, 0.87);
 
−
    float: left;
 
−
    height: 392.766px;
 
−
    min-height: 1px;
 
−
    text-decoration: none solid rgba(0, 0, 0, 0.87);
 
−
    text-size-adjust: 100%;
 
−
    width: 945.234px;
 
−
    column-rule-color: rgba(0, 0, 0, 0.87);
 
−
    perspective-origin: 472.609px 196.375px;
 
−
    transform-origin: 472.609px 196.375px;
 
−
    caret-color: rgba(0, 0, 0, 0.87);
 
−
    border: 0px none rgba(0, 0, 0, 0.87);
 
−
    font: normal normal normal normal 15px / 22.5px Roboto, sans-serif;
 
−
    outline: rgba(0, 0, 0, 0.87) none 0px;
 
−
    padding: 0px 11.25px;
 
−
}/*#asdfDIV_5*/
 
−
 
−
#asdfDIV_6 {
 
−
    box-sizing: border-box;
 
−
    color: rgba(0, 0, 0, 0.87);
 
−
    height: 392.766px;
 
−
    text-decoration: none solid rgba(0, 0, 0, 0.87);
 
−
    text-size-adjust: 100%;
 
−
    width: 922.734px;
 
−
    column-rule-color: rgba(0, 0, 0, 0.87);
 
−
    perspective-origin: 461.359px 196.375px;
 
−
    transform-origin: 461.359px 196.375px;
 
−
    caret-color: rgba(0, 0, 0, 0.87);
 
−
    border: 0px none rgba(0, 0, 0, 0.87);
 
−
    font: normal normal normal normal 15px / 22.5px Roboto, sans-serif;
 
−
    outline: rgba(0, 0, 0, 0.87) none 0px;
 
−
    padding: 15px 0px;
 
−
}/*#asdfDIV_6*/
 
−
 
−
#asdfDIV_7 {
 
−
    box-sizing: border-box;
 
−
    color: rgba(0, 0, 0, 0.87);
 
−
    display: flex;
 
−
    height: 56px;
 
−
    text-decoration: none solid rgba(0, 0, 0, 0.87);
 
−
    text-size-adjust: 100%;
 
−
    width: 922.734px;
 
−
    column-rule-color: rgba(0, 0, 0, 0.87);
 
−
    justify-content: space-around;
 
−
    perspective-origin: 461.359px 28px;
 
−
    transform-origin: 461.359px 28px;
 
−
    caret-color: rgba(0, 0, 0, 0.87);
 
−
    border: 0px none rgba(0, 0, 0, 0.87);
 
−
    font: normal normal normal normal 15px / 22.5px Roboto, sans-serif;
 
−
    outline: rgba(0, 0, 0, 0.87) none 0px;
 
−
}/*#asdfDIV_7*/
 
−
 
−
#asdfA_8 {
 
−
    bottom: 0px;
 
−
    box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
 
−
    box-sizing: border-box;
 
−
    color: rgb(255, 255, 255);
 
−
    cursor: pointer;
 
−
    display: block;
 
−
    height: 40px;
 
−
    left: 0px;
 
−
    letter-spacing: 0.5px;
 
−
    min-height: auto;
 
−
    min-width: auto;
 
−
    position: relative;
 
−
    right: 0px;
 
−
    text-align: center;
 
−
    text-decoration: none solid rgb(255, 255, 255);
 
−
    text-size-adjust: 100%;
 
−
    text-transform: uppercase;
 
−
    top: 0px;
 
−
    vertical-align: middle;
 
−
    width: 40px;
 
−
    z-index: 1;
 
−
    column-rule-color: rgb(255, 255, 255);
 
−
    perspective-origin: 20px 20px;
 
−
    transform-origin: 20px 20px;
 
−
    caret-color: rgb(255, 255, 255);
 
−
    background: rgb(38, 166, 154) none repeat scroll 0% 0% / auto padding-box border-box;
 
−
    border: 0px none rgb(255, 255, 255);
 
−
    border-radius: 50% 50% 50% 50%;
 
−
    font: normal normal normal normal 15px / 40px Roboto, sans-serif;
 
−
    outline: rgb(255, 255, 255) none 0px;
 
−
    transition: all 0.3s ease 0s;
 
−
}/*#asdfA_8*/
 
−
 
−
#asdfI_1 {
 
−
    box-sizing: border-box;
 
−
    color: rgb(255, 255, 255);
 
−
    cursor: pointer;
 
−
    display: inline-block;
 
−
    height: 40px;
 
−
    text-align: center;
 
−
    text-decoration: none solid rgb(255, 255, 255);
 
−
    text-rendering: optimizeLegibility;
 
−
    text-size-adjust: 100%;
 
−
    white-space: nowrap;
 
−
    width: 40px;
 
−
    column-rule-color: rgb(255, 255, 255);
 
−
    perspective-origin: 20px 20px;
 
−
    transform-origin: 20px 20px;
 
−
    caret-color: rgb(255, 255, 255);
 
−
    border: 0px none rgb(255, 255, 255);
 
−
    font: normal normal normal normal 24px / 40px "Material Icons";
 
−
    outline: rgb(255, 255, 255) none 0px;
 
−
}/*#asdfI_1*/
 
−
 
  
 +
.btn, .btn-large, .btn-flat {
 +
border: none;
 +
border-radius: 2px;
 +
display: inline-block;
 +
height: 36px;
 +
line-height: 36px;
 +
padding: 0 2rem;
 +
text-transform: uppercase;
 +
vertical-align: middle;
 +
-webkit-tap-highlight-color: transparent;
 +
}
 +
.btn, .btn-large, .btn-floating, .btn-large, .btn-flat {
 +
font-size: 1rem;
 +
outline: 0;
 +
}
 +
.btn, .btn-large {
 +
text-decoration: none;
 +
color: #fff;
 +
background-color: #26a69a;
 +
text-align: center;
 +
letter-spacing: 0.5px;
 +
transition: .2s ease-out;
 +
cursor: pointer;
 +
}
 +
.btn-floating {
 +
display: inline-block;
 +
color: #fff;
 +
position: relative;
 +
overflow: hidden;
 +
z-index: 1;
 +
width: 40px;
 +
height: 40px;
 +
line-height: 40px;
 +
padding: 0;
 +
background-color: #26a69a;
 +
border-radius: 50%;
 +
transition: .3s;
 +
cursor: pointer;
 +
vertical-align: middle;
 +
}
 +
.pulse {
 +
overflow: initial;
 +
position: relative;
 +
}
 +
.btn-floating::before {
 +
border-radius: 0;
 +
}
 +
.pulse::before {
 +
content: "";
 +
display: block;
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0px;
 +
left: 0px;
 +
background-color: inherit;
 +
border-radius: inherit;
 +
transition: opacity .3s, -webkit-transform .3s;
 +
transition: opacity .3s, transform .3s;
 +
transition: opacity .3s, transform .3s, -webkit-transform .3s;
 +
-webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
 +
animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
 +
z-index: -1;
 +
}
 +
.material-icons {
 +
text-rendering: optimizeLegibility;
 +
-webkit-font-feature-settings: "liga";
 +
-moz-font-feature-settings: "liga";
 +
font-feature-settings: "liga" 1;
 +
}
 +
.material-icons {
 +
font-family: "Material Icons";
 +
font-weight: normal;
 +
font-style: normal;
 +
font-size: 24px;
 +
line-height: 1;
 +
letter-spacing: normal;
 +
text-transform: none;
 +
display: inline-block;
 +
white-space: nowrap;
 +
word-wrap: normal;
 +
direction: ltr;
 +
font-feature-settings: "liga" 1;
 +
}
 +
.btn i, .btn-large i, .btn-floating i, .btn-large i, .btn-flat i {
 +
font-size: 1.3rem;
 +
line-height: inherit;
 +
}
 +
.btn-floating i {
 +
width: inherit;
 +
display: inline-block;
 +
text-align: center;
 +
color: #fff;
 +
font-size: 1.6rem;
 +
line-height: 40px;
 +
}
 
</style>
 
</style>
 
<script>
 
<script>
Line 258: Line 193:
 
<img src="https://static.igem.org/mediawiki/2017/f/fc/T--Potsdam--pic01.jpg" alt="" />
 
<img src="https://static.igem.org/mediawiki/2017/f/fc/T--Potsdam--pic01.jpg" alt="" />
 
</a>
 
</a>
−
<main id="asdfMAIN_2">
+
<a class="btn btn-floating pulse"><i class="material-icons">menu</i></a>
−
<div id="asdfDIV_3">
+
−
<div id="asdfDIV_4">
+
−
<div id="asdfDIV_5">
+
−
<div id="asdfDIV_6">
+
−
<div id="asdfDIV_7">
+
−
<a id="asdfA_8"><i id="asdfI_1">menu</i></a>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</main>
+
 
<p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
 
<p>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
 
odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum
 
odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum

Revision as of 22:16, 20 May 2017

No Sidebar - Escape Velocity by HTML5 UP

No Sidebar

Lorem ipsum dolor sit amet magna egestas
morbi bibendum sed malesuada

Tempus feugiat veroeros sed nullam dolore

menu

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam tempus euismod. Vestibulum ante ipsum primis in faucibus.

Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit amet risus elit.

Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci eget quam rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. Donec elementum ligula dignissim sem pulvinar non semper odio eleifend. Duis commodo fringilla commodo. Aliquam erat volutpat. Vestibulum facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Phasellus nisl nisl, varius id porttitor sed, pellentesque ac orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi bibendum justo sed mauris vehicula malesuada aliquam elit imperdiet. Aliquam eu nibh lorem, eget gravida mi. Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus lobortis ultrices sed non erat. Donec eget erat non magna volutpat malesuada quis eget eros. Nullam sodales cursus sapien, id consequat leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit amet risus elit.

Magna pulvinar tempus

Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis tempus.

More

Magna pulvinar tempus

Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis tempus.

More

Magna pulvinar tempus

Rutrum bibendum. Proin pellentesque diam non ligula commodo tempor. Vivamus eget urna nibh. Curabitur non fringilla nisl. Donec accumsan interdum nisi, quis tempus.

More
The Endorsements

Aliquam diam consequat

Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.

Nisl adipiscing sed lorem

Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.

Mattis tempus lorem

Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet vulputate mattis amet laoreet lorem.