site template lea
This commit is contained in:
gigifeh
parent
ff6e4f1188
commit
100e22c0e5
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