alexandre.aboulin
3 years ago
commit
f0fefaa84c
13 changed files with 483 additions and 0 deletions
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 831 B |
|
After Width: | Height: | Size: 6.4 MiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
@ -0,0 +1,95 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="fr"> |
||||
|
<head> |
||||
|
<title>Lorem Ipsum</title> |
||||
|
<meta charset="utf-8"> |
||||
|
<link href="style/common.css" rel="stylesheet"> |
||||
|
<link href="style/index.css" rel="stylesheet"> |
||||
|
|
||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<header> |
||||
|
<nav id="navbar" class="container justify-between"> |
||||
|
<a href="index.html" id="navbar-left" class="container align-items-center"> |
||||
|
<img id="navbar-brand" width="40" height="40" src="img/logo.png" alt="Logo"> |
||||
|
<h1>Lorem Ipsum</h1> |
||||
|
</a> |
||||
|
<ul id="navbar-right" class="container"> |
||||
|
<li class="container align-items-center"><a href="#">Accueil</a></li> |
||||
|
<li class="container align-items-center"><a href="snake.html">Snake</a></li> |
||||
|
<li class="container align-items-center"><a href="https://www.youtube.com/watch?v=y1HCrYAVeu0" target="_blank">Nous contacter</a></li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
|
||||
|
<div id="header-content" class="container align-items-center justify-between"> |
||||
|
<div id="content-left"> |
||||
|
<h2 id="content-title">Texte écrit en gros, parce que c'est moderne.</h2> |
||||
|
<p id="content-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quis cum expedita accusantium, nemo error consequuntur quasi, quas, illum adipisci commodi officiis cupiditate dignissimos provident! Quis recusandae unde dicta laborum.</p> |
||||
|
<a id="content-button" class="button is-black" target="_blank" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Cliquez pour en savoir plus</a> |
||||
|
</div> |
||||
|
<div id="content-right"> |
||||
|
<img src="img/mac.svg" alt="Image Mac"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
|
||||
|
<section> |
||||
|
<div id="staff" class="section"> |
||||
|
<h1>Notre équipe de travail</h1> |
||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, ex. Corporis ipsa, facere non maxime quis veritatis quibusdam similique, aperiam hic minus animi reiciendis accusantium assumenda enim quam iste tempora. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, quae ducimus nemo tempore distinctio ratione alias accusantium, veritatis, cumque ab nam quibusdam ea quaerat! Possimus sed laudantium alias accusamus totam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nulla ratione, hic tempore, maiores cupiditate placeat molestias soluta sed suscipit dicta, voluptate aut nobis explicabo assumenda odio nam id nesciunt.</p> |
||||
|
<div id="staff-list" class="container container-wrap justify-around"> |
||||
|
<div class="card floating-shadow"> |
||||
|
<img src="img/zemmour.gif" alt="Eric Zemmour"> |
||||
|
<div> |
||||
|
<h2>Eric Zemmour</h2> |
||||
|
<p>Community Manager</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card floating-shadow"> |
||||
|
<img src="img/jmarie.webp" alt="Jean-Marie Le Pen"> |
||||
|
<div> |
||||
|
<h2>Jean-Marie Le Pen</h2> |
||||
|
<p>Développeur Full-Stack</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card floating-shadow"> |
||||
|
<img src="img/xi-jinping.jpg" alt="Xi Jinping"> |
||||
|
<div> |
||||
|
<h2>Xi Jinping</h2> |
||||
|
<p>Ressources humaines</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card floating-shadow"> |
||||
|
<img src="img/vladimir-putin.gif" alt="Vladimir Putin"> |
||||
|
<div> |
||||
|
<h2>Vladimir Putin</h2> |
||||
|
<p>Eradication de la concurrence</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div id="help"> |
||||
|
<h1>Besoin d'aide?</h1> |
||||
|
<input type="text" placeholder="Faites une recherche!"> |
||||
|
<a class="button is-border-white" href="">Rechercher</a> |
||||
|
</div> |
||||
|
|
||||
|
<div id="tutorial" class="section"> |
||||
|
<h1>Tutoriel de programmation indien</h1> |
||||
|
<div class="container"> |
||||
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/pYWX8hISm4A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
||||
|
<p id="tutoral-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates omnis iure dignissimos rerum repellat mollitia, sint inventore similique laborum sed quas eaque dicta itaque ea magni adipisci cum praesentium voluptatem? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure, maiores in nostrum illo harum molestias modi unde quos, aperiam totam, rem sequi sit animi. Amet consequuntur illum sint animi asperiores! Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium iure error a mollitia est, delectus voluptates dicta nesciunt iusto, ipsa dolores aperiam ratione blanditiis perspiciatis illum quasi nisi odit facilis!</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</section> |
||||
|
|
||||
|
<footer> |
||||
|
<p>Lorem Ipsum - 2021</p> |
||||
|
</footer> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,100 @@ |
|||||
|
function randInt(min, max) { |
||||
|
return Math.floor(Math.random() * max) + min; |
||||
|
} |
||||
|
|
||||
|
let snake = { |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
dir: 1, |
||||
|
score: 0, |
||||
|
tail: [] |
||||
|
}; |
||||
|
|
||||
|
let apple = { |
||||
|
x: randInt(0, 14), |
||||
|
y: randInt(0, 14), |
||||
|
reset: () => { |
||||
|
apple.x = randInt(0, 14); |
||||
|
apple.y = randInt(0, 14); |
||||
|
} |
||||
|
}; |
||||
|
// 4
|
||||
|
// 3 - 1
|
||||
|
// 2
|
||||
|
|
||||
|
function setup(){ |
||||
|
createCanvas(700, 700); |
||||
|
game(); |
||||
|
} |
||||
|
|
||||
|
function game(){ |
||||
|
let game = setInterval(() => { |
||||
|
background(240); |
||||
|
snake.tail.push([snake.x, snake.y]); |
||||
|
|
||||
|
if(snake.dir == 1) snake.x++; |
||||
|
else if(snake.dir == 2) snake.y++; |
||||
|
else if(snake.dir == 3) snake.x--; |
||||
|
else if(snake.dir == 4) snake.y--; |
||||
|
|
||||
|
if(snake.x == apple.x && snake.y == apple.y){ |
||||
|
snake.score++; |
||||
|
document.getElementById("score").innerText = snake.score; |
||||
|
apple.reset(); |
||||
|
} |
||||
|
else snake.tail.shift(); |
||||
|
|
||||
|
fill(51,203,41); |
||||
|
rect(snake.x*50,snake.y*50,50); |
||||
|
|
||||
|
let end = false; |
||||
|
snake.tail.forEach(tail => { |
||||
|
fill(169,246,164); |
||||
|
rect(tail[0]*50,tail[1]*50,50); |
||||
|
if(tail[0] == snake.x && tail[1] == snake.y) end = !end; |
||||
|
}) |
||||
|
|
||||
|
fill(240,55,55); |
||||
|
rect(apple.x*50,apple.y*50,50); |
||||
|
|
||||
|
if(snake.x >= 14 ||snake.y >= 14 || snake.x < 0 ||snake.y < 0 || end){ |
||||
|
background(0); |
||||
|
document.getElementById("loose").style.display="block"; |
||||
|
clearInterval(game); |
||||
|
} |
||||
|
}, 200) |
||||
|
} |
||||
|
|
||||
|
function keyPressed(){ |
||||
|
if(keyCode === RIGHT_ARROW && snake.dir != 3){ |
||||
|
snake.dir = 1; |
||||
|
} |
||||
|
else if(keyCode === DOWN_ARROW && snake.dir != 4){ |
||||
|
snake.dir = 2; |
||||
|
} |
||||
|
else if(keyCode === LEFT_ARROW && snake.dir != 1){ |
||||
|
snake.dir = 3; |
||||
|
} |
||||
|
else if(keyCode === UP_ARROW && snake.dir != 2){ |
||||
|
snake.dir = 4; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function restart(){ |
||||
|
document.getElementById("loose").style.display = "none"; |
||||
|
game(); |
||||
|
snake = { |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
dir: 1, |
||||
|
score: 0, |
||||
|
tail: [] |
||||
|
}; |
||||
|
apple.reset(); |
||||
|
} |
||||
|
|
||||
|
window.addEventListener("keydown", function(e) { |
||||
|
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) { |
||||
|
e.preventDefault(); |
||||
|
} |
||||
|
}, false); |
||||
@ -0,0 +1,41 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="fr"> |
||||
|
<head> |
||||
|
<title>Lorem Ipsum</title> |
||||
|
<meta charset="utf-8"> |
||||
|
<link href="style/common.css" rel="stylesheet"> |
||||
|
<link href="style/snake.css" rel="stylesheet"> |
||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<header> |
||||
|
<nav id="navbar" class="container justify-between"> |
||||
|
<a href="index.html" id="navbar-left" class="container align-items-center"> |
||||
|
<img id="navbar-brand" width="40" height="40" src="img/logo.png" alt="Logo"> |
||||
|
<h1>Lorem Ipsum</h1> |
||||
|
</a> |
||||
|
<ul id="navbar-right" class="container"> |
||||
|
<li class="container align-items-center"><a href="index.html">Accueil</a></li> |
||||
|
<li class="container align-items-center"><a href="#">Snake</a></li> |
||||
|
<li class="container align-items-center"><a href="https://www.youtube.com/watch?v=y1HCrYAVeu0" target="_blank">Nous contacter</a></li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
</header> |
||||
|
|
||||
|
<section> |
||||
|
<main></main> |
||||
|
<h2 id="score-text">Score: <span id="score">0</span></h2> |
||||
|
<p id="loose" style="display: none;">Vous avez perdu</p> |
||||
|
<p>Utilisez les flèches directionelles pour vous déplacer</p> |
||||
|
<button onclick="restart()" class="button is-black">Relancer</button> |
||||
|
</section> |
||||
|
|
||||
|
<footer> |
||||
|
<p>Lorem Ipsum - 2021</p> |
||||
|
</footer> |
||||
|
|
||||
|
<script src="js/snake.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,142 @@ |
|||||
|
:root{ |
||||
|
--main-background-color: rgb(250, 250, 250); |
||||
|
--main-color: rgb(35, 35, 35); |
||||
|
--secondary-color: rgb(243, 243, 243); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
body{ |
||||
|
margin: 0; |
||||
|
font-family: "Inter", sans-serif; |
||||
|
overflow-x: hidden; |
||||
|
background-color: var(--main-background-color); |
||||
|
color: var(--main-color); |
||||
|
} |
||||
|
|
||||
|
/*FLEX*/ |
||||
|
.container{ |
||||
|
display: flex; |
||||
|
} |
||||
|
.container-wrap{ |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
.justify-between{ |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.justify-around{ |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
.justify-center{ |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.align-items-center{ |
||||
|
align-items: center; |
||||
|
} |
||||
|
.flex-column{ |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*STYLE*/ |
||||
|
.floating-shadow{ |
||||
|
box-shadow: rgb(214, 214, 214) 0 0 10px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*BOUTTONS*/ |
||||
|
.button{ |
||||
|
display: block; |
||||
|
width: max-content; |
||||
|
text-decoration: none; |
||||
|
padding: 0.6em 1.4em; |
||||
|
font-size: 0.9em; |
||||
|
} |
||||
|
|
||||
|
.is-border-white{ |
||||
|
color: var(--secondary-color); |
||||
|
background-color: transparent; |
||||
|
border: 2px solid var(--secondary-color); |
||||
|
transition: 0.3s ease-in-out; |
||||
|
} |
||||
|
.is-border-white:hover{ |
||||
|
background-color: rgba(255, 255, 255, 0.2); |
||||
|
transition: 0.3s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.is-black{ |
||||
|
color: var(--secondary-color); |
||||
|
background-color: var(--main-color); |
||||
|
transition: 0.3s ease-in-out; |
||||
|
border: none; |
||||
|
} |
||||
|
.is-black:hover{ |
||||
|
color: var(--secondary-color); |
||||
|
background-color: black; |
||||
|
transition: 0.3s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
/*---------------NAV---------------*/ |
||||
|
#navbar{ |
||||
|
width: 94%; |
||||
|
position: fixed; |
||||
|
background-color: white; |
||||
|
z-index: 1; |
||||
|
padding: 0 3%; |
||||
|
} |
||||
|
#navbar-brand{ |
||||
|
margin-right: 0.4em; |
||||
|
} |
||||
|
#navbar-left{ |
||||
|
color: var(--main-color); |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
#navbar-right{ |
||||
|
list-style: none; |
||||
|
} |
||||
|
#navbar-right > li{ |
||||
|
margin-left: 0.4em; |
||||
|
} |
||||
|
#navbar-right > li > a{ |
||||
|
color: var(--main-color); |
||||
|
text-decoration: none; |
||||
|
padding: 0.4em 0.8em; |
||||
|
transition: 0.1s ease-in-out; |
||||
|
} |
||||
|
#navbar-right > li > a:hover{ |
||||
|
color: black; |
||||
|
transition: 0.1s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
/*card*/ |
||||
|
.card{ |
||||
|
background-color: rgb(245, 245, 245); |
||||
|
width: fit-content; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.card > img{ |
||||
|
object-fit: cover; |
||||
|
width: 30vh; |
||||
|
height: 30vh; |
||||
|
} |
||||
|
/*SECTION-----------*/ |
||||
|
.section{ |
||||
|
width: 80%; |
||||
|
margin: 0 auto; |
||||
|
margin-bottom: 2em; |
||||
|
} |
||||
|
.section-title{ |
||||
|
margin-top: 1em; |
||||
|
font-size: 2em; |
||||
|
} |
||||
|
|
||||
|
/*FOOTER*/ |
||||
|
footer{ |
||||
|
background-color: rgb(233, 233, 233); |
||||
|
padding: 1em 1em; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
footer > img{ |
||||
|
margin-left: 1em; |
||||
|
} |
||||
@ -0,0 +1,89 @@ |
|||||
|
/*HEADER-------------------------------*/ |
||||
|
header{ |
||||
|
height: 100vh; |
||||
|
} |
||||
|
#header-content{ |
||||
|
width: 80%; |
||||
|
margin: 0 auto 0 auto; |
||||
|
transform: translate(0, 50%); |
||||
|
text-align: center; |
||||
|
animation: 1s ease-in-out fade-in; |
||||
|
} |
||||
|
#content-left{ |
||||
|
width: 40%; |
||||
|
} |
||||
|
#content-right{ |
||||
|
width: 35%; |
||||
|
height: 35%; |
||||
|
} |
||||
|
#content-right > img{ |
||||
|
max-width: 100%; |
||||
|
max-height: 100%; |
||||
|
} |
||||
|
#content-title{ |
||||
|
font-size: 4.5em; |
||||
|
font-weight: 900; |
||||
|
margin: 0 0 0.3em 0; |
||||
|
} |
||||
|
#content-text{ |
||||
|
font-size: 1.1em; |
||||
|
margin: 0 0 1em 0; |
||||
|
} |
||||
|
#content-button{ |
||||
|
font-size: 1.1em; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
/*SECTION*/ |
||||
|
|
||||
|
#staff > h1{ |
||||
|
margin: 0 0 0.5em 0; |
||||
|
} |
||||
|
#staff > p{ |
||||
|
margin: 0 1em 3em 1em; |
||||
|
} |
||||
|
|
||||
|
#help{ |
||||
|
background-color: rgb(22, 22, 22); |
||||
|
color: var(--secondary-color); |
||||
|
text-align: center; |
||||
|
padding: 2em 0; |
||||
|
margin: 4em 0; |
||||
|
} |
||||
|
#help > h1{ |
||||
|
font-size: 2em; |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
#help > input{ |
||||
|
width: 70%; |
||||
|
background-color: var(--main-background-color); |
||||
|
padding: 0.6em; |
||||
|
border: none; |
||||
|
border-radius: 20px; |
||||
|
} |
||||
|
#help > input:focus{ |
||||
|
outline: none; |
||||
|
} |
||||
|
#help > a { |
||||
|
margin: 1.5em auto 0 auto; |
||||
|
} |
||||
|
#tutoral iframe{ |
||||
|
margin-right: 1em; |
||||
|
} |
||||
|
#tutoral-text{ |
||||
|
width: 60%; |
||||
|
margin-left: 2em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*ANIMATIONS*/ |
||||
|
@keyframes fade-in { |
||||
|
0%{ |
||||
|
opacity: 0; |
||||
|
transform: translate(100%, 50%); |
||||
|
} |
||||
|
100%{ |
||||
|
opacity: 1; |
||||
|
transform: translate(0%, 50%); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
#navbar{ |
||||
|
position: static; |
||||
|
} |
||||
|
section{ |
||||
|
margin-top: 1em; |
||||
|
text-align: center; |
||||
|
} |
||||
|
#score-text{ |
||||
|
font-size: 1.5em; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
section > button{ |
||||
|
margin: 0 auto 1em auto; |
||||
|
font-size: 1.5em; |
||||
|
} |
||||
Loading…
Reference in new issue