Simple Hierarchy

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

A simple hirarachy with pure css.

Thumbnail
This awesome code was written by rajcsanyiz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rajcsanyiz ©
  • HTML
  • CSS
  • JavaScript
    <h1>Simple Hierarchy <small>with Pure CSS</small></h1>

<div class="container">
  <div class="container">    
    <div class="upper_longline"></div>
    <div class="container">
      <div class="upper_line"></div>
      <div class="box"><span>John</span></div>
      <div class="bottom_line"></div>
    </div>
    <div class="clear-both"></div>
    <div class="clear-both"></div>

    <!-- gyerek elem -->
    <div class="container">
      <div class="container">
        <div class="upper_longline"></div>
        <div class="container">
          <div class="upper_line"></div>
          <div class="box">Peter</div>
          <div class="bottom_line"></div>
        </div>

        <div class="container">
          <div class="upper_line"></div>
          <div class="box">Eve</div>
          <div class="bottom_line"></div>
        </div>

        <div class="container">
          <div class="container">
            <div class="upper_line"></div>            
            <div class="box"><span>Thomas</span></div>
            <div class="bottom_line"></div>
          </div>
          <div class="clear-both"></div>
          <div class="container">
            <div class="upper_longline"></div>
            <div class="container">
              <div class="upper_line"></div>
              <div class="box">Joshua</div>
              <div class="bottom_line"></div>
            </div>
            <div class="container">
              <div class="upper_line"></div>
              <div class="box"><span>David</span></div>
              <div class="bottom_line"></div>
            </div>
          </div>
        </div>

        <div class="clear-both"></div>
      </div>
    </div>
    <!-- end of child element -->
  </div>
</div>

/*Downloaded from https://www.codeseek.co/rajcsanyiz/simple-hierarchy-BjJPgL */
    body {
  text-align: center;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  background-color: #ffe;
}

h1 {
  color: #820;
}

.box {
  padding: 5px;
  border: 1px dashed #eee;
  border-radius: 5px;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  box-shadow: 0px 0px 3px black;
  background: f4f5ec;  
  background: -webkit-linear-gradient(top, #aa9999, #f7f8fc, white);
  background: -o-linear-gradient(top, #aa9999, #fefefe, white);
  background: -moz-linear-gradient(top, #aa9999, #fefefe, white);
  background: linear-gradient(to bottom, #aa9999, #fefefe, white);
  width: 100px;
  height: 40px;
  margin-right: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
}

.space {
  display: inline-block;
  vertical-align: top;
  width: 5px;
  height: 40px;
  background-color: #eea;
  padding-top: 10px;
}

.container {
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

.clear-both {
  clear: both;
}

.upper_longline {
  margin-left: 50px;
  margin-right: 50px;
  height: 0px;
  border-top: 1px dashed black;
}

.upper_line {
  width: 50%;
  height: 20px;
  border-right: 1px dashed black;
}

.bottom_line {
  color: red;
  width: 50%;
  height: 20px;
  border-right: 1px dashed black;
  clear: left;
}

span {
  color: #d20;
}


/*Downloaded from https://www.codeseek.co/rajcsanyiz/simple-hierarchy-BjJPgL */
    

Comments