0% found this document useful (0 votes)
2 views

header footer css

The document contains CSS styles for a website, defining variables for colors and styling for navigation and footer elements. It includes responsive design features for different screen sizes, ensuring a consistent layout across devices. Additionally, it incorporates animations for footer sections to enhance visual appeal.

Uploaded by

Youssef Kadmar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2 views

header footer css

The document contains CSS styles for a website, defining variables for colors and styling for navigation and footer elements. It includes responsive design features for different screen sizes, ensuring a consistent layout across devices. Additionally, it incorporates animations for footer sections to enhance visual appeal.

Uploaded by

Youssef Kadmar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

:root {

--primary-color: #58CC02; /* Vert Duolingo */


--primary-dark: #58A700; /* Vert foncé */
--secondary-color: #FFC800; /* Jaune */
--accent-color: #FF4B4B; /* Rouge */
--blue-color: #1CB0F6; /* Bleu */
--purple-color: #CE82FF; /* Violet */
--text-color: #4B4B4B; /* Gris foncé */
--light-gray: #F7F7F7;
--white: #FFFFFF;
--border-color: #E5E5E5;
}

.main-nav {
background: var(--blue-color);
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}

.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-size: 1.8rem;
font-weight: 800;
color: var(--primary-color);
}

.logo img {
height: 40px;
}

.nav-links .btn-primary,
.nav-links .btn-secondary {
padding: 0.8rem 1.5rem;
border-radius: 12px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid;
}

.btn-primary {
background: var(--primary-color);
color: var(--white);
border-color: var(--primary-dark);
box-shadow: 0 4px 0 var(--primary-dark);
}

.btn-primary:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 var(--primary-dark);
}

.btn-secondary {
background: var(--white);
color: var(--primary-color);
border-color: var(--primary-color);
margin-right: 1rem;
}

.btn-secondary:hover {
background: #E5F6E3;
}
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
align-items: flex-start;
padding: 1rem;
}

.logo {
font-size: 1.4rem;
}

.logo img {
height: 32px;
}

.nav-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
margin-top: 0.8rem;
}

.nav-links .btn-primary,
.nav-links .btn-secondary {
width: 100%;
padding: 0.8rem;
text-align: center;
font-size: 1rem;
margin-right: 0; /* Remove inline margin */
}

.main-nav {
padding: 0.5rem 0.8rem;
}
}

/* Style du footer principal */


.main-footer {
background: var(--text-color);
color: var(--white);
padding: 4rem 0 2rem;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
}

/* Conteneur du contenu du footer */


.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}

/* Sections individuelles du footer */


.footer-section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem;
min-height: 200px;
}

/* Titres des sections */


.footer-section h3 {
color: var(--white);
font-size: 1.4rem;
font-weight: 800;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
width: 100%; /* Largeur complète */
}

.footer-section h3::after {
content: '';
position: absolute;
left: 50%; /* Centre la ligne */
transform: translateX(-50%);
bottom: 0;
width: 50px;
height: 3px;
background-color: var(--primary-color);
border-radius: 2px;
}

/* Paragraphes dans le footer */


.footer-section p {
color: var(--white);
opacity: 0.9;
line-height: 1.6;
font-size: 1rem;
margin-bottom: 1rem;
width: 100%; /* Largeur complète */
}

/* Listes dans le footer */


.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%; /* Largeur complète */
}

.footer-section ul li {
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center; /* Centre les éléments */
gap: 0.5rem;
font-weight: 500;
}

/* Liens dans le footer */


.footer-section a {
color: var(--white);
text-decoration: none;
transition: all 0.2s ease;
font-weight: 600;
opacity: 0.9;
padding: 0.2rem 0;
}
/* Style uniforme pour tous les contenus */
.footer-section > *:not(h3) {
margin-top: 0; /* Reset des marges supérieures */
margin-bottom: 1rem; /* Espacement uniforme entre les éléments */
}

.footer-section a:hover {
color: var(--primary-color);
opacity: 1;
}

/* Icônes dans le footer */


.footer-section i {
color: var(--primary-color);
font-size: 1.1rem;
}
.social-links {
display: flex;
gap: 1rem;
}

.social-links a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(--primary-color);
transform: translateY(-3px);
}

.footer-bottom {
text-align: center;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);

.footer-bottom p {
font-size: 1rem;
color: var(--white);
margin: 0;
font-weight: 500;
opacity: 0.9;
}

/* Media Queries */
@media (max-width: 1024px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {


.footer-content {
grid-template-columns: 1fr;
}

.footer-section {
min-height: 150px; /* Hauteur réduite sur mobile */
}
}

/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.footer-section {
animation: fadeIn 0.5s ease-out forwards;
}

/* Animation décalée pour chaque section */


.footer-section:nth-child(1) { animation-delay: 0.1s; }
.footer-section:nth-child(2) { animation-delay: 0.2s; }
.footer-section:nth-child(3) { animation-delay: 0.3s; }
.footer-section:nth-child(4) { animation-delay: 0.4s; }
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
align-items: flex-start;
padding: 1rem;
}

.logo {
font-size: 1.4rem;
}

.logo img {
height: 32px;
}

.nav-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
margin-top: 0.8rem;
}

.nav-links .btn-primary,
.nav-links .btn-secondary {
width: 100%;
padding: 0.8rem;
text-align: center;
font-size: 1rem;
margin-right: 0;
}

.main-nav {
padding: 0.5rem 1rem;
}
}

You might also like