body {
width : 100%;
min-height : 100%;
margin : 0;
font-family : Arial, Helvetica, sans-serif;
font-size : 14pt;
background-image : url("../photo/etoilefond.jpg");
background-color : #212121;
color : white;
}
header {
width : 100%;
height : 55px;
background-color : #0B0A0C;
color : white;
text-align : left;
}
header h1 {
display : inline-block;
font-size : 40px;
line-height : 90%;
margin : 0;
margin-top : 7px;
margin-left : 10px;
margin-right : 10px;
display : inline-block;
vertical-align : top;
color : white;
}
header a {
color : white;
text-decoration : none;
}
header a:hover {
background-color : #F0CB79;
padding : 8%;
}
header nav {
vertical-align : top;
display : inline-block;
height : 100%;
}
header nav ul {
margin : 0;
height : 100%;
list-style-type : none;
text-align : center;
line-height : 150%;
vertical-align : top;
}
header nav ul li {
display : inline-block;
margin : 0;
margin-top : 13px;
color : black;
width : 150px;
text-align : center;
vertical-align : top;
}
h2 {
display : flex;
justify-content : center;
text-decoration : underline overline solid #F0CB79;
text-shadow : 0 0 2px #FFD100, 0 0 30px #FFD100, 0 0 5px #FFD100, 0 0 150px #FFD100;
color : #F0CB79;
}
a {
color : white;
text-decoration : none;
}
p {
font-size : 17pt;
width : 100%;
text-align : justify;
text-align : center;
}
span {
color : #47B2F8;
}
iframe {
position : relative;
width : 560px;
height : 315px;
z-index : 1;
}
.block {
position : relative;
margin : 10% auto 0;
width : 565px;
height : 320px;
background : linear-gradient(0deg, #000, #272727);
}
.block:before, .block:after {
content : '';
position : absolute;
left : -2px;
top : -2px;
background : linear-gradient(45deg, #5A1E65, #FF33B2, #FF3340, #651E32, #5A1E65, #651E32, #651E32, #651E63, #651E63, #5A1E65);
background-size : 200%;
width : calc(100% + 4px);
height : calc(100% + 4px);
z-index : -1;
animation : steam 20s linear infinite;
}
@keyframes steam {
0% {
background-position : 0 0;
}
50% {
background-position : 400% 0;
}
100% {
background-position : 0 0;
}
}
.block:after {
filter : blur(50px);
}
.click-photo {
position : relative;
left : 32%;
border-radius : 10px 100px / 120px;
}
.job {
position : relative;
left : 10%;
top : 9%;
width : 80%;
text-align : justify;
}
.passion {
width : 100%;
text-align : center;
}
.home {
display : inline-block;
margin : 0;
width : 23%;
height : 23%;
text-align : center;
vertical-align : top;
}
.titrepage {
font-size : 2.3rem;
font-weight : bold;
text-align : center;
text-shadow : 2.5px 2.5px 0 #ffae00, 5px 5px 0 #ff00c0, 7.5px 7.5px 0 #aa0306, 10px 10px 10px #7c0003;
color : #ffe69a;
}
.titresimple {
display : flex;
justify-content : center;
font-size : 1.8rem;
font-weight : bold;
color : white;
margin-left : 120px;
}
.sous-titres {
text-shadow : 0 0 2px #FFD100, 0 0 30px #FFD100, 0 0 5px #FFD100, 0 0 150px #FFD100;
color : #F0CB79;
}
.infocontact {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 10px;
background-color : #0D1327;
}
#photo {
width : 23%;
height : 23%;
margin-top : 15px;
margin-right : 15px;
margin-left : 15px;
box-sizing : border-box;
background-color : #121B3A;
border-radius : 80px;
float : left;
}
.intro {
width : 85%;
padding : 10px;
text-align : center;
text-align : justify;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #121B3A;
}
.skill {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #162145;
}
.experience1 {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #270D0F;
}
.experience2 {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #3A1215;
}
.gras {
text-align : center;
font-weight : bold;
font-size : 1.5rem;
}
.formation1 {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #27220D;
}
.formation2 {
width : 85%;
padding : 10px;
text-align : center;
margin : auto;
box-sizing : border-box;
border-radius : 20px;
background-color : #3A3212;
}
.digi {
display : flex;
flex-direction : row;
justify-content : space-around;
align-content : center;
}
.neon {
position : relative;
}
.neon {
width : 200px;
}
.neon img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.neon:hover img:nth-child(2) {
opacity : 1;
}
.blue {
position : relative;
}
.blue {
width : 300px;
}
.blue img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.blue:hover img:nth-child(2) {
opacity : 1;
}
.hallo {
position : relative;
}
.hallo {
width : 200px;
}
.hallo img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.hallo:hover img:nth-child(2) {
opacity : 1;
}
.louis {
position : relative;
}
.louis {
width : 200px;
}
.louis img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.louis:hover img:nth-child(2) {
opacity : 1;
}
.tradi {
width : 100%;
margin : auto;
display : flex;
flex-direction : row;
justify-content : space-around;
}
.multi {
position : relative;
}
.multi {
width : 200px;
}
.bedjah {
position : relative;
}
.bedjah {
width : 200px;
}
.vina {
position : relative;
}
.vina {
width : 200px;
}
.avocat {
position : relative;
}
.avocat {
width : 200px;
}
.perspective {
width : 100%;
margin : auto;
display : flex;
flex-direction : row;
justify-content : space-around;
align-content : center;
}
.canape {
position : relative;
}
.canape {
width : 300px;
}
.canape img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.canape:hover img:nth-child(2) {
opacity : 1;
}
.people {
position : relative;
}
.people {
width : 300px;
}
.people img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.people:hover img:nth-child(2) {
opacity : 1;
}
.pers {
position : relative;
}
.pers {
width : 300px;
}
.pers img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.pers:hover img:nth-child(2) {
opacity : 0;
}
.maison {
position : relative;
}
.maison {
width : 200px;
}
.maison img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.maison:hover img:nth-child(2) {
opacity : 1;
}
.logo {
margin : auto;
display : flex;
flex-direction : row;
justify-content : space-around;
}
.pacifique {
position : relative;
}
.pacifique {
width : 200px;
}
.album {
position : relative;
}
.album {
width : 200px;
}
.rns {
position : relative;
}
.rns {
width : 200px;
}
.photo {
width : 100%;
margin : auto;
display : flex;
flex-direction : row;
justify-content : space-around;
}
.esp1 {
position : relative;
}
.esp1 {
width : 200px;
}
.esp1 img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.esp1:hover img:nth-child(2) {
opacity : 1;
}
.esp2 {
position : relative;
}
.esp2 {
width : 200px;
}
.esp2 img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.esp2:hover img:nth-child(2) {
opacity : 1;
}
.poisson {
position : relative;
}
.poisson {
width : 200px;
}
.barcelone {
position : relative;
}
.barcelone {
width : 200px;
}
.barcelone img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.barcelone:hover img:nth-child(2) {
opacity : 1;
}
.bateau {
position : relative;
}
.bateau {
width : 200px;
}
.bateau img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.bateau:hover img:nth-child(2) {
opacity : 1;
}
.ciel {
position : relative;
}
.ciel {
width : 200px;
}
.ciel img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.ciel:hover img:nth-child(2) {
opacity : 1;
}
.lamp {
position : relative;
}
.lamp {
width : 200px;
}
.lamp img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.lamp:hover img:nth-child(2) {
opacity : 1;
}
.velo {
position : relative;
}
.velo {
width : 200px;
}
.velo img:nth-child(2) {
position : absolute;
left : 0;
opacity : 0;
transition : opacity 0.1s ease;
}
.velo:hover img:nth-child(2) {
opacity : 1;
}
.retour:hover {
background-color : #E29C1C;
padding : 0%;
border-radius : 10px;
text-decoration : none;
}
/*page du formulaire*/
form {
margin : 0 auto;
width : 400px;
padding : 1em;
border : #CCC solid 3px;
border-radius : 1em;
}
.text-contact{
    text-align: center;
}
textarea {
max-width : 88%;
width : 420px;
min-width: 88%;

}
label {
text-align : right;
}
button {
margin-left : 310px;
color : white;
background-color : #0A2A3F;
}
button:hover {
background-color : #E29C1C;
}
/*fin page contact*/

.validator {
width : 5%;
}
h3 {
display : flex;
justify-content : center;
}
footer {
display : block;
width : 100%;
right : 0;
left : 0;
bottom: 0;
color : white;
margin-top : 50px;
height : 200px;
background-color : #0D1327;
padding : 10px;
box-sizing : border-box;
}
/*footer address {
position : absolute;
text-align : right;
bottom : 10px;
right : 10px;
}*/
.social {
display : flex;
justify-content : center;
}
.social img{
    display:flex;
    justify-content: center;
    position:relative;
    left: 130px;
    width: 34%; 
    height:34%;
}
.logo {
width : 30%;
height : 30%;
}
.social a:hover {
border-radius : 10px;
background-color : #0A2A3F;
padding: 0;
}
footer address a {
display : block;
}