🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../../public_html/../../587371.klas4s23.mid-ica.nl/public_html/../public_html/CSS/profiel.css

* {
  font-family: Arial, Helvetica, sans-serif;
}

html,
body,
.container {
  height: 100%;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "navArea navArea navArea navArea navArea navArea"
    ". titleArea titleArea titleArea titleArea ."
    ". . . . . ."
    ". personalImg personalImg mainText mainText ."
    ". personalImg personalImg mainText mainText ."
    ". personalImg personalImg mainText mainText ."
    ". personalImg personalImg mainText mainText ."
    ". . . . . ."
    ". . . . . .";
  background-image: url(/Images/Sea\ Wawes.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.navArea {
  grid-area: navArea;

  /* Add a black background color to the top navigation */
  .topnav {
    background-color: deepskyblue;
    overflow: hidden;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 1px;
    border: 7px solid rgb(28, 28, 132);
  }

  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 12px;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: whitesmoke;
    color: black;
  }

  /* Create a right-aligned (split) link inside the navigation bar */
  .topnav a.split {
    float: right;
    background-color: whitesmoke;
    color: black;
  }

  #profiel {
    background-color: rgb(28, 28, 132);
    color: white;
  }
}

.titleArea {
  grid-area: titleArea;
  color: black;
  background-color: white;
  text-align: center;
  font-weight: bold;
  padding: 25px;
  border: 5px solid black;
  place-self: center;
  justify-self: stretch;
}

.personalImg {
  grid-area: personalImg;
  place-self: center;
  max-width: 100%;
  max-height: 100%;
  border: 5px solid black;
  box-sizing: border-box;
  object-fit: contain;
  justify-self: start;
}

.mainText {
  grid-area: mainText;
  place-self: center;
  max-width: 100%;
  max-height: 100%;
  border: 5px solid black;
  background-color: white;
  text-align: center;
  justify-self: end;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-content: stretch;
  padding: 95px;
}

@media screen and (max-width: 1025px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "navArea navArea navArea navArea navArea navArea"
      ". titleArea titleArea titleArea titleArea ."
      ". . . . . ."
      ". personalImg personalImg mainText mainText ."
      ". personalImg personalImg mainText mainText ."
      ". personalImg personalImg mainText mainText ."
      ". . . . . ."
      ". . . . . .";
    background-image: url(/Images/Sea\ Wawes.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .mainText {
    padding: 50px;
  }

}

@media screen and (max-width: 769px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "navArea navArea navArea navArea navArea navArea"
      ". titleArea titleArea titleArea titleArea ."
      ". . . . . ."
      ". personalImg personalImg mainText mainText ."
      ". personalImg personalImg mainText mainText ."
      ". personalImg personalImg mainText mainText ."
      ". . . . . ."
      ". . . . . .";
    background-image: url(/Images/Sea\ Wawes.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .mainText {
    padding: 29px;
  }

  .personalImg {
    box-sizing: border-box;
  }
}

@media screen and (max-width: 426px) {

  .container {
    display: grid;
    grid-template-columns: 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:
      "navArea navArea navArea navArea navArea navArea"
      ". titleArea titleArea titleArea titleArea ."
      ". personalImg personalImg personalImg personalImg ."
      ". personalImg personalImg personalImg personalImg ."
      ". mainText mainText mainText mainText ."
      ". mainText mainText mainText mainText .";
  }

  .navArea {
    grid-area: navArea;
  }

  .titleArea {
    grid-area: titleArea;
    box-sizing: border-box;
    justify-items: center;
    padding: 1px;
  }

  .personalImg {
    grid-area: personalImg;
    place-self: center;
    align-self: center;
  }

  .mainText {
    grid-area: mainText;
    padding: 5px;
  }

}

🎯 Available Actions