Dans le cadre de la création de mon portfolio, j’ai procédé à une refonte graphique du template initial afin de l’aligner sur une identité visuelle orientée vers des nuances de vert et de bleu. Cette adaptation avait pour objectif d’obtenir un style plus cohérent avec l’esthétique cyberpunk recherchée.

Pour ce faire :

• J’ai ajusté la palette de couleurs dans la section :root{} du fichier CSS.
• J’ai retiré les variables d’origine liées aux teintes violettes et roses (--primary-purple, --primary-pink).
• Je les ai remplacées par des déclinaisons de bleu et de vert afin d’assurer une homogénéité visuelle sur l’ensemble du site.

Cette personnalisation permet désormais au portfolio de refléter une atmosphère plus moderne et immersive, en accord avec la ligne graphique souhaitée.

• Avant :
  

  :root {
      --primary-grey: #e5e7eb;
      --primary-orange: #f97316;
      --primary-purple: #7c3aed;
      --secondary-amber: #fbbf24;
      --dark-bg: #1a0b2e;
      --darker-bg: #0f051a;
      --card-bg: rgba(229, 231, 235, 0.03);
      --border-color: rgba(229, 231, 235, 0.2);
      --text-primary: #ffffff;
      --text-secondary: #a1a1aa;
      --primary-cyan: #00ffff;
      --primary-pink: #ff00ff;
  }

• Après :
  

  :root {
      --primary-grey: #e5e7eb;
      --primary-orange: #f97316;
      --primary-blue: #0099ff;        /* remplace primary-purple */
      --primary-blue-deep: #0066cc;   /* nuance complémentaire */
      --primary-green: #00ff66;       /* vert fluo */
      --secondary-amber: #fbbf24;
      --dark-bg: #1a0b2e;
      --darker-bg: #0f051a;
      --card-bg: rgba(229, 231, 235, 0.03);
      --border-color: rgba(229, 231, 235, 0.2);
      --text-primary: #ffffff;
      --text-secondary: #a1a1aa;
      --primary-cyan: #00ffff;
  }

Les variables ainsi modifiées ont été remplacées dans le css afin de remplacer les objets roses et violets en vert ou en bleu.

• Exemple du titre d’accueil :
  • Avant :
    

    .hero-flow {
        background: linear-gradient(135deg, var(--primary-purple), var(--primary-pink));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 0.1em;
        display: inline-block;
        transition: all 0.3s ease;
        animation: purplePulse 3s ease-in-out infinite;
        animation-delay: 1.5s;
        position: relative;
    }

  • Après :
    

    .hero-flow {
        background: linear-gradient(135deg, var(--primary-green), var(--primary-cyan));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 0.1em;
        display: inline-block;
        transition: all 0.3s ease;
        /* animation moins marquée : durée plus longue, transform réduit */
        animation: greenPulse 4.5s ease-in-out infinite;
        animation-delay: 1.5s;
        position: relative;
    }

  • Rendu :
    
    

Adaptation de la barre :

La barre de navigation à pour objet de permettre à l’utilisateur de naviguer entre les différentes pages du site. Je suis partis de ce code html inclus dans ma template :

<nav>
        <div class="nav-container">
            <a href="#top" class="logo">NexusFlow</a>
            <ul class="nav-links">
                <li><a href="#features">Features</a></li>
                <li><a href="#pricing">Pricing</a></li>
                <li><a href="#stats">Stats</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <div class="nav-bottom">
                <a href="#" class="cyber-button">Access Terminal</a>
            </div>
            <button class="mobile-menu-button" id="mobileMenuBtn">
                <div class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </button>
        </div>
    </nav>

Que j’ai ensuite modifié pour convenir à mes besoins en rajoutant les liens aux pages Profil, Formations, Entreprise, Réalisation (qui contient en sous menu Situations professionnelles et Procédures), Veille technologique et une page contact.

<!-- Navigation -->
<nav>
        <div class="nav-container">	
            <a href="index.html" class="logo">Cédric Baudiment</a>
            <ul class="nav-links">
                <li><a href="profil.html">Profil</a></li>
                <li><a href="formations.html">Formations</a></li>
                <li><a href="entreprise.html">Entreprise</a></li>
                <li class="dropdown">
                    <span class="dropdown-btn">Réalisations</span>
                    <ul class="dropdown-content">
                        <li><a href="realisations.html">Situations professionnelles</a></li>
                        <li><a href="procedures.html">Procédures</a></li>
                    </ul>
                </li>
                <li><a href="veille.html">Veille technologique</a></li>
            
            </ul>
            <div class="nav-bottom">
                <a href="contact.html" class="cyber-button">Contact</a>
            </div>
            <button class="mobile-menu-button" id="mobileMenuBtn">
                <div class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </button>
        </div>
</nav>

Ce code sera placé sur chacune des pages du site de manière à pouvoir naviguer aisément.

Maintien du bouton activé :

J’ai également ajouté une amélioration afin de garder le bouton « allumer » lorsque l’on est sur la page.

Sur les fichiers html il suffit de rajouter la classe active sur la page sur laquelle on se trouve. Exemple de la page profil :

<div class="nav-container">
    <a href="index.html" class="logo">Cédric Baudiment</a>
    <ul class="nav-links">
        <li><a href="profil.html" class="active">Profil</a></li>
        <li><a href="formations.html">Formations</a></li>
        <li><a href="entreprise.html">Entreprise</a></li>
        <li class="dropdown">
            <span class="dropdown-btn">Réalisations</span>
            <ul class="dropdown-content">
                <li><a href="realisations.html">Situations professionnelles</a></li>
                <li><a href="procedures.html">Procédures</a></li>
            </ul>
        </li>
        <li><a href="veille.html">Veille technologique</a></li>
    </ul>
    <div class="nav-bottom">
        <a href="contact.html" class="cyber-button">Contact</a>
    </div>
</div>

Cette classe renvoie au fichier css et au code ci-dessous :

.nav-links a.active {
        color: var(--primary-cyan); /* texte néon cyan */
        text-shadow: 0 0 10px var(--primary-cyan); /* glow permanent */
        font-weight: 600; /* légèrement plus visible */
    }

Ce qui donne lorsque l’on est sur la page profil :

Menu déroulant :

Pour le bouton Réalisation j’ai créé un menu déroulant permettant d’accéder aux situations professionnelles et aux procédures. Pour cela j’ai utilisé le code ci-dessous :

<li class="dropdown">
    <span class="dropdown-btn">Réalisations</span>
    <ul class="dropdown-content">
        <li><a href="realisations.html">Situations professionnelles</a></li>
        <li><a href="procedures.html">Procédures</a></li>
    </ul>
</li>

Le menu se déroule au survol de la sourie grâce à la classe dropdown dont voici le css :

/* Desktop Navigation Layout - menu déroulant */
        .dropdown {
        position: relative;
        }

            /* Le titre "Réalisations" non cliquable */
            .dropdown-btn {
                color: var(--text-secondary);
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 1px;
                font-size: 0.9rem;
                cursor: pointer;
                transition: all 0.3s ease;
            .dropdown-btn.active {
                color: var(--primary-cyan);
                text-shadow: 0 0 10px var(--primary-cyan);
                font-weight: 600;
            }

            /* Effet visuel au survol du titre */
            .dropdown:hover .dropdown-btn {
                color: var(--primary-cyan);
                text-shadow: 0 0 10px var(--primary-cyan);
            }

            /* Contenu du menu déroulant */
            .dropdown-content {
                display: none;
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(10, 10, 20, 0.432);
                border: 1px solid rgba(0, 255, 255, 0.3);
                box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
                min-width: 340px;
                width: 220px;
                box-sizing: border-box;
                border-radius: 8px;
                z-index: 10;
                list-style: none;
                padding: 0.5rem 0;
                margin: 0;
                text-align: center;
                white-space: nowrap;
            }

            /* Liens à l'intérieur du menu */
            .dropdown-content a {
                color: var(--text-secondary);
                padding: 0.8rem 1.2rem;
                text-decoration: none;
                display: block;
                font-size: 0.9rem;
                transition: all 0.3s ease;
            }

            /* Liens internes du sous-menu */
            .dropdown-content li a {
                display: block;
                padding: 0.6rem 1rem;
                color: var(--text-secondary);
                text-decoration: none;
                transition: all 0.3s ease;
                width: 100%;
                box-sizing: border-box;
            }

            .dropdown-content li {
                margin: 0;
            }

Profil :

Titre de la page

Pour le titre de la page (et de toutes les autres pages) j’ai réutilisé le code du template pour le titre core system que j’ai réadapté :

<div class="features-container">
    <div class="section-header">
        <h2 class="section-title">Core Systems</h2>
        <p class="section-subtitle">Advanced modules designed for maximum efficiency and seamless integration</p>
    </div>

<div class="section-header">
    <h2 class="section-title">Profil</h2>
</div>

J’ai réutilisé et modifié les classes suivantes dans le css :

		.section-header {
        text-align: center;
        margin-bottom: 5rem;
        margin-top: 20px;
        position:relative;
    }
    .section-title {
        font-size: 3rem;
        font-weight: 800;
        color: var(--primary-cyan);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 1rem;
        position: relative;
        text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    }
    .section-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-cyan), var(--primary-green));
        box-shadow: 0 0 20px var(--primary-cyan);
    }

Photo de profil

<!-- Avatar -->
<div class="profil-container">
    <div class="profil-avatar">
        <img src="images/pages/profil.jpeg" alt="Avatar" />
    </div>
</div>

Ce bloc HTML affiche une image dans une section dédiée au profil. La balise <div class="profil-container"></div> sert de conteneur principal. À l’intérieur, une seconde <div class="profil-avatar"></div> isole la zone qui contient l’image. Enfin, la balise <img> charge la photo située dans images/pages/profil.jpeg et l’attribut alt="Avatar" fournit un texte alternatif si l’image ne peut pas être affichée.

/* Photo profil */
    .profil-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 3rem;
        flex-wrap: wrap;
        }
    .profil-avatar img {
        width: 250px;
        clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px);
        object-fit: cover;
        border: 1px solid var(--border-color);
        }

Ce style met en forme la section contenant la photo de profil.

Le conteneur .profil-container définit une image de 250 px, forcée à remplir son cadre grâce à object-fit: cover.

La propriété clip-path découpe l’image selon une forme polygonale, créant un cadre original avec des bords cassés.

Enfin, un léger contour est ajouté avec border: 1px solid var(--border-color).

Contenu

<div class="profil-content">
      <p class="profil-intro">
        texte <span class="highlight">mot en gras</span></p>
    </div>

Dans ce bloc, la <div class="profil-content"> sert de conteneur, et le paragraphe <p class="profil-intro"> contient le texte. Les balises <span class="highlight"> permettent de mettre en valeur certains mots clés.

/* Bio */
    .profil-content {
        flex: 1;
    }
    .profil-intro {
        text-align: justify;
        font-family: Arial, Helvetica, sans-serif;
        color: var(--text-secondary);
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }
    .highlight {
        color: var(--primary-cyan);
        text-shadow: 0 0 8px var(--primary-cyan);
    }

Ce bloc de styles gère l’apparence du texte :

• La classe .profil-content prend l’espace disponible dans la mise en page grâce à flex: 1.
• Le texte .profil-intro est justifié, utilise une police simple (Arial/Helvetica), s’affiche dans une couleur secondaire et avec une taille de 1.2 rem, ce qui améliore la lisibilité.
• Enfin, la classe .highlight sert à mettre certains mots en valeur en leur appliquant une couleur cyan et un léger effet lumineux (text-shadow).

Bouton CV

<div class="hero-buttons">
                <a href="CV Cédric Baudiment V3.pdf" target="_blank" class="btn-primary">Curriculum Vitae</a>
  </div>

Ce bloc crée une zone contenant un bouton menant vers mon CV.

La <div class="hero-buttons"> sert de conteneur pour les boutons d’action. À l’intérieur, la balise <a> agit comme un bouton cliquable grâce à la classe btn-primary. Elle ouvre le fichier PDF “CV Cédric Baudiment V3.pdf” dans un nouvel onglet grâce à target="_blank".

.hero-buttons {
		flex-direction: column;
		align-items: center;
}
.btn-primary {
    background: #00ffee;
    background: linear-gradient(90deg, rgba(0, 255, 238, 1) 0%, rgba(0, 255, 238, 1) 50%, rgba(0, 255, 144, 1) 100%);
    color: var(--darker-bg);
    padding: 1.2rem 3rem;
    border: none;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
}

La classe .hero-buttons configure la zone des boutons en les plaçant en colonne et en les centrant horizontalement.

La classe .btn-primary définit le style du bouton principal :

• un dégradé horizontal du cyan vers le vert fluo ;
• un texte sombre pour garantir un bon contraste (color: var(--darker-bg)),
• un padding généreux pour donner un aspect massif et lisible,
• un texte en majuscules, espacé et en gras pour renforcer l’impact visuel,
• une transition fluide pour les interactions,
• un effet de découpe du bouton grâce à clip-path, qui crée une forme anguleuse et futuriste,
• overflow: hidden prépare le terrain pour d’éventuels effets d’animation internes.

L'histogramme

<section class="timeline-section">
  <h2 class="section-header section-title">Mon parcours</h2>
  <div class="timeline-wrapper">
    <div class="timeline-horizontal">
      <div class="timeline-item top">
        <div class="timeline-content">2002-2006<br><h4>Bac Pro Conduite et Gestion<br>de Chantier Forestier (10)</h4></div>
      </div>
      <div class="timeline-item bottom">
        <div class="timeline-content">2006-2009<br><h3>BTS Technico-commercial<br>Produits d’origine forestière</h3>
        <p>Alternance chez le négociant A.J. Wood (01)</p></div>
      </div>
      <div>...</div>
      <div class="timeline-item top">
        <div class="timeline-content">2024-2026<br><h3>BTS SIO SISR</h3>
        <p>Alternance chez Antartic 2 (07)</p></div>
      </div>
    </div>
  </div>
</section>

Ce bloc construit une frise chronologique horizontale présentant mon parcours.

La section <section class="timeline-section"> encapsule tout le module et affiche un titre “Mon parcours”.

À l’intérieur, la structure <div class="timeline-wrapper"> puis <div class="timeline-horizontal"> organise les différents événements sous forme d’éléments successifs.

Chaque <div class="timeline-item"> représente une étape, alternant entre les classes top et bottom pour créer un effet visuel en zigzag au-dessus et en dessous de la ligne de temps.

Chaque item contient une zone <div class="timeline-content"> avec l’année, un titre de formation ou poste, et parfois un descriptif.

.section-header {
    text-align: center;
    margin-bottom: 5rem;
    margin-top: 20px;
    position:relative;
}
.section-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    position: relative;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-cyan), var(--primary-green));
    box-shadow: 0 0 20px var(--primary-cyan);
}
.timeline-wrapper {
		overflow-x: auto; /* scroll horizontal */
		padding: 40px 0;
}
.timeline-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 100px; /* espace fixe entre items */
    position: relative;
    min-width: max-content; /* permet le scroll si trop large */
}
.timeline-horizontal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, var(--primary-cyan), var(--primary-purple));
    z-index: 1;
}
.timeline-item {
    position: relative;
    flex: 0 0 auto;
    width: 200px; /* largeur fixe ou ajustable */
    text-align: center;
}
.timeline-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: var(--primary-orange);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-orange);
    z-index: 2;
}
 .timeline-item.top .timeline-content {
    margin-bottom: 180px; /* distance par rapport à la ligne */
}
  .timeline-item.bottom .timeline-content {
    margin-top: 180px;
}
.timeline-content {
    position: relative;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    width: max-content;
}

• .section-header et .section-title.section-title gèrent la présentation du titre de section : centrage, marges, effet lumineux et une barre décorative sous le titre grâce au pseudo-élément ::after.
• .timeline-wrapper permet le défilement horizontal de la frise (overflow-x) et ajoute un espacement vertical.
• .timeline-horizontal organise la frise en ligne horizontale avec Flexbox, un espacement constant entre les éléments et une largeur minimum qui garantit le scroll si nécessaire.
  Le ::before de ce conteneur crée la ligne centrale de la timeline.
• .timeline-item représente chaque étape. Il a une largeur fixe, est centré et son pseudo-élément ::before dessine le point lumineux sur la ligne.
• Les classes .top et .bottom déplacent le contenu soit au-dessus, soit en dessous de la ligne centrale, créant l’effet en zigzag.
• .timeline-content définit le style des blocs d’information : fond légèrement transparent, bord arrondi, contour subtil et padding.

Formations et entreprise :

<div class="formation-content">
        <p class="formation-description">
        texte
        <br>texte  
        </p>
        <h2 class="formation">titre2</h2>
        <p class="formation-description">texte
            <ul class="formation">
                <li>liste</li>
                <li>liste</li>
                <li>liste</li>
            </ul>
        </p>

Ce bloc présente la section formation du portfolio.

• La <div class="formation-content"> sert de conteneur général.
• Les paragraphes <p class="formation-description"> décrivent la formation BTS SIO SISR : son niveau, son contenu et l’option SISR centrée sur les réseaux et la sécurité.
• Les titres <h2 class="formation"> organisent la section en Objectifs de la formation et Compétences développées, pour structurer la lecture.
• Une liste <ul class="formation"> détaille les compétences acquises, telles que l’administration réseau, la gestion de serveurs, la virtualisation, la sécurité, et le support aux utilisateurs.

.formation-content {
        display:block;
        margin: 0 200px;
    }
        /* p (idem entreprise) */
        .formation-description {
            text-align: justify;
            font-family:Arial, Helvetica, sans-serif;
            color: var(--text-secondary);
            font-size: 1rem;
            margin-bottom: 0.8rem;
        }
        /* h2 (idem entreprise) */
        h2.formation {
            text-align: justify;
            font-family: Arial, Helvetica, sans-serif;
            color: var(--primary-cyan);
            text-shadow: 0 0 15px var(--primary-cyan);
            font-size: 1.5rem;
            font-weight: bold;
            margin-top: 30px;
        }
        /* ul (idem formation) */
        ul.formation li {
            font-family: Arial, Helvetica, sans-serif;
            font-style: italic;
            color: var(--text-secondary);
            margin-left: 80px;
        }

• .formation-content définit le conteneur de la section formation avec un affichage en bloc et des marges horizontales de 200 px pour centrer le contenu sur l’écran.
• .formation-description met en forme les paragraphes : texte justifié, police simple (Arial/Helvetica), couleur secondaire et taille de 1 rem, avec un petit espace sous chaque paragraphe.
• h2.formation stylise les titres de sous-section : texte justifié, couleur cyan lumineuse avec un léger halo (text-shadow), taille 1.5 rem, gras et marges supérieures pour espacer les sections.
• ul.formation li applique un style aux éléments de liste : police Arial/Helvetica, italique, couleur secondaire, et indentation de 80 px pour les distinguer du texte principal.

Situation professionnelles :

<div class="features-grid">
        <a href="./Realisations/glpi.pdf" target="_blank">
                <div class="feature-card">
                    <div class="realisation-real_img">
                        <img src="./images/Realisations/glpi.png"/>
                    </div>
                    <h3>Mise en situation professionnelle 1</h3> 
                    <p>description</p><br> 
                </div>
        </a>
        <a href="./Realisations/AD.pdf" target="_blank">
            <div class="feature-card">
                <div class="realisation-real_img">
                    <img src="./images/Realisations/AD.png"/>
                </div>
                <h3>Mise en situation professionnelle 2</h3> 
                <p>Description</p> 
            </div>
        </a>
       <a> ... </a>
</div>

Ce bloc crée une carte de réalisation :

• La balise <a> transforme l’ensemble en lien cliquable vers le fichier PDF AD.pdf, ouvert dans un nouvel onglet (target="_blank").
• La <div class="feature-card"> contient tout le contenu de la carte : image, titre et description.
• La <div class="realisation-real_img"> englobe l’image illustrative de la réalisation, affichée via <img src="./images/Realisations/AD.png"/>.
• Le <h3> affiche le titre de la réalisation (Active Directory) et le <p> décrit le projet : mise en place et administration de serveurs Active Directory, DNS et DHCP avec redondance.

/* Grilles de MSP */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
}
/* Cartes */
.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 3rem;
    position: relative;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px);
}
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-cyan), var(--primary-green));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgb(0, 255, 255);
}
.feature-card:hover::before {
    opacity: 0.1;
}
.realisation-real_img img {
    width: 240px;
    height: 130px;
    margin: 5px 25px;
}

• .features-grid organise les cartes de réalisations en grille responsive : les colonnes s’adaptent automatiquement à l’espace disponible, avec un minimum de 350 px et un écart de 3 rem entre les cartes.
• .feature-card stylise chaque carte :
  • fond semi-transparent (var(--card-bg)) et bordure subtile,
  • padding de 3 rem pour espacer le contenu,
  • effet de flou (backdrop-filter: blur(10px)) et forme polygonale (clip-path) pour un style futuriste,
  • transition fluide pour les interactions.
• .feature-card::before ajoute un dégradé coloré derrière la carte, initialement transparent, qui devient légèrement visible au survol.
• .feature-card:hover applique un effet d’élévation et d’ombre lors du survol, donnant un effet dynamique et interactif.
• .feature-card:hover::before rend le dégradé légèrement visible (opacity: 0.1) au survol.
• .realisation-real_img img fixe la taille des images dans les cartes (240x130 px) et ajoute des marges pour centrer et espacer l’image.

Procédures :

<div class="proc_img">
        <ul>
            <li class="proc_link1">
                <a href="Realisations/procedures/pfsense.html"><img src="images/logo/PfSense_logo.png"/>Procédure 1
                </a>
            </li>
            <li class="proc_link1">
                <a href="Realisations/procedures/glpi.html"><img src="images/logo/glpi_logo.png"/>Procédure 2
                </a>
            </li>
            <details class="proc_link1">
            <summary><img src="images/logo/debian_logo.png"/>Ensemble de procédures</summary>
            <div class="proc_link-content">
            <li class="proc_link2">
	            <a href="Realisations/procedures/install_debian.html"><img src="images/logo/debian_logo.png"/>Procédure 3
            </li>
            <li class="proc_link2">
                <a href="Realisations/procedures/debian_routeur.html"><img src="images/logo/debian_logo.png"/>Procéure 4
                </a>
            </li>
            </div>
            </details>
        </ul>
    </div>

Ce bloc structure une liste de procédures techniques :

• La <div class="proc_img"> contient l’ensemble des procédures.
• Chaque <li class="proc_link1"> représente une procédure individuelle avec un lien <a> vers une page HTML spécifique et une image illustrative (<img>).
• Deux sections utilisent <details> et <summary> pour créer des listes déroulantes regroupant plusieurs procédures :
  • Procédures Debian : installation, configuration de routeur, DHCP, DNS, et serveurs redondants.
  • Procédures Windows : installation de Windows 10/11, Windows Server 2022, DNS, Active Directory et serveurs redondants.
• Les autres éléments listés concernent des procédures diverses : configuration HTTPS, DECT avec Cisco CUCM, Cisco Jabber, serveurs de sauvegarde (Veeam), déploiement FOG et XOGO.

/* Images */
.proc_img img {
    display: block;
    height: 40px;
    margin: 10px;
    flex-shrink: 0; /* empêche l’image de rétrécir */
}
/* Liens procédures */
.proc_link1 {
display: block;
position: relative;
background:rgba(1, 58, 58, 0.452);
border: 1px solid var(--border-color);
border-radius: 8px;
margin: 0 500px 8px 100px;
min-width: 800px; /* taille minimale de la boîte */
}
.proc_link1:hover {
box-shadow: var(--primary-cyan) 0px 0px 20px;
transform: translateY(-3px);
}
/* Menu déroulant */
.proc_link1 summary {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: nowrap;
white-space: nowrap;
font-size: large;
font-weight: bold;
color: var(--primary-cyan);
}
.proc_link1 summary:hover {
box-shadow: var(--primary-cyan) 0px 0px 15px;
transform: translateY(-3px);
}.proc_link1 summary::after {
content: "▸";
position: absolute;
right: 0;
top: 0;
transition: transform 0.3s ease;
color: var(--primary-cyan);
}
.proc_link1[open] summary::after {
transform: rotate(90deg);
}
/* Container sous-menu */
.proc_link-content {
    margin-top: 1rem;
    animation: fadeIn 0.4s ease;
    text-align: justify;
}
.proc_link2 {
    display: block;
    position: relative;
    background:rgba(1, 58, 58, 0.452);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 0 500px 8px 100px;
    min-width: 650px; /* taille minimale de la boîte */
}
.proc_link2:hover {
    box-shadow: var(--primary-cyan) 0px 0px 20px;
    transform: translateY(-3px);
}
.proc_link2 summary:hover {
    box-shadow: var(--primary-cyan) 0px 0px 15px;
    transform: translateY(-3px);
}
.proc_link2 summary::after {
    content: "▸";
    position: absolute;
    right: 0;
    top: 0;
    transition: transform 0.3s ease;
    color: var(--primary-cyan);
}

Ce code met en forme la section des procédures techniques en jouant sur les boîtes, les images et les menus déroulants :

• .proc_img img : définit les images des procédures, avec une hauteur fixe de 40 px, un espacement de 10 px et empêche leur réduction avec flex-shrink: 0.
• .proc_link1 : stylise les boîtes principales des procédures (Debian, Windows, autres), avec fond semi-transparent, bordure, arrondis et un effet de survol (ombre et léger déplacement vers le haut).
• .proc_link1 summary : gère le titre des menus déroulants, affiché en ligne avec icône et texte, couleur cyan et style gras. L’icône ▸ indique l’état du menu et pivote à 90° lorsque le menu est ouvert ([open]).
• .proc_link-content : container des sous-éléments déroulants, avec un petit effet d’apparition (fadeIn) et texte justifié.
• .proc_link2 : stylise les sous-procédures, avec le même style que .proc_link1, mais une largeur minimale plus petite pour hiérarchiser visuellement les contenus.
• Effets de survol et transitions sont appliqués aux deux niveaux pour améliorer l’interaction et la lisibilité.

Pages Procédure :

<div class="procedures_head_img">
    <img src="../../images/logo/glpi.png"/>
    <h class="procedures">TITRE PROCEDURE</h>
</div>
<details class="procedures">
    <summary>Titre 1 :</summary>
    <div class="procedures-content">
        <h2 class="procedures">Titre 2</h2>
        <ul>
            <li>texte <code>ligne/de/commande</code> :
                <ul classe="procedures">
                    <li>liste niveau 2</li>
                    <li>liste niveau 2</li>
                </ul>
                <pre><code>lignes de codes
dans un terminal</code></pre>
            </li>
            <li>Liste</li>
        </ul>
    </div>
</details>

• <div class="procedures_head_img"> : c’est l’en-tête d’une procédure. Il contient une image (<img>) et un titre principal (<h> avec la classe procedures).
• <details class="procedures"> : crée un menu déroulant interactif. L’utilisateur peut cliquer sur le <summary> pour afficher ou masquer le contenu.
• <div class="procedures-content"> : contient le contenu développé du menu, comme les titres secondaires (<h2>), des listes (<ul> et <li>), des blocs de code inline (<code>) et des blocs de code multi-lignes (<pre><code>).
• Les listes sont hiérarchisées, permettant de structurer l’information (niveau 1 et niveau 2).
• L’usage de <pre><code> conserve le formatage exact du code pour les commandes ou scripts à afficher.

Contact :

<div class="contact-form-wrapper">
            <form id="contact-form" action="traitement.php" method="POST">
    <div class="contact-form">
        <div class="form-group">
            <label for="name">Votre nom et prénom</label>
            <input type="text" id="name" name="name" placeholder="Votre ID" required>
        </div>

        <div class="form-group">
            <label for="email">Votre adresse mail</label>
            <input type="email" id="email" name="email" placeholder="votre@email.com" required>
        </div>

        <div class="form-group">
            <label for="message">Transmission</label>
            <textarea id="message" name="message" rows="5" placeholder="Votre message" required></textarea>
        </div>

        <button type="submit" class="btn-primary btn-submit">Transmettre</button>
    </div>
</form>

</div>

• Structure globale
  • Le formulaire est contenu dans une <div> qui sert de wrapper pour appliquer le style global et positionner le formulaire correctement sur la page.
  • La balise <form> définit le formulaire, avec action="traitement.php" pour envoyer les données au script PHP qui traitera le message, et method="POST" pour sécuriser l’envoi (les données ne passent pas par l’URL).
• Champs du formulaire
  • Chaque champ est regroupé dans une <div class="form-group">, ce qui facilite le style et la mise en page.
  • Nom et prénom : <input type="text">> avec required, ce qui oblige l’utilisateur à remplir ce champ.
  • Adresse mail : <input type="email"> avec required. Le type email permet une validation automatique du format de l’adresse.
  • Message : <textarea> pour les messages longs, avec rows="5" pour définir la taille initiale, et required.
• Bouton de soumission
  • <button type="submit"> déclenche l’envoi du formulaire vers le serveur.
  • La classe btn-primary btn-submit permet de l’identifier pour le style et les éventuelles animations ou interactions CSS.
• Accessibilité et ergonomie
  • Chaque champ possède un <label> associé via l’attribut for, ce qui améliore l’accessibilité (lecture par les logiciels pour malvoyants).
  • Les placeholders donnent un exemple clair de ce qu’il faut remplir.

.contact {
    padding: 120px 2rem;
    background: rgba(0, 255, 255, 0.02);
    border-top: 1px solid var(--border-color);
}
.contact-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 4rem;
}
/* Formulaire */
.contact-form {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 3rem;
    backdrop-filter: blur(10px);
    clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%, 0% 30px);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.1);
}
    /* Item */
    .form-group {
        margin-bottom: 2rem;
    }
    .form-group label {
        display: block;
        color: var(--primary-cyan);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
        text-shadow: 0 0 10px var(--primary-cyan);
    }
    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 1rem 1.5rem;
        background: rgba(0, 255, 255, 0.05);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 1rem;
        transition: all 0.3s ease;
        clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder {
        color: var(--text-secondary);
        opacity: 0.7;
    }
    .form-group input:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--primary-cyan);
        background: rgba(0, 255, 255, 0.08);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    }
    .form-group textarea {
        resize: vertical;
        min-height: 120px;
    }
/* Bouton transmettre */
.btn-submit {
    width: 100%;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 1rem;
    border: none;
    transition: all 0.3s ease;
}
.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(229, 231, 235, 0.4);
}

• Section globale
  • .contact définit l’espace autour du formulaire, avec un fond légèrement coloré et une bordure supérieure pour séparer visuellement la section.
  • .contact-form-wrapper.contact-form-wrapper centre le formulaire horizontalement et limite sa largeur à 600px pour qu’il reste lisible sur grand écran.
• Formulaire lui-même
  • .contact-form applique un fond avec effet de flou (backdrop-filter), des bordures et un clip-path pour créer des angles stylisés.
  • Une ombre légère ajoute de la profondeur et attire l’œil.
• Champs et labels
  • .form-group crée un espace entre chaque champ pour que le formulaire reste clair.
  • Les label sont en majuscules, colorés et avec un léger effet de halo pour améliorer la lisibilité et l’esthétique.
  • Les input et textarea occupent toute la largeur, ont des angles stylisés, un fond légèrement translucide, et des transitions pour des effets au focus.
  • Les placeholders sont gris clair et semi-transparents, pour ne pas concurrencer le texte saisi.
  • Les champs deviennent plus lumineux et ont une bordure cyan au focus pour indiquer clairement l’interaction.
• Zone de texte spécifique
  • Les <textarea> peuvent être redimensionnés verticalement, avec une hauteur minimale définie pour rester ergonomique.
• Bouton de soumission
  • .btn-submit prend toute la largeur du formulaire, change légèrement de position et ajoute une ombre au survol pour créer un effet de clic interactif.
  • L’absence de bordure et la transition douce renforcent un style moderne et épuré.