Line 678: | Line 678: | ||
} | } | ||
− | + | .header_test { | |
− | . | + | background-position: top; |
− | + | background-attachment: fixed; | |
− | + | background-repeat: no-repeat; | |
− | + | -webkit-background-size: cover; | |
− | + | -moz-background-size: cover; | |
− | + | -o-background-size: cover; | |
− | + | background-size: cover; | |
− | + | padding-top: 100vh; | |
− | + | background-image: url("https://static.igem.org/mediawiki/2017/d/d6/T--Chalmers-Gothenburg--Achievements_Medals.jpg"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /*A lot of code for the line between the header and the body */ | |
− | + | border-bottom: 3px solid transparent; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
-moz-border-image: -moz-linear-gradient(left, #000000 0%, #404040, #000000 100%); /*(left, #016243 0%, #b5deca, #016243 100%);*/ | -moz-border-image: -moz-linear-gradient(left, #000000 0%, #404040, #000000 100%); /*(left, #016243 0%, #b5deca, #016243 100%);*/ | ||
-webkit-border-image: -webkit-linear-gradient(left, #000000 0%, #404040, #000000 100%); /*(left, #016243 0%, #b5deca, #016243 100%)*/ | -webkit-border-image: -webkit-linear-gradient(left, #000000 0%, #404040, #000000 100%); /*(left, #016243 0%, #b5deca, #016243 100%)*/ | ||
Line 730: | Line 704: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* Banner: name of the page */ | |
− | + | #banner { | |
− | + | height: 100%; | |
− | + | position: relative; | |
− | + | bottom: 50px; | |
− | + | float: left; | |
− | + | width: 100%; | |
− | + | font-size: 80pt; /*35pt*/ | |
− | + | font-family:"Lato", cursive; | |
− | + | color:#c91a03 ; | |
− | + | line-height: 65pt; | |
− | + | text-shadow: 5px 5px #000000; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #banner h3 { | |
− | + | display: block; | |
− | + | position: absolute; | |
− | + | bottom: 50px; | |
− | + | left: 200px; | |
− | + | font-size: 80pt; /*35pt*/ | |
− | /* | + | font-family:"Lato", cursive; |
+ | color:#c91a03 ; | ||
+ | line-height: 65pt; | ||
+ | text-shadow: 5px 5px #000000; | ||
+ | /*border-style:dashed;*/ | ||
+ | padding: 20px 20px 20px 20px; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | #banner h4 { | |
− | + | display: block; | |
− | + | position: absolute; | |
− | + | bottom: -40px; | |
− | + | left: 200px; | |
− | + | font-size: 40pt; /*35pt*/ | |
− | + | font-family:"Lato", cursive; | |
− | + | color:#c91a03 ; | |
− | + | line-height: 65pt; | |
− | + | text-shadow: 3px 3px #000000; | |
− | + | /*border-style:dashed;*/ | |
− | + | padding: 20px 20px 20px 20px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | position: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 1,627: | Line 1,365: | ||
− | <div class=" | + | <div class="header_test"> |
− | + | <!-- Banner --> | |
− | + | <div id="banner"> | |
− | + | <h3>Medals</h3> | |
− | + | </div> | |
− | + | </div> | |
− | + | ||
Revision as of 15:05, 23 October 2017
Introduction
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat mattis interdum. Aliquam et velit fermentum velit imperdiet rhoncus. Donec accumsan molestie ornare. Duis eu odio in tortor ullamcorper aliquam. Vivamus molestie fermentum urna, vitae commodo mauris consequat in. Curabitur porttitor pulvinar purus, ut varius nibh tempus id. Nulla dictum lectus ut erat condimentum, sit amet euismod nibh eleifend. Maecenas molestie efficitur urna vel semper. Nullam in turpis eleifend, venenatis ex tincidunt, tristique sapien. Suspendisse eget facilisis dolor. Integer congue nisi eu magna consectetur, a bibendum nibh accumsan. Vivamus fermentum metus id lectus porttitor congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla metus quam, dapibus ac volutpat ut, dapibus sit amet felis.
Title 1
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat mattis interdum. Aliquam et velit fermentum velit imperdiet rhoncus. Donec accumsan molestie ornare. Duis eu odio in tortor ullamcorper aliquam. Vivamus molestie fermentum urna, vitae commodo mauris consequat in. Curabitur porttitor pulvinar purus, ut varius nibh tempus id. Nulla dictum lectus ut erat condimentum, sit amet euismod nibh eleifend. Maecenas molestie efficitur urna vel semper. Nullam in turpis eleifend, venenatis ex tincidunt, tristique sapien. Suspendisse eget facilisis dolor. Integer congue nisi eu magna consectetur, a bibendum nibh accumsan. Vivamus fermentum metus id lectus porttitor congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla metus quam, dapibus ac volutpat ut, dapibus sit amet felis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat mattis interdum. Aliquam et velit fermentum velit imperdiet rhoncus. Donec accumsan molestie ornare. Duis eu odio in tortor ullamcorper aliquam. Vivamus molestie fermentum urna, vitae commodo mauris consequat in. Curabitur porttitor pulvinar purus, ut varius nibh tempus id. Nulla dictum lectus ut erat condimentum, sit amet euismod nibh eleifend. Maecenas molestie efficitur urna vel semper. Nullam in turpis eleifend, venenatis ex tincidunt, tristique sapien. Suspendisse eget facilisis dolor. Integer congue nisi eu magna consectetur, a bibendum nibh accumsan. Vivamus fermentum metus id lectus porttitor congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla metus quam, dapibus ac volutpat ut, dapibus sit amet felis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat mattis interdum. Aliquam et velit fermentum velit imperdiet rhoncus. Donec accumsan molestie ornare. Duis eu odio in tortor ullamcorper aliquam. Vivamus molestie fermentum urna, vitae commodo mauris consequat in. Curabitur porttitor pulvinar purus, ut varius nibh tempus id. Nulla dictum lectus ut erat condimentum, sit amet euismod nibh eleifend. Maecenas molestie efficitur urna vel semper. Nullam in turpis eleifend, venenatis ex tincidunt, tristique sapien. Suspendisse eget facilisis dolor. Integer congue nisi eu magna consectetur, a bibendum nibh accumsan. Vivamus fermentum metus id lectus porttitor congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla metus quam, dapibus ac volutpat ut, dapibus sit amet felis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat mattis interdum. Aliquam et velit fermentum velit imperdiet rhoncus. Donec accumsan molestie ornare. Duis eu odio in tortor ullamcorper aliquam. Vivamus molestie fermentum urna, vitae commodo mauris consequat in. Curabitur porttitor pulvinar purus, ut varius nibh tempus id. Nulla dictum lectus ut erat condimentum, sit amet euismod nibh eleifend. Maecenas molestie efficitur urna vel semper. Nullam in turpis eleifend, venenatis ex tincidunt, tristique sapien. Suspendisse eget facilisis dolor. Integer congue nisi eu magna consectetur, a bibendum nibh accumsan. Vivamus fermentum metus id lectus porttitor congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla metus quam, dapibus ac volutpat ut, dapibus sit amet felis.
Title 2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat mattis interdum. Aliquam et velit fermentum velit imperdiet rhoncus. Donec accumsan molestie ornare. Duis eu odio in tortor ullamcorper aliquam. Vivamus molestie fermentum urna, vitae commodo mauris consequat in. Curabitur porttitor pulvinar purus, ut varius nibh tempus id. Nulla dictum lectus ut erat condimentum, sit amet euismod nibh eleifend. Maecenas molestie efficitur urna vel semper. Nullam in turpis eleifend, venenatis ex tincidunt, tristique sapien. Suspendisse eget facilisis dolor. Integer congue nisi eu magna consectetur, a bibendum nibh accumsan. Vivamus fermentum metus id lectus porttitor congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla metus quam, dapibus ac volutpat ut, dapibus sit amet felis.
Subtitle 1
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat mattis interdum. Aliquam et velit fermentum velit imperdiet rhoncus. Donec accumsan molestie ornare. Duis eu odio in tortor ullamcorper aliquam. Vivamus molestie fermentum urna, vitae commodo mauris consequat in. Curabitur porttitor pulvinar purus, ut varius nibh tempus id. Nulla dictum lectus ut erat condimentum, sit amet euismod nibh eleifend. Maecenas molestie efficitur urna vel semper. Nullam in turpis eleifend, venenatis ex tincidunt, tristique sapien. Suspendisse eget facilisis dolor. Integer congue nisi eu magna consectetur, a bibendum nibh accumsan. Vivamus fermentum metus id lectus porttitor congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla metus quam, dapibus ac volutpat ut, dapibus sit amet felis.