corentin.caillot
/
site_web
generated from Templates_CodeFirst/templateHtmlCss
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout du menu déroulant
continuous-integration/drone/push Build is passing Details

Browse Source
master
cocaillot 10 months ago
parent b96e6baa64
commit 04a5737119
6 changed files with 140 additions and 57 deletions
Show Stats Download Patch File Download Diff File

19
cursus.html
Unescape View File

@ -4,15 +4,20 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css"> <link type="text/css" rel="stylesheet" href="style.css">
<title>Corentin</title> <title>Corentin</title>
<nav class = "navbar"> <nav class="navbar">
<ul class="navbar-list"> <ul class="navbar-list">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="cursus.html">Cursus</a></li> <li><a href="cursus.html">Cursus</a></li>
<li><a href="planning.html">Planning</a></li> <li><a href="planning.html">Planning</a></li>
<li><a href="images.html">Images</a></li> <li class="dropdown">
<li><a href="videos.html">Videos</a></li> <a href="#">Gallerie</a>
<ul class="dropdown-content">
<li><a href="images.html">Images</a></li>
<li><a href="videos.html">Vidéos</a></li>
</ul>
</li>
</ul> </ul>
</nav> </nav>
</head> </head>
<body> <body>
<header> <header>

33
images.html
Unescape View File

@ -1,19 +1,24 @@
<!DOCTYPE html> <!-- Doctype HTML5 --> <!DOCTYPE html> <!-- Doctype HTML5 -->
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css"> <link type="text/css" rel="stylesheet" href="style.css">
<title>Corentin</title> <title>Corentin</title>
<nav class = "navbar"> <nav class="navbar">
<ul class="navbar-list"> <ul class="navbar-list">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="cursus.html">Cursus</a></li> <li><a href="cursus.html">Cursus</a></li>
<li><a href="planning.html">Planning</a></li> <li><a href="planning.html">Planning</a></li>
<li><a href="images.html">Images</a></li> <li class="dropdown">
<li><a href="videos.html">Videos</a></li> <a href="#">Gallerie</a>
</ul> <ul class="dropdown-content">
</nav> <li><a href="images.html">Images</a></li>
</head> <li><a href="videos.html">Vidéos</a></li>
</ul>
</li>
</ul>
</nav>
</head>
<body> <body>
<h1>Galerie d'Images</h1> <h1>Galerie d'Images</h1>
<h3 class="title_gallery">Espace</h3> <h3 class="title_gallery">Espace</h3>

19
index.html
Unescape View File

@ -4,15 +4,20 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css"> <link type="text/css" rel="stylesheet" href="style.css">
<title>Corentin</title> <title>Corentin</title>
<nav class = "navbar"> <nav class="navbar">
<ul class="navbar-list"> <ul class="navbar-list">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="cursus.html">Cursus</a></li> <li><a href="cursus.html">Cursus</a></li>
<li><a href="planning.html">Planning</a></li> <li><a href="planning.html">Planning</a></li>
<li><a href="images.html">Images</a></li> <li class="dropdown">
<li><a href="videos.html">Videos</a></li> <a href="#">Gallerie</a>
<ul class="dropdown-content">
<li><a href="images.html">Images</a></li>
<li><a href="videos.html">Vidéos</a></li>
</ul>
</li>
</ul> </ul>
</nav> </nav>
</head> </head>
<body> <body>
<header> <header>

19
planning.html
Unescape View File

@ -4,15 +4,20 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css"> <link type="text/css" rel="stylesheet" href="style.css">
<title>Corentin</title> <title>Corentin</title>
<nav class = "navbar"> <nav class="navbar">
<ul class="navbar-list"> <ul class="navbar-list">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="cursus.html">Cursus</a></li> <li><a href="cursus.html">Cursus</a></li>
<li><a href="planning.html">Planning</a></li> <li><a href="planning.html">Planning</a></li>
<li><a href="images.html">Images</a></li> <li class="dropdown">
<li><a href="videos.html">Videos</a></li> <a href="#">Gallerie</a>
<ul class="dropdown-content">
<li><a href="images.html">Images</a></li>
<li><a href="videos.html">Vidéos</a></li>
</ul>
</li>
</ul> </ul>
</nav> </nav>
</head> </head>
<body> <body>
<header> <header>

74
style.css
Unescape View File

@ -61,18 +61,20 @@ figcaption {
} }
/********************************************************************************/ /********************************************************************************/
/*Navbar css*/ /*Navbar css*/
/* Style général de la navbar */
.navbar { .navbar {
background-color: #0e6ab9; background-color: #0e6ab9;
padding: 15px; padding: 15px;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: sticky; position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
.navbar-list { .navbar-list {
list-style-type : non; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
@ -80,8 +82,7 @@ figcaption {
} }
.navbar-list li { .navbar-list li {
display: inline; position: relative; /* Permet à l'élément dropdown de se positionner par rapport au parent */
z-index: 200;
} }
.navbar-list a { .navbar-list a {
@ -89,15 +90,72 @@ figcaption {
text-decoration: none; text-decoration: none;
font-size: 1.2em; font-size: 1.2em;
padding: 10px 15px; padding: 10px 15px;
transition: background-color 0.3 ease; border-radius: 5px;
transition: background-color 0.3s ease;
} }
.navbar-list a:hover { .navbar-list a:hover {
background-color: #fff; background-color: #fff;
color: #0e6ab9; color: #0e6ab9;
border-radius: 5px;
} }
/* Style pour le menu déroulant */
/* Espacement entre les éléments du menu déroulant */
.dropdown-content li {
display: block;
margin: 10px 0; /* Ajoute de l'espace vertical entre les éléments */
}
/* Ajuster la largeur du menu déroulant à celle de "Gallerie" */
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 100%; /* S'assure que la largeur correspond à celle du parent */
border-radius: 8px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
padding: 12px 0;
z-index: 10;
top: 130%; /* Pour le placer juste en dessous de l'élément parent */
left: 0; /* Aligne le menu déroulant avec le parent */
}
.dropdown-content a {
padding: 10px 20px;
color: #0e6ab9;
text-decoration: none;
font-size: 1em;
transition: background-color 0.3s ease;
}
.dropdown-content a:hover {
background-color: #0e6ab9;
color: #fff;
}
/* Montre le menu dropdown au survol */
.dropdown:hover .dropdown-content {
display: block;
opacity: 0;
animation: dropdownFade 0.7s forwards ease-in-out;
}
/* Ajout d'une animation douce */
@keyframes dropdownFade {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/********************************************************************************/ /********************************************************************************/
/* Css for the gallery (general) */ /* Css for the gallery (general) */

33
videos.html
Unescape View File

@ -1,19 +1,24 @@
<!DOCTYPE html> <!-- Doctype HTML5 --> <!DOCTYPE html> <!-- Doctype HTML5 -->
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css"> <link type="text/css" rel="stylesheet" href="style.css">
<title>Corentin</title> <title>Corentin</title>
<nav class = "navbar"> <nav class="navbar">
<ul class="navbar-list"> <ul class="navbar-list">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="cursus.html">Cursus</a></li> <li><a href="cursus.html">Cursus</a></li>
<li><a href="planning.html">Planning</a></li> <li><a href="planning.html">Planning</a></li>
<li><a href="images.html">Images</a></li> <li class="dropdown">
<li><a href="videos.html">Videos</a></li> <a href="#">Gallerie</a>
</ul> <ul class="dropdown-content">
</nav> <li><a href="images.html">Images</a></li>
</head> <li><a href="videos.html">Vidéos</a></li>
</ul>
</li>
</ul>
</nav>
</head>
<body> <body>
<h1 id ="video_categorie">Galerie Video</h1> <h1 id ="video_categorie">Galerie Video</h1>
<h3 class="title_gallery">Rocket league</h3> <h3 class="title_gallery">Rocket league</h3>

Write Preview
Loading…
Cancel
Save