madmat27/build-a-tribute-page.markdown

## build-a-tribute-page.markdown

      
    Raw
  

              build-a-tribute-page.markdown
            
          
    Build a Tribute Page

A Pen by Mariana S. Mz on CodePen.
License.

  
## index.html
<body>

  <div class="brand">Alan Turing</div>
  <div class="address-bar">A brilliant mind</div>

  <div class="container">

    <div class="row">
      <div class="box">
        <div class="col-lg-12 text-center">
          <div class="row">
            <div class="col-lg-4 text-center">
          <span> <img src="http://totallyhistory.com/wp-content/uploads/2013/07/alan-turing.jpg" alt="Smiley face" height="200px;" class="img-circle"> </span></div>
            <div class="col-lg-8 text-center">
          <span><h1 class="tagline-divider" style="max-width: 1000px; text-transform: capitalize"><small><strong>"Sometime it is the people no one imagines anything of who do the things that no-one can imagine"</br> </strong></small><small></br><i>Alan Mathison Turing</i></br> </small></h1></span>
              </div>
            </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="box">
        <div class="col-lg-12">
          <hr>
          <h2 class="intro-text text-center">Life
                        <strong>Timeline:</strong>
                    </h2>
          <hr>
          <img class="img-responsive img-border img-left" src="img/intro-pic.jpg" alt="">
          <hr class="visible-xs">
          <p>
  <ul>
    <li>1912 (23 June): Birth, Paddington, London
<li>1926-31: Sherborne School
<li>1930: Death of friend Christopher Morcom
<li>1931-34: Undergraduate at King's College, Cambridge University
<li>1932-35: Quantum mechanics, probability, logic. Fellow of King's College, Cambridge
<li>1936: The Turing machine, computability, universal machine
<li>1936-38: Princeton University. Ph.D. Logic, algebra, number theory
<li>1938-39: Return to Cambridge. Introduced to German Enigma cipher machine
<li>1939-40: The Bombe, machine for Enigma decryption
<li>1939-42: Breaking of U-boat Enigma, saving battle of the Atlantic
<li>1943-45: Chief Anglo-American crypto consultant. Electronic work.</li>
<li>1945: National Physical Laboratory, London</li>
<li>1946: Computer and software design leading the world.</li>
<li>1947-48: Programming, neural nets, and artificial intelligence</li>
<li>1948: Manchester University, first serious mathematical use of a computer</li>
<li>1950: The Turing Test for machine intelligence</li>
<li>1951: Elected FRS. Non-linear theory of biological growth</li>
<li>1952: Arrested as a homosexual, loss of security clearance</li>
<li>1953-54: Unfinished work in biology and physics</li>
<li>1954 (7 June): Death (suicide) by cyanide poisoning, Wilmslow, Cheshire. </li>
    </ul>
  </p>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="box">
        <div class="col-lg-12">
          <hr>
          <h2 class="intro-text text-center">                      <strong>Quotes:</strong>
                    </h2>
          <hr>
          <p>
We can only see a short distance ahead, but we can see plenty there that needs to be done. </br>
Science is a differential equation. Religion is a boundary condition.</br>
A computer would deserve to be called intelligent if it could deceive a human into believing that it was human.
</p>
        </div>
      </div>
    </div>

      <div class="row">
      <div class="box">
        <div class="col-lg-12">
          <hr>
          <h2 class="intro-text text-center"><strong>Resources:</strong>
                    </h2>
          <hr>
          <p><a href="http://www.turing.org.uk/">http://www.turing.org.uk/</a> </br>
<a href="https://en.wikipedia.org/wiki/Alan_Turing">https://en.wikipedia.org/wiki/Alan_Turing</a> </br></p>

        </div>
      </div>
    </div>

  </div>
 </body>

## style.css
body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    background: url('http://www.kusumatrust.gi/wp-content/uploads/Enigma-Promo-3.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

p {
    font-size: 1.25em;
    line-height: 1.6;
    color: #000;
}

hr {
    max-width: 400px;
    border-color: #999999;
}

.brand,
.address-bar {
    display: none;
}

.navbar-brand {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
}

.navbar-nav {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 3px;
}

.img-full {
    min-width: 100%;
}

.brand-before,
.brand-name {
    text-transform: capitalize;
}

.brand-before {
    margin: 15px 0;
}

.brand-name {
    margin: 0;
    font-size: 4em;
}

.tagline-divider {
    margin: 15px auto 3px;
    max-width: 250px;
    border-color: #999999;
}

.box {
    margin-bottom: 20px;
    padding: 30px 15px;
    background: #fff;
    background: rgba(255,255,255,0.9);
}

.intro-text {
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: 1px;
}

.img-border {
    float: none;
    margin: 0 auto 0;
    border: #999999 solid 1px;
}

.img-left {
    float: none;
    margin: 0 auto 0;
}

footer {
    background: #fff;
    background: rgba(255,255,255,0.9);
}

footer p {
    margin: 0;
    padding: 50px 0;
}

@media screen and (min-width:768px) {
    .brand {
        display: inherit;
        margin: 0;
        padding: 30px 0 10px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 5em;
        font-weight: 700;
        line-height: normal;
        color: #fff;
    }

    .top-divider {
        margin-top: 0;
    }

    .img-left {
        float: left;
        margin-right: 25px;
    }

    .address-bar {
        display: inherit;
        margin: 0;
        padding: 0 0 40px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        text-transform: uppercase;
        font-size: 1.25em;
        font-weight: 400;
        letter-spacing: 3px;
        color: #fff;
    }

    .navbar {
        border-radius: 0;
    }

    .navbar-header {
        display: none;
    }

    .navbar {
        min-height: 0;
    }

    .navbar-default {
        border: none;
        background: #fff;
        background: rgba(255,255,255,0.9);
    }

    .nav>li>a {
        padding: 35px;
    }

    .navbar-nav>li>a {
        line-height: normal;
    }

    .navbar-nav {
        display: table;
        float: none;
        margin: 0 auto;
        table-layout: fixed;
        font-size: 1.25em;
    }
}

@media screen and (min-width:1200px) {
    .box:after {
        content: '';
        display: table;
        clear: both;
    }
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
	<body>

	<div class="brand">Alan Turing</div>
	<div class="address-bar">A brilliant mind</div>

	<div class="container">

	<div class="row">
	<div class="box">
	<div class="col-lg-12 text-center">
	<div class="row">
	<div class="col-lg-4 text-center">
	<span> <img src="http://totallyhistory.com/wp-content/uploads/2013/07/alan-turing.jpg" alt="Smiley face" height="200px;" class="img-circle"> </span></div>
	<div class="col-lg-8 text-center">
	<span><h1 class="tagline-divider" style="max-width: 1000px; text-transform: capitalize"><small><strong>"Sometime it is the people no one imagines anything of who do the things that no-one can imagine"</br> </strong></small><small></br><i>Alan Mathison Turing</i></br> </small></h1></span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="row">
	<div class="box">
	<div class="col-lg-12">
	<hr>
	<h2 class="intro-text text-center">Life
	<strong>Timeline:</strong>
	</h2>
	<hr>
	<img class="img-responsive img-border img-left" src="img/intro-pic.jpg" alt="">
	<hr class="visible-xs">
	<p>
	<ul>
	<li>1912 (23 June): Birth, Paddington, London
	<li>1926-31: Sherborne School
	<li>1930: Death of friend Christopher Morcom
	<li>1931-34: Undergraduate at King's College, Cambridge University
	<li>1932-35: Quantum mechanics, probability, logic. Fellow of King's College, Cambridge
	<li>1936: The Turing machine, computability, universal machine
	<li>1936-38: Princeton University. Ph.D. Logic, algebra, number theory
	<li>1938-39: Return to Cambridge. Introduced to German Enigma cipher machine
	<li>1939-40: The Bombe, machine for Enigma decryption
	<li>1939-42: Breaking of U-boat Enigma, saving battle of the Atlantic
	<li>1943-45: Chief Anglo-American crypto consultant. Electronic work.</li>
	<li>1945: National Physical Laboratory, London</li>
	<li>1946: Computer and software design leading the world.</li>
	<li>1947-48: Programming, neural nets, and artificial intelligence</li>
	<li>1948: Manchester University, first serious mathematical use of a computer</li>
	<li>1950: The Turing Test for machine intelligence</li>
	<li>1951: Elected FRS. Non-linear theory of biological growth</li>
	<li>1952: Arrested as a homosexual, loss of security clearance</li>
	<li>1953-54: Unfinished work in biology and physics</li>
	<li>1954 (7 June): Death (suicide) by cyanide poisoning, Wilmslow, Cheshire. </li>
	</ul>
	</p>
	</div>
	</div>
	</div>

	<div class="row">
	<div class="box">
	<div class="col-lg-12">
	<hr>
	<h2 class="intro-text text-center"> <strong>Quotes:</strong>
	</h2>
	<hr>
	<p>
	We can only see a short distance ahead, but we can see plenty there that needs to be done. </br>
	Science is a differential equation. Religion is a boundary condition.</br>
	A computer would deserve to be called intelligent if it could deceive a human into believing that it was human.
	</p>
	</div>
	</div>
	</div>

	<div class="row">
	<div class="box">
	<div class="col-lg-12">
	<hr>
	<h2 class="intro-text text-center"><strong>Resources:</strong>
	</h2>
	<hr>
	<p><a href="http://www.turing.org.uk/">http://www.turing.org.uk/</a> </br>
	<a href="https://en.wikipedia.org/wiki/Alan_Turing">https://en.wikipedia.org/wiki/Alan_Turing</a> </br></p>

	</div>
	</div>
	</div>

	</div>
	</body>
	body {
	font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	background: url('http://www.kusumatrust.gi/wp-content/uploads/Enigma-Promo-3.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	text-transform: uppercase;
	font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
	}

	p {
	font-size: 1.25em;
	line-height: 1.6;
	color: #000;
	}

	hr {
	max-width: 400px;
	border-color: #999999;
	}

	.brand,
	.address-bar {
	display: none;
	}

	.navbar-brand {
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: 2px;
	}

	.navbar-nav {
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 3px;
	}

	.img-full {
	min-width: 100%;
	}

	.brand-before,
	.brand-name {
	text-transform: capitalize;
	}

	.brand-before {
	margin: 15px 0;
	}

	.brand-name {
	margin: 0;
	font-size: 4em;
	}

	.tagline-divider {
	margin: 15px auto 3px;
	max-width: 250px;
	border-color: #999999;
	}

	.box {
	margin-bottom: 20px;
	padding: 30px 15px;
	background: #fff;
	background: rgba(255,255,255,0.9);
	}

	.intro-text {
	text-transform: uppercase;
	font-size: 1.25em;
	font-weight: 400;
	letter-spacing: 1px;
	}

	.img-border {
	float: none;
	margin: 0 auto 0;
	border: #999999 solid 1px;
	}

	.img-left {
	float: none;
	margin: 0 auto 0;
	}

	footer {
	background: #fff;
	background: rgba(255,255,255,0.9);
	}

	footer p {
	margin: 0;
	padding: 50px 0;
	}

	@media screen and (min-width:768px) {
	.brand {
	display: inherit;
	margin: 0;
	padding: 30px 0 10px;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 5em;
	font-weight: 700;
	line-height: normal;
	color: #fff;
	}

	.top-divider {
	margin-top: 0;
	}

	.img-left {
	float: left;
	margin-right: 25px;
	}

	.address-bar {
	display: inherit;
	margin: 0;
	padding: 0 0 40px;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	text-transform: uppercase;
	font-size: 1.25em;
	font-weight: 400;
	letter-spacing: 3px;
	color: #fff;
	}

	.navbar {
	border-radius: 0;
	}

	.navbar-header {
	display: none;
	}

	.navbar {
	min-height: 0;
	}

	.navbar-default {
	border: none;
	background: #fff;
	background: rgba(255,255,255,0.9);
	}

	.nav>li>a {
	padding: 35px;
	}

	.navbar-nav>li>a {
	line-height: normal;
	}

	.navbar-nav {
	display: table;
	float: none;
	margin: 0 auto;
	table-layout: fixed;
	font-size: 1.25em;
	}
	}

	@media screen and (min-width:1200px) {
	.box:after {
	content: '';
	display: table;
	clear: both;
	}
	}