Difference between revisions of "Team:UIUC Illinois/Blog"
| Line 72: | Line 72: | ||
<br> | <br> | ||
| − | + | <style> | |
| + | #banner { | ||
| + | margin-bottom: 50px; | ||
| + | margin-top: 0px; | ||
| + | |||
| + | width: 100%; | ||
| + | |||
| + | height: 100vh; !important | ||
| + | position: fixed; | ||
| + | clear: both; | ||
| + | background: transparent url("https://static.igem.org/mediawiki/2017/1/12/T--Harvard--TeamPhotoSans.jpg") center center no-repeat fixed; | ||
| + | -webkit-background-size: cover; | ||
| + | -moz-background-size: cover; | ||
| + | -o-background-size: cover; | ||
| + | background-size: cover; | ||
| + | filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2017/1/12/T--Harvard--TeamPhotoSans.jpg',sizingMethod='scale'); | ||
| + | -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2017/1/12/T--Harvard--TeamPhotoSans.jpg',sizingMethod='scale')"; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | .wrap-center{ | ||
| + | margin: 0 auto; | ||
| + | position: relative; | ||
| + | max-width: 73.231em; | ||
| + | max-height: 10px; | ||
| + | } | ||
| + | |||
| + | .banner-centered { | ||
| + | text-align: center; | ||
| + | font-family: 'Josefin Sans', sans-serif; | ||
| + | position: absolute; | ||
| + | display: block; | ||
| + | max-width: 75.231em; | ||
| + | height: inherit; | ||
| + | display: block; | ||
| + | margin-top: 150px; | ||
| + | } | ||
| + | |||
| + | .banner-centered h2 { | ||
| + | font-size: 20vw; | ||
| + | padding: 0; | ||
| + | font-family: 'Josefin Sans', sans-serif; | ||
| + | text-transform: uppercase; | ||
| + | letter-spacing: 5vw; | ||
| + | color: #fafafa; | ||
| + | font-weight: 300; | ||
| + | display: inline-block; | ||
| + | text-align: center; | ||
| + | position:relative; | ||
| + | } | ||
| + | |||
| + | .banner-centered h3 { | ||
| + | font-size: 10vw; | ||
| + | font-family: 'Josefin Sans', sans-serif; | ||
| + | line-height: 1.5; | ||
| + | text-transform: uppercase; | ||
| + | letter-spacing: 5vw; | ||
| + | color: #fafafa; | ||
| + | font-weight: 300; | ||
| + | display: block; | ||
| + | text-align: center; | ||
| + | position:relative; | ||
| + | |||
| + | |||
| + | } | ||
| + | |||
| + | /* Profile */ | ||
| + | .caption { | ||
| + | font-size: 15px; | ||
| + | font-family: 'Josefin Sans', sans-serif; | ||
| + | text-align: center; | ||
| + | padding-bottom: 5%; | ||
| + | } | ||
| + | |||
| + | #picture { | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | .row { | ||
| + | align: center; | ||
| + | margin: auto; | ||
| + | display:block; | ||
| + | } | ||
| + | |||
| + | /* Three columns side by side */ | ||
| + | .column { | ||
| + | float: left; | ||
| + | width: 33.3%; | ||
| + | margin-bottom: 16px; | ||
| + | padding: 0 8px; | ||
| + | } | ||
| + | |||
| + | .title { | ||
| + | font-size: 15px; | ||
| + | font-family: 'Josefin Sans', sans-serif; | ||
| + | text-align: center; | ||
| + | position: relative; | ||
| + | color: gray; | ||
| + | } | ||
| + | |||
| + | /* Display the columns below each other instead of side by side on small screens */ | ||
| + | @media (max-width: 650px) { | ||
| + | .column { | ||
| + | width: 100%; | ||
| + | display: block; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* Add some shadows to create a card effect */ | ||
| + | .card { | ||
| + | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); | ||
| + | } | ||
| + | |||
| + | /* Trying to make cards equally sized */ | ||
| + | .card { | ||
| + | width: auto; | ||
| + | height: auto; | ||
| + | |||
| + | } | ||
| + | |||
| + | /* Some left and right padding inside the container */ | ||
| + | .container { | ||
| + | padding: 0 0; | ||
| + | |||
| + | margin:auto; | ||
| + | align: center; | ||
| + | } | ||
| + | |||
| + | ./containertwo { | ||
| + | padding: 0 40px; | ||
| + | margin:auto; | ||
| + | align: center; | ||
| + | } | ||
| + | |||
| + | /* Clear floats */ | ||
| + | .container::after, .row::after { | ||
| + | content: ""; | ||
| + | clear: both; | ||
| + | display: table; | ||
| + | } | ||
| + | |||
| + | </style> | ||
<body> | <body> | ||
<div class="footer" style="margin-top:0;"> | <div class="footer" style="margin-top:0;"> | ||
Revision as of 15:29, 27 July 2018
