@ -1,71 +1,12 @@
@ media ( max-width : 800px ) { / * = = = = = = = = = = = = = = = = = = = = = = = = =
. contener {
G É N É RAL & RESET
display : flex ;
= = = = = = = = = = = = = = = = = = = = = = = = = * /
flex-direction : column ;
}
}
@ font-face {
font-family : "Trickster" ;
src : "Police/Inter-Italic-VariableFont_opsz\,wght.ttf" format ( "truetype" ) ;
}
@ media print {
header {
display : none ;
}
header {
display : none ;
}
}
# taille_tableau {
width : 50 % ;
}
th {
background-color : cyan ;
}
td {
background-color : white ;
}
. images_tableau {
max-width : 150px ;
}
# legende_tableau {
float : right ;
width : 50 %
}
a {
text-decoration : none ;
color : black ;
}
a : hover : visited {
color : rgb ( 24 , 24 , 24 ) ;
}
. centrer {
text-align : center ;
}
. activit é s {
background-color : orangered ;
}
html , body { html , body {
height : 100 % ;
height : 100 % ;
margin : 0 ;
margin : 0 ;
padding : 0 ;
padding : 0 ;
} }
body { body {
min-height : 100vh ;
min-height : 100vh ;
display : flex ;
display : flex ;
@ -78,18 +19,28 @@ body {
flex-direction : column ;
flex-direction : column ;
} }
@ font-face {
font-family : "Trickster" ;
src : "Police/Inter-Italic-VariableFont_opsz\,wght.ttf" format ( "truetype" ) ;
}
a {
text-decoration : none ;
color : black ;
}
. bandeau { a : hover : visited {
background-color : rgb ( 53 , 52 , 52 ) ;
color : rgb ( 24 , 24 , 24 ) ;
width : 100 % ;
height : 150px ;
display : flex ;
position : sticky ;
top : 0 ;
border-bottom : 2px solid rgb ( 44 , 44 , 44 ) ;
} }
:: selection {
color : black ;
background-color : rgb ( 57 , 103 , 143 ) ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = =
STRUCTURE & FOND
= = = = = = = = = = = = = = = = = = = = = = = = = * /
. background { . background {
position : fixed ;
position : fixed ;
top : 0 ;
top : 0 ;
@ -100,46 +51,7 @@ body {
background-size : cover ;
background-size : cover ;
background-repeat : no-repeat ;
background-repeat : no-repeat ;
background-position : center ;
background-position : center ;
z-index : -2 ; /* met bien l'image en fond derrière tout */
z-index : -2 ;
}
. cv-container {
text-align : center ;
margin-top : 20px ;
}
. cv-preview {
width : 200px ;
transition : transform 0 . 3s ease , box-shadow 0 . 3s ease ;
cursor : pointer ;
}
. cv-preview : hover {
transform : scale ( 1 . 5 ) ; /* Agrandit l'image à 1.5x sa taille */
box-shadow : 0 4px 8px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
. contact-section a {
color : white ;
text-decoration : none ;
}
. contact-section a : hover {
text-decoration : underline ; /* Ajoute un soulignement au survol */
}
/* Centrer le titre "Mon CV" */
. cv-title {
text-align : center ;
margin-bottom : 20px ;
}
/* Descendre le texte sous l'image */
. cv-download-text {
text-align : center ;
margin-top : 10px ;
font-size : 14px ;
color : # ffffff ;
} }
. background :: after { . background :: after {
@ -149,34 +61,54 @@ body {
left : 0 ;
left : 0 ;
width : 100 % ;
width : 100 % ;
height : 100 % ;
height : 100 % ;
background-color : rgba ( 0 , 0 , 0 , 0 . 8 ) ; /* noir semi-transparent */
background-color : rgba ( 0 , 0 , 0 , 0 . 8 ) ;
z-index : -1 ;
z-index : -1 ;
} }
. image_accueil { . container {
height : 120px ;
margin-left : 8px ;
width : 100px ;
margin-right : 8px ;
border-radius : 50 % ;
color : white ;
margin-top : 15px ;
padding-left : 8px ;
padding-right : 8px ;
margin-bottom : 80px ;
} }
. container h1 {
text-align : center ;
font-size : 36px ;
margin-bottom : 20px ;
color : # ffffff ;
}
. photo_titre_bandeau { / * = = = = = = = = = = = = = = = = = = = = = = = = =
BANDEAU & NAVIGATION
= = = = = = = = = = = = = = = = = = = = = = = = = * /
. bandeau {
background-color : rgb ( 53 , 52 , 52 ) ;
width : 100 % ;
height : 150px ;
display : flex ;
position : sticky ;
top : 0 ;
border-bottom : 2px solid rgb ( 44 , 44 , 44 ) ;
}
. photo_titre_bandeau {
margin-left : 8px ;
margin-left : 8px ;
display : flex ;
display : flex ;
} }
# bouttons_liens_nav { # bouttons_liens_nav {
border-left : 2px solid grey ;
border-left : 2px solid grey ;
width : 100 % ;
width : 100 % ;
max-height : 150px ;
max-height : 150px ;
display : flex ;
display : ;
justify-content : space-evenly ;
justify-content : space-evenly ;
align-items : center ;
align-items : center ;
} }
. bouttons_liens { . bouttons_liens {
background-color : # ffffff ;
background-color : # ffffff ;
color : grey ;
color : grey ;
height : 50px ;
height : 50px ;
@ -190,63 +122,130 @@ body {
border-right : 2px solid black ;
border-right : 2px solid black ;
} }
. container { / * = = = = = = = = = = = = = = = = = = = = = = = = =
margin-left : 8px ;
ACCUEIL & BLOCS
margin-right : 8px ;
= = = = = = = = = = = = = = = = = = = = = = = = = * /
color : white ;
. blocs {
padding-left : 8px ;
padding-right : 8px ;
margin-bottom : 80px ; /* Ajoute de l'espace sous le contenu */
}
. blocs {
display : flex ;
display : flex ;
gap : 30px ;
gap : 30px ;
justify-content : center ;
justify-content : center ;
margin-top : 40px ;
margin-top : 40px ;
flex-wrap : wrap ; /* pour adaptation mobile */
flex-wrap : wrap ;
} }
. bloc1 { . bloc1 {
float : left ;
float : left ;
width : 200px ;
width : 200px ;
background-color : grey ;
background-color : grey ;
padding : 1 0 px;
padding : 1 5 px;
margin-left : 10 % ;
margin-left : 10 % ;
margin-top : 5 % ;
margin-top : 5 % ;
border : solid black 2px ;
border : solid black 2px ;
border-radius : 10 % ;
border-radius : 10 % ;
padding : 15px ;
} }
. bloc2 { . bloc2 {
float : right ;
float : right ;
width : 200px ;
width : 200px ;
background-color : grey ;
background-color : grey ;
padding : 1 0 px;
padding : 1 5 px;
margin-right : 10 % ;
margin-right : 10 % ;
margin-top : 10 % ;
margin-top : 10 % ;
border : solid black 2px ;
border : solid black 2px ;
border-radius : 10 % ;
border-radius : 10 % ;
padding : 15px ;
} }
/* Section des projets */ . bloc-texte {
. section-title { margin-top : 30px ;
margin-left : 20px ;
line-height : 1 . 6 ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = =
TABLEAUX
= = = = = = = = = = = = = = = = = = = = = = = = = * /
# taille_tableau {
width : 50 % ;
}
th {
background-color : cyan ;
}
td {
background-color : white ;
}
. images_tableau {
max-width : 150px ;
}
# legende_tableau {
float : right ;
width : 50 % ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = =
IMAGES & ICONES
= = = = = = = = = = = = = = = = = = = = = = = = = * /
. image_accueil {
height : 120px ;
width : 100px ;
border-radius : 50 % ;
margin-top : 15px ;
}
. images_bouttons_liens {
height : 30px ;
width : 30px ;
}
. taille_image_gallerie {
height : 250px ;
width : 400px ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = =
LIENS & TEXTE
= = = = = = = = = = = = = = = = = = = = = = = = = * /
. centrer {
text-align : center ;
text-align : center ;
margin : 20px 0 ;
font-size : 18px ; /* réduit la taille */
color : # ffffff ;
} }
. container h1 { . activit é s {
background-color : orangered ;
}
. texte_principal {
width : 80 % ;
float : left ;
}
. texte_principal : hover {
color : black ;
}
. liste_liens {
margin-top : 5px ;
margin-bottom : 5px ;
}
# liens_externes {
width : 20 % ;
border : 2px solid black ;
float : right ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = =
PROJETS
= = = = = = = = = = = = = = = = = = = = = = = = = * /
. section-title {
text-align : center ;
text-align : center ;
font-size : 36px ; /* augmente la taille */
margin: 20px 0 ;
margin-bottom : 20px ;
font-size: 18 px;
color : # ffffff ;
color : # ffffff ;
} }
/* Grille des projets */
. projects-grid { . projects-grid {
display : flex ;
display : flex ;
justify-content : center ;
justify-content : center ;
@ -255,78 +254,53 @@ body {
margin : 20px 0 ;
margin : 20px 0 ;
} }
/* Carte de projet */
. project-card { . project-card {
background-color : # f9f9f9 ;
border : 2px solid # bbb ; /* border grise */
border-radius : 15px ;
width : 250px ;
height : 150px ;
display : flex ;
flex-direction : column ;
justify-content : center ;
align-items : center ;
text-align : center ;
transition : transform 0 . 3s , box-shadow 0 . 3s , z-index 0 . 1s ;
cursor : pointer ;
box-shadow : 0 2px 8px rgba ( 0 , 0 , 0 , 0 . 07 ) ; /* légère ombre */
position : relative ;
position : relative ;
z-index : 1 ;
background : # ffffff ;
border-radius : 16px ;
box-shadow : 0 2px 8px rgba ( 0 , 0 , 0 , 0 . 10 ) ;
padding : 24px 20px ;
margin : 18px 0 ;
min-width : 220px ;
min-height : 120px ;
transition : box-shadow 0 . 2s , transform 0 . 2s ;
overflow : hidden ;
} }
. project-card : hover { . project-card : hover {
transform : scale ( 1 . 05 ) ;
transform : scale ( 1 . 05 ) ;
box-shadow : 0 8px 24px rgba ( 0 , 0 , 0 , 0 . 18 ) ;
box-shadow : 0 8px 24px rgba ( 0 , 0 , 0 , 0 . 18 ) ;
z-index : 10 ; /* Passe au-dessus des autres */
z-index : 10 ;
} }
. project-card h3 { . project-card h3 {
margin : 0 ;
margin : 0 ;
font-size : 18px ;
font-size : 2. 1rem ;
color : # 333 ;
color : # 333 ;
font-weight : bold ;
} }
. project-card p { . project-card p {
font-size : 14px ;
font-size : 14px ;
color : # 666 ;
color : # 666 ;
margin-top : 10px ;
margin-top : 10px ;
} padding : 8px 0 ;
. bloc-texte {
margin-top : 30px ; /* espace entre les blocs */
margin-left : 20px ;
line-height : 1 . 6 ;
line-height : 1 . 6 ;
word-break : break-word ;
} }
# liens_externes { . project-card img ,
width : 20 % ;
. project-card . expanded img {
border : 2px solid black ;
width : 100 % ;
float : right ;
max-width : 100 % ;
} height : auto ;
display : block ;
. liste_liens { margin : 20px auto 0 auto ;
margin-top : 5px ;
border-radius : 10px ;
margin-bottom : 5px ;
}
. images_bouttons_liens {
height : 30px ;
width : 30px ;
}
. texte_principal {
width : 80 % ;
float : left ;
}
. texte_principal : hover {
color : black ;
} }
. project-card . expanded img {
. taille_image_gallerie { max-width : 700px ;
height : 250px ;
width : 400px ;
} }
/* État agrandi */ /* État agrandi */
@ -334,11 +308,12 @@ body {
position : fixed ;
position : fixed ;
top : 50 % ;
top : 50 % ;
left : 50 % ;
left : 50 % ;
transform : translate ( -50 % , -50 % ) scale ( 1 . 2 ) ; /* Zoom centré */
transform : translate ( -50 % , -50 % ) scale ( 1 . 2 ) ;
width : 60vw ;
width : 60vw ;
height : 220px ;
min-height : 400px ;
max-height : 90vh ;
z-index : 100 ;
z-index : 100 ;
background : # e9e9e9 ;
background : # fff ;
box-shadow : 0 8px 24px rgba ( 0 , 0 , 0 , 0 . 18 ) ;
box-shadow : 0 8px 24px rgba ( 0 , 0 , 0 , 0 . 18 ) ;
transition :
transition :
transform 0 . 3s cubic-bezier ( . 4 , 2 , . 6 , 1 ) ,
transform 0 . 3s cubic-bezier ( . 4 , 2 , . 6 , 1 ) ,
@ -346,6 +321,8 @@ body {
z-index 0 . 1s ,
z-index 0 . 1s ,
width 0 . 3s ,
width 0 . 3s ,
height 0 . 3s ;
height 0 . 3s ;
overflow-y : auto ;
padding : 32px 28px ;
} }
. close-btn { . close-btn {
@ -369,6 +346,9 @@ body {
color : # 333 ;
color : # 333 ;
} }
/ * = = = = = = = = = = = = = = = = = = = = = = = = =
COMP É TENCES ( SKILLS )
= = = = = = = = = = = = = = = = = = = = = = = = = * /
. apropos-card { . apropos-card {
display : flex ;
display : flex ;
align-items : center ;
align-items : center ;
@ -381,7 +361,7 @@ body {
padding : 30px ;
padding : 30px ;
width : 100 % ;
width : 100 % ;
max-width : 100 % ;
max-width : 100 % ;
box-sizing : border-box ; /* <-- Ajouté */
box-sizing : border-box ;
gap : 30px ;
gap : 30px ;
} }
@ -395,25 +375,11 @@ body {
box-shadow : 0 2px 8px rgba ( 0 , 0 , 0 , 0 . 10 ) ;
box-shadow : 0 2px 8px rgba ( 0 , 0 , 0 , 0 . 10 ) ;
} }
@ media ( max-width : 900px ) {
. apropos-card {
flex-direction : column ;
align-items : flex-start ;
text-align : left ;
padding : 20px ;
}
. apropos-image img {
max-width : 100 % ;
margin-top : 15px ;
}
}
. skill-row { . skill-row {
display : flex ;
display : flex ;
align-items : center ;
align-items : center ;
margin-bottom : 1 0 px;
margin-bottom : 18px ;
gap : 1 5 px;
gap : 10px ;
} }
. skill-row span { . skill-row span {
@ -444,32 +410,92 @@ body {
margin-right : 10px ;
margin-right : 10px ;
vertical-align : middle ;
vertical-align : middle ;
} }
. skill-row {
display : flex ;
/ * = = = = = = = = = = = = = = = = = = = = = = = = =
align-items : center ;
CONTACT & CV
margin-bottom : 18px ; /* Augmente la valeur pour plus d'espace */
= = = = = = = = = = = = = = = = = = = = = = = = = * /
gap : 10px ;
. contact-section a {
color : white ;
text-decoration : none ;
}
. contact-section a : hover {
text-decoration : underline ;
}
. cv-title {
text-align : center ;
margin-bottom : 20px ;
}
. cv-container {
text-align : center ;
margin-top : 20px ;
}
. cv-preview {
width : 200px ;
transition : transform 0 . 3s ease , box-shadow 0 . 3s ease ;
cursor : pointer ;
} }
. cv-preview : hover {
transform : scale ( 1 . 5 ) ;
box-shadow : 0 4px 8px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
. cv-download-text {
text-align : center ;
margin-top : 10px ;
font-size : 14px ;
color : # ffffff ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = =
AUTRES
= = = = = = = = = = = = = = = = = = = = = = = = = * /
. bonne-visite { . bonne-visite {
text-align : center ;
text-align : center ;
margin-top : 40px ;
margin-top : 30% ;
font-size : 1 . 5em ;
font-size : 1 . 5em ;
margin-top : 30 % ;
} }
/ * = = = = = = = = = = = = = = = = = = = = = = = = =
FOOTER
= = = = = = = = = = = = = = = = = = = = = = = = = * /
. basPage { . basPage {
text-align : center ;
text-align : center ;
background-color : rgb ( 53 , 52 , 52 ) ;
background-color : rgb ( 53 , 52 , 52 ) ;
padding : 10px 0 ;
padding : 10px 0 ;
/* position: fixed; <-- supprime ou commente cette ligne */
/* bottom: 0; <-- supprime ou commente cette ligne */
/* left: 0; <-- supprime ou commente cette ligne */
width : 100 % ;
width : 100 % ;
z-index : 10 ;
z-index : 10 ;
} }
:: selection {
color : black ;
/ * = = = = = = = = = = = = = = = = = = = = = = = = =
background-color : rgb ( 57 , 103 , 143 ) ;
MEDIA QUERIES
= = = = = = = = = = = = = = = = = = = = = = = = = * /
@ media ( max-width : 900px ) {
. apropos-card {
flex-direction : column ;
align-items : flex-start ;
text-align : left ;
padding : 20px ;
}
. apropos-image img {
max-width : 100 % ;
margin-top : 15px ;
}
}
@ media ( max-width : 800px ) {
. contener {
display : flex ;
flex-direction : column ;
}
}
@ media print {
header {
display : none ;
}
} }
Arsène Poulain
1 month ago
