Update footer title and improve responsive design in footer.html

This commit is contained in:
Almog Lavi
2024-03-12 10:22:48 +02:00
parent 8fb75c16af
commit 5f98a0c539

View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Customization</title> <title>Footer</title>
<style> <style>
body { body {
margin: 0; margin: 0;
@ -27,13 +27,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.footer-links {
display: flex;
justify-content: center;
gap: 20px;
margin: 10px 0;
}
.footer-links, .social-icons { .footer-links, .social-icons {
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
@ -42,25 +36,46 @@
gap: 20px; gap: 20px;
align-items: center; align-items: center;
} }
.footer-links a:hover {
color: #AEA1F1; .footer-links a:hover, .social-icons a:hover {
}
.social-icons {
display: flex;
gap: 20px;
align-items: center;
}
.social-icons a:hover {
color: #AEA1F1; color: #AEA1F1;
} }
.social-icons svg { .social-icons svg {
width: 24px; width: 24px;
height: auto; height: auto;
fill: white; fill: white;
} }
.footer-text { .footer-text {
width: 240px; width: 240px;
} }
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-links, .social-icons, .footer-text {
width: 100%;
justify-content: center;
margin: 10px 0;
}
.footer-links {
order: 1;
}
.social-icons {
order: 2;
}
.footer-text {
order: 3;
}
}
</style> </style>
</head> </head>
<body> <body>