225 lines
4.0 KiB
CSS
225 lines
4.0 KiB
CSS
.app {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-size: 100% 100%;
|
|
-webkit-text-stroke-width: 1px;
|
|
-webkit-text-stroke-color: black;
|
|
color: white;
|
|
}
|
|
|
|
body {
|
|
/* overflow: hidden; */
|
|
/* color:black; */
|
|
max-width: 100vw;
|
|
font-family: "Fira Sans", Arial, sans-serif;
|
|
/* height: 100vh; */
|
|
width: 100vw;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Arial, sans-serif;
|
|
/* border: 1vh solide white; */
|
|
}
|
|
|
|
header {
|
|
width: 100%;
|
|
/* background-color: #a4a4a4; */
|
|
/* padding: 20px 0; */
|
|
text-align: center;
|
|
height: 15vh;
|
|
|
|
/* border-bottom-width: 5px; */
|
|
/* border-bottom: 1cm; */
|
|
/* border-color: rgb(207, 0, 0); */
|
|
}
|
|
|
|
.header-content {
|
|
border-bottom: 4px solid;
|
|
width: 100vw;
|
|
height: 100%;
|
|
display: flex;
|
|
/* align-items: center; */
|
|
justify-content: space-between;
|
|
/* padding-left: 0px; */
|
|
}
|
|
|
|
.logo img{
|
|
height: 100%; /* Adjust the size as needed */
|
|
/* margin-right: 32.5vw; */
|
|
margin-left: 3vw;
|
|
margin-right: 20vw;
|
|
margin-bottom: 1vh;
|
|
/* margin-left: 20px; */
|
|
}
|
|
|
|
.pages {
|
|
margin-left: 5vw;
|
|
font-weight: 800;
|
|
/* width: 5vw; */
|
|
/* margin-top: 5vh; */
|
|
align-self: center;
|
|
/* height: 5vh; */
|
|
|
|
transition-property: transform;
|
|
/* transition-duration: 200ms; */
|
|
transition: all 200ms ease;
|
|
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
border-bottom: 4px solid;
|
|
}
|
|
}
|
|
|
|
|
|
.title {
|
|
color:black;
|
|
font-weight: 800;
|
|
margin-left: 2vw;
|
|
margin-right: 98vw;
|
|
}
|
|
|
|
.menu {
|
|
float: right;
|
|
}
|
|
|
|
.language {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: right;
|
|
width: 50vw;
|
|
margin-top: 0vh;
|
|
margin-left: 0vw;
|
|
height: 100%;
|
|
margin-right: 0vw;
|
|
}
|
|
|
|
/* .css-15bhy65 {
|
|
/* margin-right: 20px; */
|
|
|
|
Button{
|
|
font-weight: 800;
|
|
}
|
|
|
|
.dark_mode {
|
|
/* font-weight: 800; */
|
|
margin-right: 2vw;
|
|
width: 8vw;
|
|
}
|
|
|
|
.hello {
|
|
font-weight: 800;
|
|
font-size: 6vw;
|
|
}
|
|
|
|
.description {
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.project {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
margin-top: 30vh;
|
|
margin-right: 10vw;
|
|
|
|
font-weight: 800;
|
|
width: 50vh;
|
|
height: 50%;
|
|
align-self: start;
|
|
/* margin-left: 30%; */
|
|
/* margin-left: 10%; */
|
|
/* margin-top: 15%; */
|
|
/* max-width: 60%; */
|
|
}
|
|
|
|
.presentation {
|
|
margin-top: 8%;
|
|
margin-left: 15%;
|
|
max-width: 40%;
|
|
}
|
|
|
|
.home {
|
|
position: absolute;
|
|
/* top: 50%; */
|
|
right: -100vw;
|
|
/* height: 50%; */
|
|
animation: slideRight 2s ease forwards;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
|
|
@keyframes slideRight {
|
|
0% {
|
|
right: -100vh; /* Position initiale */
|
|
}
|
|
100% {
|
|
right: 0; /* Position finale (tout à droite) */
|
|
}
|
|
}
|
|
|
|
.project_txt {
|
|
font-weight: 800;
|
|
font-size: 3vw;
|
|
}
|
|
|
|
.cv_button {
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
margin-top: 10%;
|
|
margin-left: 70%;
|
|
|
|
}
|
|
|
|
/* .css-cg7pzv {
|
|
width: 20vw;
|
|
} */
|
|
|
|
.project_group {
|
|
font-size: 1vw;
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* width: 100vw; */
|
|
/* justify-content: center; */
|
|
/* align-self: left; */
|
|
align-items: center;
|
|
}
|
|
|
|
.project_list {
|
|
vertical-align: baseline;
|
|
margin-right: 2vw;
|
|
/* justify-content: space-between; */
|
|
transition-property: transform;
|
|
transition-duration: 500ms;
|
|
&:hover {
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
|
|
.project_list:hover {
|
|
color: rgb(0, 127, 255);
|
|
}
|
|
|
|
.arrow {
|
|
vertical-align: baseline;
|
|
transition-property: transform;
|
|
transition-duration: 700ms;
|
|
transition: all 700ms ease;
|
|
transform: scale(1.15);
|
|
color: rgb(0, 127, 255);
|
|
/* transition-property: transform; */
|
|
/* transition-duration: 700ms; */
|
|
/* padding-right: 10vh; */
|
|
opacity: 0;
|
|
}
|
|
|
|
.project_list:hover + .arrow {
|
|
/* color: rgb(0, 127, 255); */
|
|
/* transition-property: transform; */
|
|
/* transition-duration: 700ms; */
|
|
opacity: 1;
|
|
}
|