Difference between revisions of "Template:Vilnius-Lithuania/CSS/footer"

Line 1: Line 1:
 +
#footerWrapper {
 +
width: 100%;
 +
border-top: solid 25px #6281ef;
 +
font-family: Lato, sans-serif;
 +
text-transform: uppercase
 +
}
  
−
#footerWrapper{
+
#upperFooter {
−
  width: 100%;
+
height: 200px;
−
  border-top: solid 25px #6281ef;
+
background-color: #fafafc;
−
font-family: Lato, sans-serif;
+
display: flex;
−
  text-transform:uppercase
+
 
}
 
}
−
#upperFooter{
+
 
−
  height: 160px;
+
#upperFooter #contacts {
−
  background-color:#fafafc;
+
width: 40%;
−
  display:flex;
+
 
}
 
}
−
#upperFooter #contacts{
+
 
−
  width: 40%;
+
#upperFooter #contacts #contactsWrapper {
 +
width: fit-content;
 +
display: flex;
 +
align-items: center;
 +
margin: 0 auto;
 +
height: 100%;
 
}
 
}
−
#upperFooter #contacts #contactsWrapper{
+
 
−
width: fit-content;
+
#upperFooter #contacts #image-placeholder {
−
    display: flex;
+
background-color: #fcbd1b;
−
    align-items: center;
+
height: 100px;
−
    margin: 0 auto;
+
width: 100px;
−
    height: 100%;
+
border-radius: 100px;
 +
margin-right: 30px;
 +
 
 
}
 
}
  
−
#upperFooter #contacts #image-placeholder{
+
#upperFooter #contacts #igem-info {
−
  background-color:#fcbd1b;
+
display: flex;
−
  height:100px;
+
height: 70%;
−
  width:100px;
+
font-size: 0.8em;
−
  border-radius:100px;
+
padding-left: 30px;
−
  margin-right:30px;
+
border-left: solid 2px #121212;
−
 
+
 
}
 
}
−
#upperFooter #contacts #igem-info{
+
 
−
  display:flex;
+
#upperFooter #contacts p {
−
  height:70%;
+
font-size: 0.9em;
−
  font-size: 0.8em;
+
text-transform: initial;
−
  padding-left:30px;
+
font-family: Lato, sans-serif;
−
  border-left:solid 2px #121212;
+
 
}
 
}
−
#upperFooter #contacts p{
+
 
−
  font-size: 0.9em;
+
#upperFooter #contacts #igem-info #contactus {
−
  text-transform: initial;
+
padding-right: 20px
−
font-family: Lato, sans-serif;
+
 
}
 
}
−
#upperFooter #contacts #igem-info #contactus{
+
 
−
  padding-right:20px
+
#upperFooter #contacts #igem-info div {
 +
padding-top: 10px
 
}
 
}
−
#upperFooter #contacts #igem-info div{
+
 
−
  padding-top:10px
+
#upperFooter #sponsors {
 +
width: 60%;
 +
height: 100%;
 +
display: flex;
 +
align-items: center;
 +
box-sizing: border-box;
 +
padding-left: 40px;
 +
padding-right: 40px
 
}
 
}
−
#upperFooter #sponsors{
+
 
−
  width: 60%;
+
#upperFooter #sponsors #mainSponsors {
−
  height:100%;
+
width: 35%;
−
/*  background-color:#333; */
+
height: 100%;
−
  display:flex;
+
display: grid;
−
  align-items:center;
+
grid-template-columns: 1fr;
−
  box-sizing:border-box;
+
grid-template-rows: 1fr 1fr;
−
  padding-left:40px;
+
gap: 10px 10px;
−
  padding-right:40px
+
 
}
 
}
−
#upperFooter #sponsors #mainSponsors{
+
 
−
  width: 35%;
+
.mainS {
−
  height:90%;
+
box-sizing: border-box;
−
  display: grid;
+
margin: 0 auto;
−
  grid-template-columns: 1fr;
+
padding: 5px;
−
  grid-template-rows: 1fr 1fr;
+
−
  gap: 10px 10px;
+
 
}
 
}
−
.mainS{
+
 
−
  padding:5px;
+
#upperFooter #sponsors #otherSponsors {
−
  box-sizing:border-box;
+
width: 65%;
−
  background-color:#222
+
height: 65%;
 +
margin-left: 10px;
 +
display: grid;
 +
grid-template-columns: 1fr 1fr 1fr;
 +
grid-template-rows: 1fr 1fr;
 +
gap: 10px 10px;
 
}
 
}
−
#upperFooter #sponsors #otherSponsors{
+
 
−
  width: 65%;
+
 
−
  height:70%;
+
 
−
/*  background-color:#555; */
+
#lowerFooter {
−
  margin-left:10px;
+
background-color: #121212;
−
  display: grid;
+
color: #fafafc;
−
  grid-template-columns: 1fr 1fr 1fr;
+
display: flex;
−
  grid-template-rows: 1fr 1fr;
+
padding-bottom: 30px;
−
  gap: 10px 10px;
+
height: 250px;
 +
box-sizing: border-box
 
}
 
}
−
.otherS{
+
 
−
  background-color:#222
+
#lowerFooter ul {
 +
list-style: none;
 +
padding-inline-start: 0;
 +
margin: 0;
 
}
 
}
−
#lowerFooter{
+
 
−
  background-color:#121212;
+
#lowerFooter h2 {
−
  color: #fafafc;
+
padding-bottom: 20px
−
  display: flex;
+
−
  padding-bottom:30px;
+
−
height:250px;
+
−
box-sizing:border-box
+
 
}
 
}
−
#lowerFooter ul{
+
 
−
  list-style:none;
+
#lowerFooter div {
−
  padding-inline-start: 0;
+
padding: 40px;
−
margin: 0;
+
font-size: smaller
 
}
 
}
−
#lowerFooter h2{
+
 
−
  padding-bottom:20px
+
#footerWrapper #lowerFooter a {
 +
text-decoration: none;
 +
transition-duration: 0.2s;
 +
color: #fafafc;
 +
text-transform: capitalize;
 +
font-weight: 100;
 +
line-height: 2em
 
}
 
}
−
#lowerFooter div{
+
 
−
  padding: 40px;
+
#footerWrapper #lowerFooter a:active,
−
  font-size:smaller
+
#footerWrapper #lowerFooter a:focus,
 +
#footerWrapper #lowerFooter a:visited {
 +
color: #fafafc
 
}
 
}
−
#footerWrapper #lowerFooter a{
+
 
−
  text-decoration: none;
+
#footerWrapper #lowerFooter a:hover {
−
  transition-duration:0.2s;
+
color: rgba(255, 255, 255, 0.4);
−
  color:#fafafc;
+
text-decoration: none
−
  text-transform: capitalize;
+
−
  font-weight:100;
+
−
  line-height:2em
+
 
}
 
}
−
#footerWrapper #lowerFooter a:active,
+
 
−
#footerWrapper #lowerFooter a:focus,
+
#projectList {
−
#footerWrapper #lowerFooter a:visited{
+
/*   display:grid; */
−
   color:#fafafc
+
columns: 2
 
}
 
}
−
#footerWrapper #lowerFooter a:hover{
+
 
−
  color:rgba(255,255,255,0.4);
+
#mainSponsors img {
−
text-decoration:none
+
height: 100%;
 
}
 
}
−
#projectList{
+
 
−
/*  display:grid; */
+
#otherSponsors img {
−
  columns:2
+
width: 100%
 
}
 
}

Revision as of 21:13, 20 August 2020

  1. footerWrapper {

width: 100%; border-top: solid 25px #6281ef; font-family: Lato, sans-serif; text-transform: uppercase }

  1. upperFooter {

height: 200px; background-color: #fafafc; display: flex; }

  1. upperFooter #contacts {

width: 40%; }

  1. upperFooter #contacts #contactsWrapper {

width: fit-content; display: flex; align-items: center; margin: 0 auto; height: 100%; }

  1. upperFooter #contacts #image-placeholder {

background-color: #fcbd1b; height: 100px; width: 100px; border-radius: 100px; margin-right: 30px;

}

  1. upperFooter #contacts #igem-info {

display: flex; height: 70%; font-size: 0.8em; padding-left: 30px; border-left: solid 2px #121212; }

  1. upperFooter #contacts p {

font-size: 0.9em; text-transform: initial; font-family: Lato, sans-serif; }

  1. upperFooter #contacts #igem-info #contactus {

padding-right: 20px }

  1. upperFooter #contacts #igem-info div {

padding-top: 10px }

  1. upperFooter #sponsors {

width: 60%; height: 100%; display: flex; align-items: center; box-sizing: border-box; padding-left: 40px; padding-right: 40px }

  1. upperFooter #sponsors #mainSponsors {

width: 35%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 10px 10px; }

.mainS { box-sizing: border-box; margin: 0 auto; padding: 5px; }

  1. upperFooter #sponsors #otherSponsors {

width: 65%; height: 65%; margin-left: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px 10px; }


  1. lowerFooter {

background-color: #121212; color: #fafafc; display: flex; padding-bottom: 30px; height: 250px; box-sizing: border-box }

  1. lowerFooter ul {

list-style: none; padding-inline-start: 0; margin: 0; }

  1. lowerFooter h2 {

padding-bottom: 20px }

  1. lowerFooter div {

padding: 40px; font-size: smaller }

  1. footerWrapper #lowerFooter a {

text-decoration: none; transition-duration: 0.2s; color: #fafafc; text-transform: capitalize; font-weight: 100; line-height: 2em }

  1. footerWrapper #lowerFooter a:active,
  2. footerWrapper #lowerFooter a:focus,
  3. footerWrapper #lowerFooter a:visited {

color: #fafafc }

  1. footerWrapper #lowerFooter a:hover {

color: rgba(255, 255, 255, 0.4); text-decoration: none }

  1. projectList {

/* display:grid; */ columns: 2 }

  1. mainSponsors img {

height: 100%; }

  1. otherSponsors img {

width: 100% }