Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
background-color: ghostwhite;
}
h1 {
font-size: 3rem;
font-weight: bold;
}
h2 {
font-size: 2rem;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #202020;
position: fixed;
z-index: 1;
}
._innder_header_ {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
}
.logo_container {
height: 100%;
display: table;
float: left;
margin-top: 1rem;
margin-left: 1rem;
}
.logo_container h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-size: 32px;
font-weight: 200;
}
.logo_container h1 span {
font-weight: 800;
}
.navigation {
float: right;
height: 100%;
}
.navigation li {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a:last-child {
padding-right: 0;
}
.navigation li a {
display: table-cell;
vertical-align: middle;
color: white;
font-size: 16px;
}
.hamburger {
display: none;
}
.mainPage {
height: 100vh;
background-image: url(https://img.freepik.com/free-vector/white-abstract-wallpaper_23-2148830026.jpg);
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
}
.mainText {
display: flex;
flex-direction: column;
align-items: center;
}
.inner_Text {
text-align: center;
font-size: 17.6px;
}
.containerSocial {
position: relative;
top: -17%;
}
.SocialBar {
display: flex;
flex-direction: column;
position: absolute;
}
#socialPic {
width: 50px;
}
.aboutmePage {
height: 100vh;
background-color: ghostwhite;
}
.aboutmeContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 67vh;
}
.h1-text {
font-size: 2rem;
}
.p-text {
width: 50%;
}
#PictureOfMe {
width: 200px;
border-radius: 14%;
margin-left: 79%;
}
.CVbalk {
padding: 1%;
border-radius: 5%;
color: white;
background-color: #202020;
font-weight: bold;
margin-top: 2rem;
}
.skillBar {
font-weight: bold;
font-size: 2rem;
margin-left: 3rem;
}
.skillbarow {
display: flex;
flex-wrap: wrap;
}
.skills {
padding: 1%;
margin-right: 1.5rem;
margin-top: 4%;
font-size: 20px;
background: rgba(153, 153, 153, 0.2);
border-radius: 5px;
font-weight: 600;
color: #666;
}
.projectPage {
height: 175vh;
background-color: snow;
}
.project-Text {
text-align: center;
min-height: 30vh;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.projects_Content {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"projects projects projects projects projects projects projects projects projects projects projects projects"
"projects projects projects projects projects projects projects projects projects projects projects projects"
"projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2"
"projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2"
"projects3 projects3 projects3 projects3 projects3 projects3 projects3 projects3 projects3 projects3 projects3 projects3"
". . . . . . . . . . . .";
}
.projects {
grid-area: projects;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.project1-Text {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
width: 43rem;
}
.image-container {
max-width: 100%;
height: auto;
}
.projects2 {
grid-area: projects2;
margin-top: -12rem;
}
#projectPic {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.projectButton {
width: 12rem;
padding-block: 1.5rem;
border-radius: 5%;
color: white;
background-color: #202020;
font-weight: bold;
margin-top: 1.5rem;
}
#project2Pic {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.project2-Text {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
width: 43rem;
}
.project2-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.projects3 {
grid-area: projects3;
}
.project3-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
margin-top: -11rem;
}
.project3-Text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
#project3Pic {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.AllProject{
display: flex;
justify-content: center;
margin-top: 6rem;
}
.AllProjectBtn{
padding-block: 1.4rem;
border-radius: 5%;
color: white;
background-color: #202020;
font-weight: bold;
width: 12rem;
text-align: center;
}
html,
body,
.projects_Content {
height: 100%;
margin: 0;
}
/* other page */
._header_container {
width: 100%;
height: 80px;
display: block;
background-color: #202020;
position: fixed;
z-index: 1;
display: flex;
}
._header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
}
._ProjectTitle {
color: white;
display: flex;
justify-content: center;
margin-top: 0.6rem;
}
._projectContainer{
display: flex;
min-height: 100vh;
align-items: center
}
.card-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
._cardBox {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"_Image _Image _Image"
"_Name _Name ."
"_Btn . .";
height: auto;
object-fit: contain;
}
.card{
width: 305px;
height: 225px;
background-color: #FFF0F5;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px black;
margin: 20px;
display: flex;
}
._Image {
grid-area: _Image;
background-color: #f0f0f0;
padding: 10px;
display: flex;
justify-content: center;
overflow: hidden;
align-items: stretch;
}
._Name {
grid-area: _Name;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 25px;
}
._Development{
display: flex;
flex-direction: column-reverse;
}
._Btn {
grid-area: _Btn;
display: inline-block;
padding: 8px 16px;
background-color: black;
text-decoration: none;
border-radius: 4px;
margin: 1rem;
font-weight: bold;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
html, body , ._cardBox {
height: 100%;
margin: 0;
}
.endPage {
height: 100vh;
background-image: url(https://img.freepik.com/free-vector/white-abstract-wallpaper_23-2148830026.jpg);
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.contactInfo {
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 5rem;
min-height: 30vh;
}
.info-Text {
font-size: 1.5rem;
font-weight: normal;
}
.mailContainer {
min-height: 30vh;
display: flex;
justify-content: center;
}
.E-Mails {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
gap: 2rem;
}
.mail-picture {
width: 60px;
height: 60px;
}
.logo {
width: 30px;
height: 30px;
}
.LinksContainer {
display: flex;
justify-content: space-evenly;
align-items: center;
min-height: 20vh;
}
.LinksContainer div {
display: flex;
align-items: center;
}
.LinksContainer a {
color: black;
padding-left: 4%;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: white;
width: 100%;
height: 4rem;
position: absolute;
bottom: 0;
left: 0;
}
@media (max-width: 1035px) {
#PictureOfMe {
display: none;
}
.card-container{
margin-top: 7rem;
}
}
@media screen and (min-width: 600px) and (max-width: 1050px) {
._innder_header_ {
width: auto;
height: 100%;
display: block;
margin: 0 auto;
}
}
@media (max-width: 608px) {
h1 {
font-size: 2rem;
}
.navigation {
display: none;
}
.hamburger {
display: block;
position: fixed;
top: 20px;
right: 10px;
font-size: 30px;
cursor: pointer;
color: white;
z-index: 1;
}
.mobile-menu {
display: none;
position: fixed;
top: 0;
right: 0;
background-color: #202020;
border-radius: 5px;
max-width: 100%;
padding: 10px;
z-index: 1;
}
.mobile-menu a {
padding: 10px 20px;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
}
.mobile-menu a:hover {
background-color: #555;
}
.mobile-menu.visible {
display: block;
}
.SocialBar {
display: none;
}
.mainText {
text-align: center;
}
.CVbalk {
padding: 1rem;
margin-top: 2rem;
}
.skills {
padding: 1rem;
}
.project3-container {
margin-top: -22rem;
}
.E-Mails {
display: flex;
flex-direction: column;
gap: 1rem;
}
.LinksContainer {
display: flex;
flex-direction: column;
gap: 1rem;
}
.LinksContainer div {
display: flex;
flex-direction: column;
}
.footer {
margin-top: 6rem;
}
}