Merge remote-tracking branch 'origin/master'
This commit is contained in:
JunkJumper
commit
b009d17a4f
BIN
site/img/Photos_190223-26_Bulgarie-7306-1600x2400.jpg
Normal file
BIN
site/img/Photos_190223-26_Bulgarie-7306-1600x2400.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
BIN
site/img/Vienna3-1600x1067.jpg
Normal file
BIN
site/img/Vienna3-1600x1067.jpg
Normal file
Binary file not shown.
|
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>
|
||||
68
site/page.html
Normal file
68
site/page.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!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>#tropbon</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">
|
||||
<div class="box" style="background-color:#bbb;width:40%">
|
||||
<p>Some text inside the box.</p>
|
||||
</div>
|
||||
<div class="box" style="background-color:#ccc;width:60%">
|
||||
<p>Some text inside the box.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<pre class="Copyrights">Site crée par José, Chiara et Léa.</pre>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
182
site/styles/styles.css
Normal file
182
site/styles/styles.css
Normal file
@ -0,0 +1,182 @@
|
||||
body {
|
||||
margin-top: 0;
|
||||
font-family: calibri;
|
||||
text-decoration: none;
|
||||
background-color: ghostwhite;
|
||||
color: black;
|
||||
}
|
||||
|
||||
body > main {
|
||||
padding-top: 49px;
|
||||
padding-left: 15%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
|
||||
/*==== BARRE DE NAVIGATION ====*/
|
||||
|
||||
nav {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.navbar {
|
||||
overflow: hidden;
|
||||
background-color: #8A0457;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
background: #80024A;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-image: url("Photos_190223-26_Bulgarie-7306-1600x2400.jpg");
|
||||
background-color: red;
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
/* ================================= */
|
||||
|
||||
section.section-profile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: #d63031;
|
||||
}
|
||||
|
||||
.section-profile-informations {
|
||||
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-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.section-profile-informations img {
|
||||
position: relative;
|
||||
top: 30%;
|
||||
margin-left: 24px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border: 4px solid #fff;
|
||||
border-radius: 70px;
|
||||
}
|
||||
|
||||
.section-profile-informations h2 {
|
||||
margin-right: 24px;
|
||||
font-size: 36px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.section-profile-informations span {
|
||||
margin-left: auto;
|
||||
margin-bottom: 30px;
|
||||
color: rgba(0, 0, 0, .5);
|
||||
font-size: 24px;
|
||||
font-style: italic;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.PhotoProfile {
|
||||
position: relative;
|
||||
clip-path: inset(34% 0);
|
||||
margin-top: -550px;
|
||||
margin-bottom: -500px;
|
||||
z-index: 20;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Icon {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
margin-top: 20%;
|
||||
z-index: 90;
|
||||
width: 400px;
|
||||
clip-path: circle(30%);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header > p {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.Person {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.PhotoName::after {
|
||||
z-index: 90;
|
||||
position: absolute;
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ================================= */
|
||||
/*
|
||||
.text-block {
|
||||
position: absolute;
|
||||
}*/
|
||||
|
||||
.box {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
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%;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user