03/10/23 firstcommit
This commit is contained in:
@@ -0,0 +1,282 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@200;500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
|
||||
|
||||
/* Home Page CSS */
|
||||
body,
|
||||
html {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
html.active {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.homePage-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Menu rideau */
|
||||
.nav-toggler {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #f1f1f1;
|
||||
transition: transform 0.3s ease-out,
|
||||
opacity 0.1s ease-out;
|
||||
}
|
||||
|
||||
.l1 {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.l3 {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.nav-toggler.active .l1 {
|
||||
transform: translateY(0px) rotate(45deg);
|
||||
}
|
||||
|
||||
.nav-toggler.active .l2 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-toggler.active .l3 {
|
||||
transform: translateY(0px) rotate(-45deg);
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: #111;
|
||||
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.73, 0.11, 0.67, 0.84);
|
||||
}
|
||||
|
||||
nav.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
nav a {
|
||||
font-family: 'Sofia Sans Semi Condensed', sans-serif;
|
||||
color: #f1f1f1;
|
||||
font-size: clamp(40px, 5vw, 60px);
|
||||
display: block;
|
||||
margin: 20px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.txtHover:hover {
|
||||
color: #ff7700;
|
||||
}
|
||||
|
||||
/* Partie haute de la page */
|
||||
|
||||
.homePage-top {
|
||||
background-color: #ff7700;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
.Home-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.titleNav {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.titleNav p {
|
||||
color: #f1f1f1;
|
||||
font-size: 4rem;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.textAcroche-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 88vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.textAcroche {
|
||||
color: #f1f1f1;
|
||||
width: 60vw;
|
||||
font-size: clamp(40px, 5vw, 50px);
|
||||
font-family: 'Sofia Sans Semi Condensed', sans-serif;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 15vh;
|
||||
}
|
||||
|
||||
/* Partie basse de la page */
|
||||
.homePage-bottom {
|
||||
background-color: #fff;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.recentsProjects-container h1 {
|
||||
font-size: clamp(45px, 5vw, 70px);
|
||||
text-align: center;
|
||||
font-family: 'Sofia Sans Semi Condensed', sans-serif;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/* Swiper Content */
|
||||
.swiper-slide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.slide-img {
|
||||
border-top-left-radius: 30px;
|
||||
border-top-right-radius: 30px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-color: #ff7700;
|
||||
}
|
||||
|
||||
#slideOne {
|
||||
background-image: url("../img/bgMountain.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 25%;
|
||||
}
|
||||
|
||||
#slideTwo {
|
||||
background-image: url("../img/bgHtmlAndCss.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 25%;
|
||||
}
|
||||
|
||||
#slideThree {
|
||||
background-image: url("../img/imgCity.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 25%;
|
||||
}
|
||||
|
||||
.slide-title {
|
||||
font-size: 1.5rem;
|
||||
color: rgb(44, 44, 44);
|
||||
font-family: 'Tilt Warp', cursive;
|
||||
margin-left: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.slide-title h2 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.slide-desc {
|
||||
color: rgb(72, 72, 72);
|
||||
font-size: 1.25rem;
|
||||
font-family: 'Sofia Sans Semi Condensed', sans-serif;
|
||||
margin-right: 30px;
|
||||
margin-left: 30px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.slide-readmore-btn {
|
||||
height: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slide-readmore-btn button {
|
||||
border: solid 3px;
|
||||
border-color: #111;
|
||||
border-radius: 0px;
|
||||
background-color: transparent;
|
||||
color: #111;
|
||||
font-family: 'Tilt Warp', cursive;
|
||||
font-size: 1.5rem;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.slide-readmore-btn a {
|
||||
text-decoration: none;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.slide-readmore-btn button:hover {
|
||||
color: #ff7700;
|
||||
border-color: #ff7700;
|
||||
}
|
||||
|
||||
.slide-readmore-btn a:hover {
|
||||
color: #ff7700;
|
||||
}
|
||||
|
||||
|
||||
/* FOOTER */
|
||||
footer {
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
@media screen and (max-width:767px) {
|
||||
.titleNav {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.textAcroche {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.recentsProjects-container h1 {
|
||||
margin-top: 10%;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user