Edsger Dijkstra Tribute Page

In this example below you will see how to do a Edsger Dijkstra Tribute Page with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by TurnipEntropy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright TurnipEntropy ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Edsger Dijkstra Tribute Page</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <style>
  .green-text {
    color: green;
  }
  .head {
    margin-top:1%; margin-bottom:-1%;
    font-size: 100px;
    background-color: #005544;
    color: black;
  }
  .rest_of_page {
    background: #ddd;
  }
  .name-head {
    font-size: 80px;
    color: black;
  }
  
  .main-image{
    width:75%;
    height:auto;
  }
  
  .side-bar{
    position:absolute;
    top:0;bottom:0;left:0;
    margin-top:5%;
    margin-left:1%;
    width:10%;
  }
</style>
<div>
  <div class = "span3 side-bar">
    <div class = "toc col-xs-2">
      <div>
        <h2>Contents</h2>
        <ol>
          <li><a href = "#software-engineering-impacts">Software Engineering Impacts</a></li>
          <li><a href = "#algo-contributions">Algorithm Contributions</a></li>
      </div>
    </div>
  </div>
  <div class = "container rest_of_page">
    <div>
      <p class="text-center head"> &Omicron; &Theta; &Omega;</p>
    </div>
    <div>
      <h1 class = "text-center name-head">Edsger Wybe Dijkstra</h1>
      <div>
        <image class = "img-responsive center-block main-image" src = https://upload.wikimedia.org/wikipedia/commons/c/c9/Edsger_Dijkstra_1994.jpg>
      </div>
      <div class = "treeview hover">
        <h2 id = "software-engineering-impacts">Software Engineering Impacts</h2>
        <input type = "checkbox" id = "algo-analysis" checked>
          <label for="algo-analysis">
            <span>Analysis of Algorithms</span>
          </label>
          <ul>
            <li><span>One of the key computer scientists to encourage and influence the formal analysis of algorithms. The "Big Oh" notation, including omicron, theta, and omega notation, is a direct result of his efforts to standardize the language of algorithmic analysis.</span></li>
        </ul>
      </input>
    </div>
    <div class = "treeview hover"> 
      <input type = "checkbox" id = "structured-programming" checked>
        <label for="structured-programming">
          <span>Structured Programming</span>
        </label>
        <ul>
          <li><span>Structured programming was a movement in which much of Dijkstra's works and arguments played a pivotal role. Dijkstra's argument for precise, legible breaks from the linear flow of a program had influences on the programming methodologies of today, such as object-oriented programming.</span></li>
        </ul>
      </input>
    </div>
    <div class = "treeview hover">
        <h2 id = "algo-contributions">Algorithmic Contributions</h2>
        <ul>
          <li>
            <input type = "checkbox" id="dijk-short-path" checked>
              <label for="dijk-short-path">
                <span>Dijkstra's Shortest Path Algorithm</span>
              </label>
              <ul>
                <li><span>A Modified breadth-first search algorithm for graphs with edge lengths greater than one.</span></li>
              </ul>
            </input>
          </li>
          <li>
            <input type = "checkbox" id = "tri-color-marking" checked>
              <label for="tri-color-marking">
                <span>Tri-color Marking Algorithm</span>
              </label>
              <ul>
                <li><span>The tri-color marking algorithm is a basic garbage collection tracing algorithm. It was key to the development of memory managed languages such as Java and Python.</li></span>
              </ul>
            </input>
          </li>
        </ul>  
      </div>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/TurnipEntropy/edsger-dijkstra-tribute-page-rLXxJg */
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url('https://fonts.googleapis.com/css?family=Handlee');
body {
  margin-top: 0px;
  background: #ccc;
}
h2 {
  font-weight: normal;
  color: rgba(5, 5, 5, 0.9);
  margin-left: -1em;
  margin-bottom: 0;
}
.treeview {
  margin-left: 10em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.treeview:hover input ~ label:before,
.treeview.hover input ~ label:before {
  opacity: 1.0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.treeview ul {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  list-style: none;
  padding-left: 1em;
}
.treeview ul li span {
  -webkit-transition-property: color;
  -moz-transition-property: color;
  -ms-transition-property: color;
  -o-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.treeview ul li span:hover {
  color: #005544;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.treeview input {
  display: none;
}
.treeview input:checked ~ ul {
  display: none;
}
.treeview input ~ label {
  cursor: pointer;
}
.treeview input ~ label:before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  margin-left: -1em;
  margin-top: 0.4em;
  border-width: 4px;
  border-style: solid;
  border-top-color: transparent;
  border-right-color: rgba(5, 5, 5, 0.9);
  border-bottom-color: rgba(5, 5, 5, 0.9);
  border-left-color: transparent;
  opacity: 0.0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -ms-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.treeview input:checked ~ label:before {
  margin-left: -0.8em;
  border-width: 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: rgba(5, 5, 5, 0.9);
}

Comments