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.
158 lines
10 KiB
158 lines
10 KiB
<!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> |