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

(Created page with "*{ font-family: Lato, sans-serif; text-transform:uppercase } body{ background-color: #121212; margin:0; padding:0; } #footerWrapper{ position:absolute; bottom: 0...")
 
 
(39 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
*{
+
#footerWrapper {
−
  font-family: Lato, sans-serif;
+
    width: 100%;
−
  text-transform:uppercase
+
    border-top: solid 25px #6281ef;
 +
    font-family: 'montserrat-light', sans-serif;
 +
    ;
 +
    text-transform: uppercase;
 +
    background-color: #fafafc;
 
}
 
}
−
body{
+
 
−
  background-color: #121212;
+
#footerWrapper .container {
−
  margin:0;
+
    width: unset
−
  padding:0;
+
 
}
 
}
−
#footerWrapper{
+
 
−
  position:absolute;
+
#upperFooter {
−
  bottom: 0;
+
    height: fit-content;
−
  width: 100%;
+
    background-color: #fafafc;
−
  border-top: solid 25px #6281ef
+
    display: flex;
 +
    align-items: center;
 +
    justify-content: space-evenly;
 +
    padding: 10px;
 +
    box-sizing: border-box;
 
}
 
}
−
.container{
+
 
−
  height:250px
+
#upperFooter #contacts {
 +
    max-width: 45vw;
 +
    height: 100%
 
}
 
}
−
#upperFooter{
+
 
−
  height: 160px;
+
#upperFooter #contacts #contactsWrapper {
−
  background-color:#fafafc;
+
    display: flex;
−
  display:flex;
+
    align-items: center;
 +
    width: fit-content;
 +
    justify-content: center;
 +
    height: 100%
 
}
 
}
−
#upperFooter #contacts{
+
 
−
  width: 40%;
+
#upperFooter #contacts #contactsWrapper #contactus {
−
  height:100%;
+
    padding-right: 10px
−
  display:flex;
+
−
  align-items:center
+
 
}
 
}
  
−
#upperFooter #contacts #image-placeholder{
+
#upperFooter #contacts #image-placeholder {
−
  background-color:#fcbd1b;
+
    height: 9vw;
−
  height:100px;
+
    width: 9vw;
−
  width:100px;
+
    border-right: solid 1px #121212;
−
  border-radius:100px;
+
    padding-right: 30px;
−
  margin-left:60px;
+
−
  margin-right:30px;
+
−
 
+
 
}
 
}
−
#upperFooter #contacts #igem-info{
+
 
−
  display:flex;
+
#upperFooter #contacts #image-placeholder img {
−
  height:70%;
+
    height: 100%;
−
  font-size: 0.7em;
+
    width: 100%
−
  padding-left:30px;
+
−
  border-left:solid 2px #121212;
+
 
}
 
}
−
#upperFooter #contacts p{
+
 
−
  font-size: 0.7em;
+
#upperFooter #contacts #igem-info {
−
  text-transform: initial
+
    display: flex;
 +
    height: 100%;
 +
    font-size: 0.8em;
 +
    padding-left: 30px;
 +
    justify-content: space-around;
 +
    align-items: center;
 
}
 
}
−
#upperFooter #contacts #igem-info #contactus{
+
 
−
  padding-right:20px
+
#upperFooter #contacts #igem-info h3 {
 +
    margin: 0;
 +
    margin-bottom: 10px
 
}
 
}
−
#upperFooter #sponsors{
+
 
−
  width: 60%;
+
#upperFooter #contacts a {
−
  height:100%;
+
    font-size: 0.9em;
−
/*  background-color:#333; */
+
    text-transform: initial;
−
  display:flex;
+
    font-family: Lato, sans-serif;
−
  align-items:center;
+
    text-decoration: none;
−
  box-sizing:border-box;
+
    color: #121212;
−
  padding-left:40px;
+
    line-height: 2em;
−
  padding-right:40px
+
    padding-right: 0px;
 
}
 
}
−
#upperFooter #sponsors #mainSponsors{
+
 
−
  width: 35%;
+
#upperFooter #sponsors {
−
  height:90%;
+
    height: 100%;
−
  display: grid;
+
    display: flex;
−
  grid-template-columns: 1fr;
+
    align-items: center;
−
  grid-template-rows: 1fr 1fr;
+
    box-sizing: border-box;
−
  gap: 10px 10px;
+
    max-width: 55vw
 
}
 
}
−
.mainS{
+
 
−
  padding:5px;
+
#upperFooter #sponsors #mainSponsors {
−
  box-sizing:border-box;
+
    display: grid;
−
  background-color:#222
+
    grid-template-columns: 1fr;
 +
    grid-template-rows: 1fr 1fr;
 +
    gap: 10px 0px;
 
}
 
}
−
#upperFooter #sponsors #otherSponsors{
+
 
−
  width: 65%;
+
#upperFooter #sponsors #otherSponsors {
−
  height:70%;
+
    display: flex
−
/*  background-color:#555; */
+
−
  margin-left:10px;
+
−
  display: grid;
+
−
  grid-template-columns: 1fr 1fr 1fr;
+
−
  grid-template-rows: 1fr 1fr;
+
−
  gap: 10px 10px;
+
 
}
 
}
−
.otherS{
+
 
−
  background-color:#222
+
#lowerFooter {
 +
    color: #fafafc;
 +
    height: 20vh;
 +
    box-sizing: border-box;
 +
    background-color: #121212;
 
}
 
}
−
#lowerFooter{
+
 
−
  background-color:#121212;
+
#lowerFooter #navigation {
−
  color: #fafafc;
+
    background-color: #121212;
−
  display: flex;
+
    display: flex;
−
  padding-bottom:30px
+
    justify-content: space-around
 
}
 
}
−
#lowerFooter ul{
+
 
−
  list-style:none;
+
#lowerFooter ul {
−
  padding-inline-start: 0;
+
    list-style: none;
 +
    padding-inline-start: 0;
 +
    margin: 0;
 
}
 
}
−
#lowerFooter div{
+
 
−
  padding: 40px;
+
#lowerFooter h2 {
−
  font-size:smaller
+
    padding-bottom: 20px;
 +
    font-family: 'montserrat-bold', sans-serif;
 
}
 
}
−
a{
+
 
−
  text-decoration: none;
+
#lowerFooter #navigation {
−
  transition-duration:0.2s;
+
    padding: 40px;
−
  color:#fafafc;
+
    font-size: smaller
−
  text-transform: capitalize;
+
−
  font-weight:100;
+
−
  line-height:2em
+
 
}
 
}
−
a:active, a:focus, a:visited{
+
 
−
  color:#fafafc
+
#footerWrapper #lowerFooter a {
 +
    text-decoration: none;
 +
    transition-duration: 0.2s;
 +
    color: #fafafc;
 +
    text-transform: capitalize;
 +
    font-weight: 100;
 +
    line-height: 2em
 
}
 
}
−
a:hover{
+
 
−
  color:rgba(255,255,255,0.4)
+
#footerWrapper #lowerFooter a:active,
 +
#footerWrapper #lowerFooter a:focus,
 +
#footerWrapper #lowerFooter a:visited {
 +
    color: #fafafc
 
}
 
}
−
#projectList{
+
 
−
/*  display:grid; */
+
#footerWrapper #lowerFooter a:hover {
−
  columns:2
+
    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

  1. footerWrapper {
   width: 100%;
   border-top: solid 25px #6281ef;
   font-family: 'montserrat-light', sans-serif;
   ;
   text-transform: uppercase;
   background-color: #fafafc;

}

  1. footerWrapper .container {
   width: unset

}

  1. upperFooter {
   height: fit-content;
   background-color: #fafafc;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   padding: 10px;
   box-sizing: border-box;

}

  1. upperFooter #contacts {
   max-width: 45vw;
   height: 100%

}

  1. upperFooter #contacts #contactsWrapper {
   display: flex;
   align-items: center;
   width: fit-content;
   justify-content: center;
   height: 100%

}

  1. upperFooter #contacts #contactsWrapper #contactus {
   padding-right: 10px

}

  1. upperFooter #contacts #image-placeholder {
   height: 9vw;
   width: 9vw;
   border-right: solid 1px #121212;
   padding-right: 30px;

}

  1. upperFooter #contacts #image-placeholder img {
   height: 100%;
   width: 100%

}

  1. upperFooter #contacts #igem-info {
   display: flex;
   height: 100%;
   font-size: 0.8em;
   padding-left: 30px;
   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;
   padding-right: 0px;

}

  1. upperFooter #sponsors {
   height: 100%;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   max-width: 55vw

}

  1. upperFooter #sponsors #mainSponsors {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 10px 0px;

}

  1. upperFooter #sponsors #otherSponsors {
   display: flex

}

  1. lowerFooter {
   color: #fafafc;
   height: 20vh;
   box-sizing: border-box;
   background-color: #121212;

}

  1. lowerFooter #navigation {
   background-color: #121212;
   display: flex;
   justify-content: space-around

}

  1. lowerFooter ul {
   list-style: none;
   padding-inline-start: 0;
   margin: 0;

}

  1. lowerFooter h2 {
   padding-bottom: 20px;
   font-family: 'montserrat-bold', sans-serif;

}

  1. lowerFooter #navigation {
   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;
   grid-template-columns: 1fr 1fr;
   grid-auto-flow: column;
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
   gap: 0px 10px;

}

  1. 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

}

  1. 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;
   }
  1. 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
   }

}