Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
body {
margin: 0;
background-color: white;
}
.topHeader{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(rgb(63, 63, 63),#888888);
padding: 50px;
font-size: 42px;
font-weight: bold;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.topHeader h1{
font-size: 42px;
font-weight: bold;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.headerImg {
width: 120px;
height: 60px;
}
.bottomHeader {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #888888;
padding: 50px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.traitBox{
display: flex;
flex-direction: column;
padding: 0px 30px;
margin: 70px;
width: 50%;
height: 280px;
background: linear-gradient(rgb(117, 117, 117),rgb(218, 218, 218));
}
.traitBox:nth-of-type(2) {
background: linear-gradient(rgb(146, 245, 248),#cffafd);
}
.traitBox:nth-of-type(3) {
background: linear-gradient(rgb(226, 226, 226),#f5f5f5);
}
.traitBox p{
font-size: 18px;
}
.box{
display: flex;
align-items: center;
}
.headerP{
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
font-size: 30px;
font-weight: bold;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h2{
display: flex;
justify-content: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
p{
display: flex;
justify-content: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.imgaboutme{
display: flex;
width: 270px;
height: 270px;
}
.aboutMe{
display: flex;
flex-direction: column;
margin: 50px 150px;
padding: 20px;
justify-content: center;
align-items: center;
}
.aboutMe p{
padding-left: 20px;
font-size: 18px;
}
.skills{
display: flex;
flex-direction: row-reverse;
align-items: center;
margin: 50px 320px;
width: 650px;
height: 200px;
background-color: #939393;
}
.skills p{
font-size: 18px;
padding-left: 20px;
}
.imgskills{
width: 230px;
height: 200px;
}
footer{
padding: 60px;
background-color: #959595;
}
@media only screen and (max-width:500px){
.box{
flex-direction: column;
}
.topHeader{
padding-left: 60px;
width: 280px;
font-size: 40px;
}
.aboutMe{
display: flex;
flex-direction: column;
width: 350px;
margin: 20px;
padding: 0px;
}
.imgaboutme{
width: 270px;
height: 260px;
margin-left: 40px;
}
.traitBox{
align-items: center;
margin: 50px;
}
.skills{
display: flex;
flex-direction: column;
margin: 20px;
width: 350px;
padding-right: 10px;
}
.imgskills{
margin: 30px 20px 10px 60px;
}
footer{
padding: 0px;
}
.footerFix{
margin-top: 250px;
padding: 60px;
}
}