generated from Templates_CodeFirst/templateHtmlCss
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
7.6 KiB
115 lines
7.6 KiB
<!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> |