commit f0fefaa84c02923702b284a411e6a4fcb231f5d6 Author: alexandre.aboulin Date: Mon Dec 13 09:24:39 2021 +0100 Commit qualitatif diff --git a/img/Thumbs.db b/img/Thumbs.db new file mode 100644 index 0000000..3df6f26 Binary files /dev/null and b/img/Thumbs.db differ diff --git a/img/jmarie.webp b/img/jmarie.webp new file mode 100644 index 0000000..4132af6 Binary files /dev/null and b/img/jmarie.webp differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..25a5192 Binary files /dev/null and b/img/logo.png differ diff --git a/img/mac.svg b/img/mac.svg new file mode 100644 index 0000000..0951884 --- /dev/null +++ b/img/mac.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/vladimir-putin.gif b/img/vladimir-putin.gif new file mode 100644 index 0000000..878dfa1 Binary files /dev/null and b/img/vladimir-putin.gif differ diff --git a/img/xi-jinping.jpg b/img/xi-jinping.jpg new file mode 100644 index 0000000..8dfbcd8 Binary files /dev/null and b/img/xi-jinping.jpg differ diff --git a/img/zemmour.gif b/img/zemmour.gif new file mode 100644 index 0000000..ab6d582 Binary files /dev/null and b/img/zemmour.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6a5ffb9 --- /dev/null +++ b/index.html @@ -0,0 +1,95 @@ + + + + Lorem Ipsum + + + + + + + + +

+ + +

+

+

Texte écrit en gros, parce que c'est moderne.

+

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.

+ Cliquez pour en savoir plus +

+

+

+

+

+

+ +

+

+

Notre équipe de travail

+

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.

+

+

+

Eric Zemmour

+

+

Eric Zemmour

+

Community Manager

+

+

+

+

Jean-Marie Le Pen

+

+

Jean-Marie Le Pen

+

Développeur Full-Stack

+

+

+

+

Xi Jinping

+

+

Xi Jinping

+

Ressources humaines

+

+

+

+

Vladimir Putin

+

+

Vladimir Putin

+

Eradication de la concurrence

+

+

+

+

+ +

+

Besoin d'aide?

+ + Rechercher +

+ +

+

Tutoriel de programmation indien

+

+ +

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!

+

+

+ + +

+ + + + \ No newline at end of file diff --git a/js/snake.js b/js/snake.js new file mode 100644 index 0000000..2d669ae --- /dev/null +++ b/js/snake.js @@ -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); \ No newline at end of file diff --git a/snake.html b/snake.html new file mode 100644 index 0000000..45b940f --- /dev/null +++ b/snake.html @@ -0,0 +1,41 @@ + + + + Lorem Ipsum + + + + + + + +

+ +

+ +

+

+

Score: 0

+ +

Utilisez les flèches directionelles pour vous déplacer

+ +

+ + + + + + + \ No newline at end of file diff --git a/style/common.css b/style/common.css new file mode 100644 index 0000000..e0f4608 --- /dev/null +++ b/style/common.css @@ -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; +} \ No newline at end of file diff --git a/style/index.css b/style/index.css new file mode 100644 index 0000000..d05b4f2 --- /dev/null +++ b/style/index.css @@ -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%); + } +} \ No newline at end of file diff --git a/style/snake.css b/style/snake.css new file mode 100644 index 0000000..d8be102 --- /dev/null +++ b/style/snake.css @@ -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; +} \ No newline at end of file