Skip to content
Snippets Groups Projects
Commit 9e9c692a authored by Lorenzo Flagothier's avatar Lorenzo Flagothier
Browse files

First commit

parents
Branches
No related tags found
No related merge requests found
Showing
with 624 additions and 0 deletions
body{
padding: 0;
margin: 0;
box-sizing: border-box;
}
main{
margin-top: 120px;
}
.containForm{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #222223;
color: white;
padding: 20px;
}
form{
width: 80%;
text-align: center;
background-color: white;
font-size: 25px;
padding: 25px 50px;
border-radius: 25px;
}
form input[type="text"],form input[type="tel"],form input[type="email"]{
width: 50%;
height: 50px;
margin-top: 20px;
border-radius: 20px;
border: 2px solid #222223;
text-align: center;
font-size: 25px;
transition: .5s;
}
form input[type="text"]:focus,form input[type="tel"]:focus,form input[type="email"]:focus{
width: 60%;
}
form textarea{
margin-top: 20px;
width: 80%;
height: 400px;
font-size: 18px;
border: 2px solid #222223;
border-radius: 20px;
padding: 10px;
}
form input[type="submit"]{
cursor: pointer;
margin-top: 10px;
width: 150px;
height: 60px;
border-radius: 20px;
border: none;
font-size: 20px;
transition: .5s;
border: 2px solid transparent;
background-color: #222223;
color: white;
}
form input[type="submit"]:hover{
background-color: white;
color: #222223;
border-color:#222223;
}
.containImg{
text-align: center;
padding: 20px;
}
.containImg img{
border: 5px solid #222223;
border-radius: 20px;
}
.contentImg{
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-content: center;
}
@media screen and (max-width: 1500px){
.containImg img{
min-width: 100px;
width: 50vw;
}
}
\ No newline at end of file
body{
margin: 0;
box-sizing: border-box;
height: 1000px;
}
main{
margin-top: 150px;
}
.bgBlack{
background-color: #222223;
color: aliceblue;
}
section{
display: flex;
justify-content: center;
align-content: center;
padding-top: 50px;
padding-bottom: 50px;
}
.img{
grid-area: img;
}
.img img{
width: 450px;
height: auto;
max-width: 450px;
min-width: 150px;
}
.p{
grid-area: p;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.p div{
width: 80%;
}
.p div p{
font-size: clamp(5px, 2vw, 20px);
}
.content{
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
width: 70%;
}
section img{
width: 50vw;
border-radius: 25px;
border: .5vw solid #222223;
}
.bgBlack img{
border-color: white;
}
@media screen and (max-width:1100px) {
main{
margin-top: 10vw;
}
.img img{
width: 100%;
min-width: 150px;
}
}
\ No newline at end of file
.pageChargement{
background-color: rgba(255, 255, 255, 0.95);
position: fixed;
width: 100vw;
height: 100vh;
visibility: visible;
animation: 1.5s hidePage;
animation-fill-mode: forwards;
}
.pageChargement img{
position: absolute;
transform: translate(-50%,-50%);
top: 30%;
left: 50%;
width: 200px;
animation:1.5s cubic-bezier(0.77, 0.07, 0.2, 1.27) infinite tourner ;
}
.containLoad{
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
background-color: transparent;
width: 300px;
border: #222223 solid 2px;
border-radius: 10px;
}
.pageChargement .load{
background-color: #222223;
height: 5px;
width: 0%;
animation: 1.5s linear infinite loadBarre;
}
@keyframes tourner{
0%{
transform: translate(-50%,-50%) rotate(0deg);
}
100%{
transform: translate(-50%,-50%) rotate(360deg);
}
}
@keyframes loadBarre{
0%{
width: 0%;
}
10%{
width: 3%;
}
20%{
width: 10%;
}
50%{
width: 60%;
}
65%{
width: 68%;
}
80%{
width: 90%;
}
100%{
width: 100%;
}
}
@keyframes hidePage {
99% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
\ No newline at end of file
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #222223;
}
main{
margin-top: 150px;
}
h2{
text-align: center;
margin-top: 50px;
}
p{
text-align: center;
}
.blackBg{
background-color: #222223;
color: white;
}
.whiteBg{
background-color: white;
color: #222223;
}
form{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 25px;
font-size: 25px;
padding:10px;
width: 500px;
}
.containListe{
text-align: center;
margin-top: 5px;
border-radius: 25px;
padding: 10px;
width: 300px;
}
form input[type="text"], form input[type="email"]{
width: 200px;
padding: 10px 15px;
font-size: 18px;
margin-top: 10px;
border-radius: 20px;
border: none;
text-align: center;
transition: .5s;
}
form input[type="text"]:focus, form input[type="email"]:focus{
width: 250px;
}
form input[type="submit"]{
cursor: pointer;
margin-top: 10px;
width: 150px;
height: 60px;
border-radius: 20px;
border: none;
font-size: 20px;
transition: .5s;
border: 2px solid transparent;
}
form input[type="submit"].whiteBg:hover{
background-color: #222223;
color: white;
border-color:white;
}
form input[type="submit"].blackBg:hover{
background-color: white;
color: #222223;
border-color:#222223;
}
.container{
width: 100%;
display: flex;
justify-content:space-around;
align-items: center;
}
section img{
width: 420px;
height: 420px;
border-radius: 25px;
border: 5px solid #222223;
}
.borderWhite{
border-color: white;
}
@media screen and (max-width: 1000px){
.container{
flex-direction: column;
}
}
\ No newline at end of file
header{
background-color: #222223;
position: fixed;
width: 100%;
color: white;
top:0;
}
header li a{
color: white;
font-size: 25px;
text-underline-offset:10px;
text-decoration-color: white;
transition: .5s;
padding: 10px 5px;
border-radius: 15px;
}
header #nav{
display: flex;
align-items: center;
justify-content: space-between;
height: 86px;
}
header #nav li{
margin: 0!important;
padding: 0!important;
}
header li a:hover, #selected{
text-underline-offset: 0px;
background-color: white;
color: #222223;
}
header details{
display: none;
}
header details summary{
display: flex;
align-items: center;
justify-content: space-between;
}
header details summary img{
height: 86px;
width: auto;
}
header ul{
text-align: center;
}
header .profilButton{
border: 2px white solid;
padding: 5px 10px;
border-radius: 100%;
font-size: 30px;
transition: .5s;
transform: rotate(0deg);
transform-origin: center;
color: white;
}
header .profilButton:hover{
transform: rotate(360deg);
color: #222223;
background-color: white;
}
header .profilButton i{
transition: .5s;
color: white;
}
header .profilButton:hover i{
transform: rotate(360deg);
color: #222223;
}
header ul{
list-style-type: none;
padding: 10px;
}
header ul li{
margin-top: 25px;
}
footer{
background-color: #222223;
display: flex;
align-items: center;
justify-content: center;
color: white;
height: 60px;
font-size: clamp(10px, 1vw, 20px);
position: relative;
}
footer img{
width: 40px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50px;
}
@media screen and (max-width: 1100px){
header li a{
font-size: 20px;
}
}
@media screen and (max-width: 1000px){
header #nav{
display: none;
}
header details{
display:block;
}
header li a{
font-size: 25px;
}
}
@media screen and (max-width: 1000px){
header details summary img{
width: 80%;
height: auto;
}
}
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
body{
font-family: 'Roboto Slab', serif;
}
\ No newline at end of file
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #222223;
text-align: center;
font-family: 'Roboto Slab', serif;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
section{
display: flex;
justify-content: center;
}
form{
background-color: white;
width: 600px;
height: 600px;
padding: 5px 10px;
border-radius: 50px;
font-size: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#form-login{
height: 400px;
}
#firstname-name{
display: flex;
width: 100%;
}
#firstname-name div{
width: 50%;
}
form h3{
margin-bottom: 20px;
}
form .barre{
background-color: #222223;
height: 5px;
border-radius: 24px;
}
form input{
border: #222223 solid 1.9px;
border-radius: 25px;
font-size: 20px;
padding: 10px;
outline: none;
color: #222223;
transition: .5s;
margin-top: 30px;
text-align: center;
}
form input[type="text"]{
width: 120px;
}
form input[type="password"], form #email{
width: 220px;
}
form #submit{
width: 200px;
height: 50px;
background-color: white;
transition: .8s;
border-color: #222223;
}
form input[type="text"]:focus,form input[type="password"]:focus,form #email:focus{
width: 90%;
border-color: rgb(0, 156, 104);
}
form #submit:hover{
background-color: #222223;
color: white;
border-color: white;
width: 230px;
}
form p{
font-size: 15px;
}
.underline{
background-image: linear-gradient(#222223 0 0);
background-position: bottom center;
background-size: 80% 2px;
background-repeat: no-repeat;
}
form p a{
text-decoration: none;
color: #222223;
transition: 1s;
}
form p a:hover{
background-size: 100% 2px;
padding-bottom: 4px;
}
footer{
background-color: #222223;
display: flex;
align-items: center;
justify-content: center;
color: white;
height: 60px;
font-size: clamp(10px, 1vw, 20px);
position: relative;
}
footer img{
width: 40px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50px;
}
\ No newline at end of file
body{
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
justify-content: center;
height: 100vh;
color: #222223;
}
h2{
font-size: 200px;
padding: 0;
margin: 0;
color: #40F82A;
}
h2 i{
transform-origin: center;
animation: 1.5s cubic-bezier(0.77, 0.07, 0.2, 1.27) forwards tourner;
}
a{
outline: none;
color: #222223;
padding: 10px 15px;
border: #222223 solid 3px;
border-radius: 25px;
background-color: transparent;
text-decoration: none;
transition: .4s;
}
a:hover{
background-color: #222223;
color: white;
}
@keyframes tourner {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment