Template:Groningen/Science Behind 1/CSS
body {
margin: 0px; background: #307890; background: linear-gradient(0deg, #232020 0%, #307890 100%); font-family: Verdana, Geneva, Tahoma, sans-serif; color: #ffffff;
}
main {
height: 5360px;
width:100%;
background: url('../images/T--Groningen--Education_SB1_background.png') center center no-repeat;
text-align: center;
position: relative;
}
/*The following syntax describes language menu.*/
.lang_menu {
position: absolute; top: 40px; left:5%; width: 3.1em;
}
.current_lang {
background: none; padding:0; border:0; font-size: 1.2em; color:white; line-height: 30px;
}
.lang_menu ul {
width: 100%; padding:0; margin:0; border:0; position: absolute; display: none; text-align: right;
}
.lang_menu li {
list-style: none;
}
.lang_menu a {
color: white; opacity: 50%; text-decoration: none; line-height: 2em; font-size: 1em;
}
.lang_menu a:hover {
opacity:initial; font-size: 1.2em; font-weight: bold;
}
.lang_menu:hover .current_lang {
font-weight: bold;
}
.lang_menu:hover ul {
display: block;
}
/*The following syntax describes heading styling.*/ h1, h2, h3 {
margin: 0; margin-bottom: -15px; padding: 0;
}
h1 {
text-shadow: 0px 0px 20px #ffffff; padding-top: 40px; padding-left: 0.4em; padding-right: 0.4em;
}
h2{
font-weight: normal; padding-top: 0.4em;
}
h3, .light_blue_strong_big {
font-size: 2.4em;
}
/*The following syntax describes styling of the text classes.*/ .text_right {
text-align: right;
}
.orange_strong {
color: #EC6F29;
}
.light_blue_strong, .light_blue_strong_big {
color: #54B6CD;
}
.dark_blue_strong {
color: #25677F;
}
/*The following syntax describes "Curve container" and "Curve block" classes. "Curve container" classes represent div elements that are positioned around the curves of the DNA helix in the background. "Curve blocks" represent children div elements of "Curve containers".*/ .curve1_container,.curve1_block_a,.curve1_block_b,.curve2_container,.curve3_container, .curve3_block_a,.curve3_block_b, .curve3_block_c,.curve4_container,.curve5_container,.curve6_container,.curve7_container {
position: absolute;
}
.text_in_circle_red_block, .text_in_circle_orange_block {
position: absolute; left: 50%; transform: translate(-50%);
}
/*Curve 1 cointainer*/
.curve1_container {
top:214px; height:10%; width:90%; margin-left: 5%; margin-right: 5%;
}
/*Curve 1 blocks*/ .curve1_block_a {
left:250px; z-index:20;
}
.curve1_block_b {
top: 1.5%; left:0px; z-index:10;
}
/*Curve 2 container and its children elements*/ .curve2_container {
bottom: 3950px; right: 5%; margin-left: 5%;
}
.curve2_container img {
width: 100%; object-fit: contain;
}
.curve2_container p {
width: fit-content;
}
/*Curve 3 container*/ .curve3_container {
top:1715px; height: 10%; width: 90%; margin-left: 5%; margin-right: 5%;
}
/*Curve 3 blocks and their children*/ .curve3_block_a {
top: 60px; left: 250px; z-index: 0;
}
.curve3_block_b {
z-index:10;
}
.curve3_block_c {
top: 500px; left: 30px; z-index:20;
}
.curve3_block_a img {
width: 100%; height: 253px; object-fit: contain;
}
.text_in_circle_red_block {
padding-top: 30px;
}
/*Curve 4 container*/ .curve4_container {
top: 2600px; height:10%; width: 85%; margin-right: 15%; display: flex; flex-direction: column; align-items: flex-end;
}
/*Cruve 5 container*/ .curve5_container {
top: 3163px; height:10%; width:95%; margin-left: 5%; display: flex; flex-direction: column; align-items: flex-start;
}
/*Curve 6 container*/ .curve6_container {
top: 4127px; right:5%; height: 10%; margin-left: 5%;
}
/*Curve 6 block and its child*/ .curve6_block {
width:50%; float: left;
}
.text_in_circle_orange_block {
margin-top: -278px; z-index: 10;
}
.curve6_block img {
position: relative; z-index: 20; width: 100%; height: 300px; object-fit: contain;
}
/*Curve 7 container*/ .curve7_container {
top: 4663px;
}
/*Curve 7 block and its children*/ .curve7_block_a {
width: 90%; margin-right: 5%; margin-left: 5%;
}
.curve7_block_b {
width:50%; float: left;
}
.curve7_container img {
width: 100%; height: 625px; margin-top: -180px; object-fit: contain;
}
.curve7_block_b p {
margin-top: -180px;
}
/*The following syntax describes "Text in circle" classes */ .text_in_circle_light_blue, .text_in_circle_red, .text_in_circle_orange {
width: 324px; height: 324px; display: table-cell; /*Contents of a table can be centered vertically*/ vertical-align: middle; background: center center no-repeat;
}
.text_in_circle_light_blue {
background-image: url(../images/T--Groningen--Education_SB1_text_in_circle_light_blue_background.png);
}
.text_in_circle_red {
background-image: url(../images/T--Groningen--Education_SB1_text_in_circle_red_background.png.png);
}
.text_in_circle_orange {
background-image: url(../images/T--Groningen--Education_SB1_text_in_circle_organge_background.png.png);
}
.text_in_circle_light_blue p,.text_in_circle_red p, .text_in_circle_orange p {
width: 324px;
}
/*The following syntax rearranges Curve 1 and Curve 4 when screen width is less than 616 px.*/ @media (max-width:615px) {
/*Language menu*/
.lang_menu {
display: none;
}
/*Curve 1*/
.curve1_container {
width: 100%;
margin: 0;
}
.curve1_block_a {
top: 100px;
left: 50%;
transform: translate(-50%);
z-index:20;
}
.curve1_block_b {
top: 0;
left: 50%;
width:100%;
transform: translate(-50%);
z-index:10;
}
.text_right {
text-align: center;
}
.text_in_circle_light_blue_block {
padding-top: 200px;
position: absolute;
left: 50%;
transform: translate(-50%);
}
/*Curve 4 and Curve 5*/
.curve4_container, .curve5_container {
width: 100%;
margin: 0;
align-items: center;
}
}
/*The following syntax describes footer.*/
footer {
width:100%; height: 100px; background: black;
}
.social_med {
width: 100%;
}
footer p {
padding-top: 10px; text-align: center;
}
footer ul {
width: 320px; padding:0px; margin: auto;
}
footer li {
width: 40px; padding-left:20px; padding-right: 20px; float: left; display: block; font-size: 2em; list-style: none;
}
footer a {
color: white; opacity: 50%;
}
footer a:hover {
opacity: 100%;
}
@media (max-width:446px) {
br.wide_screen_446 {
display: none;
}
}
@media (max-width:433px) {
br.wide_screen_433 {
display: none;
}
}
@media (max-width:413px) {
br.wide_screen_413 {
display: none;
}
}
@media (max-width:365px) {
body {
width:fit-content;
}
}