Compare commits
No commits in common. "d28772b1db7149e725b7c5275381a4a26a277476" and "e498f06d7f3aa90587e21a8383130d0b73c400c0" have entirely different histories.
d28772b1db
...
e498f06d7f
42
DEFI.MD
Normal file
42
DEFI.MD
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
# Defis à Relever :
|
||||||
|
|
||||||
|
1. Réseau social
|
||||||
|
2. Escape Game
|
||||||
|
3. RickRoll moi pour une bonne cause
|
||||||
|
4. Une convention de nommage pas comme les autres
|
||||||
|
5. 404 GAME FOUND
|
||||||
|
|
||||||
|
|
||||||
|
## Idée
|
||||||
|
|
||||||
|
|
||||||
|
Notre idée pour la buit de l'info est de concevoir et réaliser un Escape Game !
|
||||||
|
Le but de cet escape game est ~~de gagner~~ de trouver qui est l'assation de Rick Astley, le célèbre danseur de [cette vidéo](https://www.youtube.com/watch?v=dQw4w9WgXcQ) qui a fait le tour monde il y a quelques années.
|
||||||
|
|
||||||
|
|
||||||
|
### 1 - Réseau social
|
||||||
|
|
||||||
|
Communiquer avec ses amis sur internet est génial. On peut partager des photos, des vidéos, des liens. On peut discutter entre nous, faire des diffusions en direct.
|
||||||
|
|
||||||
|
Nous developpons donc un réseau social afin que tout le monde puisse échanger avec ses amis des moments de joie !r
|
||||||
|
|
||||||
|
### 2 - Escape Game
|
||||||
|
|
||||||
|
Une terrible nouvelle est arrivée dans la province Tewith. Le célèbre danseur Rick Astley est porté disparu. Une rumeur est diffusée sur {INSERER NOM RESEAU SOCAIL} comme quoi, notre chanteur serait mort.
|
||||||
|
|
||||||
|
Votre but, est d'enqueter autour de son étonante disparition en interrogeant les dernières personnes avec qui il a pu discuter via son compte {INSERER NOM RESEAU SOCAIL}.
|
||||||
|
|
||||||
|
### 3 - RickRoll moi pour une bonne cause
|
||||||
|
|
||||||
|
Ce défi de montrer notre ami Rick Astley en train de danser, s'affichera lorsque l'on arrive à la fin de l'escape game.
|
||||||
|
|
||||||
|
### 4 - Une convention de nommage pas comme les autres
|
||||||
|
|
||||||
|
Defi abandonné :c
|
||||||
|
|
||||||
|
### 5 - 404 GAME FOUND
|
||||||
|
|
||||||
|
Lorsque qu'une personne a perdue dans l'enqupete qu'elle doit mener, où qu'elle s'est perdue dans notre réseau social : elle est redirigée vers un jeu ou le but est d'aider rick à atteindre la lune de la nuit de l'info !
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 146 B After Width: | Height: | Size: 146 B |
@ -1,4 +1,3 @@
|
|||||||
<!--AUTHOR Chiara RELEVAT- Nuit de l'info 2018-->
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<!--https:/www.w3schools.com/graphics/game_intro.asp-->
|
<!--https:/www.w3schools.com/graphics/game_intro.asp-->
|
||||||
<!--https:/www.trex-game.skipser.com-->
|
<!--https:/www.trex-game.skipser.com-->
|
||||||
@ -9,12 +8,11 @@
|
|||||||
<meta charset="UTF8" />
|
<meta charset="UTF8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||||
<title>404 - Game Found !</title>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!--Jeux principal-->
|
<!--Jeux principal-->
|
||||||
<h1 class="center">Fuyez l'homme en noir ! 404 - Game Found !</h1>
|
<h1 class="center">Fuyez l'homme en noir !</h1>
|
||||||
<script src="./scores.js">
|
<script src="./scores.js">
|
||||||
startGame()
|
startGame()
|
||||||
</script>
|
</script>
|
||||||
@ -76,7 +76,7 @@ function component(largeur, longueur, color, x, y, type) {
|
|||||||
function startGame() {
|
function startGame() {
|
||||||
personnage = new component(30, 50, "blue", 10, 120);
|
personnage = new component(30, 50, "blue", 10, 120);
|
||||||
personnage.gravity = 0.05;
|
personnage.gravity = 0.05;
|
||||||
score = new component("30px", "Consolas", "black", 500, 40, "text");
|
score = new component("30px", "Consolas", "black", 280, 40, "text");
|
||||||
plateau.start();
|
plateau.start();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -84,7 +84,6 @@ function updateGameArea() {
|
|||||||
var x, longueur, gap, longueurMin, longueurMax, minGap, maxGap;
|
var x, longueur, gap, longueurMin, longueurMax, minGap, maxGap;
|
||||||
for (i = 0; i < obstacle.length; i += 1) {
|
for (i = 0; i < obstacle.length; i += 1) {
|
||||||
if (personnage.crashWith(obstacle[i])) {
|
if (personnage.crashWith(obstacle[i])) {
|
||||||
this.jeuxFini(i);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -92,8 +91,8 @@ function updateGameArea() {
|
|||||||
plateau.frameNo += 1;
|
plateau.frameNo += 1;
|
||||||
if (plateau.frameNo == 1 || everyinterval(150)) { //pour créer les barres
|
if (plateau.frameNo == 1 || everyinterval(150)) { //pour créer les barres
|
||||||
x = plateau.canvas.width;
|
x = plateau.canvas.width;
|
||||||
longueurMin = 55;
|
longueurMin = 20;
|
||||||
longueurMax = 500;
|
longueurMax = 150;
|
||||||
longueur = Math.floor(Math.random() * (longueurMax - longueurMin + 1) + longueurMin);
|
longueur = Math.floor(Math.random() * (longueurMax - longueurMin + 1) + longueurMin);
|
||||||
minGap = 50;
|
minGap = 50;
|
||||||
maxGap = 200;
|
maxGap = 200;
|
||||||
@ -117,15 +116,6 @@ function everyinterval(n) {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function jeuxFini(i) {
|
|
||||||
var messageMort;
|
|
||||||
if (personnage.crashWith(obstacle[i])) {
|
|
||||||
messageMort = new component("30px", "Consolas", "red", 150, 80, "text");
|
|
||||||
messageMort.text = "Il vous à rattrapé...";
|
|
||||||
messageMort.update();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function sauter(n) {
|
function sauter(n) {
|
||||||
personnage.gravity = n;
|
personnage.gravity = n;
|
||||||
}
|
}
|
||||||
@ -18,7 +18,6 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
position: relative;
|
|
||||||
margin-top: -10px;
|
margin-top: -10px;
|
||||||
margin-left: +300px;
|
margin-left: +300px;
|
||||||
}
|
}
|
||||||
45
README.md
45
README.md
@ -1,45 +1,2 @@
|
|||||||
# [NuitDeLinfo](https://junkjumper.github.io/NuitDeLinfo2019/)
|
# NuitDeLinfo
|
||||||
Notre Équipe est super ébouriffante !
|
Notre Équipe est super ébouriffante !
|
||||||
|
|
||||||
## Defis à Relever :
|
|
||||||
|
|
||||||
1. Réseau social
|
|
||||||
2. Escape Game
|
|
||||||
3. RickRoll moi pour une bonne cause
|
|
||||||
4. Une convention de nommage pas comme les autres
|
|
||||||
5. 404 GAME FOUND
|
|
||||||
|
|
||||||
|
|
||||||
## Idée
|
|
||||||
|
|
||||||
|
|
||||||
Notre idée pour la buit de l'info est de concevoir et réaliser un Escape Game !
|
|
||||||
Le but de cet escape game est ~~de gagner~~ de trouver qui est l'assation de Rick Astley, le célèbre danseur de [cette vidéo](https://www.youtube.com/watch?v=dQw4w9WgXcQ) qui a fait le tour monde il y a quelques années.
|
|
||||||
|
|
||||||
|
|
||||||
### 1 - Réseau social
|
|
||||||
|
|
||||||
Communiquer avec ses amis sur internet est génial. On peut partager des photos, des vidéos, des liens. On peut discutter entre nous, faire des diffusions en direct.
|
|
||||||
|
|
||||||
Nous developpons donc un réseau social afin que tout le monde puisse échanger avec ses amis des moments de joie !r
|
|
||||||
|
|
||||||
### 2 - Escape Game
|
|
||||||
|
|
||||||
Une terrible nouvelle est arrivée dans la province Tewith. Le célèbre danseur Rick Astley est porté disparu. Une rumeur est diffusée sur {INSERER NOM RESEAU SOCAIL} comme quoi, notre chanteur serait mort.
|
|
||||||
|
|
||||||
Votre but, est d'enqueter autour de son étonante disparition en interrogeant les dernières personnes avec qui il a pu discuter via son compte {INSERER NOM RESEAU SOCAIL}.
|
|
||||||
|
|
||||||
### 3 - RickRoll moi pour une bonne cause
|
|
||||||
|
|
||||||
Ce défi de montrer notre ami Rick Astley en train de danser, s'affichera lorsque l'on arrive à la fin de l'escape game.
|
|
||||||
|
|
||||||
### 4 - Une convention de nommage pas comme les autres
|
|
||||||
|
|
||||||
Defi abandonné :c
|
|
||||||
|
|
||||||
### 5 - 404 GAME FOUND
|
|
||||||
|
|
||||||
Lorsque qu'une personne a perdue dans l'enqupete qu'elle doit mener, où qu'elle s'est perdue dans notre réseau social : elle est redirigée vers un jeu ou le but est d'aider rick à atteindre la lune de la nuit de l'info !
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 130 B |
102
index.html
102
index.html
@ -1,102 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="fr">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="./styles/styles.css" />
|
|
||||||
<title>Rick Astley</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<nav>
|
|
||||||
|
|
||||||
<div class="navbar">
|
|
||||||
<img src="">
|
|
||||||
<a href="index.html">WOUTIPOUP !</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
<!-- PROFILE -->
|
|
||||||
|
|
||||||
<section class="section section-profile">
|
|
||||||
<div class="section-profile-informations">
|
|
||||||
<img src="img/Vienna3-1600x1067.jpg">
|
|
||||||
<h2>Rick Astley</h2>
|
|
||||||
<span id=defi><a href="https://twitter.com/search?q=%23DefiJobOpp&src=typeahead_click" target="_blank">#DefiJobOpp</a>   <a href="https://twitter.com/JobOpportunIT_" target="_blank">@JobOpportunIT_</a></span>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<button class="button secret"><a href="rickroll.html">_________</a></button>
|
|
||||||
|
|
||||||
<div class="clearfix">
|
|
||||||
<!-- Premiere colonne -->
|
|
||||||
<div class="box" style="background-color:#F5F5F5;width:40%">
|
|
||||||
<p class="title">Biographie</p>
|
|
||||||
<p class="bio">Richard Paul Astley dit Rick Astley, né le 6 février 1966 à Newton-le-Willows près de Warrington dans le Merseyside, est un chanteur et auteur-compositeur-interprète anglais.</p>
|
|
||||||
<p class="title">Amis</p>
|
|
||||||
<p class="amis"><img src="https://www.lifeofpix.com/wp-content/uploads/2018/09/18062018-DSCF7954-1600x2133.jpg">
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2019/10/ExportInsta_180210-0996-1600x1067.jpg">
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2019/10/DSC00474-1600x1067.jpg">
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2019/10/Photos_190223-26_Bulgarie-7306-1600x2400.jpg">
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2018/10/IMG_20170110_001633-1600x1067.jpg">
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2019/08/fabiancatoni_2-1600x2134.jpg">
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2019/11/bbggf-1600x1185.jpg">
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2019/11/Vienna6-1600x1067.jpg">
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2019/10/RAW3106-1600x952.jpg">
|
|
||||||
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2019/08/fabiancatoni_1-1600x2240.jpg">
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2019/02/180921_9056-1600x1200.jpg"></p>
|
|
||||||
<p class="voirplus"><a href="amis.html">Voir plus</a></p>
|
|
||||||
<p class="title">Gallery de photos</p>
|
|
||||||
<p><img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
|
|
||||||
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
|
|
||||||
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
|
|
||||||
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
|
|
||||||
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
|
|
||||||
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery"></p>
|
|
||||||
<p class="voirplus"><a href="gallery.html">Voir plus</a></p>
|
|
||||||
|
|
||||||
<!-- Deuxieme colonne -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="box" style="background-color:#F5F5F5;width:60%">
|
|
||||||
<div class="post">
|
|
||||||
<div class="titre2">
|
|
||||||
<img src="img/Vienna3-1600x1067.jpg">
|
|
||||||
<h2>Rick Astley</h2><span>#DefiJobOpp #NuitDeLinfo2019 | ✎ Post épinglé</span>
|
|
||||||
</div>
|
|
||||||
<img src="https://www.lifeofpix.com/wp-content/uploads/2019/02/270-jira0064-chim-eye-1600x1059.jpg">
|
|
||||||
<p>Je me suis dis que rechercher dans ma barre de recher les mots lapins, poneys et meutres me rendaient perplexe ! Essayez d'y ajouter ces mots clefs à l'URL !</p>
|
|
||||||
<hr>
|
|
||||||
<span>Commentaires</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="post">
|
|
||||||
<div class="titre2">
|
|
||||||
<img src="img/Vienna3-1600x1067.jpg">
|
|
||||||
<h2>Rick Astley</h2><span>#Thread | ✎ Post posté hier</span>
|
|
||||||
</div>
|
|
||||||
<p>La nuit de l'ino, j'aime bien ! Je me suis découvert une passion !</p>
|
|
||||||
<hr>
|
|
||||||
<span>Commentaires</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="post">
|
|
||||||
<div class="titre2">
|
|
||||||
<img src="img/Vienna3-1600x1067.jpg">
|
|
||||||
<h2>Rick Astley</h2><span>#Thread | ✎ Post posté il y a 2 jours</span>
|
|
||||||
</div>
|
|
||||||
<p>Quoi de mieux qu'un lorem ipsum ? :D ! Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec venenatis dui eu lorem eleifend interdum. Suspendisse potenti. In id lectus ac lorem varius rutrum.
|
|
||||||
Cras mollis sodales massa, at malesuada sapien feugiat eget.</p>
|
|
||||||
<hr>
|
|
||||||
<span>Commentaires</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer>
|
|
||||||
<pre class="Copyrights">Site crée par José, Chiara et Léa.</pre>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="fr">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="./styles/styles.css" />
|
|
||||||
<title>Rickroll !</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<iframe width="100%" height="900px" src="https://www.youtube.com/embed/dQw4w9WgXcQ?list=PLahKLy8pQdCM0SiXNn3EfGIXX19QGzUG3" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
Before Width: | Height: | Size: 374 KiB After Width: | Height: | Size: 374 KiB |
|
Before Width: | Height: | Size: 179 KiB After Width: | Height: | Size: 179 KiB |
33
site/index.html
Normal file
33
site/index.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||||
|
<title>Titre de mon document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="ACCEUIL.html">ACCEUIL</a>
|
||||||
|
<a href="APROPOS.html">A PROPOS DE NOUS</a>
|
||||||
|
<a href="BOUTIQUE.html">BOUTIQUE</a>
|
||||||
|
<a href="CONTACT.html">CONTACT</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="APROPOS.html" class="button button2">
|
||||||
|
<h2>CONTINUE</h2>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<pre class="Copyrights">Site crée par José, Chiara et Léa.</pre>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -54,9 +54,7 @@
|
|||||||
<!-- Premiere colonne -->
|
<!-- Premiere colonne -->
|
||||||
<div class="box" style="background-color:#F5F5F5;width:40%">
|
<div class="box" style="background-color:#F5F5F5;width:40%">
|
||||||
<p class="title">Biographie</p>
|
<p class="title">Biographie</p>
|
||||||
<p class="bio">Sed sit amet elit mi. Vivamus laoreet lorem vel justo convallis, eu malesuada dui dictum. Aenean rutrum, turpis sagittis tristique volutpat, dolor turpis laoreet mauris, sit amet porta quam nibh vitae ipsum. Vivamus hendrerit tincidunt
|
<p class="bio">Sed sit amet elit mi. Vivamus laoreet lorem vel justo convallis, eu malesuada dui dictum. Aenean rutrum, turpis sagittis tristique volutpat, dolor turpis laoreet mauris, sit amet porta quam nibh vitae ipsum. Vivamus hendrerit tincidunt velit in mollis. Fusce porttitor vel lectus sed porta. Nulla ac varius justo, rhoncus aliquam dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec venenatis dui eu lorem eleifend interdum. Suspendisse potenti. In id lectus ac lorem varius rutrum. Cras mollis sodales massa, at malesuada sapien feugiat eget.</p>
|
||||||
velit in mollis. Fusce porttitor vel lectus sed porta. Nulla ac varius justo, rhoncus aliquam dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec venenatis dui eu lorem eleifend interdum.
|
|
||||||
Suspendisse potenti. In id lectus ac lorem varius rutrum. Cras mollis sodales massa, at malesuada sapien feugiat eget.</p>
|
|
||||||
<p class="title">Amis</p>
|
<p class="title">Amis</p>
|
||||||
<p><img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
|
<p><img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
|
||||||
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
|
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
|
||||||
@ -84,26 +82,9 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="box" style="background-color:#ccc;width:60%">
|
<div class="box" style="background-color:#ccc;width:60%">
|
||||||
<div class="post-gallery">
|
<div class="post">
|
||||||
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="imgX" />
|
<img src="img/Vienna3-1600x1067.jpg"><br><br><br>
|
||||||
</div>
|
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec venenatis dui eu lorem eleifend interdum. Suspendisse potenti. In id lectus ac lorem varius rutrum. Cras mollis sodales massa, at malesuada sapien feugiat eget.</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="box" style="background-color:#ccc;width:60%">
|
|
||||||
<div class="post-gallery">
|
|
||||||
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="imgX" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="box" style="background-color:#ccc;width:60%">
|
|
||||||
<div class="post-gallery">
|
|
||||||
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="imgX" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="box" style="background-color:#ccc;width:60%">
|
|
||||||
<div class="post-gallery">
|
|
||||||
<img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="imgX" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -2,20 +2,16 @@ body {
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-family: calibri;
|
font-family: calibri;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #4F067C;
|
background-color: ghostwhite;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
body>main {
|
body > main {
|
||||||
padding-top: 49px;
|
padding-top: 49px;
|
||||||
padding-left: 15%;
|
padding-left: 15%;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*==== BARRE DE NAVIGATION ====*/
|
/*==== BARRE DE NAVIGATION ====*/
|
||||||
|
|
||||||
@ -27,11 +23,12 @@ nav {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
color: white;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #12003E;
|
background-color: #8A0457;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -48,9 +45,14 @@ nav {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar a:hover {
|
.navbar a:hover {
|
||||||
background: #1A0044;
|
background: #80024A;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background-image: url("Photos_190223-26_Bulgarie-7306-1600x2400.jpg");
|
||||||
|
background-color: red;
|
||||||
|
height: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
/* ================================= */
|
/* ================================= */
|
||||||
|
|
||||||
@ -64,7 +66,7 @@ section.section-profile {
|
|||||||
display: flex;
|
display: flex;
|
||||||
padding: 180px 30px 0;
|
padding: 180px 30px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-image: url(https://www.lifeofpix.com/wp-content/uploads/2019/02/308-name05322-jj-1600x867.jpg);
|
background-image: url(https://images.unsplash.com/photo-1562887085-22edc4817a9e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
@ -82,12 +84,12 @@ section.section-profile {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-profile-informations h2 {
|
.section-profile-informations h2 {
|
||||||
color: white;
|
|
||||||
margin-right: 24px;
|
margin-right: 24px;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.section-profile-informations span {
|
.section-profile-informations span {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
@ -121,7 +123,7 @@ section.section-profile {
|
|||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header>p {
|
.header > p {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -150,6 +152,10 @@ p.bio {
|
|||||||
|
|
||||||
|
|
||||||
/* ================================= */
|
/* ================================= */
|
||||||
|
/*
|
||||||
|
.text-block {
|
||||||
|
position: absolute;
|
||||||
|
}*/
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -168,15 +174,32 @@ p.bio {
|
|||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.haut {
|
||||||
|
display: flex;
|
||||||
|
background-image: url(../img/Photos_190223-26_Bulgarie-7306-1600x2400.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
height: 600px;
|
||||||
|
background-position: -20%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.rond {
|
||||||
|
background-color: red;
|
||||||
|
height: 200px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: dimgrey;
|
color: dimgrey;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.amis img {
|
img {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
|
||||||
border: 1px solid grey;
|
border: 1px solid grey;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
@ -195,76 +218,23 @@ p.bio {
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* =================== */
|
/* =================== */
|
||||||
|
|
||||||
.post {
|
.post {
|
||||||
margin-bottom: 20px;
|
|
||||||
border-radius: 2px;
|
|
||||||
border: 1px solid grey;
|
border: 1px solid grey;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
float: left;
|
float: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post > img {
|
||||||
/* ==================================== */
|
display: block;
|
||||||
|
|
||||||
.titre2 img:first-child {
|
|
||||||
position: relative;
|
|
||||||
top: 30%;
|
|
||||||
margin-left: 24px;
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
object-fit: cover;
|
|
||||||
object-position: center;
|
|
||||||
border: 4px solid #fff;
|
|
||||||
border-radius: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post>img:nth-child(2) {
|
|
||||||
border-radius: 3px;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.titre2 h2 {
|
|
||||||
font-size: 15px;
|
|
||||||
align-self: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-bottom: 30px;
|
margin-right: auto;
|
||||||
color: rgba(0, 0, 0, .5);
|
margin: 0;
|
||||||
font-size: 15px;
|
z-index: 90;
|
||||||
font-style: italic;
|
width: 100px;
|
||||||
align-self: flex-end;
|
clip-path: circle(30%);
|
||||||
}
|
float: left;
|
||||||
|
|
||||||
|
|
||||||
/* ====== Bouton caché ! ====== */
|
|
||||||
|
|
||||||
.button a {
|
|
||||||
background-color: transparent;
|
|
||||||
/* Green */
|
|
||||||
left: 46%;
|
|
||||||
bottom: 84%;
|
|
||||||
border: none;
|
|
||||||
color: rgba(255, 255, 255, 0);
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secret {
|
|
||||||
padding: 30px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span#defi a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user