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

38
Apropos.html
Unescape View File

@ -2,6 +2,7 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>À propos</title>
<link rel="stylesheet" href="site.css">
</head>
@ -14,19 +15,14 @@
<a href="index.html">Poulain <br> Arsène</a>
</h1>
</div>
<nav id="bouttons_liens_nav">
<a href="Projets.html" >
<div class="bouttons_liens"> <strong>Projets</strong></div>
</a>
<a href="Apropos.html" >
<div class="bouttons_liens"><strong>A propos</strong></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 id="bouttons_liens_nav" class="dropdown-nav">
<button class="dropdown-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="dropdown-menu">
<a href="Projets.html" class="bouttons_liens"><strong>Projets</strong></a>
<a href="Apropos.html" class="bouttons_liens"><strong>A propos</strong></a>
<a href="Competences.html" class="bouttons_liens"><strong>Compétences</strong></a>
<a href="contact.html" class="bouttons_liens"><strong>Contact</strong></a>
</div>
</nav>
</header>
@ -49,5 +45,21 @@
<footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</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>
</html>

38
Competences.html
Unescape View File

@ -2,6 +2,7 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compétences</title>
<link rel="stylesheet" href="site.css">
</head>
@ -13,19 +14,14 @@
<a href="index.html">Poulain <br> Arsène</a>
</h1>
</div>
<nav id="bouttons_liens_nav">
<a href="Projets.html" >
<div class="bouttons_liens"> <strong>Projets</strong></div>
</a>
<a href="Apropos.html" >
<div class="bouttons_liens"><strong>A propos</strong></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 id="bouttons_liens_nav" class="dropdown-nav">
<button class="dropdown-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="dropdown-menu">
<a href="Projets.html" class="bouttons_liens"><strong>Projets</strong></a>
<a href="Apropos.html" class="bouttons_liens"><strong>A propos</strong></a>
<a href="Competences.html" class="bouttons_liens"><strong>Compétences</strong></a>
<a href="contact.html" class="bouttons_liens"><strong>Contact</strong></a>
</div>
</nav>
</header>
@ -125,5 +121,21 @@
<footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</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>
</html>

41
Projets.html
Unescape View File

@ -2,6 +2,7 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projets</title>
<link rel="stylesheet" href="site.css">
</head>
@ -14,23 +15,14 @@
<a href="index.html">Poulain <br> Arsène</a>
</h1>
</div>
<nav id="bouttons_liens_nav">
<a href="Projets.html" >
<div class="bouttons_liens"> <strong>Projets</strong>
<nav id="bouttons_liens_nav" class="dropdown-nav">
<button class="dropdown-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="dropdown-menu">
<a href="Projets.html" class="bouttons_liens"><strong>Projets</strong></a>
<a href="Apropos.html" class="bouttons_liens"><strong>A propos</strong></a>
<a href="Competences.html" class="bouttons_liens"><strong>Compétences</strong></a>
<a href="contact.html" class="bouttons_liens"><strong>Contact</strong></a>
</div>
</a>
<a href="Apropos.html" >
<div class="bouttons_liens"><strong>A propos</strong>
</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>
</header>
@ -159,6 +151,21 @@ document.querySelectorAll('.project-card').forEach(card => {
});
});
</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>
</html>

40
contact.html
Unescape View File

@ -2,6 +2,7 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="site.css">
</head>
@ -14,23 +15,14 @@
<a href="index.html">Poulain <br> Arsène</a>
</h1>
</div>
<nav id="bouttons_liens_nav">
<a href="Projets.html" >
<div class="bouttons_liens"> <strong>Projets</strong>
<nav id="bouttons_liens_nav" class="dropdown-nav">
<button class="dropdown-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="dropdown-menu">
<a href="Projets.html" class="bouttons_liens"><strong>Projets</strong></a>
<a href="Apropos.html" class="bouttons_liens"><strong>A propos</strong></a>
<a href="Competences.html" class="bouttons_liens"><strong>Compétences</strong></a>
<a href="contact.html" class="bouttons_liens"><strong>Contact</strong></a>
</div>
</a>
<a href="Apropos.html" >
<div class="bouttons_liens"><strong>A propos</strong>
</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>
</header>
@ -63,5 +55,21 @@
<footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</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>
</html>

40
index.html
Unescape View File

@ -2,6 +2,7 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>accueil</title>
<link rel="stylesheet" href="site.css">
</head>
@ -14,23 +15,14 @@
<a href="index.html">Poulain <br> Arsène</a>
</h1>
</div>
<nav id="bouttons_liens_nav">
<a href="Projets.html" >
<div class="bouttons_liens"> <strong>Projets</strong>
<nav id="bouttons_liens_nav" class="dropdown-nav">
<button class="dropdown-toggle" aria-label="Menu">&#9776; Menu</button>
<div class="dropdown-menu">
<a href="Projets.html" class="bouttons_liens"><strong>Projets</strong></a>
<a href="Apropos.html" class="bouttons_liens"><strong>A propos</strong></a>
<a href="Competences.html" class="bouttons_liens"><strong>Compétences</strong></a>
<a href="contact.html" class="bouttons_liens"><strong>Contact</strong></a>
</div>
</a>
<a href="Apropos.html" >
<div class="bouttons_liens"><strong>A propos</strong>
</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>
</header>
@ -61,5 +53,21 @@
<footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</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>
</html>

235
site.css
Unescape View File

@ -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;
}
}
Write Preview
Loading…
Cancel
Save