Start Creating Footer with according in mobile.
This commit is contained in:
Fabiano Alencar
parent
0561fe766a
commit
925273f651
|
|
@ -0,0 +1,11 @@
|
|||
footer{
|
||||
ul{
|
||||
li{
|
||||
p{
|
||||
.fiber{
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
nav{
|
||||
&.menu-shadow{
|
||||
.tainacan-logo{
|
||||
@media only screen {
|
||||
@media (max-width: 360px){
|
||||
margin-left: 4vw;
|
||||
margin-right: 10vw;
|
||||
}
|
||||
@media (min-width: 370px) and (max-width: 375px){
|
||||
margin-left: 4vw;
|
||||
margin-right: 13vw;
|
||||
}
|
||||
@media (min-width: 400px) and (max-width: 414px){
|
||||
margin-left: 4vw;
|
||||
margin-right: 21vw;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 1.4vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggler{
|
||||
@media only screen {
|
||||
@media (max-width: 414px){
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header{
|
||||
.header-img{
|
||||
@media only screen{
|
||||
@media (max-width: 768px){
|
||||
min-height: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-icon{
|
||||
@media only screen{
|
||||
@media (max-width: 414px){
|
||||
right: 1.4vw;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
right: 2.9vw;
|
||||
}
|
||||
@media (min-width: 1440px){
|
||||
right: 1.9vw;
|
||||
}
|
||||
@media (min-width: 1670px){
|
||||
right: 0.9vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer{
|
||||
@media only screen {
|
||||
@media (max-width: 768px){
|
||||
%transition {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
%flipIn{
|
||||
animation: flipdown 0.5s ease both;
|
||||
}
|
||||
%no-select{
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
h6{
|
||||
line-height: 34px;
|
||||
letter-spacing: 1px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
@extend %no-select;
|
||||
}
|
||||
p{
|
||||
line-height: 26px;
|
||||
letter-spacing: 1px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
max-height: 800px;
|
||||
@extend %transition;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transform: translate( 0 , 0 ) ;
|
||||
margin-top: 14px;
|
||||
z-index: 2;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
perspective: 900;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li{
|
||||
position: relative;
|
||||
@extend %flipIn;
|
||||
|
||||
&:nth-of-type(1){
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
animation-delay: 0.75s;
|
||||
}
|
||||
&:nth-of-type(3){
|
||||
animation-delay: 1.0s;
|
||||
}
|
||||
&:last-of-type{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
i{
|
||||
position: absolute;
|
||||
transform: translate( -6px , 0 );
|
||||
margin-top: 16px;
|
||||
right: 0;
|
||||
&:before , &:after{
|
||||
content: "";
|
||||
@extend %transition;
|
||||
}
|
||||
&:before{
|
||||
transform: translate( -2px , 0 ) rotate( 45deg );
|
||||
}
|
||||
&:after{
|
||||
transform: translate( 2px , 0 ) rotate( -45deg );
|
||||
}
|
||||
}
|
||||
h6{
|
||||
i{
|
||||
&:before{
|
||||
content: "remove";
|
||||
@extend %transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type=checkbox]{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
&:checked{
|
||||
&~p{
|
||||
margin-top: 0;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
transform: translate( 0 , 50% );
|
||||
}
|
||||
&~i{
|
||||
&:before{
|
||||
transform: translate( 2px , 0 ) rotate( 45deg );
|
||||
}
|
||||
&:after{
|
||||
transform: translate( -2px , 0 ) rotate( -45deg );
|
||||
}
|
||||
}
|
||||
&~h6{
|
||||
i{
|
||||
&:before{
|
||||
content: "add";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes flipdown{
|
||||
0%{
|
||||
opacity: 0;
|
||||
transform-origin: top center;
|
||||
transform: rotateX(-90deg);
|
||||
}
|
||||
5%{
|
||||
opacity: 1;
|
||||
}
|
||||
80%{
|
||||
transform: rotateX(8deg);
|
||||
}
|
||||
83%{
|
||||
transform: rotateX(6deg);
|
||||
}
|
||||
92%{
|
||||
transform: rotateX(-3deg);
|
||||
}
|
||||
100%{
|
||||
transform-origin: top center;
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px){
|
||||
ul{
|
||||
list-style: none;
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 20px;
|
||||
-webkit-column-count: 4;
|
||||
-webkit-column-gap: 20px;
|
||||
column-count: 4;
|
||||
column-gap: 20px;
|
||||
li{
|
||||
&.border{
|
||||
border: none !important;
|
||||
input[type=checkbox]{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,13 +2,17 @@ $heavy-metal: #1d1d1b;
|
|||
$jelly-bean: #298596;
|
||||
$scooter: #2cb4c1;
|
||||
$jungle-green: #25a189;
|
||||
$haiti: #150e38;
|
||||
$oslo-gray: #898d8f;
|
||||
|
||||
|
||||
$theme-colors: (
|
||||
"heavy-metal": $heavy-metal,
|
||||
"jelly-bean": $jelly-bean,
|
||||
"scooter": $scooter,
|
||||
"jungle-green": $jungle-green
|
||||
|
||||
"jungle-green": $jungle-green,
|
||||
"haiti": $haiti,
|
||||
"oslo-gray": $oslo-gray
|
||||
);
|
||||
|
||||
@import "../vendor/bootstrap/scss/bootstrap";
|
||||
|
|
@ -1,4 +1,84 @@
|
|||
|
||||
<footer class="container-fluid p-4 p-sm-5 mt-2 bg-haiti">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md ml-md-4">
|
||||
<ul class="p-4">
|
||||
<li class="border border-white border-left-0 border-right-0 border-bottom-0">
|
||||
<input type="checkbox" checked>
|
||||
<i></i>
|
||||
<h6 class="text-white font-weight-bold">Mapa do site <i class="material-icons mt-1"></i></h2>
|
||||
<p class="text-oslo-gray">
|
||||
<i class="material-icons text-white fiber">fiber_manual_record</i> Página 1
|
||||
</p>
|
||||
<p class="text-oslo-gray">
|
||||
<i class="material-icons text-white fiber">fiber_manual_record</i> Página 2
|
||||
</p>
|
||||
</li>
|
||||
<li class="border border-white border-left-0 border-right-0 border-bottom-0">
|
||||
<input type="checkbox" checked>
|
||||
<i></i>
|
||||
<h6 class="text-white font-weight-bold">Funções de administração <i class="material-icons mt-1"></i></h2>
|
||||
<p class="text-oslo-gray">
|
||||
<i class="material-icons text-white fiber">fiber_manual_record</i> Administração 1
|
||||
</p>
|
||||
<p class="text-oslo-gray">
|
||||
<i class="material-icons text-white fiber">fiber_manual_record</i> Administração 2
|
||||
</p>
|
||||
</li>
|
||||
<li class="border border-white border-left-0 border-right-0 border-bottom-0">
|
||||
<input type="checkbox" checked>
|
||||
<i></i>
|
||||
<h6 class="text-white font-weight-bold">Funções do usuário <i class="material-icons mt-1"></i></h2>
|
||||
<p class="text-oslo-gray">
|
||||
<i class="material-icons text-white fiber">fiber_manual_record</i> Usuário 1
|
||||
</p>
|
||||
<p class="text-oslo-gray">
|
||||
<i class="material-icons text-white fiber">fiber_manual_record</i> Usuário 2
|
||||
</p>
|
||||
</li>
|
||||
<li class="border border-white border-left-0 border-right-0">
|
||||
<input type="checkbox" checked>
|
||||
<i></i>
|
||||
<h6 class="text-white font-weight-bold">Redes sociais <i class="material-icons mt-1"></i></h2>
|
||||
<p class="text-oslo-gray">
|
||||
<svg style="width:1rem;height:1rem" viewBox="0 0 24 24">
|
||||
<path fill="#fff" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
|
||||
</svg>
|
||||
Facebook
|
||||
</p>
|
||||
<p class="text-oslo-gray">
|
||||
<svg style="width:1rem;height:1rem" viewBox="0 0 24 24">
|
||||
<path fill="#fff" d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z" />
|
||||
</svg>
|
||||
Youtube
|
||||
</p>
|
||||
<p class="text-oslo-gray">
|
||||
<svg style="width:1rem;height:1rem" viewBox="0 0 24 24">
|
||||
<path fill="#fff" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
|
||||
</svg>
|
||||
Twitter
|
||||
</p>
|
||||
<p class="text-oslo-gray">
|
||||
<svg style="width:1rem;height:1rem" viewBox="0 0 24 24">
|
||||
<path fill="#fff" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
|
||||
</svg>
|
||||
Google Plus
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="bg-scooter mx-md-4"/>
|
||||
<div class="row pt-3 mx-md-4">
|
||||
<div class="col">
|
||||
|
||||
</div>
|
||||
<div class="col-auto pr-0 d-none d-sm-block">
|
||||
<img src="<?php echo get_template_directory_uri() ?>/assets/images/logo-footer.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue