ByrvjX

ByrvjX.markdown

ByrvjX

A Pen by Ringoluo on CodePen.

License.

index.html

<ul class="cat-list">
  
  <li>
    <p>Web Basis</p>
    <ul>
      <li>HTTP</li>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JAVASCRIPT</li>
    </ul>
  </li>
    
  <li>
    <p>Web Frameworks</p>
    <ul>
      <li>ANGULARJS</li>
      <li>JQUERY</li>
      <li>BOOTSTRAP</li>
      <li>LODASH</li>
      <li>REQUIREJS</li>
      <li>SASS</li>
      <li>YEOMAN/BOWER</li>
      <li>GRUNT/GULP</li>
      <li>KARMA/JASMINE</li>
      <li>CHROME DEVTOOLS</li>
    </ul>
  </li>
  
  <li>
    <p>Server Side</p>
    <ul>
      <li>VALIDATION</li>
      <li>CACHING</li>
      <li>AUTHENTICATION</li>
      <li>REST API</li>
    </ul>
  </li>
    
  <li>
    <p>Database</p>
    <ul>
      <li>SQL</li>
      <li>MONGODB</li>
    </ul>
  </li>
      
  <li>
    <p>Java</p>
    <ul>
      <li>JVM</li>
      <li>GROOVY</li>
      <li>TESTING</li>
      <li>SPRING</li>
      <li>JAVA8</li>
      <li>GRADLE</li>
    </ul>
  </li>
      
  <li>
    <p>Programming
    <ul>
      <li>ALGORITHMS</li>
      <li>GIT</li>
      <li>PYTHON</li>
      <li>LUA</li>
    </ul>
  </li>
  
  <li>
    <p>Team Work</p>
    <ul>
      <li>AGILE DEVELOPMENT</li>
      <li>DEVOPS</li>
      <li>PRESENTATION</li>
    </ul>
  </li>
  
  <li>
    <p>Exploration</p>
    <ul>
      <li>HADOOP</li>
      <li>CASSANDRA</li>
      <li>DOCKER</li>
    </ul>
  </li>
</ul>

style.css

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

ul.cat-list {
  border: 5px solid lightcoral;
  display: flex;
  flex-flow: row wrap;
}

ul.cat-list > li {
  margin: 5px;
  background: DeepSkyBlue;
  color: white;
  flex-grow: 1;
}

ul.cat-list p {
  margin: 5px;
  font-size: 1.5em;
  text-decoration: underline;
}

ul.cat-list ul {
  padding: 15px;
}

ul.cat-list ul > li {
  line-height: 1.2em;
}

ul.cat-list ul > li:before {
  content: "> ";    
}