RENDU FINAL
This commit is contained in:
JunkJumper
270
styles/styles.css
Normal file
270
styles/styles.css
Normal file
@@ -0,0 +1,270 @@
|
||||
body {
|
||||
margin-top: 0;
|
||||
font-family: calibri;
|
||||
text-decoration: none;
|
||||
background-color: #4F067C;
|
||||
color: black;
|
||||
}
|
||||
|
||||
body>main {
|
||||
padding-top: 49px;
|
||||
padding-left: 15%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/*==== 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: #12003E;
|
||||
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: #1A0044;
|
||||
}
|
||||
|
||||
|
||||
/* ================================= */
|
||||
|
||||
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://www.lifeofpix.com/wp-content/uploads/2019/02/308-name05322-jj-1600x867.jpg);
|
||||
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 {
|
||||
color: white;
|
||||
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;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
p.bio {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
/* ================================= */
|
||||
|
||||
.box {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.box:first-child {
|
||||
border-right: 1px solid grey;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: dimgrey;
|
||||
text-decoration: underline;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.amis img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px solid grey;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
[alt="gallery"] {
|
||||
display: inline-block;
|
||||
clip-path: inset(5% 12%);
|
||||
width: 121px;
|
||||
border: 1px solid grey;
|
||||
}
|
||||
|
||||
[href^="amis"],
|
||||
[href^="gallery"] {
|
||||
text-decoration: none;
|
||||
color: grey;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
/* ==================================== */
|
||||
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user