Forest Layout

In this example below you will see how to do a Forest Layout with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by anthropology, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright anthropology ©
  • HTML
  • CSS
  • JavaScript
    <div class="header"></div>

<div class="name">DARKOLOGY</div>

<div class="content">

  <div id="dp-cont">
  
    <div id="dp"></div>
    <div id="button1">ADD</div>
    <div id="button2">MESSAGE</div>
    <div id="button2">CHAT</div>
    <div id="button2">BLOCK</div>
  
  </div>

</div>

<div class="spacer">◂ABOUT ME▸</div>

<div class="content">

  <div id="cont-container"></div>
  
</div>

<div class="spacer">◂OTHER STUFF▸</div>

<div class="content"></div>

<div class="spacer">◂ROLEPLAY CHARACTERS▸</div>

<div class="content">

  <div id="rp1">
    
    <h1 id="rp-head"><b>The Huntsmen</b></h1>
    
    <p id="rp-para">
      
      This is testing text to see how my paragraph formatting is working
      I hope that it's going well
    
    </p>
  
  </div>
  <div id="rp2">
  
    <h1 id="rp-head"><b>A Supernatural Presence</b></h1>
    
    <p id="rp-para"> This is testing text </p>
  
  </div>
  <div id="rp3">
  
    <h1 id="rp-head"><b>Something Not Of This World</b></h1>
    
    <p id="rp-para"> This is testing text </p>
  
  </div>

</div>

<div class="footer">DESIGNED BY: ANTHROPOLOGY @ IMVU</div>

/*Downloaded from https://www.codeseek.co/anthropology/forest-layout-xRxNBz */
    @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');


body {
  background: black;
  margin: 0;
  padding: 0;
  
}

.header {
  width: 1000px;
  height: 200px;
  background: url('https://i.imgur.com/tFGsaLK.jpg');
  margin-left: auto;
  margin-right: auto;
  
}

.name {
  width: 1000px;
  height: 20px;
  background: black;
  color: #e2e2e2;
  font-family: 'Roboto Slab', serif;
  text-align: center;
  font-size: 8px;
  letter-spacing: 3px;
  line-height: 22px;
  margin-left: auto;
  margin-right: auto;
  
}

.content {
  width: 1000px;
  height: 300px;
  background: #FAFAFA;
  margin-left: auto;
  margin-right: auto;
  
}

.spacer {
  width: 1000px;
  height: 75px;
  background: url('https://i.imgur.com/toSB9w4.jpg');
  color: #e2e2e2;
  font-family: 'Roboto Slab', serif;
  text-align: center;
  font-size: 8px;
  letter-spacing: 4px;
  line-height: 70px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;           
   transition: all 0.3s ease-in-out;
  
}

.spacer:hover {
  letter-spacing: 8px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;           
   transition: all 0.3s ease-in-out;
  
}

.footer { 
  width: 1000px;
  height: 20px;
  background: black;
  color: white;
  font-family: 'Roboto Slab', serif;
  text-align: center;
  font-size: 8px;
  letter-spacing: 3px;
  line-height: 22px;
  margin-left: auto;
  margin-right: auto;
  
}

/* Content-ish stuff begins here */

#cont-container {
  width: 600px;
  height: 250px;
  background: white;
  float: left;
  margin-left: 200px;
  margin-top: 25px;
  
}

#dp-cont {
  width: 450px;
  height:260px;
  background: none;
  float: left;
  margin-left: 275px;
  margin-top: 20px;
  
}

#dp {
  width: 160px;
  height: 220px;
  background: black;
  float: left;
  margin-left:20px;
  margin-top: 20px
  
}

#button1 {
  width: 248px;
  height: 53.5px;
  background: black;
  color: white;
  font-family: 'Roboto Slab', serif;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 48px;
  float: right;
  margin-right: 20px;
  margin-top: 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;           
   transition: all 0.3s ease-in-out;
  
}

#button1:hover{
  letter-spacing: 6px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;           
   transition: all 0.3s ease-in-out;
  
}

#button2 {
  width: 248px;
  height: 53.5px;
  background: black;
  color: white;
  font-family: 'Roboto Slab', serif;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 48px;
  float: right;
  margin-right: 20px;
  margin-top: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;           
   transition: all 0.3s ease-in-out;
  
}

#button2:hover {
  letter-spacing: 6px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;           
   transition: all 0.3s ease-in-out;
  
}

#rp1 {
  width: 250px;
  height: 280px;
  background: none;
  float: left;
  margin-left: 62.5px;
  margin-top: 10px;
  
}

#rp2 {
  width: 250px;
  height: 280px;
  background: none;
  float: right;
  margin-right: 62.5px;
  margin-top: 10px;
  
}

#rp3 {
  width: 250px;
  height: 280px;
  background: none;
  float: left;
  margin-left: 62.5px;
  margin-top: 10px;
  
}

/* Text formatting */

#rp-head {
  color: black;
  font-family: 'Roboto Slab', serif;
  font-size: 10px;
  text-align: center;
  
}

#rp-para {
  color: black;
  font-family: 'Roboto Slab', serif;
  font-size: 10px;
  text-align: justify;
  
}


/*Downloaded from https://www.codeseek.co/anthropology/forest-layout-xRxNBz */
    

Comments