cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- 
** The instutions for the page. https://www.freecodecamp.com/challenges/build-a-tribute-page
** Inspiration behind the page. https://www.turing.org.uk/
** Starting the page with a Boostrap base. https://getbootstrap.com/examples/theme/#

** How to add the drop shadow to elements and classes. 
https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

** How to change the JQuery style on mouseenter and mouseleave. https://api.jquery.com/css/

** Need to learn more about flex box to get everything lined up correctly. Some of the date fact divs have two lines of text and are throwing row height off. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

** Was able to get all of the date boxes to line up by creating a .dates class, and asigning a uniform hight to all of the .panel-primary classes.

** Added the onclick funtion to hide dates as they are clicked. https://jqueryui.com/effect/

** Added an on on mouseenter tooltip. Not sure why it only shows on the left side of the page. Putting on a z-index didn't make a difference. https://jqueryui.com/tooltip/#tracking

** Want to add a feature where when all date items are hidden a RIP animation will display. hmm I'll have to learn more about CSS animation.

-->



<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Theme Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="theme.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container theme-showcase" role="main">

      <!-- Main jumbotron -->
      <div class="jumbotron">
        <h1>
Who was Alan Turing?</h1>
        <p><em>Founder of computer science, mathematician, philosopher, 
codebreaker</em></p>
        <div>
          <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/Mathematician-Alan-Turing-Imitation-Game-Notebook-553128.jpg" title="Yeah, Alan Turning was always kind of a BAMF."></img>
        <p class="smalltext"><em>Turing aged 16</em></p>
      </div>
      </div>

    <div class="well">
        <p><em><a href="https://en.wikipedia.org/wiki/Alan_Turing" target="_blank">Summary Via Wikipedia</a></em><br> Alan Mathison Turing OBE FRS (/ˈtjʊərɪŋ/; 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.[2][3][4] Turing is widely considered to be the father of theoretical computer science and artificial intelligence.[5]</p>
      </div>
    <!-- Notable Dates -->
    <div class="#dates">
      <div class="row"> <!-- Dates Row -->
        <div class="col-sm-4"> <!-- First Column -->
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1912 (23 June):</h3>
            </div>
            <div class="panel-body">
              Birth, Paddington, London
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1926-31:</h3>
            </div>
            <div class="panel-body">
              Sherborne School
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1930:</h3>
            </div>
            <div class="panel-body">
              Death of friend Christopher Morcom
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1931-34:</h3>
            </div>
            <div class="panel-body">
              Undergraduate at King's College, Cambridge University
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1932-35:</h3>
            </div>
            <div class="panel-body">
              Quantum mechanics, probability, logic. Fellow of King's College, Cambridge
            </div>
          </div>
           <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1936:</h3>
            </div>
            <div class="panel-body">
              The Turing machine, computability, universal machine
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1936-38:</h3>
            </div>
            <div class="panel-body">
              Princeton University. Ph.D. Logic, algebra, number theory
            </div>
          </div>
        </div><!-- /First Column -->
        <div class="col-sm-4"> <!-- Second Column -->
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1938-39:</h3>
            </div>
            <div class="panel-body">
              Return to Cambridge. Introduced to German Enigma cipher machine
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1939-40:</h3>
            </div>
            <div class="panel-body">
              The Bombe, machine for Enigma decryption
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1939-42:</h3>
            </div>
            <div class="panel-body">
              Breaking of U-boat Enigma, saving battle of the Atlantic
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1943-45:</h3>
            </div>
            <div class="panel-body">
              Chief Anglo-American crypto consultant. Electronic work.
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1945:</h3>
            </div>
            <div class="panel-body">
              National Physical Laboratory, London
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1946:</h3>
            </div>
            <div class="panel-body">
              Computer and software design leading the world.
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1947-48:</h3>
            </div>
            <div class="panel-body">
              Programming, neural nets, and artificial intelligence
            </div>
          </div>
        </div><!-- /Second Column -->
        <div class="col-sm-4"> <!-- Third Column -->
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1948:</h3>
            </div>
            <div class="panel-body">
              Manchester University, first serious mathematical use of a computer
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1950:</h3>
            </div>
            <div class="panel-body">
              The Turing Test for machine intelligence
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1951:</h3>
            </div>
            <div class="panel-body">
              Elected FRS. Non-linear theory of biological growth
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1952:</h3>
            </div>
            <div class="panel-body">
              Arrested as a homosexual, loss of security clearance
            </div>
          </div>
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1953-54:</h3>
            </div>
            <div class="panel-body">
              Unfinished work in biology and physics
            </div>
          </div>
                    <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">1954 (7 June):</h3>
            </div>
            <div class="panel-body">
              Death (suicide) by cyanide poisoning, Wilmslow, Cheshire.
            </div>
          </div>
        </div><!-- /Third Column -->
      </div><!-- Dates Row -->
      <p class="centerText">Page Coded by <a href="https://www.freecodecamp.com/benjaminspak" target="_blank">Benjamin Spak.</a></p>
    </div>      
      
    



      


    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

            
          
!
            
              /* Jumbotron Styling */

.jumbotron h1 {
  text-align: center;
}

.jumbotron p {
  text-align: center;
}

.jumbotron img {
  border-radius: 1.5%;
  display: block;
  margin: auto;
  width: 60%;
}

.panel-primary {
  height: 120px;
  border-width: 1px;
  border-color: #FFFFFF;
}

#dates {
  display: inline-flex; 
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.smalltext {
  font-size: 120% !important;
}

.centerText {
  text-align: center;
}
            
          
!
            
              $(document).ready(function() {
  $(".panel-primary").on({
          mouseenter: function(){
              $(this).css({"box-shadow": "5px 5px 5px #999999", "border": "1px #000000"});
              $(this).tooltip({track: true});
          },  
          mouseleave: function(){
              $(this).css("box-shadow", "0px 0px 0px");
          }, 
          click: function(){
              $(this).hide("drop", {direction: "down"}, "slow" );
          }
  });
});
 
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console