generated from Templates_CodeFirst/templateHtmlCss
parent
dab07f26e5
commit
a2f98d59d1
@ -1,88 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
||||||
<title>site de Louis GERMAIN</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/accueil.css">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
<header>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<a href="accueil.html" class="navbar_link" id="current_page">Accueil</a>
|
|
||||||
<div class="navbar_link" id="deroulant_div">
|
|
||||||
<a id="media_par">Médias</a>
|
|
||||||
<div id="deroule_wrapper">
|
|
||||||
<a href="images.html" class="navbar_link sous">Mes passions en images</a>
|
|
||||||
<a href="video.html" class="navbar_link sous">Mes passions en vidéo</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="cursus.html" class="navbar_link">L'histoire de mes études</a>
|
|
||||||
<a href="planning.html" class="navbar_link">Ma vie extra-scolaire</a>
|
|
||||||
<a href="contact.php" class="navbar_link">Contact</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<h1 id="name">Louis GERMAIN</h1>
|
|
||||||
<img src="images/photo_profil.jpeg" id="myPic">
|
|
||||||
</header>
|
|
||||||
<body>
|
|
||||||
<div id="main_div">
|
|
||||||
<section id="presentation">
|
|
||||||
<h2>Qui suis-je</h2>
|
|
||||||
<div class="description">
|
|
||||||
Je suis Louis GERMAIN, en première année de BUT.
|
|
||||||
<div id="suite_paragraphe_présentation" style="display: none;">
|
|
||||||
<p>
|
|
||||||
Je suis né le 11 septembre 2005 à Beaumont et vis acuellement à Royat avec mon père et à Clermont avec ma mère. <br> Pour en savoir plus sur mon cursus scolaire, cliquer <a href="cursus.html">ici</a>.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<a class="suite" onclick="document.getElementById('suite_paragraphe_présentation').style.display = 'block'; this.style.display='none'">
|
|
||||||
Lire la suite...
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="caracteristique">
|
|
||||||
<h2>Ce qui me caractérise</h2>
|
|
||||||
<div class="description">
|
|
||||||
Je pratique une activité que peu d'étudiant font encore après le bac: le sport, ce qui m'a amené à
|
|
||||||
<div id="suite_paragraphe_caracteristique" style="display: none;">
|
|
||||||
<p>
|
|
||||||
pratiquer de nombreux sports avant de trouver celui qui me plaît vraiment: <em>l'équitation</em>. Lors de mon temps libre, je fais de nombreuses choses, comme vous pouvez le voir <a href="planning.html">ici</a>. Je participe également aux activités de la réserve de l'armée de terre au <strong>28ème régiment de transmission</strong> et apprécie courir. Les weekends, je voyage à travers la galaxie pour sauver des planètes de drones dans no man's sky.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<a class="suite" onclick="document.getElementById('suite_paragraphe_caracteristique').style.display = 'block'; this.style.display='none'">
|
|
||||||
Lire la suite...
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="connaissances">
|
|
||||||
<h2>Les langages que j'ai étudie</h2>
|
|
||||||
<div class="description">
|
|
||||||
<ul>
|
|
||||||
<li>python</li>
|
|
||||||
<li>C</li>
|
|
||||||
<li>HTML</li>
|
|
||||||
<li>CSS</li>
|
|
||||||
<li>Javascript</li>
|
|
||||||
<li>SQL</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<aside>
|
|
||||||
<h2>Me contacter</h2>
|
|
||||||
<div id="contact">
|
|
||||||
<a href="tel:0695766932"><img src=images/icon_phone.png class="nav_img"/></a>
|
|
||||||
<a href="https://instagram.com/louis.grmn_63"><img src=images/icon_instagram.png class="nav_img"/></a>
|
|
||||||
<a href="https://discord.gg/6V96CWQX"><img src=images/icon_discord.png class="nav_img"/></a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
Page faite par Louis GERMAIN
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
</html>
|
|
||||||
>>>>>>> dc8dfe44ed28f32d0af1c09b9f8c025e04821d0a
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>site de Louis GERMAIN</title>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/big_image.css">
|
|
||||||
</head>
|
|
||||||
<header id="header_image">
|
|
||||||
<nav>
|
|
||||||
<a href="accueil.html" class="navbar_link">Accueil</a>
|
|
||||||
<div class="navbar_link" id="deroulant_div">
|
|
||||||
<a id="media_par">Médias</a>
|
|
||||||
<div id="deroule_wrapper">
|
|
||||||
<a href="images.html" class="navbar_link sous">Mes passions en images</a>
|
|
||||||
<a href="video.html" class="navbar_link sous">Mes passions en vidéo</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="cursus.html" class="navbar_link">L'histoire de mes études</a>
|
|
||||||
<a href="planning.html" class="navbar_link">Ma vie extra-scolaire</a>
|
|
||||||
<a href="contact.php" class="navbar_link">Contact</a>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<body onload="display_image()" id="big_image_id">
|
|
||||||
<figure>
|
|
||||||
<img id="image_big">
|
|
||||||
<figcaption id="big_image_caption"></figcaption>
|
|
||||||
</figure>
|
|
||||||
<aside>
|
|
||||||
<h2>Me contacter</h2>
|
|
||||||
<div id="contact">
|
|
||||||
<a href="tel:0695766932"><img src=images/icon_phone.png class="nav_img"/></a>
|
|
||||||
<a href="https://instagram.com/louis.grmn_63"><img src=images/icon_instagram.png class="nav_img"/></a>
|
|
||||||
<a href="https://discord.gg/6V96CWQX"><img src=images/icon_discord.png class="nav_img"/></a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,131 +0,0 @@
|
|||||||
<?php
|
|
||||||
echo '
|
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
||||||
<title>site de Louis GERMAIN</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/contact.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
<header>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<a href="accueil.html" class="navbar_link">Accueil</a>
|
|
||||||
<div class="navbar_link" id="deroulant_div">
|
|
||||||
<a id="media_par">Médias</a>
|
|
||||||
<div id="deroule_wrapper">
|
|
||||||
<a href="images.html" class="navbar_link sous">Mes passions en images</a>
|
|
||||||
<a href="video.html" class="navbar_link sous">Mes passions en vidéo</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="cursus.html" class="navbar_link">Histoire de mes études</a>
|
|
||||||
<a href="planning.html" class="navbar_link">Ma vie extra-scolaire</a>
|
|
||||||
<a href="contact.php" class="navbar_link" id="current_page">Contact</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<h1>Me contacter</h1>
|
|
||||||
</header>
|
|
||||||
<body>
|
|
||||||
<form method="POST">
|
|
||||||
<div>
|
|
||||||
<label for="nom" class="field_label">nom</label>
|
|
||||||
<input type="text" name="nom" id="nom" placeholder="nom" required/>';
|
|
||||||
if (isset($_POST['nom']) && empty($_POST['nom']))
|
|
||||||
{
|
|
||||||
echo '<p class="error">Veuillez renseigner votre nom !</p>';
|
|
||||||
}
|
|
||||||
echo '</div>
|
|
||||||
<div>
|
|
||||||
<label for="mail" class="field_label">email</label>
|
|
||||||
<input type="email" name="mail" id="mail" placeholder="youremail@example.com" required/>
|
|
||||||
</div>';
|
|
||||||
if (isset($_POST['mail']) && empty($_POST['mail']))
|
|
||||||
{
|
|
||||||
echo '<p class="error">Veuillez renseigner votre email !</p>';
|
|
||||||
}
|
|
||||||
if (isset($_POST['mail']) && !filter_var($_POST['mail'], FILTER_VALIDATE_EMAIL))
|
|
||||||
{
|
|
||||||
echo '<p class="error">Votre email est invalide !</p>';
|
|
||||||
}
|
|
||||||
echo '<div>
|
|
||||||
<label for="phone" class="field_label">numéro de téléphone</label>
|
|
||||||
<input type="tel" name="phone" id="phone" placeholder="01 23 45 67 89"/>
|
|
||||||
</div>';
|
|
||||||
if (isset($_POST['phone']) && !empty($_POST['phone']) && !($_POST['phone'] == filter_var($_POST['phone'], FILTER_SANITIZE_NUMBER_INT)))
|
|
||||||
{
|
|
||||||
echo '<p class="error">Entrez une numéro de téléphone correct</p>';
|
|
||||||
}
|
|
||||||
echo '<div>
|
|
||||||
<label for="motif" class="field_label">motif de contact</label>
|
|
||||||
<select name="motif" id="motif">
|
|
||||||
<option value="connaissance">Faire connaissance</option>
|
|
||||||
<option value="recrutement">Me recruter</option>
|
|
||||||
<option value="notation">Me noter</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="when" class="field_label">Quand voulez-vous me rencontrer ?</label>
|
|
||||||
<input type="datetime-local" name="when" id="when">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p>Est-ce votre première demande de rencontre ?</p>
|
|
||||||
<input name="1contact" type="radio" value="o" id="o"/>
|
|
||||||
<label for="o">Oui</label>
|
|
||||||
<input name="1contact" type="radio" value="n" id="n"/>
|
|
||||||
<label for="n">Non</label>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="msg" class="field_label">Votre message</label>
|
|
||||||
<textarea name="msg" id="msg" placeholder="Votre message" required></textarea>
|
|
||||||
</div>';
|
|
||||||
if (isset($_POST['msg']) && empty($_POST['msg']))
|
|
||||||
{
|
|
||||||
echo '<p class="error">Veuillez renseigner votre message !</p>';
|
|
||||||
}
|
|
||||||
echo '<input type="submit" value="Entrer"/>
|
|
||||||
<input type="reset" value="Réinitialiser"/>
|
|
||||||
</form>';
|
|
||||||
if (isset($_POST['nom']) && isset($_POST['mail']) && isset($_POST['phone']) && isset($_POST['motif']) && isset($_POST['when']) && isset($_POST['1contact']) && isset($_POST['msg']))
|
|
||||||
{
|
|
||||||
echo "<p id='recap'>Vous êtes {$_POST['nom']}: ";
|
|
||||||
if (!empty($_POST['mail'])) {echo "votre adresse email est {$_POST['mail']}, ";}
|
|
||||||
if (!empty($_POST['phone'])) {echo "votre numéro de téléphone est {$_POST['phone']}, ";}
|
|
||||||
if (!empty($_POST['motif']))
|
|
||||||
{
|
|
||||||
echo "vous voulez me contacter car ";
|
|
||||||
if ($_POST['motif'] == "connaissance")
|
|
||||||
{
|
|
||||||
echo 'vous voulez faire connaissance faire connaissance';
|
|
||||||
}
|
|
||||||
else if ($_POST['motif'] == "recrutement")
|
|
||||||
{
|
|
||||||
echo 'mon CV vous intéresse';
|
|
||||||
}
|
|
||||||
else if ($_POST['motif'] == "notation")
|
|
||||||
{
|
|
||||||
echo 'vous souhaitez mettre une magnifique note à mon travail';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!empty($_POST['when'])) { echo " le {$_POST['when']}. "; }
|
|
||||||
if (!empty($_POST['1contact']))
|
|
||||||
{
|
|
||||||
if ($_POST['1contact'] == 'o') {echo "C'est la première fois que l'on est en contact ";}
|
|
||||||
else if ($_POST['1contact'] == 'n') {echo "Ce n'est pas la première fois que l'on est en contact ";}
|
|
||||||
}
|
|
||||||
echo "et vous avez ajouté que {$_POST['msg']}. Votre demande a été prise en compte et va être étudiée.";
|
|
||||||
if (!empty($_POST['motif']) && $_POST['motif'] == "connaissance") {echo " avec tout le sérieux qu'on me connaît.";}
|
|
||||||
echo "</p>";
|
|
||||||
}
|
|
||||||
echo"<aside>
|
|
||||||
<h2>Me contacter</h2>
|
|
||||||
<div id='contact'>
|
|
||||||
<a href='tel:0695766932'><img src=images/icon_phone.png class='nav_img'/></a>
|
|
||||||
<a href='https://instagram.com/louis.grmn_63'><img src=images/icon_instagram.png class='nav_img'/></a>
|
|
||||||
<a href='https://discord.gg/6V96CWQX'><img src=images/icon_discord.png class='nav_img'/></a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</body>
|
|
||||||
</html>";
|
|
||||||
?>
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
#image_big {
|
|
||||||
position: absolute;
|
|
||||||
height: 80vh;
|
|
||||||
width: 75vw;
|
|
||||||
top: 12vh;
|
|
||||||
left: 5vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#big_image_caption {
|
|
||||||
font-size: 1.25em;
|
|
||||||
text-align:center;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1vh;
|
|
||||||
width: 95vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
figcaption {
|
|
||||||
color:black;
|
|
||||||
}
|
|
||||||
@ -1,30 +1,5 @@
|
|||||||
label, p, input, select, option, textarea {
|
#main_div {
|
||||||
color:black;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
.error {
|
|
||||||
color:red;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
padding: 2vh;
|
|
||||||
position: absolute;
|
|
||||||
top: 25vh;
|
|
||||||
border: 2px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
#recap {
|
|
||||||
position: absolute;
|
|
||||||
top: 75vh;
|
|
||||||
left: 5vw;
|
|
||||||
background-color: gray;
|
|
||||||
border: 2px solid black;
|
|
||||||
width: 75vw;
|
|
||||||
padding: 1vh;
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
border-top-right-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field_label {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,5 @@
|
|||||||
|
img {
|
||||||
#cursus {
|
width: 50vw;
|
||||||
width: 75vw;
|
margin-left: 25vw;
|
||||||
margin-left: 5vw;
|
|
||||||
margin-right: 5vw;
|
|
||||||
background-color: gray;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 2%;
|
|
||||||
border: 2px solid black;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,55 +0,0 @@
|
|||||||
.image_galerie {
|
|
||||||
height: 33vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#image_code{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 50vh;
|
|
||||||
left: 37.5vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#image_forest {
|
|
||||||
position: absolute;
|
|
||||||
top: 50vh;
|
|
||||||
right: 50vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#image_videogame {
|
|
||||||
position: absolute;
|
|
||||||
top: 50vh;
|
|
||||||
left: 50vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#image_code:hover {
|
|
||||||
bottom: 52vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#code_link:hover:after {
|
|
||||||
position: absolute;
|
|
||||||
left:49vw;
|
|
||||||
bottom:50vh;
|
|
||||||
content: attr(title);
|
|
||||||
color:black;
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-color: lightgray; /*Sinon underline blanc qui s'enlève pas avec text-decoration: none*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#forest_link:hover:after {
|
|
||||||
position: absolute;
|
|
||||||
left:35vw;
|
|
||||||
top:83vh;
|
|
||||||
content: attr(title);
|
|
||||||
color:black;
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-color: lightgray; /*Sinon underline blanc qui s'enlève pas avec text-decoration: none*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#videogame_link:hover:after {
|
|
||||||
position: absolute;
|
|
||||||
left:66vw;
|
|
||||||
top:83vh;
|
|
||||||
content: attr(title);
|
|
||||||
color:black;
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-color: lightgray; /*Sinon underline blanc qui s'enlève pas avec text-decoration: none*/
|
|
||||||
}
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
table{
|
|
||||||
margin-top: 2vh;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-left: 5vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
td, th{
|
|
||||||
border: 2px solid black;
|
|
||||||
background-color: gray;
|
|
||||||
}
|
|
||||||
td {
|
|
||||||
text-align: center;
|
|
||||||
width: 15vw;
|
|
||||||
padding: 0.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image_table {
|
|
||||||
height: 10vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#close {
|
|
||||||
position: absolute;
|
|
||||||
background-image: url("../images/cross.png");
|
|
||||||
background-color: rgb(200 200 200);
|
|
||||||
background-size:cover;
|
|
||||||
background-position: center;
|
|
||||||
border: 2px solid black;
|
|
||||||
top: 11vh;
|
|
||||||
left:72vw;
|
|
||||||
height: 2.5vw;
|
|
||||||
width: 2.5vw;
|
|
||||||
border-radius: 10px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes agrandissement-centré {
|
|
||||||
0% {
|
|
||||||
height: 10vh;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
height: 80vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes degrossissement-centré {
|
|
||||||
0% {
|
|
||||||
height: 80vh;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
height: 10vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide_left {
|
|
||||||
0% {
|
|
||||||
transform: translateX(60vw);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(7.5vw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide_right {
|
|
||||||
0% {
|
|
||||||
transform: translateX(7.5vw);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(60vw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
body {
|
|
||||||
background-color: white;
|
|
||||||
height: 75vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
header, footer, aside {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
.flexdiv {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 27vh;
|
||||||
|
margin-top: 8vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin-left: 0;
|
||||||
|
width: 60vw;
|
||||||
|
}
|
||||||
@ -1,22 +0,0 @@
|
|||||||
#video_wrapper {
|
|
||||||
position: absolute;
|
|
||||||
top: 20vh;
|
|
||||||
left: 5vw;
|
|
||||||
width: 80vw;
|
|
||||||
height: 60vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
video {
|
|
||||||
height: 100%;
|
|
||||||
width: 50vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
position: absolute;
|
|
||||||
width: 25vw;
|
|
||||||
height: 60vh;
|
|
||||||
right: 2vw;
|
|
||||||
top: 0vw;
|
|
||||||
text-align: center;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>site de Louis GERMAIN</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/cursus.css">
|
|
||||||
</head>
|
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<a href="accueil.html" class="navbar_link">Accueil</a>
|
|
||||||
<div class="navbar_link" id="deroulant_div">
|
|
||||||
<a id="media_par">Médias</a>
|
|
||||||
<div id="deroule_wrapper">
|
|
||||||
<a href="images.html" class="navbar_link sous">Mes passions en images</a>
|
|
||||||
<a href="video.html" class="navbar_link sous">Mes passions en vidéo</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="cursus.html" class="navbar_link" id="current_page">L'histoire de mes études</a>
|
|
||||||
<a href="planning.html" class="navbar_link">Ma vie extra-scolaire</a>
|
|
||||||
<a href="contact.php" class="navbar_link">Contact</a>
|
|
||||||
</nav>
|
|
||||||
<h1 class="header_title">Mon cursus</h1>
|
|
||||||
</header>
|
|
||||||
<body>
|
|
||||||
<p id="cursus">
|
|
||||||
J'ai été scolarisé en <em>maternelle</em> et en <em>primaire</em> à l'école <strong>Nestor Perret</strong>, à Clermont-Ferrand. Puis, je suis allé au <em>collège</em> à <strong>Teilhard de Chardin</strong> à Chamalières. J'ai ensuite fait ma <em>seconde</em> au <strong>lycée polyvalent</strong>, aussi connu sous le nom de <strong>lycée hôtelier</strong>, en général. J'ai ensuite effectué ma <em>première</em> et ma <em>terminale</em> au <strong>lycée Saint-Alyre</strong> avec les spécialités mathématiques et Numérique et Sciences de l'Informatique (NSI). Je suis actuellement en <em>1ère année</em> de <strong>BUT informatique</strong>.
|
|
||||||
</p>
|
|
||||||
<aside>
|
|
||||||
<h2>Me contacter</h2>
|
|
||||||
<div id="contact">
|
|
||||||
<a href="tel:0695766932"><img src=images/icon_phone.png class="nav_img"/></a>
|
|
||||||
<a href="https://instagram.com/louis.grmn_63"><img src=images/icon_instagram.png class="nav_img"/></a>
|
|
||||||
<a href="https://discord.gg/6V96CWQX"><img src=images/icon_discord.png class="nav_img"/></a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</body>
|
|
||||||
<footer>
|
|
||||||
Page faite par Louis GERMAIN
|
|
||||||
</footer>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
@ -1,44 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>site de Louis GERMAIN</title>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/images.css">
|
|
||||||
</head>
|
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<a href="accueil.html" class="navbar_link">Accueil</a>
|
|
||||||
<div class="navbar_link" id="deroulant_div">
|
|
||||||
<a id="media_par">Médias</a>
|
|
||||||
<div id="deroule_wrapper">
|
|
||||||
<a href="images.html" class="navbar_link sous">Mes passions en images</a>
|
|
||||||
<a href="video.html" class="navbar_link sous">Mes passions en vidéo</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="cursus.html" class="navbar_link">L'histoire de mes études</a>
|
|
||||||
<a href="planning.html" class="navbar_link">Ma vie extra-scolaire</a>
|
|
||||||
<a href="contact.php" class="navbar_link">Contact</a>
|
|
||||||
</nav>
|
|
||||||
<h1 class="header_title">Mes passions en quelques images</h1>
|
|
||||||
</header>
|
|
||||||
<body>
|
|
||||||
<div>
|
|
||||||
<a class="image_link" href="big_image.html" onclick="clicked_image('code.jpg')" title="code" id="code_link"><img class="image_galerie" src="images/code.jpg" id="image_code"></a>
|
|
||||||
<a class="image_link" href="big_image.html" onclick="clicked_image('forest.jpg')" title="forêt" id="forest_link"><img class="image_galerie" src="images/forest.jpg" id="image_forest"></a>
|
|
||||||
<a class="image_link" href="big_image.html" onclick="clicked_image('videogame.jpg')" title="jeu vidéo" id="videogame_link"><img class="image_galerie" src="images/videogame.jpg" id="image_videogame"></a>
|
|
||||||
</div>
|
|
||||||
<aside>
|
|
||||||
<h2>Me contacter</h2>
|
|
||||||
<div id="contact">
|
|
||||||
<a href="tel:0695766932"><img src=images/icon_phone.png class="nav_img"/></a>
|
|
||||||
<a href="https://instagram.com/louis.grmn_63"><img src=images/icon_instagram.png class="nav_img"/></a>
|
|
||||||
<a href="https://discord.gg/6V96CWQX"><img src=images/icon_discord.png class="nav_img"/></a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</body>
|
|
||||||
<footer>
|
|
||||||
Page faite par Louis GERMAIN
|
|
||||||
</footer>
|
|
||||||
</html>
|
|
||||||
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 110 KiB |
|
Before Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 122 KiB |
|
Before Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 148 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 172 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 305 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
Before Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 398 KiB |
|
Before Width: | Height: | Size: 103 KiB |
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<title>site de Louis GERMAIN</title>
|
||||||
|
<!--<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/accueil.css">-->
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/accueil.css"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
</head>
|
||||||
|
<header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="accueil.html" class="navbar_link" id="current_page">Accueil</a>
|
||||||
|
<a href="../docs/CV.pdf" target="_blank" class="navbar_link">CV</a>
|
||||||
|
<a href="projets.html" class="navbar_link">Mes projets</a>
|
||||||
|
<a href="cursus.html" class="navbar_link">Mon cursus</a>
|
||||||
|
<a href="contact.php" class="navbar_link">Contact</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<h1 id="name">Louis GERMAIN</h1>
|
||||||
|
</header>
|
||||||
|
<body>
|
||||||
|
<div id="main_div">
|
||||||
|
<section id="presentation">
|
||||||
|
<h2>Bienvenue sur mon portfolio !</h2>
|
||||||
|
<div class="description">
|
||||||
|
Je suis Louis GERMAIN, étudiant en première année de BUT informatique à Aubière. <br/>
|
||||||
|
je suis également réserviste dans l'armée de terre, où l'on fait de nombreuses marches dans la nature. <br/>
|
||||||
|
C'est une de mes passions, il m'arrive donc d'aller explorer les forêts en sortant des chemins traçés et de m'aventurer dans les ronces et autres buissons
|
||||||
|
<br/><br/><br/>
|
||||||
|
J'apprécie tous types de sports, tel que la course, l'équitation et la randonnée, ce qui est très important pour me garder en forme. <br/>
|
||||||
|
J'ai pratiqué l'équitation, ce qui nécessitait d'être calme, patient, et d'avoir une bonne communication avec le cheval monté, ainsi que de s'y adapter, tous chevaux étant différents. <br/>
|
||||||
|
De plus, j'adore coder, essentiellement du backend, et, quand mes vacances ne sont pas prises par l'armée, je continue mes projets de cours ou conçois des projets personnels pour m'occuper. J'ai également fait parti du club robotique de mon lycée de seconde. <br/>
|
||||||
|
À l'armée, j'ai aussi découvert le tir. Depuis j'attends avec impatience chaque exercice pour m'y entraîner, ou pour participer à d'autres activités, où l'on s'exerce au combat au travers
|
||||||
|
des mises en situation comme la prise d'une zone par un groupe armée.
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<img src="../images/armee.jpg" id="myPic">
|
||||||
|
<div id="images">
|
||||||
|
<img src="../images/equit.jpg" id="horsePic" class="illustration">
|
||||||
|
<img src="../images/code.jpg" id="codePic" class="illustration">
|
||||||
|
<img src="../images/robotique.jpg" id="robotPic" class="illustration">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</html>
|
||||||
|
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<title>site de Louis GERMAIN</title>
|
||||||
|
<!--<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">-->
|
||||||
|
<!--<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/contact.css">-->
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/contact.css"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
</head>
|
||||||
|
<header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="accueil.html" class="navbar_link">Accueil</a>
|
||||||
|
<a href="../docs/CV.pdf" target="_blank" class="navbar_link">CV</a>
|
||||||
|
<a href="projets.html" class="navbar_link">Mes projets</a>
|
||||||
|
<a href="cursus.html" class="navbar_link">Mon cursus</a>
|
||||||
|
<a href="contact.html" class="navbar_link" id="current_page">Contact</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<body>
|
||||||
|
<div id="main_div">
|
||||||
|
<section>
|
||||||
|
<h2> Comment me contacter </h2>
|
||||||
|
<div class="description">
|
||||||
|
<ul>
|
||||||
|
<li>Adresse email: <a href="mailto:louis.germain.63.1@gmail.com">louis.germain.63.1@gmail.com</a></li>
|
||||||
|
<li>numero de téléphone: <a href="tel:+33695766932">06 95 76 69 32</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<title>site de Louis GERMAIN</title>
|
||||||
|
<!--<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">-->
|
||||||
|
<!--<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/cursus.css">-->
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/cursus.css"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
</head>
|
||||||
|
<header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="accueil.html" class="navbar_link">Accueil</a>
|
||||||
|
<a href="../docs/CV.pdf" target="_blank" class="navbar_link">CV</a>
|
||||||
|
<a href="projets.html" class="navbar_link">Mes projets</a>
|
||||||
|
<a href="cursus.html" class="navbar_link" id="current_page">Mon cursus</a>
|
||||||
|
<a href="contact.html" class="navbar_link">Contact</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<body>
|
||||||
|
<div id="main_div">
|
||||||
|
<img src="../images/cursus.png">
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<title>site de Louis GERMAIN</title>
|
||||||
|
<!--<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">-->
|
||||||
|
<!--<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/project.css">-->
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/project.css"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
</head>
|
||||||
|
<header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="accueil.html" class="navbar_link">Accueil</a>
|
||||||
|
<a href="../docs/CV.pdf" target="_blank" class="navbar_link">CV</a>
|
||||||
|
<a href="projets.html" class="navbar_link" id="current_page">Mes projets</a>
|
||||||
|
<a href="cursus.html" class="navbar_link">Mon cursus</a>
|
||||||
|
<a href="contact.html" class="navbar_link">Contact</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<body>
|
||||||
|
<div id="main_div">
|
||||||
|
<div class="flexdiv">
|
||||||
|
<img src="../images/sae.png"/>
|
||||||
|
<section>
|
||||||
|
<h2>Projet d'échec</h2>
|
||||||
|
<div class="description">
|
||||||
|
Un des projets qui me tiens le plus à coeur est la situation d'apprentissage et d'évaluation (SAE) 2.01: Développement d'une application pour laquelle, en équipe de trois, nous développons
|
||||||
|
un jeu de société. La partie visuelle se fait en XAML et la partie fonctionnelle se fait en C#. <br/>
|
||||||
|
Mon équipe a choisi de coder les échecs. J'ai été désigné chef d'équipe, je répartis donc les tâches et m'occupe de la gestion du projet, mais je code également.
|
||||||
|
J'ai par exemple adoré coder les règles de déplacement des pièces, ainsi que les conditions pour qu'elles mangent des pièces adverses. J'ai aussi fait le visuel de la page d'accueil. <br/>
|
||||||
|
Ce projet, comme tous les autres, m'apprend à gérer un projet, le travail d'équipe ainsi que la réflexion quant à la qualité de notre code, mais aussi à déléguer le travail, ce pour quoi
|
||||||
|
j'ai encore un peu de mal.
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="flexdiv">
|
||||||
|
<section>
|
||||||
|
<h2>Projet commande d'un foodtruck</h2>
|
||||||
|
<div class="description">
|
||||||
|
Un autre projet auquel je tiens beaucoup, est la création d'un site internet pour gérer les commandes d'un foodtruck d'un lycée. Ce projet a été mené en NSI, avec comme côté serveur
|
||||||
|
le module python Flask, et comme côté client de l'HTML, du CSS et un peu de JavaScript.<br/>
|
||||||
|
Ce projet m'a permis de beaucoup apprendre sur la gestion des utilisateurs, car les gérants du foodtruck devaient pouvoir se connecter et changer le menu hebdomadaire, déclarer
|
||||||
|
qu'ils n'avaient plus un certain produit, et les élèves n'avaient pas de compte, ils devaient juste rentrer leurs noms et prénoms ainsi que leurs choix, qui étaient enregistrés dans une
|
||||||
|
base de donnée. <br/>
|
||||||
|
Ce projet m'a aussi fait me remettre en question sur comment gérer un projet, plus de 60% ayant été codé la nuit avant le rendu car nous n'étions pas assez organisés, de plus, le projet
|
||||||
|
n'a pas été mené à terme.
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<img src="../images/foodtruck.jpg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,115 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>site de Louis GERMAIN</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/planning.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/planning_print.css" media="print">
|
|
||||||
</head>
|
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<a href="accueil.html" class="navbar_link">Accueil</a>
|
|
||||||
<div class="navbar_link" id="deroulant_div">
|
|
||||||
<a id="media_par">Médias</a>
|
|
||||||
<div id="deroule_wrapper">
|
|
||||||
<a href="images.html" class="navbar_link sous">Mes passions en images</a>
|
|
||||||
<a href="video.html" class="navbar_link sous">Mes passions en vidéo</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="cursus.html" class="navbar_link">L'histoire de mes études</a>
|
|
||||||
<a href="planning.html" class="navbar_link" id="current_page">Ma vie extra-scolaire</a>
|
|
||||||
<a href="contact.php" class="navbar_link">Contact</a>
|
|
||||||
</nav>
|
|
||||||
<h1 class="header_title">Ma vie en dehors du BUT</h1>
|
|
||||||
</header>
|
|
||||||
<body>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="not_image">Divertissements</th>
|
|
||||||
<th class="not_image">Créneaux</th>
|
|
||||||
<th class="not_image">Lieux</th>
|
|
||||||
<th class="not_image">Durée</th>
|
|
||||||
<th class="not_image">Images</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td class="not_image">Course</td>
|
|
||||||
<td class="not_image" rowspan="2">Dès que possible</td>
|
|
||||||
<td class="not_image" rowspan="2">Dans la rue</td>
|
|
||||||
<td class="not_image" rowspan="2">Jusqu'à ce que j'arrive</td>
|
|
||||||
<td id="td_running"><img class="image_table" src="images/running_man.jpeg" alt="Un homme court à côté de l'eau" id="running" onclick="bigger('running')"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="not_image">Vélo</td>
|
|
||||||
<td id="td_biking"><img class="image_table" src="images/biking.jpeg" alt="Un homme fait du vélo en ville" id="biking" onclick="bigger('biking')"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="not_image">Équitation</td>
|
|
||||||
<td class="not_image">samedi après-midi</td>
|
|
||||||
<td class="not_image">Au centre équestre</td>
|
|
||||||
<td class="not_image">1h30</td>
|
|
||||||
<td id="td_horse"><img class="image_table" src="images/horse.jpg" alt="un homme sur un cheval marron saute un obstacle" id="horse" onclick="bigger('horse')"></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<aside>
|
|
||||||
<h2>Me contacter</h2>
|
|
||||||
<div id="contact">
|
|
||||||
<a href="tel:0695766932"><img src=images/icon_phone.png class="nav_img"/></a>
|
|
||||||
<a href="https://instagram.com/louis.grmn_63"><img src=images/icon_instagram.png class="nav_img"/></a>
|
|
||||||
<a href="https://discord.gg/6V96CWQX"><img src=images/icon_discord.png class="nav_img"/></a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<div id="close" onclick="closeImage()"></div>
|
|
||||||
<script>
|
|
||||||
var images = ["running", "biking", "horse"]
|
|
||||||
var not_image = document.getElementsByClassName('not_image');
|
|
||||||
var image_id;
|
|
||||||
|
|
||||||
function bigger(image)
|
|
||||||
{
|
|
||||||
images = ["running", "biking", "horse"]
|
|
||||||
image_id = images.splice(images.indexOf(image), 1);
|
|
||||||
for (let i = 0; i < not_image.length; i++) {
|
|
||||||
not_image[i].style.display = "none";
|
|
||||||
}
|
|
||||||
for (let i = 0; i < images.length; i++) {
|
|
||||||
document.getElementById("td_" + images[i]).style.display = "none";
|
|
||||||
}
|
|
||||||
document.getElementById("td_" + image).style = "border: none; background-color: transparent;"
|
|
||||||
document.getElementsByTagName("footer")[0].style.display = "none";
|
|
||||||
document.getElementsByTagName("table")[0].style.animation= "slide_left 1s ease-in-out 0s both";
|
|
||||||
document.getElementById(image).style.animation = "agrandissement-centré 1.5s ease-in-out 1s both";
|
|
||||||
setTimeout(function() {
|
|
||||||
document.getElementById("close").style.display = "block";
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeImage()
|
|
||||||
{
|
|
||||||
document.getElementById("close").style.display = "none";
|
|
||||||
document.getElementById(image_id).style.animation = "degrossissement-centré 1.5s ease-in-out 0s both";
|
|
||||||
document.getElementsByTagName("table")[0].style.animation= "slide_right 1s ease-in-out 1.5s both";
|
|
||||||
setTimeout(function() {
|
|
||||||
for (let i = 0; i < not_image.length; i++) {
|
|
||||||
not_image[i].style.display = "table-cell";
|
|
||||||
}
|
|
||||||
for (let i = 0; i < images.length; i++) {
|
|
||||||
document.getElementById("td_" + images[i]).style.display = "table-cell";
|
|
||||||
}
|
|
||||||
document.getElementById("td_" + image_id).style = "border: 2px solid black; background-color: gray;"
|
|
||||||
document.getElementsByTagName("footer")[0].style.display = "block";
|
|
||||||
document.getElementById(image_id).style.animation = "none"
|
|
||||||
document.getElementsByTagName("table")[0].style = "margin-top: 2vh; margin-right: 2.5vw; margin-left: 2.5vw;";
|
|
||||||
document.getElementsByTagName("table")[0].style.animation= "none";
|
|
||||||
}, 2500);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
<footer>
|
|
||||||
Page faite par Louis GERMAIN
|
|
||||||
</footer>
|
|
||||||
</html>
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
function display_image() {
|
|
||||||
let image = sessionStorage.getItem("image")
|
|
||||||
document.getElementById("image_big").src = "images/" + image;
|
|
||||||
if (image === "code.jpg") {
|
|
||||||
document.getElementsByTagName("figcaption")[0].innerHTML = "Je sais que c'est cliché au possible pour un BUT info mais j'adore coder, peu importe le langage, j'adore en apprendre de nouveaux."
|
|
||||||
}
|
|
||||||
else if (image === "forest.jpg") {
|
|
||||||
document.getElementsByTagName("figcaption")[0].innerHTML = "J'adore me balader en forêt, surtout en partout tout droit en dehors des sentiers et me perdre quelques heures, il n'y a personne, c'est calme."
|
|
||||||
}
|
|
||||||
else if (image === "videogame.jpg") {
|
|
||||||
document.getElementsByTagName("figcaption")[0].innerHTML = "Et comme la plupart des gens dans cette école, j'aime jouer aux jeux vidéos, surtout no man's sky en ce moment."
|
|
||||||
}
|
|
||||||
sessionStorage.clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
function clicked_image(image_name) {
|
|
||||||
sessionStorage.setItem("image", image_name)
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>site de Louis GERMAIN</title>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/style.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://codefirst.iut.uca.fr/containers/louisgermain-portfolio/css/video.css">
|
|
||||||
</head>
|
|
||||||
<header id="headerAccueil">
|
|
||||||
<nav>
|
|
||||||
<a href="accueil.html" class="navbar_link" id="current_page">Accueil</a>
|
|
||||||
<div class="navbar_link" id="deroulant_div">
|
|
||||||
<a id="media_par">Médias</a>
|
|
||||||
<div id="deroule_wrapper">
|
|
||||||
<a href="images.html" class="navbar_link sous">Mes passions en images</a>
|
|
||||||
<a href="video.html" class="navbar_link sous">Mes passions en vidéo</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="cursus.html" class="navbar_link">L'histoire de mes études</a>
|
|
||||||
<a href="planning.html" class="navbar_link">Ma vie extra-scolaire</a>
|
|
||||||
<a href="contact.php" class="navbar_link">Contact</a>
|
|
||||||
</nav>
|
|
||||||
<h1 class="header_title">Mes passions en quelques vidéos</h1>
|
|
||||||
</header>
|
|
||||||
<body>
|
|
||||||
<div id="video_wrapper">
|
|
||||||
<video controls preload="auto" autoplay>
|
|
||||||
<source src="videos/Unravel.mp4">
|
|
||||||
<source src="videos/Unravel.ogg">
|
|
||||||
<source src="videos/Unravel.webm">
|
|
||||||
</video>
|
|
||||||
<p id="video_description">
|
|
||||||
Voici la vidéo du générique de début (opening) de Tokyo Ghoul. J'aime bien la musique et l'animé.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<aside>
|
|
||||||
<h2>Me contacter</h2>
|
|
||||||
<div id="contact">
|
|
||||||
<a href="tel:0695766932"><img src=images/icon_phone.png class="nav_img"/></a>
|
|
||||||
<a href="https://instagram.com/louis.grmn_63"><img src=images/icon_instagram.png class="nav_img"/></a>
|
|
||||||
<a href="https://discord.gg/6V96CWQX"><img src=images/icon_discord.png class="nav_img"/></a>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</body>
|
|
||||||
<footer>
|
|
||||||
Page faite par Louis GERMAIN
|
|
||||||
</footer>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue