mirror of
https://github.com/ivabus/www
synced 2024-11-23 05:55:07 +03:00
Footer <576px optimization
This commit is contained in:
Thomas Smith
parent
3f36eae2b5
commit
a079e45840
2 changed files with 381 additions and 57 deletions
|
|
@ -5,7 +5,7 @@
|
||||||
<div class="col-lg-8 footer-content">
|
<div class="col-lg-8 footer-content">
|
||||||
<h4>Equitable open-source for <span id="cycle">web3</span></h4>
|
<h4>Equitable open-source for <span id="cycle">web3</span></h4>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||||
<img src="/Images/footer-grid-element.svg" alt="tea.grid">
|
<img class="footer-grid" src="/Images/footer-grid-element.svg" alt="tea.grid">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
<div class="card social-box" style="width: 100%; float:right;">
|
<div class="card social-box" style="width: 100%; float:right;">
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,396 @@
|
||||||
/* Footer Styling */
|
/* Footer Styling */
|
||||||
|
|
||||||
.footer-email{
|
@media only screen and (min-width: 1200px) {
|
||||||
font-family: "pp-neue-machina", sans-serif;
|
|
||||||
text-transform: uppercase;
|
.footer-email{
|
||||||
font-size: 2.121vw;
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
line-height: 2.121vw;
|
text-transform: uppercase;
|
||||||
padding: 1.953vw 0vw;
|
font-size: 2.121vw;
|
||||||
background: none;
|
line-height: 2.121vw;
|
||||||
border: none;
|
padding: 1.953vw 0vw;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-email:focus{
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
color: #fff;
|
||||||
|
outline: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-box{
|
||||||
|
border-radius: 0px !important;
|
||||||
|
border: 2px solid #949494;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group{
|
||||||
|
border-radius: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item{
|
||||||
|
background-color: #1a1a1a !important;
|
||||||
|
padding: 1.116vw;
|
||||||
|
font-size: 1.562vw;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-bottom: 2px solid #949494;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item:hover{
|
||||||
|
padding-left: 2.232vw;
|
||||||
|
background-color: #00ffd0 !important;
|
||||||
|
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||||
|
color: #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content{
|
||||||
|
padding-right: 5.580vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-btn{
|
||||||
|
width: 16%;
|
||||||
|
border-left: 2px solid #949494;
|
||||||
|
border-right: none !important;
|
||||||
|
border-radius: 0px;
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 2.121vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-btn:hover{
|
||||||
|
background-color: #00ffd0;
|
||||||
|
color: #1a1a1a;
|
||||||
|
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon{
|
||||||
|
margin-right: 1.116vw !important;
|
||||||
|
position: relative;
|
||||||
|
top: 0.167vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid{
|
||||||
|
width:50.223vw;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-email:focus{
|
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||||||
background-color: #1a1a1a;
|
|
||||||
color: #fff;
|
.footer-email{
|
||||||
outline: none !important;
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
box-shadow: none !important;
|
text-transform: uppercase;
|
||||||
|
font-size: 2.121vw;
|
||||||
|
line-height: 2.121vw;
|
||||||
|
padding: 1.953vw 0vw;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-email:focus{
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
color: #fff;
|
||||||
|
outline: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-box{
|
||||||
|
border-radius: 0px !important;
|
||||||
|
border: 2px solid #949494;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group{
|
||||||
|
border-radius: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item{
|
||||||
|
background-color: #1a1a1a !important;
|
||||||
|
padding: 1.116vw;
|
||||||
|
font-size: 1.562vw;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-bottom: 2px solid #949494;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item:hover{
|
||||||
|
padding-left: 2.232vw;
|
||||||
|
background-color: #00ffd0 !important;
|
||||||
|
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||||
|
color: #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content{
|
||||||
|
padding-right: 5.580vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-btn{
|
||||||
|
width: 16%;
|
||||||
|
border-left: 2px solid #949494;
|
||||||
|
border-right: none !important;
|
||||||
|
border-radius: 0px;
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 2.121vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-btn:hover{
|
||||||
|
background-color: #00ffd0;
|
||||||
|
color: #1a1a1a;
|
||||||
|
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon{
|
||||||
|
margin-right: 1.116vw !important;
|
||||||
|
position: relative;
|
||||||
|
top: 0.167vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid{
|
||||||
|
width:50.223vw;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-box{
|
@media only screen and (min-width: 768px) and (max-width: 992px) {
|
||||||
border-radius: 0px !important;
|
|
||||||
border: 2px solid #949494;
|
.footer-email{
|
||||||
background-color: none;
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 2.121vw;
|
||||||
|
line-height: 2.121vw;
|
||||||
|
padding: 1.953vw 0vw;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-email:focus{
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
color: #fff;
|
||||||
|
outline: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-box{
|
||||||
|
border-radius: 0px !important;
|
||||||
|
border: 2px solid #949494;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group{
|
||||||
|
border-radius: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item{
|
||||||
|
background-color: #1a1a1a !important;
|
||||||
|
padding: 1.116vw;
|
||||||
|
font-size: 1.562vw;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-bottom: 2px solid #949494;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item:hover{
|
||||||
|
padding-left: 2.232vw;
|
||||||
|
background-color: #00ffd0 !important;
|
||||||
|
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||||
|
color: #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content{
|
||||||
|
padding-right: 5.580vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-btn{
|
||||||
|
width: 16%;
|
||||||
|
border-left: 2px solid #949494;
|
||||||
|
border-right: none !important;
|
||||||
|
border-radius: 0px;
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 2.121vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-btn:hover{
|
||||||
|
background-color: #00ffd0;
|
||||||
|
color: #1a1a1a;
|
||||||
|
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon{
|
||||||
|
margin-right: 1.116vw !important;
|
||||||
|
position: relative;
|
||||||
|
top: 0.167vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid{
|
||||||
|
width:50.223vw;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-group{
|
@media only screen and (min-width: 576px) and (max-width: 768px){
|
||||||
border-radius: 0px !important;
|
|
||||||
|
.footer-email{
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 2.121vw;
|
||||||
|
line-height: 2.121vw;
|
||||||
|
padding: 1.953vw 0vw;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-email:focus{
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
color: #fff;
|
||||||
|
outline: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-box{
|
||||||
|
border-radius: 0px !important;
|
||||||
|
border: 2px solid #949494;
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group{
|
||||||
|
border-radius: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item{
|
||||||
|
background-color: #1a1a1a !important;
|
||||||
|
padding: 1.116vw;
|
||||||
|
font-size: 1.562vw;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-bottom: 2px solid #949494;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item:hover{
|
||||||
|
padding-left: 2.232vw;
|
||||||
|
background-color: #00ffd0 !important;
|
||||||
|
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||||
|
color: #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content{
|
||||||
|
padding-right: 5.580vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-btn{
|
||||||
|
width: 16%;
|
||||||
|
border-left: 2px solid #949494;
|
||||||
|
border-right: none !important;
|
||||||
|
border-radius: 0px;
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 2.121vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-btn:hover{
|
||||||
|
background-color: #00ffd0;
|
||||||
|
color: #1a1a1a;
|
||||||
|
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon{
|
||||||
|
margin-right: 1.116vw !important;
|
||||||
|
position: relative;
|
||||||
|
top: 0.167vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid{
|
||||||
|
width:50.223vw;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-group-item{
|
@media only screen and (max-width: 576px) {
|
||||||
background-color: #1a1a1a !important;
|
|
||||||
padding: 1.116vw;
|
|
||||||
font-size: 1.562vw;
|
|
||||||
color: #fff;
|
|
||||||
font-family: "pp-neue-machina", sans-serif;
|
|
||||||
text-transform: uppercase;
|
|
||||||
border-bottom: 2px solid #949494;
|
|
||||||
transition: 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group-item:hover{
|
.footer-email{
|
||||||
padding-left: 2.232vw;
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
background-color: #00ffd0 !important;
|
text-transform: uppercase;
|
||||||
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
font-size: 4vw;
|
||||||
color: #1a1a1a !important;
|
line-height: 2.121vw;
|
||||||
}
|
padding: 6vw 0vw;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
.footer-content{
|
.footer-email:focus{
|
||||||
padding-right: 5.580vw;
|
background-color: #1a1a1a;
|
||||||
}
|
color: #fff;
|
||||||
|
outline: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.email-btn{
|
.social-box{
|
||||||
width: 16%;
|
border-radius: 0px !important;
|
||||||
border-left: 2px solid #949494;
|
border: 2px solid #949494;
|
||||||
border-right: none !important;
|
background-color: none;
|
||||||
border-radius: 0px;
|
}
|
||||||
font-family: "pp-neue-machina", sans-serif;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 2.121vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-btn:hover{
|
.list-group{
|
||||||
background-color: #00ffd0;
|
border-radius: 0px !important;
|
||||||
color: #1a1a1a;
|
}
|
||||||
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
|
||||||
}
|
.list-group-item{
|
||||||
|
background-color: #1a1a1a !important;
|
||||||
|
padding: 3.5vw;
|
||||||
|
font-size: 4vw;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-bottom: 2px solid #949494;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item:hover{
|
||||||
|
padding-left: 7vw;
|
||||||
|
background-color: #00ffd0 !important;
|
||||||
|
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||||
|
color: #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content{
|
||||||
|
padding-right: 5.580vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-btn{
|
||||||
|
width: 16%;
|
||||||
|
border-left: 2px solid #949494;
|
||||||
|
border-right: none !important;
|
||||||
|
border-radius: 0px;
|
||||||
|
font-family: "pp-neue-machina", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-btn:hover{
|
||||||
|
background-color: #00ffd0;
|
||||||
|
color: #1a1a1a;
|
||||||
|
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon{
|
||||||
|
margin-right: 2vw !important;
|
||||||
|
position: relative;
|
||||||
|
top: 0.167vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
.social-icon{
|
|
||||||
margin-right: 1.116vw !important;
|
|
||||||
position: relative;
|
|
||||||
top: 0.167vw;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue