Compare commits
10 Commits
e498f06d7f
...
d28772b1db
| Author | SHA1 | Date | |
|---|---|---|---|
|
d28772b1db | ||
|
|
3dfa8ac8e7 | ||
|
9a18c3fa72 | ||
|
|
18aa970c33 | ||
|
|
98e28bf43b | ||
|
|
f8311256dd | ||
|
10e88b8203 | ||
|
|
e9cc0c61a5 | ||
|
|
153a7d104f | ||
|
|
a192e16f73 |
@ -1,3 +1,4 @@
|
||||
<!--AUTHOR Chiara RELEVAT- Nuit de l'info 2018-->
|
||||
<!DOCTYPE html>
|
||||
<!--https:/www.w3schools.com/graphics/game_intro.asp-->
|
||||
<!--https:/www.trex-game.skipser.com-->
|
||||
@ -8,11 +9,12 @@
|
||||
<meta charset="UTF8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>404 - Game Found !</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--Jeux principal-->
|
||||
<h1 class="center">Fuyez l'homme en noir !</h1>
|
||||
<h1 class="center">Fuyez l'homme en noir ! 404 - Game Found !</h1>
|
||||
<script src="./scores.js">
|
||||
startGame()
|
||||
</script>
|
||||
42
DEFI.MD
42
DEFI.MD
@ -1,42 +0,0 @@
|
||||
# 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 !
|
||||
|
||||
|
||||
|
||||
45
README.md
45
README.md
@ -1,2 +1,45 @@
|
||||
# NuitDeLinfo
|
||||
# [NuitDeLinfo](https://junkjumper.github.io/NuitDeLinfo2019/)
|
||||
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 !
|
||||
|
||||
|
||||
|
||||
|
||||
@ -54,7 +54,9 @@
|
||||
<!-- Premiere colonne -->
|
||||
<div class="box" style="background-color:#F5F5F5;width:40%">
|
||||
<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 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="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>
|
||||
<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">
|
||||
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
|
||||
@ -82,9 +84,26 @@
|
||||
|
||||
</div>
|
||||
<div class="box" style="background-color:#ccc;width:60%">
|
||||
<div class="post">
|
||||
<img src="img/Vienna3-1600x1067.jpg"><br><br><br>
|
||||
<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 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 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>
|
||||
@ -95,4 +114,4 @@
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
BIN
gifs/homme trop swag immobile.png
Normal file
BIN
gifs/homme trop swag immobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 B |
|
Before Width: | Height: | Size: 146 B After Width: | Height: | Size: 146 B |
|
Before Width: | Height: | Size: 374 KiB After Width: | Height: | Size: 374 KiB |
|
Before Width: | Height: | Size: 179 KiB After Width: | Height: | Size: 179 KiB |
102
index.html
Normal file
102
index.html
Normal file
@ -0,0 +1,102 @@
|
||||
<!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>
|
||||
16
rickroll.html
Normal file
16
rickroll.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!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>
|
||||
@ -76,7 +76,7 @@ function component(largeur, longueur, color, x, y, type) {
|
||||
function startGame() {
|
||||
personnage = new component(30, 50, "blue", 10, 120);
|
||||
personnage.gravity = 0.05;
|
||||
score = new component("30px", "Consolas", "black", 280, 40, "text");
|
||||
score = new component("30px", "Consolas", "black", 500, 40, "text");
|
||||
plateau.start();
|
||||
}
|
||||
|
||||
@ -84,6 +84,7 @@ function updateGameArea() {
|
||||
var x, longueur, gap, longueurMin, longueurMax, minGap, maxGap;
|
||||
for (i = 0; i < obstacle.length; i += 1) {
|
||||
if (personnage.crashWith(obstacle[i])) {
|
||||
this.jeuxFini(i);
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -91,8 +92,8 @@ function updateGameArea() {
|
||||
plateau.frameNo += 1;
|
||||
if (plateau.frameNo == 1 || everyinterval(150)) { //pour créer les barres
|
||||
x = plateau.canvas.width;
|
||||
longueurMin = 20;
|
||||
longueurMax = 150;
|
||||
longueurMin = 55;
|
||||
longueurMax = 500;
|
||||
longueur = Math.floor(Math.random() * (longueurMax - longueurMin + 1) + longueurMin);
|
||||
minGap = 50;
|
||||
maxGap = 200;
|
||||
@ -116,6 +117,15 @@ function everyinterval(n) {
|
||||
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) {
|
||||
personnage.gravity = n;
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
<!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>
|
||||
@ -18,6 +18,7 @@ button {
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
margin-top: -10px;
|
||||
margin-left: +300px;
|
||||
}
|
||||
@ -2,16 +2,20 @@ body {
|
||||
margin-top: 0;
|
||||
font-family: calibri;
|
||||
text-decoration: none;
|
||||
background-color: ghostwhite;
|
||||
background-color: #4F067C;
|
||||
color: black;
|
||||
}
|
||||
|
||||
body > main {
|
||||
body>main {
|
||||
padding-top: 49px;
|
||||
padding-left: 15%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/*==== BARRE DE NAVIGATION ====*/
|
||||
|
||||
@ -23,12 +27,11 @@ nav {
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.navbar {
|
||||
overflow: hidden;
|
||||
background-color: #8A0457;
|
||||
background-color: #12003E;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
@ -45,14 +48,9 @@ nav {
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
background: #80024A;
|
||||
background: #1A0044;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-image: url("Photos_190223-26_Bulgarie-7306-1600x2400.jpg");
|
||||
background-color: red;
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
/* ================================= */
|
||||
|
||||
@ -66,7 +64,7 @@ section.section-profile {
|
||||
display: flex;
|
||||
padding: 180px 30px 0;
|
||||
width: 100%;
|
||||
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-image: url(https://www.lifeofpix.com/wp-content/uploads/2019/02/308-name05322-jj-1600x867.jpg);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
@ -84,12 +82,12 @@ section.section-profile {
|
||||
}
|
||||
|
||||
.section-profile-informations h2 {
|
||||
color: white;
|
||||
margin-right: 24px;
|
||||
font-size: 36px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.section-profile-informations span {
|
||||
margin-left: auto;
|
||||
margin-bottom: 30px;
|
||||
@ -123,7 +121,7 @@ section.section-profile {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header > p {
|
||||
.header>p {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@ -152,10 +150,6 @@ p.bio {
|
||||
|
||||
|
||||
/* ================================= */
|
||||
/*
|
||||
.text-block {
|
||||
position: absolute;
|
||||
}*/
|
||||
|
||||
.box {
|
||||
box-sizing: border-box;
|
||||
@ -174,32 +168,15 @@ p.bio {
|
||||
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 {
|
||||
color: dimgrey;
|
||||
text-decoration: underline;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
img {
|
||||
.amis img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px solid grey;
|
||||
border-radius: 2px;
|
||||
}
|
||||
@ -218,23 +195,76 @@ img {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/* =================== */
|
||||
|
||||
.post {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid grey;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post > img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: 0;
|
||||
z-index: 90;
|
||||
width: 100px;
|
||||
clip-path: circle(30%);
|
||||
float: left;
|
||||
|
||||
/* ==================================== */
|
||||
|
||||
.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-bottom: 30px;
|
||||
color: rgba(0, 0, 0, .5);
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
|
||||
/* ====== 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