arsene.poulain
/
portfolioarsene
generated from Templates_CodeFirst/templateHtmlCss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout media querys
continuous-integration/drone/push Build is passing Details

Browse Source
master
Arsène Poulain 1 month ago
parent d362596b14
commit d5219a95b2
6 changed files with 368 additions and 90 deletions
Show Stats Download Patch File Download Diff File

42
Apropos.html
Unescape View File

@ -2,6 +2,7 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>À propos</title> <title>À propos</title>
<link rel="stylesheet" href="site.css"> <link rel="stylesheet" href="site.css">
</head> </head>
@ -10,23 +11,18 @@
<header class="bandeau"> <header class="bandeau">
<div class="photo_titre_bandeau"> <div class="photo_titre_bandeau">
<img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil"> <img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil">
<h1 style="margin-left: 10px; margin-top: 40px; margin-right : 10px; text-decoration: underline;"> <h1 style="margin-left: 10px; margin-top: 40px; margin-right: 10px; text-decoration: underline;">
<a href="index.html">Poulain <br> Arsène </a> <a href="index.html">Poulain <br> Arsène</a>
</h1> </h1>
</div> </div>
<nav id="bouttons_liens_nav"> <nav id="bouttons_liens_nav" class="dropdown-nav">
<a href="Projets.html" > <button class="dropdown-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="bouttons_liens"> <strong>Projets</strong></div> <div class="dropdown-menu">
</a> <a href="Projets.html" class="bouttons_liens"><strong>Projets</strong></a>
<a href="Apropos.html" > <a href="Apropos.html" class="bouttons_liens"><strong>A propos</strong></a>
<div class="bouttons_liens"><strong>A propos</strong></div> <a href="Competences.html" class="bouttons_liens"><strong>Compétences</strong></a>
</a> <a href="contact.html" class="bouttons_liens"><strong>Contact</strong></a>
<a href="Competences.html"> </div>
<div class="bouttons_liens"><strong>Compétences</strong></div>
</a>
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong></div>
</a>
</nav> </nav>
</header> </header>
@ -49,5 +45,21 @@
<footer class="basPage"> <footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p> <p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</footer> </footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.querySelector('.dropdown-toggle');
const menu = document.querySelector('.dropdown-menu');
if (toggle && menu) {
toggle.addEventListener('click', function() {
menu.classList.toggle('show');
});
document.addEventListener('click', function(e) {
if (!toggle.contains(e.target) && !menu.contains(e.target)) {
menu.classList.remove('show');
}
});
}
});
</script>
</body> </body>
</html> </html>

42
Competences.html
Unescape View File

@ -2,6 +2,7 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compétences</title> <title>Compétences</title>
<link rel="stylesheet" href="site.css"> <link rel="stylesheet" href="site.css">
</head> </head>
@ -9,23 +10,18 @@
<header class="bandeau"> <header class="bandeau">
<div class="photo_titre_bandeau"> <div class="photo_titre_bandeau">
<img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil"> <img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil">
<h1 style="margin-left: 10px; margin-top: 40px; margin-right : 10px; text-decoration: underline;"> <h1 style="margin-left: 10px; margin-top: 40px; margin-right: 10px; text-decoration: underline;">
<a href="index.html">Poulain <br> Arsène </a> <a href="index.html">Poulain <br> Arsène</a>
</h1> </h1>
</div> </div>
<nav id="bouttons_liens_nav"> <nav id="bouttons_liens_nav" class="dropdown-nav">
<a href="Projets.html" > <button class="dropdown-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="bouttons_liens"> <strong>Projets</strong></div> <div class="dropdown-menu">
</a> <a href="Projets.html" class="bouttons_liens"><strong>Projets</strong></a>
<a href="Apropos.html" > <a href="Apropos.html" class="bouttons_liens"><strong>A propos</strong></a>
<div class="bouttons_liens"><strong>A propos</strong></div> <a href="Competences.html" class="bouttons_liens"><strong>Compétences</strong></a>
</a> <a href="contact.html" class="bouttons_liens"><strong>Contact</strong></a>
<a href="Competences.html"> </div>
<div class="bouttons_liens"><strong>Compétences</strong></div>
</a>
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong></div>
</a>
</nav> </nav>
</header> </header>
@ -125,5 +121,21 @@
<footer class="basPage"> <footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p> <p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</footer> </footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.querySelector('.dropdown-toggle');
const menu = document.querySelector('.dropdown-menu');
if (toggle && menu) {
toggle.addEventListener('click', function() {
menu.classList.toggle('show');
});
document.addEventListener('click', function(e) {
if (!toggle.contains(e.target) && !menu.contains(e.target)) {
menu.classList.remove('show');
}
});
}
});
</script>
</body> </body>
</html> </html>

47
Projets.html
Unescape View File

@ -2,6 +2,7 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projets</title> <title>Projets</title>
<link rel="stylesheet" href="site.css"> <link rel="stylesheet" href="site.css">
</head> </head>
@ -10,27 +11,18 @@
<header class="bandeau"> <header class="bandeau">
<div class="photo_titre_bandeau"> <div class="photo_titre_bandeau">
<img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil"> <img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil">
<h1 style="margin-left: 10px; margin-top: 40px; margin-right : 10px; text-decoration: underline;"> <h1 style="margin-left: 10px; margin-top: 40px; margin-right: 10px; text-decoration: underline;">
<a href="index.html">Poulain <br> Arsène </a> <a href="index.html">Poulain <br> Arsène</a>
</h1> </h1>
</div> </div>
<nav id="bouttons_liens_nav"> <nav id="bouttons_liens_nav" class="dropdown-nav">
<a href="Projets.html" > <button class="dropdown-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="bouttons_liens"> <strong>Projets</strong> <div class="dropdown-menu">
</div> <a href="Projets.html" class="bouttons_liens"><strong>Projets</strong></a>
</a> <a href="Apropos.html" class="bouttons_liens"><strong>A propos</strong></a>
<a href="Apropos.html" > <a href="Competences.html" class="bouttons_liens"><strong>Compétences</strong></a>
<div class="bouttons_liens"><strong>A propos</strong> <a href="contact.html" class="bouttons_liens"><strong>Contact</strong></a>
</div> </div>
</a>
<a href="Competences.html">
<div class="bouttons_liens"><strong>Compétences</strong>
</div>
</a>
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong>
</div>
</a>
</nav> </nav>
</header> </header>
@ -159,6 +151,21 @@ document.querySelectorAll('.project-card').forEach(card => {
}); });
}); });
</script> </script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.querySelector('.dropdown-toggle');
const menu = document.querySelector('.dropdown-menu');
if (toggle && menu) {
toggle.addEventListener('click', function() {
menu.classList.toggle('show');
});
document.addEventListener('click', function(e) {
if (!toggle.contains(e.target) && !menu.contains(e.target)) {
menu.classList.remove('show');
}
});
}
});
</script>
</body> </body>
</html> </html>

46
contact.html
Unescape View File

@ -2,6 +2,7 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title> <title>Contact</title>
<link rel="stylesheet" href="site.css"> <link rel="stylesheet" href="site.css">
</head> </head>
@ -10,27 +11,18 @@
<header class="bandeau"> <header class="bandeau">
<div class="photo_titre_bandeau"> <div class="photo_titre_bandeau">
<img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil"> <img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil">
<h1 style="margin-left: 10px; margin-top: 40px; margin-right : 10px; text-decoration: underline;"> <h1 style="margin-left: 10px; margin-top: 40px; margin-right: 10px; text-decoration: underline;">
<a href="index.html">Poulain <br> Arsène </a> <a href="index.html">Poulain <br> Arsène</a>
</h1> </h1>
</div> </div>
<nav id="bouttons_liens_nav"> <nav id="bouttons_liens_nav" class="dropdown-nav">
<a href="Projets.html" > <button class="dropdown-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="bouttons_liens"> <strong>Projets</strong> <div class="dropdown-menu">
</div> <a href="Projets.html" class="bouttons_liens"><strong>Projets</strong></a>
</a> <a href="Apropos.html" class="bouttons_liens"><strong>A propos</strong></a>
<a href="Apropos.html" > <a href="Competences.html" class="bouttons_liens"><strong>Compétences</strong></a>
<div class="bouttons_liens"><strong>A propos</strong> <a href="contact.html" class="bouttons_liens"><strong>Contact</strong></a>
</div> </div>
</a>
<a href="Competences.html">
<div class="bouttons_liens"><strong>Compétences</strong>
</div>
</a>
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong>
</div>
</a>
</nav> </nav>
</header> </header>
@ -63,5 +55,21 @@
<footer class="basPage"> <footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p> <p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</footer> </footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.querySelector('.dropdown-toggle');
const menu = document.querySelector('.dropdown-menu');
if (toggle && menu) {
toggle.addEventListener('click', function() {
menu.classList.toggle('show');
});
document.addEventListener('click', function(e) {
if (!toggle.contains(e.target) && !menu.contains(e.target)) {
menu.classList.remove('show');
}
});
}
});
</script>
</body> </body>
</html> </html>

46
index.html
Unescape View File

@ -2,6 +2,7 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>accueil</title> <title>accueil</title>
<link rel="stylesheet" href="site.css"> <link rel="stylesheet" href="site.css">
</head> </head>
@ -10,27 +11,18 @@
<header class="bandeau"> <header class="bandeau">
<div class="photo_titre_bandeau"> <div class="photo_titre_bandeau">
<img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil"> <img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil">
<h1 style="margin-left: 10px; margin-top: 40px; margin-right : 10px; text-decoration: underline;"> <h1 style="margin-left: 10px; margin-top: 40px; margin-right: 10px; text-decoration: underline;">
<a href="index.html">Poulain <br> Arsène </a> <a href="index.html">Poulain <br> Arsène</a>
</h1> </h1>
</div> </div>
<nav id="bouttons_liens_nav"> <nav id="bouttons_liens_nav" class="dropdown-nav">
<a href="Projets.html" > <button class="dropdown-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="bouttons_liens"> <strong>Projets</strong> <div class="dropdown-menu">
</div> <a href="Projets.html" class="bouttons_liens"><strong>Projets</strong></a>
</a> <a href="Apropos.html" class="bouttons_liens"><strong>A propos</strong></a>
<a href="Apropos.html" > <a href="Competences.html" class="bouttons_liens"><strong>Compétences</strong></a>
<div class="bouttons_liens"><strong>A propos</strong> <a href="contact.html" class="bouttons_liens"><strong>Contact</strong></a>
</div> </div>
</a>
<a href="Competences.html">
<div class="bouttons_liens"><strong>Compétences</strong>
</div>
</a>
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong>
</div>
</a>
</nav> </nav>
</header> </header>
@ -61,5 +53,21 @@
<footer class="basPage"> <footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p> <p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</footer> </footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.querySelector('.dropdown-toggle');
const menu = document.querySelector('.dropdown-menu');
if (toggle && menu) {
toggle.addEventListener('click', function() {
menu.classList.toggle('show');
});
document.addEventListener('click', function(e) {
if (!toggle.contains(e.target) && !menu.contains(e.target)) {
menu.classList.remove('show');
}
});
}
});
</script>
</body> </body>
</html> </html>

235
site.css
Unescape View File

@ -92,6 +92,7 @@ a:hover:visited {
position: sticky; position: sticky;
top: 0; top: 0;
border-bottom: 2px solid rgb(44, 44, 44); border-bottom: 2px solid rgb(44, 44, 44);
z-index: 200; /* <-- Ajoute ou augmente cette valeur */
} }
.photo_titre_bandeau { .photo_titre_bandeau {
@ -122,6 +123,51 @@ a:hover:visited {
border-right: 2px solid black; 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 ACCUEIL & BLOCS
========================= */ ========================= */
@ -384,23 +430,28 @@ td {
.skill-row span { .skill-row span {
width: 110px; width: 110px;
min-width: 70px;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.skill-bar { .skill-bar {
flex: 1; flex: 1;
min-width: 80px;
max-width: 300px;
height: 16px; height: 16px;
background: #bbb; background: #bbb;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
margin-left: 10px; margin-left: 10px;
display: block;
} }
.skill-level { .skill-level {
height: 100%; height: 100%;
background: linear-gradient(90deg, #4e9cff, #1e5fa3); background: linear-gradient(90deg, #4e9cff, #1e5fa3);
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
transition: width 0.4s;
} }
.skill-logo { .skill-logo {
@ -472,30 +523,210 @@ td {
} }
/* ========================= /* =========================
MEDIA QUERIES MEDIA QUERIES RESPONSIVE
========================= */ ========================= */
/* Tablettes et petits écrans */
@media (max-width: 900px) { @media (max-width: 900px) {
.apropos-card { .apropos-card {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
padding: 20px; padding: 20px;
gap: 15px;
} }
.apropos-image img { .apropos-image img {
max-width: 100%; max-width: 100%;
margin-top: 15px; 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) { @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; 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; 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 { @media print {
header { header {
display: none; display: none;
} }
.background {
display: none;
}
.basPage {
display: none;
}
} }
Write Preview
Loading…
Cancel
Save