mirror of
https://github.com/ivabus/www
synced 2024-11-23 05:35:05 +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">
|
||||
<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>
|
||||
<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 class="col-lg-4">
|
||||
<div class="card social-box" style="width: 100%; float:right;">
|
||||
|
|
|
|||
|
|
@ -1,72 +1,396 @@
|
|||
/* Footer Styling */
|
||||
|
||||
.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;
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer-email:focus{
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.social-box{
|
||||
border-radius: 0px !important;
|
||||
border: 2px solid #949494;
|
||||
background-color: none;
|
||||
@media only screen and (min-width: 768px) and (max-width: 992px) {
|
||||
|
||||
.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{
|
||||
border-radius: 0px !important;
|
||||
@media only screen and (min-width: 576px) and (max-width: 768px){
|
||||
|
||||
.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{
|
||||
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;
|
||||
}
|
||||
@media only screen and (max-width: 576px) {
|
||||
|
||||
.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-email{
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 4vw;
|
||||
line-height: 2.121vw;
|
||||
padding: 6vw 0vw;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.footer-content{
|
||||
padding-right: 5.580vw;
|
||||
}
|
||||
.footer-email:focus{
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.social-box{
|
||||
border-radius: 0px !important;
|
||||
border: 2px solid #949494;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.email-btn:hover{
|
||||
background-color: #00ffd0;
|
||||
color: #1a1a1a;
|
||||
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
|
||||
}
|
||||
.list-group{
|
||||
border-radius: 0px !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