Difference between revisions of "Team:DTU-Denmark/stylesheetmain.css"

Revision as of 09:18, 14 July 2017

/*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;
 color: red;

}

/*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: -2px;
 width: 100%;
 height: 40px;

}

/*hides list*/

nav navbarcenter ul {

 height: 0px;
 width: inherit;
 list-style-type: none;

}

/*sets color of nav bar when the page is scrolled to the top*/

.navbar {

 -webkit-transition: background 1s;
 transition: background 1s;
 background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
 background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
 background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
 background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
 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;
 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;
 display: none;
 position: absolute;
 background-color: transparent;
 min-width: 140px;
 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;

}

/*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);

}

/****************************************************************************************************************/

/************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/

/****************************************************************************************************************/

/*creates the parallax effect on main page when scrooling*/

.parallax {

 position: relative;
 z-index: -1;
 background-image: url("");
 width: inherit;
 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));
 background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,1));

}

/****************************************************************************************************************/

/************************************************* 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("");
 opacity: 0.9;
 -webkit-filter: brightness(1.2);
 filter: brightness(1.2);
 background-position: -200px center;

} .img2 {

 background-image: url("");
 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;

}

/****************************************************************************************************************/ /********************************************* TEMPORARY ADDITIONS **********************************************/ /****************************************************************************************************************/

/*TEMPORARY checks if media keyword works

 if screensize is less than 1000px changes background color
 can be used for styling page on mobile devices later*/

/*@media only screen and (max-width: 1000px) {

   body {
       background-color: lightblue;
   }

}

/