generated from Templates_CodeFirst/templateHtmlCss
mon portfolio
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
parent
bae8b9212f
commit
fea61efe6e
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>2048</title>
|
||||
<link rel="stylesheet" href="style_2048.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>2048</h1>
|
||||
<div class="score-container">
|
||||
Score: <span id="score">0</span>
|
||||
</div>
|
||||
<button id="new-game">Nouvelle partie</button>
|
||||
</div>
|
||||
<div class="grid"></div>
|
||||
</div>
|
||||
<script src="script_2048.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
Binary file not shown.
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact - Etienne Veau</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">À propos</a></li>
|
||||
<li><a href="cursus.html">Cursus</a></li>
|
||||
<li><a href="competences.html">Compétences/Qualités</a></li>
|
||||
<li><a href="projets.html">Projets</a></li>
|
||||
<li><a href="exppro.html">Expériences professionnelles</a></li>
|
||||
<li><a href="cv.html">Mon CV</a></li>
|
||||
<li><a href="contact.html">Me Contacter</a></li>
|
||||
</ul>
|
||||
<button class="hamburger">☰</button>
|
||||
</nav>
|
||||
<div class="container contact-container">
|
||||
<section class="cv-preview">
|
||||
<img src="mail.png" alt="Contactez-moi" style="max-width: 200px; margin-bottom: 20px;">
|
||||
<br><br><br><br>
|
||||
<div class="contact-button">
|
||||
<a href="mailto:etienne.veau@etu.uca.fr?subject=Contact%20via%20le%20portfolio&body=Bonjour%20Etienne,%0D%0A%0D%0A"
|
||||
class="btn submit-btn">Envoyer un e-mail</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const hamburger = document.querySelector('.hamburger');
|
||||
const navMenu = document.querySelector('nav ul');
|
||||
|
||||
hamburger.addEventListener('click', () => {
|
||||
navMenu.classList.toggle('active');
|
||||
hamburger.setAttribute('aria-expanded', navMenu.classList.contains('active'));
|
||||
});
|
||||
|
||||
document.querySelectorAll('nav a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navMenu.classList.remove('active');
|
||||
hamburger.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CV- Etienne Veau</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">À propos</a></li>
|
||||
<li><a href="cursus.html">Cursus</a></li>
|
||||
<li><a href="competences.html">Compétences/Qualités</a></li>
|
||||
|
||||
<li><a href="projets.html">Projets</a></li>
|
||||
<li><a href="exppro.html">Expériences professionnelles</a></li>
|
||||
|
||||
<li><a href="cv.html">Mon CV</a></li>
|
||||
<li><a href="contact.html">Me Contacter</a></li>
|
||||
</ul>
|
||||
<button class="hamburger">☰</button>
|
||||
</nav>
|
||||
|
||||
<div class="container contact-container">
|
||||
<section class="cv-preview">
|
||||
<img src="CV-Veau_Etienne-Alternance.png" alt="Aperçu CV Etienne Veau" class="cv-image">
|
||||
<a href="CV-Veau_Etienne-Alternance.pdf" class="btn download-btn" download>
|
||||
Télécharger mon CV
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const hamburger = document.querySelector('.hamburger');
|
||||
const navMenu = document.querySelector('nav ul');
|
||||
|
||||
hamburger.addEventListener('click', () => {
|
||||
navMenu.classList.toggle('active');
|
||||
hamburger.setAttribute('aria-expanded', navMenu.classList.contains('active'));
|
||||
});
|
||||
|
||||
document.querySelectorAll('nav a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navMenu.classList.remove('active');
|
||||
hamburger.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 169 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cursus Scolaire</title>
|
||||
<link type="text/css" rel="stylesheet" href="mon-portfolio.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="matrix"></canvas>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html">Home</a>
|
||||
<a href="Cursus_scolaire.html" class="active">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
<article>
|
||||
<h2>Mon Cursus Scolaire</h2>Lorem, ipsum dolor sit amet <strong> elementos</strong> consectetur
|
||||
<em>ducere</em> adipisicing elit. Eius, eaque?
|
||||
|
||||
</article>
|
||||
<div><a href="mon-portfolio.html">retour a l'accueil</a></div>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html" class="active">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 296 KiB |
|
After Width: | Height: | Size: 251 KiB |
|
After Width: | Height: | Size: 378 KiB |
|
After Width: | Height: | Size: 153 KiB |
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 230 KiB |
@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>mon-portfolio</title>
|
||||
<link type="text/css" rel="stylesheet" href="en_savoir_plus.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="matrix"></canvas>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant" class=" trombinoscope">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html" class="active">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html" Vidéo></a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div>
|
||||
<section>
|
||||
<article>
|
||||
<h2>Presentation</h2>Lorem ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Repellendus voluptatibus beatae labore magni culpa cum perferendis corporis doloribus obcaecati ex
|
||||
neque, magnam perspiciatis vel odio eaque illo reiciendis nihil quaerat suscipit deleniti facilis atque.
|
||||
Omnis quod beatae eligendi, ipsum voluptate voluptatibus dolor dolorum ipsam nam! Eum voluptatem id
|
||||
harum. Animi fuga odio, tempore autem ullam aperiam, libero totam quos explicabo eius, officia expedita
|
||||
voluptate voluptatem exercitationem corrupti non neque culpa pariatur consequatur quidem provident.
|
||||
Incidunt aut aliquid quasi suscipit doloremque voluptatum ipsa aspernatur eaque alias veritatis odio,
|
||||
numquam nulla amet consequatur, illum corrupti at veniam libero culpa voluptatem ea dolorum? Omnis
|
||||
temporibus esse rem ex nesciunt necessitatibus vitae saepe sunt quo! Minima dolore ea, voluptate amet
|
||||
porro a in ex tempora obcaecati dicta quos aliquid quaerat, officia natus vel corrupti est perferendis
|
||||
perspiciatis eveniet nostrum? Nam, libero nulla pariatur magni explicabo corrupti quae quis harum hic
|
||||
consectetur sit totam, porro eveniet tenetur officiis et accusamus obcaecati odit alias nisi molestiae
|
||||
delectus rerum. Ad sapiente blanditiis eaque dolorem dolor omnis assumenda. Cumque magni nihil facere
|
||||
id, accusantium veritatis nisi vero voluptatum vitae sed rerum, adipisci doloribus beatae itaque quas
|
||||
nam. Ipsum assumenda doloribus beatae repudiandae hic molestias tempora obcaecati, omnis similique sunt
|
||||
a ratione quibusdam fuga nam blanditiis minima vitae fugit molestiae in autem asperiores tempore
|
||||
expedita, commodi incidunt. Aperiam, modi, aut nemo sint cupiditate voluptas nobis, quod optio minus
|
||||
accusantium libero. Odit dignissimos eum doloremque autem quod deleniti, voluptates dolorum quo, amet
|
||||
blanditiis similique nobis, ipsam eveniet accusamus nihil iste? Beatae, quos sed quia eius dignissimos
|
||||
reprehenderit minima, deleniti soluta veniam neque eaque facere nulla molestias omnis harum. Fuga
|
||||
architecto vitae corrupti, harum deleniti tenetur voluptatem a esse eveniet omnis pariatur magnam odit
|
||||
libero minus. Accusamus magni consequatur corporis repudiandae dolores animi, perspiciatis qui
|
||||
aspernatur dolorum cum voluptatum ipsa porro pariatur eligendi ratione accusantium, aliquam fugit
|
||||
placeat facilis temporibus quaerat vitae consectetur. Quia, optio nihil? Dignissimos doloremque deserunt
|
||||
placeat, laudantium cumque minima reprehenderit incidunt suscipit pariatur delectus? Accusamus eius
|
||||
repudiandae vel. Amet tempore aut tempora culpa quos excepturi nam quod, consectetur fugit atque aliquam
|
||||
nulla quam, assumenda ratione! Recusandae deserunt officiis reiciendis eligendi possimus voluptas sunt
|
||||
dolores blanditiis? Magnam non fugiat doloribus voluptates! Error, sed recusandae! Deleniti deserunt
|
||||
aspernatur dolore tenetur ipsum officia atque placeat nihil eaque! Molestiae maiores voluptatem alias
|
||||
veniam tempore repudiandae sunt quas, cum illo, architecto autem explicabo, numquam aliquid et
|
||||
exercitationem. Dolorem id mollitia quia dolorum laboriosam tempora aliquid, placeat voluptatem
|
||||
molestiae accusantium dolor fugit delectus saepe numquam, voluptatum, deleniti soluta reiciendis?
|
||||
Obcaecati possimus esse odit dignissimos eligendi aspernatur maiores tempore sunt natus alias,
|
||||
necessitatibus atque, at quisquam reiciendis, explicabo molestiae? Iure quasi porro ad similique magnam
|
||||
saepe praesentium, obcaecati consectetur dignissimos autem dolor laborum voluptatibus?sit amet
|
||||
consectetur adipisicing elit. Ducimus, quod! Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Distinctio aperiam laborum aspernatur tempora! Hic est repudiandae expedita nam. Qui nihil dolores
|
||||
commodi esse aliquid autem modi veritatis architecto aut alias id eveniet omnis beatae dolorem tempore
|
||||
libero laboriosam ea dolor, voluptates natus. Harum tenetur voluptatibus incidunt soluta officia rerum
|
||||
debitis?
|
||||
</article><a href="mon-portfolio.html">retour a l'accueil</a>
|
||||
<article>
|
||||
<h2>Caracteristique</h2>Lorem,Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, incidunt
|
||||
fuga, quos beatae officia expedita corrupti, voluptates quo dolor quaerat asperiores fugiat earum nihil
|
||||
alias aliquid cupiditate perspiciatis? Eveniet neque sint asperiores incidunt, ut nesciunt voluptatum
|
||||
corrupti temporibus necessitatibus consequuntur autem quaerat tempora, facilis veniam perferendis! Minus
|
||||
ad deserunt doloremque nulla veritatis magnam. Nobis nisi modi minima vitae fugiat, saepe nihil
|
||||
consequatur aliquid deleniti. Ducimus magnam consequatur amet id ullam, aperiam sapiente culpa sed
|
||||
accusantium blanditiis dolore, quam minus saepe aliquid pariatur placeat eius odit veritatis deleniti
|
||||
reiciendis corporis nostrum perferendis error non. Sed nobis totam ut nesciunt distinctio voluptas quas!
|
||||
Minus omnis dicta vel, aperiam sunt ducimus rerum a earum voluptatem nesciunt dolorem qui enim atque
|
||||
ipsa. Cum dignissimos tenetur dicta corrupti maiores earum incidunt hic harum rerum voluptate doloribus,
|
||||
dolorum modi amet reprehenderit eos quod ea quae aut doloremque! Veritatis praesentium, in aspernatur
|
||||
culpa est ipsa? Eaque, aliquam id consequuntur illo laborum quam ipsa, minima repellendus eligendi
|
||||
tempora ex sed, optio fugiat? Asperiores minus quisquam dolores quia eius, suscipit qui corporis harum
|
||||
inventore, ex natus praesentium maiores! Officia quis molestiae deserunt illo quisquam ad qui ipsam
|
||||
repellat dicta sunt earum natus dolores, modi ex neque iure iusto recusandae vero harum culpa atque
|
||||
voluptatem minima aliquid molestias. Sequi voluptatibus qui, saepe eius quam quibusdam nesciunt nostrum
|
||||
corporis tempore voluptas dolores dicta, assumenda quaerat blanditiis reprehenderit! Porro voluptate
|
||||
cupiditate itaque harum ad natus est, eos debitis expedita odit a temporibus accusamus molestias culpa
|
||||
nisi animi quae? Itaque excepturi id ullam eos veritatis sequi ea est architecto illo nisi esse,
|
||||
repudiandae nesciunt neque consequatur suscipit modi. Omnis, eligendi dolore porro soluta excepturi
|
||||
perspiciatis distinctio alias? Numquam distinctio exercitationem, harum totam optio quod vero possimus
|
||||
sit, officia eligendi et ducimus repellendus temporibus? Amet aperiam dignissimos ea animi molestias
|
||||
sunt rem expedita sed. ipsum dolor sit amet consectetur adipisicing elit. Eius, eaque?Lorem ipsum dolor
|
||||
sit amet consectetur adipisicing elit. Incidunt, harum veritatis. Modi necessitatibus laudantium tempora
|
||||
alias corrupti similique, voluptatem optio non, voluptatum enim repellendus. Sit quam excepturi tempora
|
||||
illum quidem.
|
||||
</article><a href="mon-portfolio.html">retour a l'accueil</a>
|
||||
</section>
|
||||
</div>
|
||||
<footer></footer>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
@ -0,0 +1,138 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 78px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
|
||||
}
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
}
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pres img {
|
||||
max-width: 50px;
|
||||
height: auto;
|
||||
border-radius: 10%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1ccd1c;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #21641d;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@ -0,0 +1,158 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 78px;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
aside a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
form {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: #010101ae;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 95%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 2px solid #35a015;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
margin-right: 10px;
|
||||
background-color: #16a927;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #056017;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 10px;
|
||||
}
|
||||
@ -0,0 +1,178 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>page contact</title>
|
||||
<link rel="stylesheet" href="form.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="matrix"></canvas>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php" class="active">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<?php
|
||||
$errors = [];
|
||||
$formData = [
|
||||
'nom' => '',
|
||||
'email' => '',
|
||||
'téléphone' => '',
|
||||
'motif' => '',
|
||||
'datetime' => '',
|
||||
'première_demande' => '',
|
||||
'message' => ''
|
||||
];
|
||||
|
||||
if ($_SERVER["REQUEST_METHOD"] === "POST") {
|
||||
if (empty($_POST['nom'])) {
|
||||
$errors[] = "Le champ nom est requis.";
|
||||
} else {
|
||||
$formData['nom'] = htmlspecialchars($_POST['nom']);
|
||||
}
|
||||
|
||||
if (empty($_POST['email'])) {
|
||||
$errors[] = "Le champ email est requis.";
|
||||
} elseif (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
|
||||
$errors[] = "L'adresse email est invalide.";
|
||||
} else {
|
||||
$formData['email'] = htmlspecialchars($_POST['email']);
|
||||
}
|
||||
|
||||
$formData['téléphone'] = htmlspecialchars($_POST['téléphone']);
|
||||
$formData['motif'] = htmlspecialchars($_POST['motif']);
|
||||
$formData['datetime'] = htmlspecialchars($_POST['datetime']);
|
||||
$formData['première_demande'] = htmlspecialchars($_POST['première_demande']);
|
||||
$formData['message'] = htmlspecialchars($_POST['message']);
|
||||
|
||||
if (empty($_POST['message'])) {
|
||||
$errors[] = "Le champ message est requis.";
|
||||
}
|
||||
|
||||
if (empty($errors)) {
|
||||
echo "<h2>Merci pour votre message !</h2>";
|
||||
echo "<p>Voici le récapitulatif de votre demande :</p>";
|
||||
echo "<p>Nom : " . $formData['nom'] . "</p>";
|
||||
echo "<p>Email : " . $formData['email'] . "</p>";
|
||||
echo "<p>Téléphone : " . $formData['téléphone'] . "</p>";
|
||||
echo "<p>Motif : " . $formData['motif'] . "</p>";
|
||||
echo "<p>Date et heure : " . $formData['datetime'] . "</p>";
|
||||
echo "<p>Première demande : " . $formData['première_demande'] . "</p>";
|
||||
echo "<p>Message : " . nl2br($formData['message']) . "</p>";
|
||||
exit;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<h2>Contactez-moi :</h2>
|
||||
<form method="POST" action="contact.php">
|
||||
<label for="nom">Nom <span style="color:red">*</span></label>
|
||||
<input type="text" name="nom" id="nom" required value="<?= htmlspecialchars($formData['nom']) ?>">
|
||||
|
||||
<label for="email">Adresse email <span style="color:red">*</span></label>
|
||||
<input type="email" name="email" id="email" required value="<?= htmlspecialchars($formData['email']) ?>">
|
||||
|
||||
<label for="téléphone">Numéro de téléphone</label>
|
||||
<input type="tel" name="téléphone" id="téléphone" value="<?= htmlspecialchars($formData['téléphone']) ?>">
|
||||
|
||||
<label for="motif">Motif de contact</label>
|
||||
<select name="motif" id="motif">
|
||||
<option value="">Choisir un motif</option>
|
||||
<option value="question" <?= $formData['motif'] == 'question' ? 'selected' : '' ?>>Une question ?</option>
|
||||
<option value="suggestion" <?= $formData['motif'] == 'suggestion' ? 'selected' : '' ?>>Proposition de collaboration</option>
|
||||
<option value="autre" <?= $formData['motif'] == 'autre' ? 'selected' : '' ?>>Autre</option>
|
||||
</select>
|
||||
|
||||
<label for="datetime">Créneau horaire</label>
|
||||
<input type="datetime-local" name="datetime" id="datetime" value="<?= htmlspecialchars($formData['datetime']) ?>">
|
||||
|
||||
<label>Première demande ?</label>
|
||||
<input type="radio" name="première_demande" value="oui" <?= $formData['première_demande'] == 'oui' ? 'checked' : '' ?>> Oui
|
||||
<input type="radio" name="première_demande" value="non" <?= $formData['première_demande'] == 'non' ? 'checked' : '' ?>> Non
|
||||
|
||||
<label for="message">Message <span style="color:red">*</span></label>
|
||||
<textarea name="message" id="message" required><?= htmlspecialchars($formData['message']) ?></textarea>
|
||||
|
||||
<button type="submit">Envoyer</button>
|
||||
<button type="reset">Réinitialiser</button>
|
||||
</form>
|
||||
|
||||
<?php
|
||||
if (!empty($errors)) {
|
||||
echo "<ul style='color:red;'>";
|
||||
foreach ($errors as $error) {
|
||||
echo "<li>$error</li>";
|
||||
}
|
||||
echo "</ul>";
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
|
||||
window.onresize = function() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 1014 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 163 KiB |
@ -0,0 +1,233 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 78px;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 40%;
|
||||
margin-left: 10%;
|
||||
padding: 20px;
|
||||
float: left;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
|
||||
}
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
}
|
||||
|
||||
aside {
|
||||
position: relative;
|
||||
float: inline-end;
|
||||
z-index: 1;
|
||||
width: 25%;
|
||||
margin-right: 10%;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
}
|
||||
|
||||
aside ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
aside li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
aside a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
aside img {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
aside a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.pres img {
|
||||
max-width: 50px;
|
||||
height: auto;
|
||||
border-radius: 10%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
aside img {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 20%;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.384),
|
||||
0 6px 20px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #00ff0096;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
a img {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #12c012;
|
||||
text-shadow: 0 0 10px #e3efe339, 0 0 20px #f3f7f35e;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
section {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
aside {
|
||||
margin-left: 0;
|
||||
margin-top: 20px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mon Portfolio - Veau Etienne</title>
|
||||
<link type="text/css" rel="stylesheet" href="mon-portfolio.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html" class="active">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<h2>Présentation</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, quod!</p>
|
||||
<a href="en-savoir-plus-bouton.html">En savoir plus</a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Caractéristiques</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, eaque?</p>
|
||||
<a href="en-savoir-plus-bouton.html">En savoir plus</a>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
<div>
|
||||
<aside>
|
||||
<h2>Des liens pour me suivre</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/watch?v=_S7WEVLbQ-Y">
|
||||
<img src="logo_youtube.jpg" alt="logo youtube" class="logo1">
|
||||
<span>YOUTUBE</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.instagram.com/?hl=fr">
|
||||
<img src="logo_insta.jpg" alt="logo instagram" class="logo1">
|
||||
<span>INSTAGRAM</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.snapchat.com">
|
||||
<img src="logo_snap.jpg" alt="logo snapchat" class="logo1">
|
||||
<span>SNAPCHAT</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,163 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 78px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
float: left;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
|
||||
}
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
}
|
||||
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
body img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pres .trombinoscope {
|
||||
max-width: 40px;
|
||||
height: 60px;
|
||||
border-radius: 10%;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #00ff0096;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #12c012;
|
||||
text-shadow: 0 0 10px #e3efe339, 0 0 20px #f3f7f35e;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #0d9d03;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>page image</title>
|
||||
<link type="text/css" rel="stylesheet" href="page_image.css">
|
||||
</head>
|
||||
<canvas id="matrix"></canvas>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant" class=" trombinoscope">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#" class="active">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html" class="active">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<h1>Galerie d'Art Surréaliste</h1>
|
||||
<section>
|
||||
<figure>
|
||||
<a href="IMG1.JPG" target="_blank">
|
||||
<img src="IMG1.JPG" alt="Description de l'image 1">
|
||||
</a>
|
||||
<figcaption>La porte du désert</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<a href="IMG2.JPG" target="_blank">
|
||||
<img src="IMG2.JPG" alt="Description de l'image 2">
|
||||
</a>
|
||||
<figcaption>Le temps qui s'échappe</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<a href="IMG3.JPG" target="_blank">
|
||||
<img src="IMG3.JPG" alt="Description de l'image 3">
|
||||
</a>
|
||||
<figcaption>L'oeil dans l'oeuf</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,164 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.pres img {
|
||||
max-width: 50px;
|
||||
height: auto;
|
||||
border-radius: 10%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #00ff0096;
|
||||
}
|
||||
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #12c012;
|
||||
text-shadow: 0 0 10px #e3efe339, 0 0 20px #f3f7f35e;
|
||||
}
|
||||
|
||||
vidéo {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
height: 320px;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), 0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 10px;
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>page vidéo</title>
|
||||
<link type="text/css" rel="stylesheet" href="page_video.css">
|
||||
</head>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant" class=" trombinoscope">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#" class="active">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html" class="active" Vidéo></a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<canvas id="matrix"></canvas>
|
||||
<div style="display: flex; align-items: flex-start; margin-top: 78px;">
|
||||
<video width="640" height="360" controls autoplay muted>
|
||||
<source src="BMW.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<h2>Présentation</h2>
|
||||
<p>La BMW M8 Gran Coupé Competition xDrive est équipée d'un moteur longitudinal avant huit cylindres en
|
||||
V suralimenté développant un couple maximum de 750 Nm dès 1800 trs/min ainsi qu'une puissance
|
||||
maximum de 625 ch à 6000 trs/min transmise aux quatre roues de 20 pouces par le biais d'une boîte de
|
||||
vitesses automatique à 8 rapports.</p>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 374 KiB |
@ -0,0 +1,159 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 78px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pres img {
|
||||
max-width: 50px;
|
||||
height: auto;
|
||||
border-radius: 10%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
body a {
|
||||
text-decoration: none;
|
||||
color: #f2f6f2;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a:hover {
|
||||
color: #21641d;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
width: 80%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
background-color: #070707af;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 10px;
|
||||
color: #f6f7f6;
|
||||
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: #030303bd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
td img {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
margin-top: 20px;
|
||||
color: #00ff00;
|
||||
}
|
||||
@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Planning Hebdomadaire</title>
|
||||
<link rel="stylesheet" href="table.css">
|
||||
</head>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant" class=" trombinoscope">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html" class="active">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<p>Média</p>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<canvas id="matrix"></canvas>
|
||||
<table>
|
||||
<caption>Mes activités extra-scolaires</caption>
|
||||
<tr>
|
||||
<th>Jour</th>
|
||||
<th>Créneaux</th>
|
||||
<th>Activités</th>
|
||||
<th>Images</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">Lundi</td>
|
||||
<td>17:00 - 18:30</td>
|
||||
<td>Révisions</td>
|
||||
<td rowspan="2"><img src="IMGH.JPG" alt="Révisions"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21:00 - 22:30</td>
|
||||
<td>Root Me</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mardi</td>
|
||||
<td>18:00 - 19:30</td>
|
||||
<td>Natation</td>
|
||||
<td><img src="IMGN.JPG" alt="Natation"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mercredi</td>
|
||||
<td rowspan="3">21:00 - 22:30</td>
|
||||
<td rowspan="3">Musculation</td>
|
||||
<td rowspan="3"><img src="IMGM.JPG" alt="Musculation"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vendredi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">Samedi</td>
|
||||
<td>10:00 - 11:30</td>
|
||||
<td>Révisions</td>
|
||||
<td rowspan="2"><img src="IMGF.JPG" alt="Football"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15:00 - 16:30</td>
|
||||
<td>Football</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">Dimanche</td>
|
||||
<td>10:00 - 11:30</td>
|
||||
<td rowspan="2">Révisions</td>
|
||||
<td rowspan="2"><img src="IMGH.JPG" alt="Révisions"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15:00 - 16:30</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
<a href="mon-portfolio.html">retour a l'accueil</a>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
@ -1,32 +0,0 @@
|
||||
body {
|
||||
padding-left: 11em;
|
||||
font-family: Georgia, 'Georgia', "Times New Roman",
|
||||
Times, serif;
|
||||
color: darksalmon;
|
||||
background-color: rgb(39, 39, 84) }
|
||||
ul.navbar {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
left: 1em;
|
||||
width: 9em }
|
||||
h1 {
|
||||
font-family: Helvetica, Geneva, Arial,
|
||||
SunSans-Regular, sans-serif }
|
||||
ul.navbar li {
|
||||
background: white;
|
||||
margin: 0.5em 0;
|
||||
padding: 0.3em;
|
||||
border-right: 1em solid darksalmon }
|
||||
ul.navbar a {
|
||||
text-decoration: none }
|
||||
a:link {
|
||||
color: blue }
|
||||
a:visited {
|
||||
color: darkblue }
|
||||
address {
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
border-top: thin dotted }
|
||||
|
After Width: | Height: | Size: 265 KiB |
Binary file not shown.
@ -0,0 +1,223 @@
|
||||
class Game2048 {
|
||||
constructor() {
|
||||
this.grid = Array(4).fill().map(() => Array(4).fill(0));
|
||||
this.score = 0;
|
||||
this.gridElement = document.querySelector('.grid');
|
||||
this.scoreElement = document.getElementById('score');
|
||||
this.setupGrid();
|
||||
this.addNumber();
|
||||
this.addNumber();
|
||||
this.setupEventListeners();
|
||||
this.showInstructions(); // Ajout de l'appel à la nouvelle méthode
|
||||
}
|
||||
|
||||
setupGrid() {
|
||||
for (let i = 0; i < 16; i++) {
|
||||
const cell = document.createElement('div');
|
||||
cell.classList.add('cell');
|
||||
this.gridElement.appendChild(cell);
|
||||
}
|
||||
this.updateGrid();
|
||||
}
|
||||
|
||||
updateGrid() {
|
||||
const cells = this.gridElement.getElementsByClassName('cell');
|
||||
for (let i = 0; i < 4; i++) {
|
||||
for (let j = 0; j < 4; j++) {
|
||||
const value = this.grid[i][j];
|
||||
const cell = cells[i * 4 + j];
|
||||
const previousValue = parseInt(cell.getAttribute('data-value')) || 0;
|
||||
|
||||
cell.textContent = value || '';
|
||||
cell.setAttribute('data-value', value);
|
||||
|
||||
// Ajouter les animations
|
||||
if (value && value !== previousValue) {
|
||||
// Animation de fusion si la valeur a doublé
|
||||
if (previousValue && value === previousValue * 2) {
|
||||
cell.classList.add('merge');
|
||||
}
|
||||
// Animation de glissement selon la direction
|
||||
else if (value) {
|
||||
const lastMove = this.lastMoveDirection;
|
||||
if (lastMove) {
|
||||
cell.classList.add(`slide-${lastMove}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Retirer les classes d'animation après leur exécution
|
||||
cell.addEventListener('animationend', () => {
|
||||
cell.classList.remove('merge', 'slide-left', 'slide-right', 'slide-up', 'slide-down');
|
||||
});
|
||||
}
|
||||
}
|
||||
this.scoreElement.textContent = this.score;
|
||||
}
|
||||
|
||||
addNumber() {
|
||||
const emptyCells = [];
|
||||
for (let i = 0; i < 4; i++) {
|
||||
for (let j = 0; j < 4; j++) {
|
||||
if (this.grid[i][j] === 0) {
|
||||
emptyCells.push({ x: i, y: j });
|
||||
}
|
||||
}
|
||||
}
|
||||
if (emptyCells.length) {
|
||||
const { x, y } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
|
||||
this.grid[x][y] = Math.random() < 0.9 ? 2 : 4;
|
||||
}
|
||||
}
|
||||
|
||||
move(direction) {
|
||||
let moved = false;
|
||||
const gridCopy = JSON.parse(JSON.stringify(this.grid));
|
||||
|
||||
// Convertir la direction en format plus simple
|
||||
this.lastMoveDirection = direction.toLowerCase().replace('arrow', '');
|
||||
|
||||
switch (direction) {
|
||||
case 'ArrowLeft':
|
||||
moved = this.moveLeft();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
moved = this.moveRight();
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
moved = this.moveUp();
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
moved = this.moveDown();
|
||||
break;
|
||||
}
|
||||
|
||||
if (moved) {
|
||||
this.addNumber();
|
||||
this.updateGrid();
|
||||
if (this.isGameOver()) {
|
||||
alert('Game Over! Score: ' + this.score);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
moveRow(row) {
|
||||
let arr = row.filter(x => x !== 0);
|
||||
for (let i = 0; i < arr.length - 1; i++) {
|
||||
if (arr[i] === arr[i + 1]) {
|
||||
arr[i] *= 2;
|
||||
this.score += arr[i];
|
||||
arr.splice(i + 1, 1);
|
||||
}
|
||||
}
|
||||
while (arr.length < 4) arr.push(0);
|
||||
return arr;
|
||||
}
|
||||
|
||||
moveLeft() {
|
||||
let moved = false;
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const oldRow = [...this.grid[i]];
|
||||
const newRow = this.moveRow([...oldRow]);
|
||||
this.grid[i] = newRow;
|
||||
if (JSON.stringify(oldRow) !== JSON.stringify(newRow)) moved = true;
|
||||
}
|
||||
return moved;
|
||||
}
|
||||
|
||||
moveRight() {
|
||||
let moved = false;
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const oldRow = [...this.grid[i]];
|
||||
const newRow = this.moveRow([...oldRow].reverse()).reverse();
|
||||
this.grid[i] = newRow;
|
||||
if (JSON.stringify(oldRow) !== JSON.stringify(newRow)) moved = true;
|
||||
}
|
||||
return moved;
|
||||
}
|
||||
|
||||
moveUp() {
|
||||
let moved = false;
|
||||
for (let j = 0; j < 4; j++) {
|
||||
const oldColumn = this.grid.map(row => row[j]);
|
||||
const newColumn = this.moveRow([...oldColumn]);
|
||||
for (let i = 0; i < 4; i++) {
|
||||
if (this.grid[i][j] !== newColumn[i]) {
|
||||
moved = true;
|
||||
this.grid[i][j] = newColumn[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
return moved;
|
||||
}
|
||||
|
||||
moveDown() {
|
||||
let moved = false;
|
||||
for (let j = 0; j < 4; j++) {
|
||||
const oldColumn = this.grid.map(row => row[j]);
|
||||
const newColumn = this.moveRow([...oldColumn].reverse()).reverse();
|
||||
for (let i = 0; i < 4; i++) {
|
||||
if (this.grid[i][j] !== newColumn[i]) {
|
||||
moved = true;
|
||||
this.grid[i][j] = newColumn[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
return moved;
|
||||
}
|
||||
|
||||
isGameOver() {
|
||||
// Check for empty cells
|
||||
for (let i = 0; i < 4; i++) {
|
||||
for (let j = 0; j < 4; j++) {
|
||||
if (this.grid[i][j] === 0) return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Check for possible merges
|
||||
for (let i = 0; i < 4; i++) {
|
||||
for (let j = 0; j < 4; j++) {
|
||||
const current = this.grid[i][j];
|
||||
if ((j < 3 && current === this.grid[i][j + 1]) ||
|
||||
(i < 3 && current === this.grid[i + 1][j])) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
|
||||
e.preventDefault();
|
||||
this.move(e.key);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('new-game').addEventListener('click', () => {
|
||||
this.grid = Array(4).fill().map(() => Array(4).fill(0));
|
||||
this.score = 0;
|
||||
this.addNumber();
|
||||
this.addNumber();
|
||||
this.updateGrid();
|
||||
});
|
||||
}
|
||||
|
||||
showInstructions() {
|
||||
const message = document.createElement('div');
|
||||
message.className = 'instruction-message';
|
||||
message.textContent = '↑ ↓ ← → Utilisez les flèches du clavier pour jouer';
|
||||
document.body.appendChild(message);
|
||||
|
||||
// Supprime le message après 60 secondes
|
||||
setTimeout(() => {
|
||||
message.remove();
|
||||
}, 60000);
|
||||
}
|
||||
}
|
||||
|
||||
// Start the game when the page loads
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new Game2048();
|
||||
});
|
||||
@ -0,0 +1,437 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
line-height: 1.6;
|
||||
background-color: #020D19;
|
||||
color: #f0f8ff;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #011222;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fbf7f9;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #48577f;
|
||||
}
|
||||
|
||||
.typewriter {
|
||||
color: #d1d1ec;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.cadre_photo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0;
|
||||
padding: 2rem;
|
||||
background-color: #02071a;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cadre_photo .photo {
|
||||
width: 185px;
|
||||
height: 185px;
|
||||
border-radius: 18%;
|
||||
border: 3px solid #000009;
|
||||
box-shadow: #020D19;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.cadre_photo p {
|
||||
flex: 1;
|
||||
color: #e6e6e6;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
|
||||
}
|
||||
|
||||
.qualite {
|
||||
margin: 1rem 0;
|
||||
padding: 2rem;
|
||||
background-color: #040818;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #040212;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
max-width: 1800px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.timeline-item .header-content {
|
||||
display: flex;
|
||||
/* Utilise flexbox pour aligner le titre et l'image sur une ligne */
|
||||
align-items: center;
|
||||
/* Aligne verticalement l'image et le texte */
|
||||
gap: 5rem;
|
||||
/* Ajoute un espace entre le texte et l'image */
|
||||
}
|
||||
|
||||
.timeline-item .header-content img {
|
||||
width: 200px;
|
||||
/* Largeur de l'image */
|
||||
height: auto;
|
||||
/* Conserve les proportions de l'image */
|
||||
border-radius: 8px;
|
||||
/* Coins arrondis */
|
||||
object-fit: cover;
|
||||
/* Assure un bon rendu de l'image */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
padding: 1.5rem;
|
||||
border-left: 3px solid #082d51;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #0d2b42;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
.logos-container {
|
||||
margin: 1rem auto;
|
||||
/* Centrer le rectangle */
|
||||
|
||||
background-color: #011222;
|
||||
/* Couleur de fond similaire à votre thème */
|
||||
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
/* Centrer les logos horizontalement */
|
||||
align-items: center;
|
||||
|
||||
gap: 1rem;
|
||||
/* Espacement entre les logos */
|
||||
}
|
||||
|
||||
.logos-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Masquer la barre de défilement */
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 65px;
|
||||
/* Taille des logos */
|
||||
height: 65px;
|
||||
/* Taille des logos */
|
||||
|
||||
|
||||
object-fit: contain;
|
||||
/* Ajuste l'image sans la déformer */
|
||||
}
|
||||
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
background-color: #333;
|
||||
border: 1px solid #444;
|
||||
color: #f0f8ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background-color: #011222;
|
||||
color: #f0f8ff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.game-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #0d082e;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.game-btn:hover {
|
||||
background-color: #45a049;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
|
||||
.contact-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - 100px);
|
||||
|
||||
}
|
||||
|
||||
.cv-preview {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.cv-image {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.1rem;
|
||||
background-color: #011222;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background-color: #040212;
|
||||
}
|
||||
|
||||
|
||||
.stars {
|
||||
color: #48577f;
|
||||
font-size: 1.2rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cv-preview {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.cv-image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cadre_photo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0;
|
||||
padding: 2rem;
|
||||
background-color: #02071a;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #f0f8ff;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: -0.5rem;
|
||||
}
|
||||
|
||||
.hamburger:hover {
|
||||
color: #48577f;
|
||||
}
|
||||
|
||||
|
||||
.cursus {
|
||||
max-width: 1300px;
|
||||
width: 90%;
|
||||
margin-top: 2rem;
|
||||
margin-left: 2rem;
|
||||
padding: 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
b {
|
||||
color: #729cea;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hamburger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
position: fixed;
|
||||
top: 0rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #011222;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding: 1rem 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav ul.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 95%;
|
||||
padding: 0 1rem;
|
||||
margin: 6rem auto 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles pour la vidéo intégrée */
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
/* Ratio 16:9 */
|
||||
height: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.video-wrapper.expanded {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90vw;
|
||||
height: 90vh;
|
||||
padding-bottom: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.video-wrapper iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.video-wrapper video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.video-wrapper.expanded video {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-btn {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
background-color: #ff0000;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.video-btn:hover {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
@ -0,0 +1,238 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #faf8ef;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 460px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
color: #776e65;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.score-container {
|
||||
display: inline-block;
|
||||
background: #bbada0;
|
||||
padding: 10px 20px;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#new-game {
|
||||
background: #8f7a66;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: #bbada0;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 100px);
|
||||
/* Définition explicite de la largeur */
|
||||
grid-gap: 15px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 0 2px #bbada0;
|
||||
/* Ajout d'une bordure sous forme d'ombre */
|
||||
margin: 0 auto;
|
||||
/* Centrage horizontal */
|
||||
width: fit-content;
|
||||
/* Ajustement automatique de la largeur */
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: rgba(238, 228, 218, 0.35);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #776e65;
|
||||
transition: all 0.15s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Animations de déplacement */
|
||||
.cell.merge {
|
||||
animation: merge 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.cell.slide-left {
|
||||
animation: slideLeft 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.cell.slide-right {
|
||||
animation: slideRight 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.cell.slide-up {
|
||||
animation: slideUp 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.cell.slide-down {
|
||||
animation: slideDown 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes merge {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeft {
|
||||
0% {
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRight {
|
||||
0% {
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
0% {
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.cell[data-value="2"] {
|
||||
background: #eee4da;
|
||||
}
|
||||
|
||||
.cell[data-value="4"] {
|
||||
background: #ede0c8;
|
||||
}
|
||||
|
||||
.cell[data-value="8"] {
|
||||
background: #f2b179;
|
||||
color: #f9f6f2;
|
||||
}
|
||||
|
||||
.cell[data-value="16"] {
|
||||
background: #f59563;
|
||||
color: #f9f6f2;
|
||||
}
|
||||
|
||||
.cell[data-value="32"] {
|
||||
background: #f67c5f;
|
||||
color: #f9f6f2;
|
||||
}
|
||||
|
||||
.cell[data-value="64"] {
|
||||
background: #f65e3b;
|
||||
color: #f9f6f2;
|
||||
}
|
||||
|
||||
.cell[data-value="128"] {
|
||||
background: #edcf72;
|
||||
color: #f9f6f2;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.cell[data-value="256"] {
|
||||
background: #edcc61;
|
||||
color: #f9f6f2;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.cell[data-value="512"] {
|
||||
background: #edc850;
|
||||
color: #f9f6f2;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.cell[data-value="1024"] {
|
||||
background: #edc53f;
|
||||
color: #f9f6f2;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.cell[data-value="2048"] {
|
||||
background: #edc22e;
|
||||
color: #f9f6f2;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.instruction-message {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(119, 110, 101, 0.9);
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
animation: fadeOut 1s ease-in 59s forwards;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const texts = [
|
||||
{ element: document.getElementById('presentation'), text: 'Etienne Veau -- Étudiant en B.U.T Informatique' },
|
||||
];
|
||||
|
||||
let currentText = 0;
|
||||
let currentChar = 0;
|
||||
const speed = 100;
|
||||
|
||||
function typeWriter() {
|
||||
if (currentText < texts.length) {
|
||||
if (currentChar < texts[currentText].text.length) {
|
||||
texts[currentText].element.textContent += texts[currentText].text.charAt(currentChar);
|
||||
currentChar++;
|
||||
setTimeout(typeWriter, speed);
|
||||
} else {
|
||||
currentText++;
|
||||
currentChar = 0;
|
||||
if (currentText < texts.length) {
|
||||
setTimeout(typeWriter, speed * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(typeWriter, 500);
|
||||
});
|
||||
Loading…
Reference in new issue