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

modif cursus scolaire
continuous-integration/drone/push Build is passing Details

Browse Source
master
cocaillot 9 months ago
parent b1fd6ad33a
commit b70b10a871
6 changed files with 395 additions and 195 deletions
Show Stats Download Patch File Download Diff File

88
cursus.html
Unescape View File

@ -1,60 +1,68 @@
<!DOCTYPE html> <!-- Doctype HTML5 -->
<!DOCTYPE html>
<!-- Doctype HTML5 -->
<html lang="fr">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Corentin</title>
<nav class="navbar">
<ul class="navbar-list">
<li><a href="index.html">Accueil</a></li>
<li><a href="cursus.html">Cursus</a></li>
<li><a href="planning.html">Planning</a></li>
<li>
<a href="index.html">Accueil</a>
</li>
<li>
<a href="cursus.html">Cursus</a>
</li>
<li>
<a href="planning.html">Planning</a>
</li>
<li class="dropdown">
<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>
<li>
<a href="images.html">Images</a>
</li>
<li>
<a href="videos.html">Vidéos</a>
</li>
</ul>
</li>
<li><a href="form.php">Form</a></li>
<li>
<a href="form.php">Form</a>
</li>
</ul>
</nav>
</head>
<body>
<header>
<h1>Cursus scolaire</h1>
</header>
<h3>Maternelle</h3>
<p><strong>Archignat</strong></p>
<img src="img/Archignat.png" alt="Archignat" heigh="300px" width ="300px"></img>
<h3>Primaire</h3>
<p><strong>Saint Sauvier</strong></p>
<p><mark>cp -> ce1</mark></p>
<img src="">saint_sauvier.jpeg</img>
<p><strong>Treignat</strong></p>
<p><mark>ce2 -> cm2</mark></p>
<img src="img/treignat.jpeg" alt="treignat" heigh="300px" width ="300px"></imgs>
<h3>Collège</h3>
<p><strong>Huriel</strong></p>
<p><em>Collège George-Sand</em></p>
<img src="img/huriel.jpeg" alt="huriel" heigh="300px" width ="300px"></img>
<h3>Lycée</h3>
<p><strong>Montluçon</strong></p>
<p><em>Lycée madame de Staël</em></p>
<img src="img/montluçon.jpeg" alt="montluçon" heigh="300px" width ="300px"></img>
<h3>Maintenant</h3>
<p><strong>Aubière</strong></p>
<img src="img/aubière.jpg" alt="aubière" heigh="300px" width ="300px"></img>
<body>
<h1 id="titre_cursus">CURSUS SCOLAIRE</h1>
<div class="timeline">
<div class="container left">
<div class="content">
<h2 class="exclude">2023 ➡️ aujourd'hui</h2>
<h3 class="exclude">Iut Aubière</h3>
<img src="img/aubière.jpg" alt="aubière" heigh="300px" width="300px">
</div>
</div>
<div class="container right">
<div class="content">
<h2 class="exclude">2020 ➡️ 2023</h2>
<h3 class="exclude">Lycée LEM</h3>
<img src="img/montluçon.jpeg" alt="LEM" heigh="300px" width="300px">
</div>
</div>
<div class="container left">
<div class="content">
<h2 class="exclude">2016 ➡️ 2020</h2>
<h3 class="exclude">Collège George-Sand</h3>
<img src="img/huriel.jpeg" alt="huriel" heigh="00px" width="400px">
</div>
</div>
</div>
</body>
<footer>
<p>
Pied de page
</p>
<p>Pied de page</p>
</footer>
</html>

52
images.html
Unescape View File

@ -1,22 +1,35 @@
<!DOCTYPE html> <!-- Doctype HTML5 -->
<!DOCTYPE html>
<!-- Doctype HTML5 -->
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="style.css">
<title>Corentin</title>
<nav class="navbar">
<nav class="navbar"></nav>
<ul class="navbar-list">
<li><a href="index.html">Accueil</a></li>
<li><a href="cursus.html">Cursus</a></li>
<li><a href="planning.html">Planning</a></li>
<li>
<a href="index.html">Accueil</a>
</li>
<li>
<a href="cursus.html">Cursus</a>
</li>
<li>
<a href="planning.html">Planning</a>
</li>
<li class="dropdown">
<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>
<li>
<a href="images.html">Images</a>
</li>
<li>
<a href="videos.html">Vidéos</a>
</li>
</ul>
</li>
<li><a href="form.php">Form</a></li>
<li>
<a href="form.php">Form</a>
</li>
</ul>
</nav>
</head>
@ -24,43 +37,40 @@
<h1>Galerie d'Images</h1>
<h3 class="title_gallery">Espace</h3>
<div class="gallery">
<a href="space1.html">
<img src="img/space1.jpg" alt="Espace">
<img src="img/space1.jpg" alt="Espace" />
</a>
<a href="space2.html">
<img src="img/space2.jpg" alt="Espace">
<img src="img/space2.jpg" alt="Espace" />
</a>
<a href="space2.html">
<img src="img/space3.jpg" alt="Espace">
<img src="img/space3.jpg" alt="Espace" />
</a>
</div>
<h3 class="title_gallery">Jeux video</h3>
<div class="gallery">
<a href="video_game1.html">
<img src="img/video_game1.jpg" alt="Rocket league">
<img src="img/video_game1.jpg" alt="Rocket league" />
</a>
<a href="video_game2.html">
<img src="img/video_game2.jpg" alt="Valorant">
<img src="img/video_game2.jpg" alt="Valorant" />
</a>
<a href="video_game3.html">
<img src="img/video_game3.jpeg" alt="Fortnite">
<img src="img/video_game3.jpeg" alt="Fortnite" />
</a>
</div>
<h3 class="title_gallery">Sport</h3>
<div class="gallery">
<a href="sport1.html">
<img src="img/sport1.jpg" alt="Paintball">
<img src="img/sport1.jpg" alt="Paintball" />
</a>
<a href="sport2.html">
<img src="img/sport2.jpg" alt="Ping-pong">
<img src="img/sport2.jpg" alt="Ping-pong" />
</a>
<a href="sport3.html">
<img src="img/sport3.jpg" alt="Natation">
<img src="img/sport3.jpg" alt="Natation" />
</a>
</div>
</body>

3
planning.html
Unescape View File

@ -19,9 +19,6 @@
<li><a href="form.php">Form</a></li>
</ul>
</nav>
</head>
<body>
<header>
<h1>PLANNING</h1>
<table>
<caption>Planning d'activités</caption>

147
style.css
Unescape View File

@ -34,7 +34,7 @@ body {
color: #f1f1f1;
}
h1, h2, h3 {
h1, h2:not(.exclude), h3:not(.exclude) {
color: #ffffff;
}
@ -273,3 +273,148 @@ figcaption {
text-align: center;
margin-top: 20px;
}
/********************************************************************************/
/* Css for the timeline (general) */
#titre_cursus {
text-align: center;
margin-top: 20px;
}
* {
box-sizing: border-box;
}
/* Set a background color */
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
color: #333;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width containers */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}

70
videos.html
Unescape View File

@ -1,8 +1,9 @@
<!DOCTYPE html> <!-- Doctype HTML5 -->
<!DOCTYPE html>
<!-- Doctype HTML5 -->
<html lang="fr">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Corentin</title>
<nav class="navbar">
<ul class="navbar-list">
@ -26,19 +27,34 @@
<div class="gallery_video">
<figure>
<div class="video-item">
<video src="video/reset_bounce.mp4" type="video/mp4" controls muted></video>
<video
src="video/reset_bounce.mp4"
type="video/mp4"
controls
muted
></video>
</div>
<figcaption>Double reset bounce shot</figcaption>
</figure>
<figure>
<div class="video-item">
<video src="video/double_reset_double.mp4" type="video/mp4" controls muted></video>
<video
src="video/double_reset_double.mp4"
type="video/mp4"
controls
muted
></video>
</div>
<figcaption>Double reset double tap</figcaption>
</figure>
<figure>
<div class="video-item">
<video src="video/double_tap_angle.mp4" type="video/mp4" controls muted></video>
<video
src="video/double_tap_angle.mp4"
type="video/mp4"
controls
muted
></video>
</div>
<figcaption>Double tap</figcaption>
</figure>
@ -48,19 +64,34 @@
<div class="gallery_video">
<figure>
<div class="video-item">
<video src="video/4k breeze.mp4" type="video/mp4" controls muted></video>
<video
src="video/4k breeze.mp4"
type="video/mp4"
controls
muted
></video>
</div>
<figcaption>4k (asc 2)</figcaption>
</figure>
<figure>
<div class="video-item">
<video src="video/one tap jett asc.mp4" type="video/mp4" controls muted></video>
<video
src="video/one tap jett asc.mp4"
type="video/mp4"
controls
muted
></video>
</div>
<figcaption>One tap (asc3)</figcaption>
</figure>
<figure>
<div class="video-item">
<video src="video/4k_lotus_clutch.mp4" type="video/mp4" controls muted></video>
<video
src="video/4k_lotus_clutch.mp4"
type="video/mp4"
controls
muted
></video>
</div>
<figcaption>4k clutch (dia 3)</figcaption>
</figure>
@ -70,28 +101,37 @@
<div class="gallery_video">
<figure>
<div class="video-item">
<video src="video/Tristan_wsh.mp4" type="video/mp4" controls muted></video>
<video
src="video/Tristan_wsh.mp4"
type="video/mp4"
controls
muted
></video>
</div>
<figcaption>Rank du joueur : (immo 2)</figcaption>
</figure>
<figure>
<div class="video-item">
<video src="video/Rae_wtf.mp4" type="video/mp4" controls muted></video>
<video
src="video/Rae_wtf.mp4"
type="video/mp4"
controls
muted
></video>
</div>
<figcaption>Rank du joueur : (dia 3)</figcaption>
</figure>
<figure>
<div class="video-item">
<video controls muted>
<source src="video/Skye_wtf.mp4" type="video/mp4">
<source src="video/Skye_wtf.ogg" type="video/ogg">
<source src="video/Skye_wtf.webm" type="video/webm">
<source src="video/Skye_wtf.mp4" type="video/mp4" />
<source src="video/Skye_wtf.ogg" type="video/ogg" />
<source src="video/Skye_wtf.webm" type="video/webm" />
Video format not supported !
</video>
</div>
<figcaption>Rank du joueur : (asc 2)</figcaption>
</figure>
</div>
</body>
</html>

Write Preview
Loading…
Cancel
Save