CodePen Embed - summer days v2

<div id="wrapper" class="container mx-auto p-5">

  <header id="boardHeader" class="mb-5 position-relative g-0">
    <div class="row justify-content-center position-relative g-2">
      <div class="col-12 col-lg-6">
        <div class="header-reki"></div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="header-langa"></div>
      </div>
      <div class="siteName col d-flex flex-wrap justify-content-start justify-content-lg-center align-content-xl-end align-content-xxl-center align-content-lg-end align-content-center position-absolute top-0 h-100 pb-lg-4 pb-xxl-0">
        <div class="siteName-h1 col-lg-12 ps-4 ps-lg-0">
          <h1>summer days</h1>
        </div>
        <div class="siteName-h1 col-lg-12 ps-4 ps-lg-0">
          <h2>a percy jackson-inspired<br> summer camp roleplay</h2>
        </div>
      </div>
    </div>
  </header>

  <div id="innerwrapper" class="row w-lg-75 mx-lg-auto gx-0 gy-3">

    <div id="category-1" class="col-12">
      <div class="row gx-3">
        <div class="col-12 col-lg-8 mb-3 mb-lg-0">
          <div class="row mb-3">
            <div class="col-12">
              <div id="board-1">
                <a href="/"></a>
                <div class="row gx-0">
                  <div class="col-lg-6 col-12">
                    <h3>camp rules</h3>
                    <p>guidebook text goes here. descriptions or whatever. please register in all uppercase letters in first name, last name format.</p>
                  </div>
                  <div class="col-lg-6 col-12 d-flex align-items-end">
                    <img src="https://i.postimg.cc/Fs6f41vJ/guidebookv2.png" class="img-fluid">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div id="board-8" class="justify-content-evenly">
                <h3 class="fs-6">camp staff</h3>
                <div class="staffIMG"><a href="/"><img src="https://i.postimg.cc/1XL1RC3j/icon.png"></a></div>
                <div class="staffIMG"><a href="/"><img src="https://i.postimg.cc/zGHGLB6M/icon3.png"></a></div>
                <div class="staffIMG"><a href="/"><img src="https://i.postimg.cc/sf5WF1ws/icon1.png"></a></div>
                <div class="staffIMG"><a href="/"><img src="https://i.postimg.cc/DZwPNL9Y/5.png"></a></div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-4">
          <div id="board-2">

            <h3><a href="/">news</a></h3>

            <p>site updates and activity checks can be found here

            <dl>
              <dt>latest</dt>
              <dd><a href="/">summer day</a> by <a href="/">patrick stump</a>, 10 hours ago</dd>
            </dl>

            <div id="currentEvent">
              <h4><span>current event</span></h4>
              <h5><a href="/">dramarama</a></h5>
              <p>Oh oh, this drama on top of a stage Oh oh, still glorious Oh oh, we have no problem Nothing but my name Oh oh, goodbye my delusion Oh oh, approaching bye bye Oh oh, drama for you Time to get away</p>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div id="category-2" class="col-12">

      <div class="row gx-3">
        <div class="col-12 col-lg-5 mb-3 mb-lg-0">
          <div id="board-3">
            <h3><a href="/">development</a></h3>

            <p class="m-1">Uh, me and you on an island With the ocean color stuck in your iris We comfortable in silence But I prefer it when we wilding Sundress, nothing underneath as we undress Sundress, nothing underneath as we undress</p>

            <ul>
              <li><a href="/">groups</a></li>
              <li><a href="/">ships</a></li>
              <li><a href="/">wanted ads</a></li>
              <li><a href="/">plotters</a></li>
              <li><a href="/">trackers</a></li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-lg-7">
          <div class="row mb-3">
            <div class="col-12">
              <div id="board-4">
                <h3><a href="/">character creation</a></h3>
                <p>Uh, me and you on an island With the ocean color stuck in your iris We comfortable in silence But I prefer it when we wilding Sundress, nothing underneath as we undress (Woo!) You could look in my eyes, see I'm some mess Couple of broken people Trying to complete each other under one breath</p>

                <dl>
                  <dt>latest</dt>
                  <dd><a href="/">summer day</a> by <a href="/">patrick stump</a>, 10 hours ago</dd>
                </dl>

                <ul>
                  <li><a href="/">application</a></li>
                  <li><a href="/">notification thread</a></li>
                  <li><a href="/">face claim</a></li>
                  <li><a href="/">directory</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="row gx-3">
            <div class="col-4">
              <div id="board-5">
                <h3><a href="/">sk8rs</a></h3>
              </div>
            </div>

            <div class="col-4">
              <div id="board-6">
                <h3><a href="/">h8rs</a></h3>
              </div>
            </div>

            <div class="col-4">
              <div id="board-7">
                <h3><a href="/">d8rs</a></h3>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- end inner wrapper -->
</div>

</div>

<script src="bootstrap/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

:root
  --blue: 105, 194, 224
  --lightblue: 148, 211, 232
  --gold: 253, 161, 29
  --red: 153, 17, 29
  --navy: 44, 28, 196
  --white: 247, 247, 247
  --gray: 240, 240, 240
  --black: 16, 16, 16
  --whte: #f0f1ed

body 
  padding: 0
  margin: 0
  background: linear-gradient(to top, rgba(var(--blue), 0.5), rgba(var(--gold), 0.5)) fixed
  font-size: 14px
  font-family: lato
  
  a
    text-decoration: none
    color: rgba(var(--white),1)
    transition: 0.4s ease

#wrapper 
  margin: 50px auto
  background: var(--whte)
  border-radius: 20px

#wrapper > header div[class*="header-"] 
  height: 530px
  background: url(https://i.postimg.cc/FKh6Y0F5/2.png) 0 / cover
  border-radius: 50px

#wrapper > header div[class*="r-langa"] 
  background: url(https://i.postimg.cc/bwxMYmh9/1.png) 0 / cover
  
.siteName-h1
  display: flex
  justify-content: center
  
  h2 
    width: 420px
    margin: 0
    padding: 0
    font: 900 1rem/1.5em "lato"
    text-transform: uppercase
    letter-spacing: 1.5px
    color: rgba(var(--white), 1)
    text-shadow: 1px 1px rgba(var(--gold), 0.7), -1px -1px rgba(var(--gold), 0.7), -1px 1px rgba(var(--gold), 0.7), 1px -1px rgba(var(--gold), 0.7)
    margin-right: -5rem
    order: 2

.siteName h1 
  font: 5.5rem/1em "bungee"
  width: 350px
  color: rgba(var(--white), 1)
  margin: 0
  padding: 0
  position: relative
  z-index: 2
  order: 1
  
  &:before 
      content: "SUMMER DAYS"
      color: transparent
      position: absolute
      top: -3px
      left: -3px
      -webkit-text-stroke: 2px rgba(var(--gold), 1)
      z-index: 7

  &:after 
    content: "SUMMER DAYS"
    color: transparent
    -webkit-text-stroke: 2px rgba(var(--blue), 1)
    position: absolute
    top: 3px
    left: 3px
    z-index: 3
  
div[id*="board-"]
  border-radius: 10px
  padding: 25px
  overflow: hidden
  
  h3
    margin: 0
    padding: 0
    transition: 0.4s ease
    
  a 
    font-family: bungee
    
  p
    margin-bottom: 0
  
  dl
    margin-top: 1em
    
    dt
      font-weight: 900
      text-transform: uppercase
      letter-spacing: 0.1ch

#board-1 
  background: rgba(var(--blue),1)
  padding: 0
  position: relative
  overflow: hidden
  display: flex
  flex-wrap: wrap
  max-height: 500px
  transition: 0.4s ease
  
  &:hover
    background: rgba(var(--gold),1)
  
    h3
      color: rgba(var(--red),1)
  
  h3
    flex-basis: 100%
    padding: 25px 0 0 25px
    font-family: bungee
    color: rgba(var(--white),1)
  
  p
    padding: 0 25px 25px 25px
    flex-basis: 40%
    
  a 
    width: 100%
    height: 100%
    position: absolute
    top: 0
    left: 0
  
#board-2, #board-4, #board-6
  background: rgba(var(--blue),1)
  
  a:hover
    color: rgba(var(--navy),1)
  
#board-3, #board-5, #board-7, #board-8
  background: rgba(var(--gold),1)
  
  a:hover
    color: rgba(var(--red),1)
  
#board-2
      
  #currentEvent
    background: rgba(var(--white),0.3)
    margin: 0 -2em -2em
    padding: 2em
    
    h4
      font-size: 1em
      text-transform: uppercase
      font-family: bungee
      display: flex
      align-items: center
      margin: 0 0 1em 0
      
      span
        display: block
        position: absolute
        background: rgba(var(--lightblue),1)
        padding: 0 0.2em
      
      &:after 
        content: " "
        display: block
        width: 130%
        border-top: 1px solid
        margin: 0 -2em
    
    h5 
      font-size: 1.25rem
  
#board-3
  padding-bottom: 0

  h3 
    line-height: 1em

  ul 
    list-style-type: none
    margin: 0 -2em 0 -2em
    padding: 0
    position: relative
    z-index: 3
    
    li 
      padding: 0 1em
      letter-spacing: 2px
      font-size: 1.38rem
      line-height: 2em

      &:nth-child(2) 
        background: rgba(var(--white),0.1)

      &:nth-child(3) 
        background: rgba(var(--white),0.175)

      &:nth-child(4) 
        background: rgba(var(--white),0.25)

      &:nth-child(5) 
        background: rgba(var(--white),0.3)
      
      > a 
        display: inline-block
        width: 100%
        margin-left: -1em
        padding-left: 1.2em
        
    p
      margin-bottom: 1em
      
#board-4
  
  p
    margin-bottom: 1em
  
  ul
    list-style-type: "\f6bb"
    font-family: "Font Awesome 6 Pro"
    margin: 1em 1em 0
    padding: 0
    
    li
      padding-left: 0.5em
      margin-right: 1.5em

#board-5, #board-6, #board-7
  padding: 25px 0
  text-align: center
        
#board-8
  position: relative
  height: 85px
  border-radius: 60px
  display: flex
  align-items: center
  
  h3 
    font-family: bungee
    text-align: center
    order: 3
    
  .staffIMG
    width: 65px
    height: 65px
    border-radius: 100%
    position: relative
    z-index: 7
    
    img
      width: 65px
      height: 65px
      border-radius: 100%
      filter: grayscale(100%)
      mix-blend-mode: multiply
      
    &:nth-of-type(odd)
      background: rgba(var(--gold),1)
      
    &:nth-of-type(even)
      background: rgba(var(--blue),1)

    &:nth-of-type(1)
      order: 1

    &:nth-of-type(2)
      order: 2

    &:nth-of-type(3)
      order: 4

    &:nth-of-type(4)
      order: 5
  
  &:before
    content: " "
    display: block
    background: url(https://assets.codepen.io/4400499/botanic1.svg) 0/95px no-repeat
    width: 95px
    height: 63px
    position: absolute
    left: -5px
    top: 15px
    transform: rotate(248deg)
    z-index: 5
  
  &:after
    content: " "
    display: block
    background: url(https://assets.codepen.io/4400499/botanic1.svg) 0/95px no-repeat
    width: 205px
    height: 55px
    position: absolute
    right: -80px
    top: 60px
    transform: rotate(68deg)
    z-index: 5

View Compiled

import * as bootstrap from "https://cdn.skypack.dev/bootstrap@5.1.3";

This Pen is owned by vy on CodePen.

See more by @vvvaporwaves on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js