Elinramstrom (Talk | contribs) |
Elinramstrom (Talk | contribs) |
||
Line 10: | Line 10: | ||
<style type="text/css"> | <style type="text/css"> | ||
− | + | </style> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 51: | Line 42: | ||
.parallax { | .parallax { | ||
/* The image used */ | /* The image used */ | ||
− | background-image: url("https://static.igem.org/mediawiki/2018/9/99/T--Uppsala-- | + | background-image: url("https://static.igem.org/mediawiki/2018/9/99/T--Uppsala--Transcript"); |
/* Set a specific height */ | /* Set a specific height */ | ||
Line 169: | Line 160: | ||
− | |||
− | |||
<div class="svg-wrapper"> | <div class="svg-wrapper"> | ||
+ | |||
Line 302: | Line 292: | ||
</svg> | </svg> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Line 333: | Line 317: | ||
− | |||
− | |||
Line 350: | Line 332: | ||
<div style="height:5em;"></div> | <div style="height:5em;"></div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
</html> | </html> |
Revision as of 13:04, 13 October 2018
:root{ --primary: #8b1a32; --secondary:#969696; --tertiary: #f15025; --whiteish: #fcf7ff; --light-blue:#cde6f5; --alt-secondary: #554640; } html{ width: 100%; height: 100%; } *{ margin: 0; padding: 0; box-sizing: border-box; } .parallax { /* The image used */ background-image: url("https://static.igem.org/mediawiki/2018/9/99/T--Uppsala--Transcript"); /* Set a specific height */ min-height: 99vh; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; /*background: linear-gradient(to bottom, transparent 90%);*/ } .blur-box { background-color: var(--whiteish); box-shadow: 0 0 10px 10px var(--whiteish); } .sub-header{ /* Set a specific height */ height:20vw; min-height: 150px; /* Create the parallax scrolling effect */ /*background-attachment: fixed;*/ background-position: center; background-repeat: no-repeat; background-size: cover; } .sub-header h1{ font-size: 60; text-align: center; position:absolute; left:0; right:0; margin-top:6.5% ; margin-left:auto; margin-right: auto; color:white; bottom: px; } /* TODO: CHANGE */ #blue{ background-image: url(redbanner.jpg); } h1, h2{ color: #661325; } h1{ margin-top:2em; margin-bottom: 0.5em; } #first-title{ top:100px; margin-top: 0; } .content{ position:relative; background-color: var(--whiteish); } .content-text{ margin-top:2em; min-width: 400px; width:70%; position: relative; margin: auto; /*background-color: #8c7cff;*/ } .scroll-pointer{ top:85%; position:absolute; /*margin-left:auto; margin-right:auto;*/ width: 100%; padding: 0; } .scroll-pointer img{ color: var(--primary) ; } .center-icon{ width:100px; position: relative; display: block; margin-right: auto; margin-left: auto; opacity: 0.8; } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; }