diff --git a/Apropos.html b/Apropos.html index cf0a43f..1b9adaf 100644 --- a/Apropos.html +++ b/Apropos.html @@ -2,6 +2,7 @@ + À propos @@ -10,23 +11,18 @@
photo -

- Poulain
Arsène +

+ Poulain
Arsène

-
@@ -49,5 +45,21 @@ + \ No newline at end of file diff --git a/Competences.html b/Competences.html index 8a6c9c3..58b55d2 100644 --- a/Competences.html +++ b/Competences.html @@ -2,6 +2,7 @@ + Compétences @@ -9,23 +10,18 @@
photo -

- Poulain
Arsène +

+ Poulain
Arsène

-
@@ -125,5 +121,21 @@ + \ No newline at end of file diff --git a/Projets.html b/Projets.html index 9b7c676..7d8231a 100644 --- a/Projets.html +++ b/Projets.html @@ -2,6 +2,7 @@ + Projets @@ -10,27 +11,18 @@
photo -

- Poulain
Arsène +

+ Poulain
Arsène

-
@@ -159,6 +151,21 @@ document.querySelectorAll('.project-card').forEach(card => { }); }); - + \ No newline at end of file diff --git a/contact.html b/contact.html index a25685e..babd858 100644 --- a/contact.html +++ b/contact.html @@ -2,6 +2,7 @@ + Contact @@ -10,27 +11,18 @@
photo -

- Poulain
Arsène +

+ Poulain
Arsène

-
@@ -63,5 +55,21 @@ + \ No newline at end of file diff --git a/index.html b/index.html index d4b8a45..28558fb 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + accueil @@ -10,27 +11,18 @@
photo -

- Poulain
Arsène +

+ Poulain
Arsène

-
@@ -61,5 +53,21 @@ + \ No newline at end of file diff --git a/site.css b/site.css index 26ad5d9..d47ad58 100644 --- a/site.css +++ b/site.css @@ -92,6 +92,7 @@ a:hover:visited { position: sticky; top: 0; border-bottom: 2px solid rgb(44, 44, 44); + z-index: 200; /* <-- Ajoute ou augmente cette valeur */ } .photo_titre_bandeau { @@ -122,6 +123,51 @@ a:hover:visited { border-right: 2px solid black; } +.dropdown-nav { + position: relative; + display: flex; + align-items: center; + gap: 20px; +} + +.dropdown-toggle { + display: none; + background: #fff; + border: 2px solid #bbb; + border-radius: 8px; + font-size: 2rem; + padding: 4px 16px; + cursor: pointer; + color: #333; + margin-right: 10px; +} + +.dropdown-menu { + display: flex; + gap: 10px; +} + +.dropdown-toggle { + display: none; + background: #35526e; + border: none; + border-radius: 8px; + font-size: 2rem; + padding: 8px 18px; + cursor: pointer; + color: #fff; + margin-right: 10px; + box-shadow: 0 2px 8px rgba(30,95,163,0.10); + transition: background 0.2s, transform 0.2s; +} + +.dropdown-toggle:hover, +.dropdown-toggle:focus { + background: #27405a; + transform: scale(1.04); + outline: none; +} + /* ========================= ACCUEIL & BLOCS ========================= */ @@ -384,23 +430,28 @@ td { .skill-row span { width: 110px; + min-width: 70px; font-weight: 500; color: #fff; } .skill-bar { flex: 1; + min-width: 80px; + max-width: 300px; height: 16px; background: #bbb; border-radius: 8px; overflow: hidden; margin-left: 10px; + display: block; } .skill-level { height: 100%; background: linear-gradient(90deg, #4e9cff, #1e5fa3); border-radius: 8px 0 0 8px; + transition: width 0.4s; } .skill-logo { @@ -472,30 +523,210 @@ td { } /* ========================= - MEDIA QUERIES + MEDIA QUERIES RESPONSIVE ========================= */ + +/* Tablettes et petits écrans */ @media (max-width: 900px) { .apropos-card { flex-direction: column; align-items: flex-start; text-align: left; padding: 20px; + gap: 15px; } .apropos-image img { max-width: 100%; margin-top: 15px; } + .projects-grid { + flex-direction: column; + gap: 15px; + align-items: center; + } + .project-card, .project-card.expanded { + min-width: unset; + width: 90vw; + padding: 16px; + } + .container { + margin: 0 2vw 60px 2vw; + padding: 0 2vw; + } + .bloc1, .bloc2 { + width: 90vw; + margin-left: auto; + margin-right: auto; + float: none; + } + .blocs { + flex-direction: column; + gap: 15px; + margin-top: 20px; + } + .image_accueil { + width: 80px; + height: 80px; + } + .photo_titre_bandeau { + margin-left: 0; + } + .section-title { + font-size: 1.1em; + } } @media (max-width: 800px) { - .contener { + .dropdown-toggle { + display: block; + } + .dropdown-menu { + display: none; + position: absolute; + top: 48px; + left: 0; + background: #fff; + border: 2px solid #bbb; + border-radius: 10px; + flex-direction: column; + min-width: 180px; + z-index: 100; + box-shadow: 0 2px 8px rgba(0,0,0,0.12); + padding: 10px 0; + max-width: 95vw; + width: 90vw; + } + .dropdown-menu.show { display: flex; + } + .dropdown-nav { + flex-direction: column; + align-items: flex-start; + gap: 0; + } + .bouttons_liens { + width: 100%; + box-sizing: border-box; + white-space: normal; /* Permet le retour à la ligne */ + overflow-wrap: break-word; /* Coupe le texte si besoin */ + padding: 12px 18px; + font-size: 1.1em; + } + .bouttons_liens:hover { + background: #eee; + } + .project-card.expanded { + width: 98vw !important; + max-width: 98vw !important; + min-width: unset !important; + left: 50%; + transform: translate(-50%, -50%) scale(1) !important; + padding: 12px 2vw !important; + box-sizing: border-box; + } +} + +/* Mobiles */ +@media (max-width: 600px) { + .bandeau { + flex-direction: column; + height: auto; + align-items: flex-start; + padding-bottom: 10px; + } + .photo_titre_bandeau { + flex-direction: row; + align-items: center; + margin-left: 0; + margin-bottom: 10px; + } + #bouttons_liens_nav { + flex-direction: column; + border-left: none; + border-top: 2px solid grey; + max-height: none; + width: 100%; + padding: 0; + align-items: stretch; + } + .bouttons_liens { + width: 95vw; + margin: 5px 0; + font-size: 18px; + padding-top: 10px; + height: 40px; + border-right: none; + border-bottom: 1px solid #ccc; + border-radius: 8px; + } + .container { + margin: 0 1vw 40px 1vw; + padding: 0 1vw; + } + .blocs { + flex-direction: column; + gap: 10px; + margin-top: 10px; + } + .bloc1, .bloc2 { + width: 95vw; + margin: 10px auto; + border-radius: 10px; + float: none; + } + .apropos-card { + flex-direction: column; + gap: 10px; + padding: 10px; + } + .apropos-image img { + max-width: 95vw; + margin: 0 auto; + } + .skill-row span { + width: 80px; + font-size: 14px; + } + .projects-grid { flex-direction: column; + gap: 10px; + align-items: center; + } + .project-card, .project-card.expanded { + min-width: unset; + width: 98vw; + padding: 8px; + } + .bonne-visite { + margin-top: 10%; + font-size: 1.1em; + } + .basPage { + font-size: 13px; + padding: 6px 0; + } + .image_accueil { + width: 60px; + height: 60px; + } + .taille_image_gallerie { + width: 98vw; + height: auto; + } + .cv-preview { + width: 120px; } } +/* Impression */ @media print { header { display: none; } + .background { + display: none; + } + .basPage { + display: none; + } } \ No newline at end of file