Hejsa!

En af de ting man næsten kan høre om dagligt i chatten, er det her med at lave et fedt layout til sin profil. Der er rigtig mange der lærer at kode i HTML, blot ved at være på WoP, eller for de gamle (undskyld jeg kalder jer det), så har de lært det fra dengang de startede på forgængeren, PS.

Uanset hvor man har lært det, så er det dog aldrig for sent at lære nyt. Selvom internettet er fyldt med inspiration, så koder alle forskelligt og det kan være svært at finde frem til hvad man egentlig selv kunne have lyst til at lave. Derfor vil denne serie komme op i ny og næ med inspiration og hvordan visse koder kan sættes op.

Jeg har selv lige leget med en kode der skulle åbne en dør ind til min egen profil. Den har jeg valgt at tage med til jer i dag, men det har også givet mig sjove idéer, for hvad nu hvis man ønsker at gemme døre bag døren? Det vil virkelig kunne meget, hvis man leger videre med denne kode. Denne er blot en simpel som eksempel, men skulle du have brug for hjælp til at arbejde videre med døren, hjælper jeg naturligvis gerne.

Reelt Eksempel

Dørportal

Velkommen indenfor!

Herinde placerer du selve profilen, teksten, billederne osv.

Koden bag

<!-- HTML CONTAINER -->
<div class="door-frame">
  <div class="doors-wrapper" id="doorPortal">
    <div class="door door-left"></div>
    <div class="door door-right"></div>
    <div class="door-overlay">
      <button type="button" class="door-btn" onclick="openDoors()">Åben dørene</button>
    </div>
  </div>
  <div class="door-content">
    <h3>Velkommen indenfor!</h3>
    <p>Herinde placerer du selve profilen...</p>
    <button type="button" class="door-btn" onclick="closeDoors()">Luk dørene igen</button>
  </div>
</div>

<!-- CSS -->
<style>
.door-frame {
  position: relative;
  width: 100%;
  max-width: 450px;
  height: 380px;
  margin: 0 auto;
  background-color: #f6eedf;
  border: 3px solid #b85c19;
  border-radius: 140px 140px 10px 10px;
  overflow: hidden;
  perspective: 1000px;
  text-align: center;
}
.doors-wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  z-index: 10;
  transition: visibility 0.5s ease 0.8s;
}
.door {
  width: 50%; height: 100%;
  background-color: #d8be9b;
  border: 1px solid #b85c19;
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.door-left {
  border-top-left-radius: 140px;
  transform-origin: left center;
}
.door-right {
  border-top-right-radius: 140px;
  transform-origin: right center;
}
.door-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}
.door-btn {
  background: #b85c19;
  color: #fff;
  border: none;
  padding: 7px 15px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
}
.door-content {
  padding: 40px 15px;
}
.doors-wrapper.open .door-left {
  transform: rotateY(-110deg);
}
.doors-wrapper.open .door-right {
  transform: rotateY(110deg);
}
.doors-wrapper.open .door-overlay {
  opacity: 0;
  pointer-events: none;
}
.doors-wrapper.open {
  pointer-events: none;
  visibility: hidden;
}
</style>

<!-- JAVASCRIPT -->
<script>
function openDoors() {
  document.getElementById('doorPortal').classList.add('open');
}
function closeDoors() {
  document.getElementById('doorPortal').classList.remove('open');
}
</script>

Inspirationerne er mange

Det handler ikke altid bare om at finde på sin egen kode, men primært mere at finde det der passer til en selv. Der er rigtig mange med forskellige evner herinde og rundt på nettet. Naturligvis skal man ikke tage en kode, som man ikke har fået lov til, men står man med en tanke man ikke kan få til at du er det altid muligt at spørge en der har noget lignende. Derudover vil jeg virkelig også gerne henvise til sidens forside, når man er logget ind, for her er altid nævnt hvem der i skrivende stund er kodesupporter for siden.

Tøv aldrig med at stille spørgsmål, vi er til for at hjælpe hinanden.