Bonjour,
Je fais appel à vous car j'ai un projet avec mon école. Je dois créer un site web pour me présenter sur Internet. J'ai donc commencé à créer un "prototype". Cependant, dans ma barre de navigation, je n'arrive pas à centrer le titre. Il est forcément "toujours un peu sur la droite", ce qui est certainement dû à l'image à droite, mais je ne sais pas quoi faire...
Le code :
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<!-- Lien vers le fichier CSS externe -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- En-tête avec le nom et la navigation -->
<header>
<div class="header-content">
<img src="https://www.univ-reims.fr/iut-rcc/media-images/49468/iut-1.png" alt="Logo IUT Léonard Devinci">
<h1>Lucas Aubertin - Portfolio</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="formations.html">Formations</a></li>
<li><a href="etudes.html">Études</a></li>
</ul>
</nav>
</header>
<!-- Section principale d'accueil -->
<main>
<section id="intro">
<h2>Bonjour !</h2>
<p>Je suis étudiant en BUT Réseaux et Télécommunications (R&T) en France.</p>
<p>Bienvenue sur mon site web personnel où je vous invite à découvrir mon parcours, mes formations et mes projets académiques.</p>
</section>
<section id="cta">
<h3>Découvrez mon parcours</h3>
<p>Explorez les différentes sections pour en apprendre davantage sur mes études et mes compétences en R&T.</p>
<a href="formations.html" class="button">En savoir plus</a>
<iframe width="90%" height="600" allowfullscreen frameborder="0" src="mon_lien.exemple"></iframe>
</section>
</main>
<!-- Pied de page -->
<footer>
<p>©2024 Lucas Aubertin - Portfolio</p>
<p>Contact : <a href="mailto:mailexample@gmail.com">mailexample@gmail.com@example.com</a></p>
</footer>
</body>
</html>
/* Reset de base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style global */
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
/* En-tête */
header {
background-color: #4CAF50;
color: #fff;
padding: 1em 0;
}
/* Conteneur pour le logo et le titre */
.header-content {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Logo aligné à gauche */
.logo {
margin-right: auto; /* Colle le logo à gauche */
width: 50px; /* Taille du logo, peut être ajustée */
height: auto;
}
/* Titre de l'en-tête */
header h1 {
font-size: 2em;
text-align: center;
flex: 1; /* Permet au titre de rester centré */
}
/* Navigation */
nav ul {
list-style-type: none;
padding: 0;
margin-top: 10px; /* Un léger espacement entre le menu et le titre/logo */
text-align: center;
}
nav ul li {
display: inline;
margin: 0 10px;
}
/* Animation de soulignement sur les liens */
nav ul li a, footer a {
color: #fff;
text-decoration: none;
position: relative;
}
/* Pseudo-élément pour l'animation de soulignement */
nav ul li a::after, footer a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px; /* Place le soulignement sous le texte */
width: 100%;
height: 2px;
background-color: #fff;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease;
}
nav ul li a:hover::after, footer a:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Section principale */
main {
flex: 1;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#intro h2 {
font-size: 1.8em;
color: #333;
}
#cta {
margin-top: 20px;
text-align: center;
}
#cta .button {
display: inline-block;
padding: 10px 20px;
margin-top: 10px;
color: #fff;
background-color: #4CAF50;
border-radius: 5px;
text-decoration: none;
}
#cta .button:hover {
background-color: #45a049;
}
#cta iframe {
border: solid 1px black;
margin-top: 10px;
}
/* Pied de page */
footer {
text-align: center;
padding: 1em 0;
background-color: #333;
color: #fff;
margin-top: auto;
}
footer a {
color: #fff;
text-decoration: none;
}