You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
2.6 KiB
140 lines
2.6 KiB
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
|
|
html{
|
|
scroll-behavior: smooth;
|
|
}
|
|
body{
|
|
margin: 0px;
|
|
padding: 0px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
nav{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 5px solid #6f6f6f;
|
|
}
|
|
nav h1{
|
|
color: #717171;
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 30px;
|
|
}
|
|
nav .onglets{
|
|
margin-top: 3px;
|
|
margin-left: 300px;
|
|
}
|
|
nav .onglets a{
|
|
text-decoration: none;
|
|
color: #000;
|
|
margin-right: 10px;
|
|
border-bottom: 1px solid #000;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
header{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: url('Saint-seiya.png');
|
|
background-size: cover;
|
|
color: #fff;
|
|
padding: 40px;
|
|
}
|
|
header h1{
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 60px;
|
|
margin-top: -25px;
|
|
color: gold
|
|
}
|
|
header h4{
|
|
margin-top: -20px;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #fff;
|
|
color: gold
|
|
}
|
|
header button{
|
|
padding: 10px 20px;
|
|
background-color: #fff;
|
|
color:#000;
|
|
border:none;
|
|
margin-bottom: 30px;
|
|
outline:none;
|
|
font-size: 20px;
|
|
font-family: 'Playfair Display', serif;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.main{
|
|
margin-top: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.main .content .card{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-bottom:20px;
|
|
}
|
|
.main .content .card .left{
|
|
flex: 0 0 30%;
|
|
padding: 20px;
|
|
background-color:black;
|
|
color:#fff;
|
|
}
|
|
.main .content .card .right img{
|
|
height:300px;
|
|
width: 400px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
footer{
|
|
margin-top: 40px;
|
|
border-top: 5px solid #6f6f6f;
|
|
background-color: rgb(0, 0, 0);
|
|
color: #fff;
|
|
padding: 30px 100px;;
|
|
}
|
|
footer h1{
|
|
font-family: 'Playfair Display', serif;
|
|
border-bottom: 1px solid white;
|
|
width: 20%;
|
|
padding-bottom: 5px;
|
|
}
|
|
footer .services{
|
|
margin-top: -10px;
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
}
|
|
footer .services .service{
|
|
margin-right: 30px;
|
|
}
|
|
footer .services .service p{
|
|
max-width: 300px;
|
|
}
|
|
footer #contact{
|
|
color: rgb(181, 181, 181);
|
|
}
|
|
|
|
@media screen and (max-width:680px){
|
|
nav .onglets {
|
|
margin-left: 0px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.main .card {
|
|
margin: 10px;
|
|
}
|
|
.main .content .card .right img{
|
|
height:200px;
|
|
width: 100%;
|
|
margin-top: -0px;
|
|
}
|
|
.main .content .card{
|
|
display: block;
|
|
}
|
|
footer{
|
|
padding: 30px;
|
|
}
|
|
}
|