Ela_Front/src/styles/components/_footer.scss

367 lines
6.4 KiB
SCSS

.footer {
a {
text-decoration: none;
cursor: pointer;
color: white;
}
.social-svg-mask {
fill: white !important;
}
.social-container {
width: 80% !important;
height: 80% !important;
left: 5px !important;
}
.media_sociaux {
text-align: left !important;
}
.SocialIcon {
top: 5px !important;
left: 10px !important;
}
background: rgb(250, 245, 245);
height: 50%;
font-size: 0.8rem !important;
@media only screen and (max-width: 600px) {
.copyright {
font-size: 0.5rem;
}
.SocialIcon {
top: 5px !important;
width: 30px !important;
height: 30px !important;
//left: 10px !important;
}
.Box_div {
padding: 1rem 1rem;
background: #104277;
color: white !important;
bottom: 0;
width: 100%;
min-height: 2rem;
@media (max-width: 601px) {
padding: 3px 3px;
}
}
.Container_div {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
/* background: red; */
}
.Column_div {
display: flex;
flex-direction: column;
text-align: left;
margin-left: 0.8rem;
}
.Row_Div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 3%;
@media (max-width: 1000px) {
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}
}
.FooterLink_a {
color: white;
margin-bottom: 0.2rem;
font-size: medium;
height: 2rem;
text-decoration: none;
cursor: pointer;
&:hover {
color: green;
transition: 200ms ease-in;
}
}
.Heading_p {
font-size: 0.7rem;
color: #81bc3a;
margin-bottom: 0rem;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
}
@media only screen and (min-width: 601px) and (max-width: 991px) {
.copyright {
font-size: 0.6rem;
}
.Box_div {
padding: 1rem 1rem;
background: #104277;
color: white !important;
bottom: 0;
width: 100%;
//min-height: 25rem;
@media (max-width: 601px) {
padding: 2rem 30px;
}
}
.Container_div {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
/* background: red; */
}
.Column_div {
display: flex;
flex-direction: column;
text-align: left;
margin-left: 20px;
}
.Row_Div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
grid-gap: 15%;
@media (max-width: 1000px) {
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
}
}
.FooterLink_a {
color: white;
margin-bottom: 0.2rem;
font-size: medium;
height: 2rem;
text-decoration: none;
cursor: pointer;
&:hover {
color: green;
transition: 200ms ease-in;
}
}
.Heading_p {
font-size: 0.85rem;
color: #81bc3a;
margin-bottom: 0.5rem;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.copyright {
font-size: 0.7rem;
}
.Box_div {
padding: 1rem 1rem;
background: #104277;
color: white !important;
bottom: 0;
width: 100%;
//min-height: 20rem;
@media (max-width: 601px) {
padding: 2rem 30px;
}
}
.Container_div {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
/* background: red; */
}
.Column_div {
display: flex;
flex-direction: column;
text-align: left;
margin-left: 20px;
}
.Row_Div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
grid-gap: 15%;
@media (max-width: 1000px) {
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
}
}
.FooterLink_a {
color: white;
margin-bottom: 0.2rem;
font-size: medium;
height: 2rem;
text-decoration: none;
cursor: pointer;
&:hover {
color: green;
transition: 200ms ease-in;
}
}
.Heading_p {
font-size: medium;
color: #81bc3a;
margin-bottom: 0.5rem;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
}
@media only screen and (min-width: 1200px) {
.copyright {
font-size: 0.7rem;
}
.Box_div {
padding: 1rem 1rem;
background: #104277;
color: white !important;
bottom: 0;
width: 100%;
//min-height: 20rem;
@media (max-width: 601px) {
padding: 2rem 30px;
}
}
.Container_div {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
/* background: red; */
}
.Column_div {
display: flex;
flex-direction: column;
text-align: left;
margin-left: 20px;
}
.Row_Div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
grid-gap: 15%;
@media (max-width: 1000px) {
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
}
}
.FooterLink_a {
color: white;
margin-bottom: 0.2rem;
font-size: medium;
height: 2rem;
text-decoration: none;
cursor: pointer;
&:hover {
color: green;
transition: 200ms ease-in;
}
}
.Heading_p {
font-size: 0.9rem;
color: #81bc3a;
margin-bottom: 0.5rem;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
}
}