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

Line 10: Line 10:
 
background-color: #fafafc;
 
background-color: #fafafc;
 
display: flex;
 
display: flex;
 +
align-items: center;
 
}
 
}
  
Line 17: Line 18:
  
 
#upperFooter #contacts #contactsWrapper {
 
#upperFooter #contacts #contactsWrapper {
−
width: fit-content;
+
width: 80%;
 
display: flex;
 
display: flex;
 
align-items: center;
 
align-items: center;
Line 25: Line 26:
  
 
#upperFooter #contacts #image-placeholder {
 
#upperFooter #contacts #image-placeholder {
−
background-color: #fcbd1b;
+
background-color: rgba(0, 0, 0, 0.04);
 
height: 100px;
 
height: 100px;
 
width: 100px;
 
width: 100px;
 
border-radius: 100px;
 
border-radius: 100px;
 
margin-right: 30px;
 
margin-right: 30px;
 +
 
}
 
}
−
#upperFooter #contacts #image-placeholder img{
+
 
−
height:100%
+
#upperFooter #contacts #image-placeholder img {
 +
height: 100%
 
}
 
}
  
Line 41: Line 44:
 
padding-left: 30px;
 
padding-left: 30px;
 
border-left: solid 2px #121212;
 
border-left: solid 2px #121212;
 +
width: 100%;
 +
justify-content: space-around;
 +
align-items: center
 +
}
 +
 +
#upperFooter #contacts #igem-info h3 {
 +
margin: 0;
 +
margin-bottom: 10px
 
}
 
}
  
−
#upperFooter #contacts p {
+
#upperFooter #contacts a {
 
font-size: 0.9em;
 
font-size: 0.9em;
 
text-transform: initial;
 
text-transform: initial;
 
font-family: Lato, sans-serif;
 
font-family: Lato, sans-serif;
 +
text-decoration: none;
 +
color: #121212;
 +
line-height: 2em
 
}
 
}
  
 
#upperFooter #contacts #igem-info #contactus {
 
#upperFooter #contacts #igem-info #contactus {
 
padding-right: 20px
 
padding-right: 20px
−
}
 
−
 
−
#upperFooter #contacts #igem-info div {
 
−
padding-top: 40px
 
−
}
 
−
#upperFooter #contacts #igem-info div h3{
 
−
padding-bottom: 15px
 
 
}
 
}
  
 
#upperFooter #sponsors {
 
#upperFooter #sponsors {
 
width: 60%;
 
width: 60%;
−
height: 100%;
+
height: 90%;
−
display: flex;
+
display: grid;
 
align-items: center;
 
align-items: center;
 
box-sizing: border-box;
 
box-sizing: border-box;
 
padding-left: 40px;
 
padding-left: 40px;
−
padding-right: 40px
+
padding-right: 40px;
 +
grid-template-columns: 0.5fr 1fr;
 +
grid-template-rows: 1fr;
 +
gap: 1px 10px;
 
}
 
}
  
 
#upperFooter #sponsors #mainSponsors {
 
#upperFooter #sponsors #mainSponsors {
−
width: 35%;
 
 
height: 100%;
 
height: 100%;
 
display: grid;
 
display: grid;
Line 86: Line 95:
  
 
#upperFooter #sponsors #otherSponsors {
 
#upperFooter #sponsors #otherSponsors {
−
width: 65%;
 
 
height: 65%;
 
height: 65%;
 
margin-left: 10px;
 
margin-left: 10px;
Line 142: Line 150:
  
 
#projectList {
 
#projectList {
−
/*  display:grid; */
 
 
columns: 2
 
columns: 2
 
}
 
}
  
−
#otherSponsors img,
 
 
#mainSponsors img {
 
#mainSponsors img {
−
width: 100%
+
height: 60px
 +
}
 +
 
 +
#otherSponsors img {
 +
height: 40px
 +
}
 +
 
 +
.links-icons {
 +
display: flex;
 +
align-items: center
 +
}
 +
 
 +
.links-icons img {
 +
width: 2em;
 +
padding-right: 5px
 
}
 
}

Revision as of 14:04, 21 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; align-items: center; }

  1. upperFooter #contacts {

width: 40%; }

  1. upperFooter #contacts #contactsWrapper {

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

  1. upperFooter #contacts #image-placeholder {

background-color: rgba(0, 0, 0, 0.04); height: 100px; width: 100px; border-radius: 100px; margin-right: 30px;

}

  1. upperFooter #contacts #image-placeholder img {

height: 100% }

  1. upperFooter #contacts #igem-info {

display: flex; height: 70%; font-size: 0.8em; padding-left: 30px; border-left: solid 2px #121212; width: 100%; justify-content: space-around; align-items: center }

  1. upperFooter #contacts #igem-info h3 {

margin: 0; margin-bottom: 10px }

  1. upperFooter #contacts a {

font-size: 0.9em; text-transform: initial; font-family: Lato, sans-serif; text-decoration: none; color: #121212; line-height: 2em }

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

padding-right: 20px }

  1. upperFooter #sponsors {

width: 60%; height: 90%; display: grid; align-items: center; box-sizing: border-box; padding-left: 40px; padding-right: 40px; grid-template-columns: 0.5fr 1fr; grid-template-rows: 1fr; gap: 1px 10px; }

  1. upperFooter #sponsors #mainSponsors {

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 {

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 {

columns: 2 }

  1. mainSponsors img {

height: 60px }

  1. otherSponsors img {

height: 40px }

.links-icons { display: flex; align-items: center }

.links-icons img { width: 2em; padding-right: 5px }