|
|
| Line 9: |
Line 9: |
| | <!-- importing style sheet --> | | <!-- importing style sheet --> |
| | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:DTU-Denmark/stylesheetmain?action=raw&ctype=text/css"> | | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:DTU-Denmark/stylesheetmain?action=raw&ctype=text/css"> |
| − |
| |
| − | <style>
| |
| − | /*imports custom font (is not used, but works as an example if you find an awesome font)*/
| |
| − | /*@font-face { font-family: League; src: url('../fonts/League/LeagueGothic-Regular.otf'); }*/
| |
| − |
| |
| − | /*sets boxes so that the width and height properties (and min/max properties)
| |
| − | includes content, padding and border, but not the margin*/
| |
| − | * {
| |
| − | box-sizing: border-box;
| |
| − | font-family: sans-serif, "Times New Roman", Times, serif;
| |
| − | }
| |
| − |
| |
| − | /*makes the website span from edge to edge of the viewport*/
| |
| − | body {
| |
| − | position: relative;
| |
| − | width: 100%;
| |
| − | margin: 0px;
| |
| − | padding:0px;
| |
| − | }
| |
| − |
| |
| − | /*centers all headlines as standard*/
| |
| − | h1, h2, h3, h4, h5, h6 {
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | /*defines percentage columns used for layout so everything
| |
| − | but the main content spans from edge to edge of the viewport*/
| |
| − | .col-1 {width: 08.33%;}
| |
| − | .col-2 {width: 16.66%;}
| |
| − | .col-3 {width: 25.00%;}
| |
| − | .col-4 {width: 33.33%;}
| |
| − | .col-5 {width: 41.66%;}
| |
| − | .col-6 {width: 50.00%;}
| |
| − | .col-7 {width: 58.33%;}
| |
| − | .col-8 {width: 66.66%;}
| |
| − | .col-9 {width: 75.00%;}
| |
| − | .col-10 {width: 83.33%;}
| |
| − | .col-11 {width: 91.66%;}
| |
| − | .col-12 {width: 100.0%;}
| |
| − |
| |
| − | /*defines columns in pixels used for main content area, so
| |
| − | user zoom will not affect the layout*/
| |
| − | .colp-1 {width: calc(1000px/12);}
| |
| − | .colp-2 {width: calc(1000px/12*2);}
| |
| − | .colp-3 {width: calc(1000px/12*3);}
| |
| − | .colp-4 {width: calc(1000px/12*4);}
| |
| − | .colp-5 {width: calc(1000px/12*5);}
| |
| − | .colp-6 {width: calc(1000px/12*6);}
| |
| − | .colp-7 {width: calc(1000px/12*7);}
| |
| − | .colp-8 {width: calc(1000px/12*8);}
| |
| − | .colp-9 {width: calc(1000px/12*9);}
| |
| − | .colp-10 {width: calc(1000px/12*10);}
| |
| − | .colp-11 {width: calc(1000px/12*11);}
| |
| − | .colp-12 {width: 1000px;}
| |
| − |
| |
| − | /*makes all the columns go to the left of
| |
| − | the page and "stack" to the right if room*/
| |
| − | [class*="col-"] {
| |
| − | float: left;
| |
| − | padding: 15px;
| |
| − | }
| |
| − | [class*="colp-"] {
| |
| − | float: left;
| |
| − | padding: 15px;
| |
| − | }
| |
| − |
| |
| − | /***********EACH ROW MUST BE 12 COLUMNS TOTAL*********/
| |
| − |
| |
| − | /*(example col-4, col-6, col-2 is a row)
| |
| − | clears the row of other content*/
| |
| − | .row::after {
| |
| − | content: "";
| |
| − | clear: both;
| |
| − | display: table;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /****************************************************************************************************************/
| |
| − | /******************************************* NAVBAR AND PROGRESS BAR *******************************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*defines key properties of the nav bar*/
| |
| − | nav {
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | overflow: hidden;
| |
| − | top: 0;
| |
| − | width: 100%;
| |
| − | height: 40px;
| |
| − | }
| |
| − |
| |
| − | /*hides list*/
| |
| − | nav ul {
| |
| − | height: 0px;
| |
| − | list-style-type: none;
| |
| − | }
| |
| − |
| |
| − | /*sets color of nav bar when the page is scrolled to the top*/
| |
| − | .navbar {
| |
| − | -webkit-transition: background 1s; /* Safari */
| |
| − | transition: background 1s;
| |
| − | background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Safari 5.1 to 6.0 */
| |
| − | background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Opera 11.1 to 12.0 */
| |
| − | background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Firefox 3.6 to 15 */
| |
| − | background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* Standard syntax (must be last) */
| |
| − | box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);
| |
| − | }
| |
| − |
| |
| − | /*sets the color of the nav bar when scrolled down to
| |
| − | the main text TRANSITIONS CANNOT BE USED HERE*/
| |
| − | .navbar.scrolledpastnav {
| |
| − | -webkit-transition: background 1.5s; /* Safari */
| |
| − | transition: background 1.5s;
| |
| − | background-color: rgba(20,20,20,1);
| |
| − | box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
| |
| − | }
| |
| − |
| |
| − | /*helps center navar. The sum of the nav bar choice
| |
| − | widths is 1000px (5*200px)*/
| |
| − | .navbarcenter {
| |
| − | width: 1000px;
| |
| − | margin: auto;
| |
| − | }
| |
| − |
| |
| − | /*makes nav bar choices float next to each other*/
| |
| − | .dropdown {
| |
| − | float: right;
| |
| − | height: 38px;
| |
| − | }
| |
| − |
| |
| − | /*layout of nav bar choice buttons*/
| |
| − | .dropdown .dropbtn {
| |
| − | height: 38px;
| |
| − | display: inline-block;
| |
| − | color: white;
| |
| − | text-align: center;
| |
| − | padding: 10px 16px;
| |
| − | width: 200px;
| |
| − | text-decoration: none;
| |
| − | font-size: 1em;
| |
| − | font-family: sans-serif, "Times New Roman", Times, serif;
| |
| − | }
| |
| − |
| |
| − | /*sets background of navbar choice buttons when hovered*/
| |
| − | .dropdown:hover .dropbtn {
| |
| − | background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
| |
| − | background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
| |
| − | background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
| |
| − | background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* Standard syntax (must be last) */
| |
| − | }
| |
| − |
| |
| − | /*hides dropdown choices, sets background and shadows. makes sure that
| |
| − | the width is not less than the width of the nav bar choice buttons*/
| |
| − | .dropdown-content {
| |
| − | -webkit-transition: background 1.5s; /* Safari */
| |
| − | transition: background 1.5s;
| |
| − |
| |
| − | /*border has same height as progress bar*/
| |
| − | border-top: 2px solid rgba(150,150,150,0.3);
| |
| − |
| |
| − | /*fixes layout issue with border rendering 3 px*/
| |
| − | margin-top: -0.1px;
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | background-color: transparent;
| |
| − | min-width: 200px;
| |
| − | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
| − | z-index: 1;
| |
| − | }
| |
| − |
| |
| − | /*sets layout of dropdown menu when nav bar changes layout*/
| |
| − | .dropdown-content.scrolledpastnav {
| |
| − | -webkit-transition: background 1.5s; /* Safari */
| |
| − | transition: background 1.5s;
| |
| − |
| |
| − | /*border has same height as progress bar*/
| |
| − | border-top: 2px solid transparent;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*displays dropdown content when nav bar choice is hovered*/
| |
| − | .dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /*defines nav bar dropdown link layout*/
| |
| − | .dropdown-content a {
| |
| − | color: black;
| |
| − | background-color: white;
| |
| − | padding: 12px 16px;
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | /*changes navbar dropdown menu color when choice is hovered*/
| |
| − | .dropdown-content a:hover, .dropdown-content a:focus {
| |
| − | background-color: rgb(235,235,235);
| |
| − | }
| |
| − |
| |
| − | /*********** PROGRESS BAR ************/
| |
| − |
| |
| − | /*defines progress bar layout*/
| |
| − | progress {
| |
| − | /* Positioning */
| |
| − | position: fixed;
| |
| − | left: 0;
| |
| − | top: 38px;
| |
| − |
| |
| − | /* Dimensions */
| |
| − | width: 100%;
| |
| − | height: 2px;
| |
| − |
| |
| − | /* Reset the apperance */
| |
| − | -webkit-appearance: none;
| |
| − | -moz-appearance: none;
| |
| − | appearance: none;
| |
| − |
| |
| − | /* Get rid of the default border in Firefox/Opera. */
| |
| − | border: none;
| |
| − |
| |
| − | /* For Firefox/IE10+ */
| |
| − | background-color: rgba(150,150,150,0.3);
| |
| − |
| |
| − | /* For IE10+, color of the progress bar */
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | /*changes progressbar when nav bar changes layout*/
| |
| − | progress.scrolledpastnav {
| |
| − | -webkit-transition: background-color 1.5s; /* Safari */
| |
| − | transition: background-color 1.5s;
| |
| − | background-color: rgba(20,20,20,1);
| |
| − | }
| |
| − |
| |
| − | /*sets progress bar background for older browsers*/
| |
| − | progress::-webkit-progress-bar {
| |
| − | background-color: rgba(150,150,150,0.3);
| |
| − | }
| |
| − |
| |
| − | /*sets color of progress bar value bar*/
| |
| − | .flat::-webkit-progress-value {
| |
| − | -webkit-transition: background-color 1.5s; /* Safari */
| |
| − | transition: background-color 1.5s;
| |
| − | background-color: white;
| |
| − | }
| |
| − |
| |
| − | /*sets color of progress bar value bar*/
| |
| − | .flat::-moz-progress-bar {
| |
| − | -webkit-transition: background-color 1.5s; /* Safari */
| |
| − | transition: background-color 1.5s;
| |
| − | background-color: white;
| |
| − | }
| |
| − |
| |
| − | /*sets the progress bar container (not so important for layout it seems)*/
| |
| − | .progress-container {
| |
| − | width: 100%;
| |
| − | background-color: transparent;
| |
| − | position: fixed;
| |
| − | top: 38px;
| |
| − | left: 0;
| |
| − | height: 2px;
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /******** END OF PROGRESS BAR ********/
| |
| − |
| |
| − |
| |
| − |
| |
| − | /****************************************************************************************************************/
| |
| − | /************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*creates the parallax effect on main page when scrooling*/
| |
| − | .parallax {
| |
| − | position: relative;
| |
| − | z-index: -1;
| |
| − | background-image: url("https://static.igem.org/mediawiki/2017/6/67/T--DTU-Denmark--Indian_Cobra.jpg");
| |
| − | width: inherit;
| |
| − |
| |
| − | /*height is viewport height +1.5% of viewport
| |
| − | height (matches with the height of .parralaxfade)*/
| |
| − | height: 101.5vh;
| |
| − | background-attachment: fixed;
| |
| − | background-position: center;
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: cover;
| |
| − | }
| |
| − |
| |
| − | /*sets position and style for the headline text on main page*/
| |
| − | .homepageheadline {
| |
| − | position: absolute;
| |
| − | width: 850px;
| |
| − | height: 150px;
| |
| − | line-height: 60px;
| |
| − | text-align: center;
| |
| − | top: 12%;
| |
| − | left: 50%;
| |
| − | margin: 0px 0px 0px -425px;
| |
| − | }
| |
| − |
| |
| − | /*styles line one in the headline text on main page*/
| |
| − | #homepageheadline1 {
| |
| − | font-size: 5em;
| |
| − | color: white;
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | line-height: normal;
| |
| − | font-family: sans-serif;
| |
| − | text-shadow: 2px 2px 6px #727272;
| |
| − | }
| |
| − |
| |
| − | /*styles line two in the headline text on main page*/
| |
| − | #homepageheadline2 {
| |
| − | font-size: 3em;
| |
| − | color: white;
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | line-height: normal;
| |
| − | font-family: sans-serif;
| |
| − | text-shadow: 0px 0px 5px #727272;
| |
| − | }
| |
| − |
| |
| − | /*creates a fade from parallax image to main content
| |
| − | Height fits extra height in .parallax*/
| |
| − | .parallaxfade {
| |
| − | width: inherit;
| |
| − | height: 1.5vh;
| |
| − | position: absolute;
| |
| − | bottom: 0px;
| |
| − | background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
| |
| − | background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
| |
| − | background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
| |
| − | background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,1)); /* Standard syntax (must be last) */
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /****************************************************************************************************************/
| |
| − | /************************************************* MAIN CONTENT *************************************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − | /*styles main text area on main page*/
| |
| − | .maincontainer {
| |
| − | margin: 100px auto;
| |
| − | width: 1000px;
| |
| − | text-align: justify;
| |
| − | clear: both;
| |
| − | display: table;
| |
| − | }
| |
| − |
| |
| − | /*container for the two pictures in top of main content*/
| |
| − | .imgmenu {
| |
| − | max-width: 100%;
| |
| − | margin: 70px auto 100px auto;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | /*sets container for the individual pictures*/
| |
| − | .imgmenuitem {
| |
| − | position: relative;
| |
| − | width: 100%;
| |
| − | max-width: 700px;
| |
| − | margin: 0px auto;
| |
| − | height: 400px;
| |
| − | border-radius: 20px;
| |
| − | overflow: hidden;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | /*sets layout for the pictures themselves*/
| |
| − | .imgmenucontent {
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | background-size: cover;
| |
| − | background-repeat: no-repeat;
| |
| − | -webkit-transition: all .5s;
| |
| − | -moz-transition: all .5s;
| |
| − | -o-transition: all .5s;
| |
| − | transition: all .5s;
| |
| − | font
| |
| − | }
| |
| − |
| |
| − | /*the different images are styled*/
| |
| − | .img1 {
| |
| − | background-image: url("https://static.igem.org/mediawiki/2017/e/e1/T--DTU-Denmark--snake_problem.jpg");
| |
| − | opacity: 0.9;
| |
| − | -webkit-filter: brightness(1.2);
| |
| − | filter: brightness(1.2);
| |
| − | background-position: -200px center;
| |
| − | }
| |
| − | .img2 {
| |
| − | background-image: url("https://static.igem.org/mediawiki/2017/b/bc/T--DTU-Denmark--snake_map.jpg");
| |
| − | background-position: -200px -20px;
| |
| − | }
| |
| − |
| |
| − | /*zooms picture when hovered*/
| |
| − | .imgmenuitem:hover .imgmenucontent, .imgmenuitem:focus .imgmenucontent {
| |
| − | -ms-transform: scale(1.1);
| |
| − | -moz-transform: scale(1.1);
| |
| − | -webkit-transform: scale(1.1);
| |
| − | -o-transform: scale(1.1);
| |
| − | transform: scale(1.1);
| |
| − | opacity: 0.5;
| |
| − | }
| |
| − |
| |
| − | /*sets layout of picture overlay*/
| |
| − | .imgmenuoverlay {
| |
| − | position: absolute;
| |
| − | transition: 0.5s ease;
| |
| − | background-color: rgba(50,50,50,0.6);
| |
| − | padding: 16px 12px;
| |
| − | width: 100%;
| |
| − | height: 40%;
| |
| − | bottom: 0px;
| |
| − | }
| |
| − |
| |
| − | /*changes layout of overlay on pictures when hovered*/
| |
| − | .imgmenuitem:hover .imgmenuoverlay, .imgmenuitem:focus .imgmenuoverlay {
| |
| − | background-color: rgba(50,50,50,0.9);
| |
| − | }
| |
| − |
| |
| − | /*sets style of the text in the overlay*/
| |
| − | .imgmenuoverlay a {
| |
| − | color: white;
| |
| − | cursor: pointer;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | /*sets style of the header in the overlay*/
| |
| − | .imgmenuoverlay a *:first-child {
| |
| − | width: 100%;
| |
| − | border-bottom: 1px solid white;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | /*styles the paragraph in the overlay*/
| |
| − | .imgmenuoverlay a p {
| |
| − | font-size: 14px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /****************************************************************************************************************/
| |
| − | /**************************************************** FOOTER ****************************************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*styles main footer area*/
| |
| − | footer {
| |
| − | background: #848282;
| |
| − | color: white;
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | width: 100%;
| |
| − | min-width: 1000px;
| |
| − | position: absolute;
| |
| − | text-align: center;
| |
| − | color: white;
| |
| − | font-size:x-small;
| |
| − | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
| |
| − | }
| |
| − |
| |
| − | /*defines a container of same width as main content
| |
| − | that contains footer content*/
| |
| − | .footercontainer {
| |
| − | width: 1000px;
| |
| − | margin: auto;
| |
| − | }
| |
| − |
| |
| − | /*centers footer content in the individual columns*/
| |
| − | .footercolstyle {
| |
| − | align-content: center;
| |
| − | }
| |
| − |
| |
| − | /*styles left footer column*/
| |
| − | .leftfootercol {
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | /*styles right footer column*/
| |
| − | .rightfootercol {
| |
| − | float: right;
| |
| − | }
| |
| − |
| |
| − | /*gives space between the "find us at" icons*/
| |
| − | footer img {
| |
| − | margin: 10px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /****************************************************************************************************************/
| |
| − | /*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*removes margin and padding*/
| |
| − | .rmvpadmarg {
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | }
| |
| − |
| |
| − | /*removes vertical lines on links*/
| |
| − | .rmvlinkstyle a {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | /*brings element to front of page, used to bring nav bar
| |
| − | in front of everything else*/
| |
| − | .tofront {
| |
| − | position: relative;
| |
| − | z-index: 9999;
| |
| − | }
| |
| − |
| |
| − | /*sets the position of the element to be given a bottom border*/
| |
| − | .bottomborder {
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − | /*styles borders for h1 elements*/
| |
| − | h1.bottomborder:after {
| |
| − | content:"";
| |
| − | background: black;
| |
| − | position: absolute;
| |
| − | bottom: -5px;
| |
| − | left: 150px;
| |
| − | height: 1px;
| |
| − | width: 700px;
| |
| − | }
| |
| − |
| |
| − | /*styles borders for h2 elements*/
| |
| − | h2.bottomborder:after {
| |
| − | content:"";
| |
| − | background: black;
| |
| − | position: absolute;
| |
| − | bottom: -5px;
| |
| − | left: 300px;
| |
| − | height: 1px;
| |
| − | width: 400px;
| |
| − | }
| |
| − | <\style>
| |
| − |
| |
| | | | |
| | <!-- first javascript jquery is imported for local use, then js files are loaded --> | | <!-- first javascript jquery is imported for local use, then js files are loaded --> |
