(29 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | #footerWrapper { | ||
+ | width: 100%; | ||
+ | border-top: solid 25px #6281ef; | ||
+ | font-family: 'montserrat-light', sans-serif; | ||
+ | ; | ||
+ | text-transform: uppercase; | ||
+ | background-color: #fafafc; | ||
+ | } | ||
− | #footerWrapper{ | + | #footerWrapper .container { |
− | + | width: unset | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | #upperFooter{ | + | |
− | + | #upperFooter { | |
− | + | height: fit-content; | |
− | + | background-color: #fafafc; | |
+ | display: flex; | ||
+ | align-items: center; | ||
+ | justify-content: space-evenly; | ||
+ | padding: 10px; | ||
+ | box-sizing: border-box; | ||
} | } | ||
− | #upperFooter #contacts{ | + | |
− | + | #upperFooter #contacts { | |
+ | max-width: 45vw; | ||
+ | height: 100% | ||
} | } | ||
− | #upperFooter #contacts #contactsWrapper{ | + | |
− | + | #upperFooter #contacts #contactsWrapper { | |
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
− | + | width: fit-content; | |
+ | justify-content: center; | ||
+ | height: 100% | ||
+ | } | ||
+ | |||
+ | #upperFooter #contacts #contactsWrapper #contactus { | ||
+ | padding-right: 10px | ||
+ | } | ||
+ | |||
+ | #upperFooter #contacts #image-placeholder { | ||
+ | height: 9vw; | ||
+ | width: 9vw; | ||
+ | border-right: solid 1px #121212; | ||
+ | padding-right: 30px; | ||
+ | } | ||
+ | |||
+ | #upperFooter #contacts #image-placeholder img { | ||
height: 100%; | height: 100%; | ||
+ | width: 100% | ||
} | } | ||
− | #upperFooter #contacts # | + | #upperFooter #contacts #igem-info { |
− | + | display: flex; | |
− | + | height: 100%; | |
− | + | font-size: 0.8em; | |
− | + | padding-left: 30px; | |
− | + | justify-content: space-around; | |
− | + | align-items: center; | |
} | } | ||
− | #upperFooter #contacts #igem-info{ | + | |
− | + | #upperFooter #contacts #igem-info h3 { | |
− | + | margin: 0; | |
− | + | margin-bottom: 10px | |
− | + | ||
− | + | ||
} | } | ||
− | #upperFooter #contacts | + | |
− | + | #upperFooter #contacts a { | |
− | + | font-size: 0.9em; | |
− | font-family: Lato, sans-serif; | + | text-transform: initial; |
+ | font-family: Lato, sans-serif; | ||
+ | text-decoration: none; | ||
+ | color: #121212; | ||
+ | line-height: 2em; | ||
+ | padding-right: 0px; | ||
} | } | ||
− | #upperFooter # | + | |
− | + | #upperFooter #sponsors { | |
+ | height: 100%; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | box-sizing: border-box; | ||
+ | max-width: 55vw | ||
} | } | ||
− | #upperFooter # | + | |
− | + | #upperFooter #sponsors #mainSponsors { | |
+ | display: grid; | ||
+ | grid-template-columns: 1fr; | ||
+ | grid-template-rows: 1fr 1fr; | ||
+ | gap: 10px 0px; | ||
} | } | ||
− | #upperFooter #sponsors{ | + | |
− | + | #upperFooter #sponsors #otherSponsors { | |
− | + | display: flex | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | # | + | |
− | + | #lowerFooter { | |
− | + | color: #fafafc; | |
− | + | height: 20vh; | |
− | + | box-sizing: border-box; | |
− | + | background-color: #121212; | |
− | + | ||
} | } | ||
− | + | ||
− | + | #lowerFooter #navigation { | |
− | + | background-color: #121212; | |
− | + | display: flex; | |
+ | justify-content: space-around | ||
} | } | ||
− | # | + | |
− | + | #lowerFooter ul { | |
− | + | list-style: none; | |
− | + | padding-inline-start: 0; | |
− | + | margin: 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | #lowerFooter h2 { | |
+ | padding-bottom: 20px; | ||
+ | font-family: 'montserrat-bold', sans-serif; | ||
} | } | ||
− | #lowerFooter{ | + | |
− | + | #lowerFooter #navigation { | |
− | + | padding: 40px; | |
− | + | font-size: smaller | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | #lowerFooter | + | |
− | + | #footerWrapper #lowerFooter a { | |
− | + | text-decoration: none; | |
− | + | transition-duration: 0.2s; | |
+ | color: #fafafc; | ||
+ | text-transform: capitalize; | ||
+ | font-weight: 100; | ||
+ | line-height: 2em | ||
} | } | ||
− | #lowerFooter | + | |
− | + | #footerWrapper #lowerFooter a:active, | |
+ | #footerWrapper #lowerFooter a:focus, | ||
+ | #footerWrapper #lowerFooter a:visited { | ||
+ | color: #fafafc | ||
} | } | ||
− | #lowerFooter | + | |
− | + | #footerWrapper #lowerFooter a:hover { | |
− | + | color: rgba(255, 255, 255, 0.4); | |
+ | text-decoration: none | ||
} | } | ||
− | # | + | |
− | + | #projectList { | |
− | + | display: grid; | |
− | + | grid-template-columns: 1fr 1fr; | |
− | + | grid-auto-flow: column; | |
− | + | grid-template-rows: 1fr 1fr 1fr 1fr 1fr; | |
− | + | gap: 0px 10px; | |
} | } | ||
− | + | ||
− | # | + | #mainSponsors img { |
− | + | max-width: 16vw; | |
− | + | ||
} | } | ||
− | + | ||
− | + | .otherS img { | |
− | + | max-width: 10vw; | |
+ | height: auto; | ||
} | } | ||
− | # | + | |
− | + | .links-icons { | |
− | + | display: flex; | |
+ | align-items: center; | ||
+ | justify-content: space-around; | ||
+ | } | ||
+ | |||
+ | .links-icons svg { | ||
+ | fill: #121212; | ||
+ | width: 2em; | ||
+ | padding-right: 5px | ||
+ | } | ||
+ | |||
+ | #upperFooter #sponsors #othSWrap { | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr 1fr 1fr; | ||
+ | grid-template-rows: 1fr 1fr; | ||
+ | gap: 10px 0px; | ||
+ | } | ||
+ | |||
+ | @media (max-width:768px) { | ||
+ | #mainSponsors img { | ||
+ | max-width: 13vw; | ||
+ | height: auto; | ||
+ | } | ||
+ | #upperFooter #contacts { | ||
+ | max-width: 40vw; | ||
+ | } | ||
+ | #upperFooter #sponsors { | ||
+ | max-width: 60vw; | ||
+ | } | ||
+ | #otherSponsors img { | ||
+ | max-width: 10vw; | ||
+ | height: auto; | ||
+ | } | ||
+ | #upperFooter #sponsors #mainSponsors { | ||
+ | max-width: 100% | ||
+ | } | ||
+ | #upperFooter #sponsors #othsWrap { | ||
+ | max-width: 100% | ||
+ | } | ||
+ | #upperFooter #contacts #igem-info { | ||
+ | font-size: 0.7em; | ||
+ | padding-left: 15px; | ||
+ | margin-left: 15px | ||
+ | } | ||
+ | #lowerFooter h2 { | ||
+ | padding-bottom: 10px; | ||
+ | font-size: 0.9em | ||
+ | } | ||
+ | #lowerFooter ul { | ||
+ | font-size: 0.8em | ||
+ | } | ||
+ | .links-icons svg { | ||
+ | width: 1.5em; | ||
+ | } | ||
+ | #upperFooter #contacts #igem-info h3 { | ||
+ | font-size: 0.8em; | ||
+ | } | ||
+ | #upperFooter #contacts #image-placeholder { | ||
+ | border-right: solid 1px #fafafc; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width:420px) { | ||
+ | #upperFooter { | ||
+ | display: block; | ||
+ | height: fit-content; | ||
+ | padding: 0; | ||
+ | transform: rotate(-180deg); | ||
+ | } | ||
+ | #upperFooter #sponsors { | ||
+ | display: block; | ||
+ | padding-left: 0; | ||
+ | max-width: none | ||
+ | } | ||
+ | #upperFooter #sponsors #mainSponsors { | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | margin-top: 20px; | ||
+ | margin-bottom: 20px; | ||
+ | max-width: none | ||
+ | } | ||
+ | #mainSponsors img { | ||
+ | max-width: 40vw; | ||
+ | height: auto; | ||
+ | } | ||
+ | #otherSponsors img { | ||
+ | max-width: 30vw; | ||
+ | height: auto; | ||
+ | } | ||
+ | #upperFooter #sponsors #otherSponsors { | ||
+ | display: block | ||
+ | } | ||
+ | #upperFooter #sponsors #otherSponsors .sponsors-row { | ||
+ | display: flex | ||
+ | } | ||
+ | .mainS { | ||
+ | margin: 0; | ||
+ | } | ||
+ | #upperFooter #sponsors #othSWrap { | ||
+ | width: fit-content; | ||
+ | margin: 0 auto; | ||
+ | max-width: none; | ||
+ | padding-bottom: 30px; | ||
+ | grid-template-columns: 1fr 1fr; | ||
+ | grid-template-rows: 1fr 1fr 1fr; | ||
+ | } | ||
+ | .otherS { | ||
+ | justify-content: center | ||
+ | } | ||
+ | .otherS img { | ||
+ | max-width: 25vw; | ||
+ | } | ||
+ | #upperFooter #contacts { | ||
+ | background-color: #6281ef; | ||
+ | height: 10em; | ||
+ | max-width: 100vw; | ||
+ | display: flex; | ||
+ | justify-content: center | ||
+ | } | ||
+ | #upperFooter #contacts #contactsWrapper { | ||
+ | width: 80% | ||
+ | } | ||
+ | #lowerFooter { | ||
+ | height: fit-content; | ||
+ | transform: rotate(-180deg); | ||
+ | border-top: solid 25px #6281ef; | ||
+ | } | ||
+ | #lowerFooter #navigation { | ||
+ | display: block; | ||
+ | } | ||
+ | #footerWrapper { | ||
+ | border: none; | ||
+ | transform: rotate(180deg); | ||
+ | } | ||
+ | #lowerFooter ul { | ||
+ | overflow: hidden; | ||
+ | max-height: 0; | ||
+ | transition: max-height 0.2s ease-out; | ||
+ | margin-top: 10px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | #lowerFooter #navigation h2 { | ||
+ | cursor: pointer; | ||
+ | transition: 0.4s; | ||
+ | font-size: 1.6em | ||
+ | } | ||
+ | #lowerFooter ul li { | ||
+ | font-size: 1.5em | ||
+ | } | ||
+ | #upperFooter #contacts #igem-info h3 { | ||
+ | color: #fafafc; | ||
+ | font-size: 1em | ||
+ | } | ||
+ | #upperFooter #contacts #image-placeholder { | ||
+ | height: 20vw; | ||
+ | width: 20vw; | ||
+ | } | ||
+ | .links-icons svg { | ||
+ | fill: #fcfcfa | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width:300px) { | ||
+ | #upperFooter #contacts #igem-info h3 { | ||
+ | font-size: 0.7em | ||
+ | } | ||
+ | #upperFooter #contacts #igem-info { | ||
+ | border: none | ||
+ | } | ||
+ | #upperFooter #contacts #image-placeholder { | ||
+ | max-width: 20vw; | ||
+ | max-height: 20vw | ||
+ | } | ||
+ | .links-icons svg { | ||
+ | max-height: 14px; | ||
+ | } | ||
+ | #igem-info { | ||
+ | max-width: 40vw | ||
+ | } | ||
} | } |
Latest revision as of 23:24, 18 December 2020
- footerWrapper {
width: 100%; border-top: solid 25px #6281ef; font-family: 'montserrat-light', sans-serif; ; text-transform: uppercase; background-color: #fafafc;
}
- footerWrapper .container {
width: unset
}
- upperFooter {
height: fit-content; background-color: #fafafc; display: flex; align-items: center; justify-content: space-evenly; padding: 10px; box-sizing: border-box;
}
- upperFooter #contacts {
max-width: 45vw; height: 100%
}
- upperFooter #contacts #contactsWrapper {
display: flex; align-items: center; width: fit-content; justify-content: center; height: 100%
}
- upperFooter #contacts #contactsWrapper #contactus {
padding-right: 10px
}
- upperFooter #contacts #image-placeholder {
height: 9vw; width: 9vw; border-right: solid 1px #121212; padding-right: 30px;
}
- upperFooter #contacts #image-placeholder img {
height: 100%; width: 100%
}
- upperFooter #contacts #igem-info {
display: flex; height: 100%; font-size: 0.8em; padding-left: 30px; justify-content: space-around; align-items: center;
}
- upperFooter #contacts #igem-info h3 {
margin: 0; margin-bottom: 10px
}
- upperFooter #contacts a {
font-size: 0.9em; text-transform: initial; font-family: Lato, sans-serif; text-decoration: none; color: #121212; line-height: 2em; padding-right: 0px;
}
- upperFooter #sponsors {
height: 100%; display: flex; align-items: center; box-sizing: border-box; max-width: 55vw
}
- upperFooter #sponsors #mainSponsors {
display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 10px 0px;
}
- upperFooter #sponsors #otherSponsors {
display: flex
}
- lowerFooter {
color: #fafafc; height: 20vh; box-sizing: border-box; background-color: #121212;
}
- lowerFooter #navigation {
background-color: #121212; display: flex; justify-content: space-around
}
- lowerFooter ul {
list-style: none; padding-inline-start: 0; margin: 0;
}
- lowerFooter h2 {
padding-bottom: 20px; font-family: 'montserrat-bold', sans-serif;
}
- lowerFooter #navigation {
padding: 40px; font-size: smaller
}
- footerWrapper #lowerFooter a {
text-decoration: none; transition-duration: 0.2s; color: #fafafc; text-transform: capitalize; font-weight: 100; line-height: 2em
}
- footerWrapper #lowerFooter a:active,
- footerWrapper #lowerFooter a:focus,
- footerWrapper #lowerFooter a:visited {
color: #fafafc
}
- footerWrapper #lowerFooter a:hover {
color: rgba(255, 255, 255, 0.4); text-decoration: none
}
- projectList {
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; gap: 0px 10px;
}
- mainSponsors img {
max-width: 16vw;
}
.otherS img {
max-width: 10vw; height: auto;
}
.links-icons {
display: flex; align-items: center; justify-content: space-around;
}
.links-icons svg {
fill: #121212; width: 2em; padding-right: 5px
}
- upperFooter #sponsors #othSWrap {
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px 0px;
}
@media (max-width:768px) {
#mainSponsors img { max-width: 13vw; height: auto; } #upperFooter #contacts { max-width: 40vw; } #upperFooter #sponsors { max-width: 60vw; } #otherSponsors img { max-width: 10vw; height: auto; } #upperFooter #sponsors #mainSponsors { max-width: 100% } #upperFooter #sponsors #othsWrap { max-width: 100% } #upperFooter #contacts #igem-info { font-size: 0.7em; padding-left: 15px; margin-left: 15px } #lowerFooter h2 { padding-bottom: 10px; font-size: 0.9em } #lowerFooter ul { font-size: 0.8em } .links-icons svg { width: 1.5em; } #upperFooter #contacts #igem-info h3 { font-size: 0.8em; }
- upperFooter #contacts #image-placeholder {
border-right: solid 1px #fafafc;
} }
@media (max-width:420px) {
#upperFooter { display: block; height: fit-content; padding: 0; transform: rotate(-180deg); } #upperFooter #sponsors { display: block; padding-left: 0; max-width: none } #upperFooter #sponsors #mainSponsors { display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px; max-width: none } #mainSponsors img { max-width: 40vw; height: auto; } #otherSponsors img { max-width: 30vw; height: auto; } #upperFooter #sponsors #otherSponsors { display: block } #upperFooter #sponsors #otherSponsors .sponsors-row { display: flex } .mainS { margin: 0; } #upperFooter #sponsors #othSWrap { width: fit-content; margin: 0 auto; max-width: none; padding-bottom: 30px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .otherS { justify-content: center } .otherS img { max-width: 25vw; } #upperFooter #contacts { background-color: #6281ef; height: 10em; max-width: 100vw; display: flex; justify-content: center } #upperFooter #contacts #contactsWrapper { width: 80% } #lowerFooter { height: fit-content; transform: rotate(-180deg); border-top: solid 25px #6281ef; } #lowerFooter #navigation { display: block; } #footerWrapper { border: none; transform: rotate(180deg); } #lowerFooter ul { overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; margin-top: 10px; margin-bottom: 10px; } #lowerFooter #navigation h2 { cursor: pointer; transition: 0.4s; font-size: 1.6em } #lowerFooter ul li { font-size: 1.5em } #upperFooter #contacts #igem-info h3 { color: #fafafc; font-size: 1em } #upperFooter #contacts #image-placeholder { height: 20vw; width: 20vw; } .links-icons svg { fill: #fcfcfa }
}
@media (max-width:300px) {
#upperFooter #contacts #igem-info h3 { font-size: 0.7em } #upperFooter #contacts #igem-info { border: none } #upperFooter #contacts #image-placeholder { max-width: 20vw; max-height: 20vw } .links-icons svg { max-height: 14px; } #igem-info { max-width: 40vw }
}