RENDU FINAL
This commit is contained in:
JunkJumper
parent
f8311256dd
commit
98e28bf43b
@ -9,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>
|
||||
368
bakApache.html
Executable file
368
bakApache.html
Executable file
@ -0,0 +1,368 @@
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Apache2 Debian Default Page: It works</title>
|
||||
<style type="text/css" media="screen">
|
||||
* {
|
||||
margin: 0px 0px 0px 0px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
body, html {
|
||||
padding: 3px 3px 3px 3px;
|
||||
|
||||
background-color: #D8DBE2;
|
||||
|
||||
font-family: Verdana, sans-serif;
|
||||
font-size: 11pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.main_page {
|
||||
position: relative;
|
||||
display: table;
|
||||
|
||||
width: 800px;
|
||||
|
||||
margin-bottom: 3px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0px 0px 0px 0px;
|
||||
|
||||
border-width: 2px;
|
||||
border-color: #212738;
|
||||
border-style: solid;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.page_header {
|
||||
height: 99px;
|
||||
width: 100%;
|
||||
|
||||
background-color: #F5F6F7;
|
||||
}
|
||||
|
||||
div.page_header span {
|
||||
margin: 15px 0px 0px 50px;
|
||||
|
||||
font-size: 180%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.page_header img {
|
||||
margin: 3px 0px 0px 40px;
|
||||
|
||||
border: 0px 0px 0px;
|
||||
}
|
||||
|
||||
div.table_of_contents {
|
||||
clear: left;
|
||||
|
||||
min-width: 200px;
|
||||
|
||||
margin: 3px 3px 3px 3px;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.table_of_contents_item {
|
||||
clear: left;
|
||||
|
||||
width: 100%;
|
||||
|
||||
margin: 4px 0px 0px 0px;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.table_of_contents_item a {
|
||||
margin: 6px 0px 0px 6px;
|
||||
}
|
||||
|
||||
div.content_section {
|
||||
margin: 3px 3px 3px 3px;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.content_section_text {
|
||||
padding: 4px 8px 4px 8px;
|
||||
|
||||
color: #000000;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
div.content_section_text pre {
|
||||
margin: 8px 0px 8px 0px;
|
||||
padding: 8px 8px 8px 8px;
|
||||
|
||||
border-width: 1px;
|
||||
border-style: dotted;
|
||||
border-color: #000000;
|
||||
|
||||
background-color: #F5F6F7;
|
||||
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
div.content_section_text p {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
div.content_section_text ul, div.content_section_text li {
|
||||
padding: 4px 8px 4px 16px;
|
||||
}
|
||||
|
||||
div.section_header {
|
||||
padding: 3px 6px 3px 6px;
|
||||
|
||||
background-color: #8E9CB2;
|
||||
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
font-size: 112%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.section_header_red {
|
||||
background-color: #CD214F;
|
||||
}
|
||||
|
||||
div.section_header_grey {
|
||||
background-color: #9F9386;
|
||||
}
|
||||
|
||||
.floating_element {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.table_of_contents_item a,
|
||||
div.content_section_text a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.table_of_contents_item a:link,
|
||||
div.table_of_contents_item a:visited,
|
||||
div.table_of_contents_item a:active {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
div.table_of_contents_item a:hover {
|
||||
background-color: #000000;
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
div.content_section_text a:link,
|
||||
div.content_section_text a:visited,
|
||||
div.content_section_text a:active {
|
||||
background-color: #DCDFE6;
|
||||
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
div.content_section_text a:hover {
|
||||
background-color: #000000;
|
||||
|
||||
color: #DCDFE6;
|
||||
}
|
||||
|
||||
div.validator {
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main_page">
|
||||
<div class="page_header floating_element">
|
||||
<img src="/icons/openlogo-75.png" alt="Debian Logo" class="floating_element"/>
|
||||
<span class="floating_element">
|
||||
Apache2 Debian Default Page
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="table_of_contents floating_element">
|
||||
<div class="section_header section_header_grey">
|
||||
TABLE OF CONTENTS
|
||||
</div>
|
||||
<div class="table_of_contents_item floating_element">
|
||||
<a href="#about">About</a>
|
||||
</div>
|
||||
<div class="table_of_contents_item floating_element">
|
||||
<a href="#changes">Changes</a>
|
||||
</div>
|
||||
<div class="table_of_contents_item floating_element">
|
||||
<a href="#scope">Scope</a>
|
||||
</div>
|
||||
<div class="table_of_contents_item floating_element">
|
||||
<a href="#files">Config files</a>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="content_section floating_element">
|
||||
|
||||
|
||||
<div class="section_header section_header_red">
|
||||
<div id="about"></div>
|
||||
It works!
|
||||
</div>
|
||||
<div class="content_section_text">
|
||||
<p>
|
||||
This is the default welcome page used to test the correct
|
||||
operation of the Apache2 server after installation on Debian systems.
|
||||
If you can read this page, it means that the Apache HTTP server installed at
|
||||
this site is working properly. You should <b>replace this file</b> (located at
|
||||
<tt>/var/www/html/index.html</tt>) before continuing to operate your HTTP server.
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
If you are a normal user of this web site and don't know what this page is
|
||||
about, this probably means that the site is currently unavailable due to
|
||||
maintenance.
|
||||
If the problem persists, please contact the site's administrator.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="section_header">
|
||||
<div id="changes"></div>
|
||||
Configuration Overview
|
||||
</div>
|
||||
<div class="content_section_text">
|
||||
<p>
|
||||
Debian's Apache2 default configuration is different from the
|
||||
upstream default configuration, and split into several files optimized for
|
||||
interaction with Debian tools. The configuration system is
|
||||
<b>fully documented in
|
||||
/usr/share/doc/apache2/README.Debian.gz</b>. Refer to this for the full
|
||||
documentation. Documentation for the web server itself can be
|
||||
found by accessing the <a href="/manual">manual</a> if the <tt>apache2-doc</tt>
|
||||
package was installed on this server.
|
||||
|
||||
</p>
|
||||
<p>
|
||||
The configuration layout for an Apache2 web server installation on Debian systems is as follows:
|
||||
</p>
|
||||
<pre>
|
||||
/etc/apache2/
|
||||
|-- apache2.conf
|
||||
| `-- ports.conf
|
||||
|-- mods-enabled
|
||||
| |-- *.load
|
||||
| `-- *.conf
|
||||
|-- conf-enabled
|
||||
| `-- *.conf
|
||||
|-- sites-enabled
|
||||
| `-- *.conf
|
||||
</pre>
|
||||
<ul>
|
||||
<li>
|
||||
<tt>apache2.conf</tt> is the main configuration
|
||||
file. It puts the pieces together by including all remaining configuration
|
||||
files when starting up the web server.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>ports.conf</tt> is always included from the
|
||||
main configuration file. It is used to determine the listening ports for
|
||||
incoming connections, and this file can be customized anytime.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Configuration files in the <tt>mods-enabled/</tt>,
|
||||
<tt>conf-enabled/</tt> and <tt>sites-enabled/</tt> directories contain
|
||||
particular configuration snippets which manage modules, global configuration
|
||||
fragments, or virtual host configurations, respectively.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
They are activated by symlinking available
|
||||
configuration files from their respective
|
||||
*-available/ counterparts. These should be managed
|
||||
by using our helpers
|
||||
<tt>
|
||||
a2enmod,
|
||||
a2dismod,
|
||||
</tt>
|
||||
<tt>
|
||||
a2ensite,
|
||||
a2dissite,
|
||||
</tt>
|
||||
and
|
||||
<tt>
|
||||
a2enconf,
|
||||
a2disconf
|
||||
</tt>. See their respective man pages for detailed information.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
The binary is called apache2. Due to the use of
|
||||
environment variables, in the default configuration, apache2 needs to be
|
||||
started/stopped with <tt>/etc/init.d/apache2</tt> or <tt>apache2ctl</tt>.
|
||||
<b>Calling <tt>/usr/bin/apache2</tt> directly will not work</b> with the
|
||||
default configuration.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section_header">
|
||||
<div id="docroot"></div>
|
||||
Document Roots
|
||||
</div>
|
||||
|
||||
<div class="content_section_text">
|
||||
<p>
|
||||
By default, Debian does not allow access through the web browser to
|
||||
<em>any</em> file apart of those located in <tt>/var/www</tt>,
|
||||
<a href="http://httpd.apache.org/docs/2.4/mod/mod_userdir.html" rel="nofollow">public_html</a>
|
||||
directories (when enabled) and <tt>/usr/share</tt> (for web
|
||||
applications). If your site is using a web document root
|
||||
located elsewhere (such as in <tt>/srv</tt>) you may need to whitelist your
|
||||
document root directory in <tt>/etc/apache2/apache2.conf</tt>.
|
||||
</p>
|
||||
<p>
|
||||
The default Debian document root is <tt>/var/www/html</tt>. You
|
||||
can make your own virtual hosts under /var/www. This is different
|
||||
to previous releases which provides better security out of the box.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="section_header">
|
||||
<div id="bugs"></div>
|
||||
Reporting Problems
|
||||
</div>
|
||||
<div class="content_section_text">
|
||||
<p>
|
||||
Please use the <tt>reportbug</tt> tool to report bugs in the
|
||||
Apache2 package with Debian. However, check <a
|
||||
href="http://bugs.debian.org/cgi-bin/pkgreport.cgi?ordering=normal;archive=0;src=apache2;repeatmerged=0"
|
||||
rel="nofollow">existing bug reports</a> before reporting a new bug.
|
||||
</p>
|
||||
<p>
|
||||
Please report bugs specific to modules (such as PHP and others)
|
||||
to respective packages, not to the web server itself.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="validator">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
Before Width: | Height: | Size: 130 B 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>
|
||||
@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles/styles.css" />
|
||||
<title>Titre de mon document</title>
|
||||
<title>Rickroll !</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -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>
|
||||
@ -1,98 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles/styles.css" />
|
||||
<title>Titre de mon document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
|
||||
<div class="navbar">
|
||||
<img src="">
|
||||
<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>
|
||||
<main>
|
||||
<!-- PROFILE -->
|
||||
|
||||
<section class="section section-profile">
|
||||
<div class="section-profile-informations">
|
||||
<img src="img/Vienna3-1600x1067.jpg">
|
||||
<h2>John Doe</h2>
|
||||
<span>#DefiJobOpp</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
<div class="haut">
|
||||
<div class="rond">
|
||||
<img src="img/Vienna3-1600x1067.jpg" class="Icon">
|
||||
<p>RickRoll</p>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!--<div class="header">
|
||||
<img src="img/Photos_190223-26_Bulgarie-7306-1600x2400.jpg" class="PhotoProfile">
|
||||
<div class="PhotoName">
|
||||
<img src="img/Vienna3-1600x1067.jpg" class="Icon">
|
||||
<div class="Person">
|
||||
<p>RickRoll</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<!-- PROFILE -->
|
||||
|
||||
<div class="clearfix">
|
||||
<!-- 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="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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"></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:#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>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<pre class="Copyrights">Site crée par José, Chiara et Léa.</pre>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -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