Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/bitcoin-timeline-with-fixed-header-using-flexbox.markdown

Created February 21, 2018 04:27
Show Gist options
  • Save CodeMyUI/05f8d95d965238a603ee10e6bb0a100a to your computer and use it in GitHub Desktop.
Save CodeMyUI/05f8d95d965238a603ee10e6bb0a100a to your computer and use it in GitHub Desktop.
Download ZIP
Bitcoin timeline with fixed header using flexbox
Raw
bitcoin-timeline-with-fixed-header-using-flexbox.markdown

Bitcoin timeline with fixed header using flexbox

A timeline with fixed header using flexbox. Data is not correct or complete. Only for demo.

A Pen by Matys on CodePen.

License.

Raw
index.html
<div class="container">
<div class="header">
<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64">
<defs>
<linearGradient id="verlauf" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="orange" />
<stop offset="100%" stop-color="chocolate" />
</linearGradient>
</defs>
<path fill="url(#verlauf)" d="M63.04 39.74C58.764 56.885 41.4 67.318 24.256 63.043 7.12 58.768-3.313 41.404.962 24.262 5.234 7.117 22.597-3.318 39.737.957 56.88 5.23 67.313 22.597 63.04 39.74z"/>
<path fill="#FFF" d="M46.11 27.44c.636-4.257-2.606-6.546-7.04-8.073l1.44-5.768-3.512-.876-1.4 5.616c-.923-.23-1.87-.447-2.813-.662l1.41-5.653-3.51-.875-1.438 5.766c-.764-.174-1.514-.346-2.242-.527l.004-.02-4.843-1.208-.934 3.75s2.605.597 2.55.634c1.422.355 1.68 1.296 1.636 2.042l-1.64 6.57c.1.026.226.062.366.118l-.37-.092-2.297 9.205c-.175.43-.616 1.08-1.61.833.035.05-2.552-.637-2.552-.637l-1.743 4.02 4.57 1.138c.85.213 1.682.436 2.502.646l-1.453 5.834 3.507.875 1.44-5.773c.958.26 1.888.5 2.798.726l-1.434 5.745 3.51.875 1.454-5.823c5.987 1.133 10.49.676 12.384-4.74 1.527-4.36-.076-6.874-3.226-8.514 2.294-.53 4.022-2.038 4.483-5.155zm-8.023 11.25c-1.085 4.36-8.426 2.003-10.806 1.412l1.93-7.73c2.38.595 10.01 1.77 8.877 6.318zm1.086-11.312c-.99 3.966-7.1 1.95-9.082 1.457l1.75-7.01c1.98.494 8.364 1.416 7.333 5.553z"/>
</svg>
<h1>History of bitcoin</h1>
<h2>A timeline that shows bitcoin History from the idea all the way to present day.</h2>
</div>
<div class="item">
<div id="timeline">
<div>
<section class="year">
<h3>2007</h3>
<section>
<ul>
<li>Satoshi Nakamoto began working on the Bitcoin concept.</li>
</ul>
</section>
</section>
<section class="year">
<h3>2008</h3>
<section>
<h4>August</h4>
<ul>
<li>Neal Kin, Vladimir Oksman, and Charles Bry file an application for an encryption patent application.</li>
<li>Bitcoin.org was registered at <a href="https://anonymousspeech.com/">anonymousspeech.com</a>.</li>
</ul>
</section>
<section>
<h4>October</h4>
<ul>
<li>Nakamoto describes the Bitcoin currency and solves the problem of double spending.</li>
</ul>
</section>
<section>
<h4>November</h4>
<ul>
<li>The Bitcoin project is registered on <a href="https://sourceforge.net/">SourceForge.net</a>.</li>
</ul>
</section>
</section>
<section class="year">
<h3>2009</h3>
<section>
<h4>January</h4>
<ul>
<li>Block 0 is established.</li>
<li>Version 0.1 of Bitcoin is released.</li>
<li>The first Bitcoin transaction.</li>
</ul>
</section>
<section>
<h4>October</h4>
<ul>
<li>An exchange rate is established.</li>
</ul>
</section>
<section>
<h4>December</h4>
<ul>
<li>Version 0.2 is released.</li>
<li>The difficulty increases.</li>
</ul>
</section>
</section>
<section class="year">
<h3>2010</h3>
<section>
<h4>February</h4>
<ul>
<li>The Bitcoin Market is established as a Bitcoin currency exchange.</li>
<li>Encryption patent is published.</li>
</ul>
</section>
<section>
<h4>May</h4>
<ul>
<li>The first real-world transaction using 10,000 BTC spent on pizza.</li>
</ul>
</section>
<section>
<h4>July</h4>
<ul>
<li>Version 0.3 released.</li>
<li>In five days, the price grew 1000%, rising from <span class="price">$0.008</span> to <span class="price">$0.08</span> for 1 bitcoin.</li>
<li>The MtGox Bitcoin currency exchange market is established.</li>
</ul>
</section>
<section>
<h4>August</h4>
<ul>
<li>Exploit generates 184 billion Bitcoins.</li>
</ul>
</section>
<section>
<h4>October</h4>
<ul>
<li>Financial task force issues warning.</li>
<li>The first public version of an OpenCL miner is released.</li>
</ul>
</section>
<section>
<h4>November</h4>
<ul>
<li>Market cap exceeds $1 million USD.</li>
</ul>
</section>
<section>
<h4>December</h4>
<ul>
<li>Bitcoind compiled for Nokia N900.</li>
<li>First mobile Bitcoin transaction.</li>
<li>Difficulty increases.</li>
</ul>
</section>
</section>
<section class="year">
<h3>2011</h3>
<section>
<h4>January</h4>
<ul>
<li>Silk Road opens for business.</li>
<li>25% of total Bitcoins generated.</li>
</ul>
</section>
<section>
<h4>February</h4>
<ul>
<li>Bitcoin reaches parity with US dollar.</li>
<li><a href="https://weusecoins.com/">WeUseCoins.com</a> is created.</li>
</ul>
</section>
<section>
<h4>March</h4>
<ul>
<li>Second largest decrease in difficulty.</li>
<li>Britcoin opens for trading.</li>
<li>Bitcoin Brasil opens.</li>
</ul>
</section>
<section>
<h4>April</h4>
<ul>
<li>Bitcoin passes parity with Euro.</li>
<li>Difficulty surpasses 100,000.</li>
</ul>
</section>
<section>
<h4>June</h4>
<ul>
<li>Bitcoin Market drops PayPal.</li>
<li>The largest percentage price decrease to-date became known as the Great Bubble of 2011. Top of bubble at <span class="price">$31.</span></li>
<li>WikiLeaks starts accepting Bitcoin.</li>
<li>Major breach of security at MtGox.</li>
<li>Difficulty passes 1 million.</li>
</ul>
</section>
<section>
<h4>August</h4>
<ul>
<li>Bitcoin Conference and World Expo in New York City, NY.</li>
<li>P2Pool mines its first block.</li>
<li>Back-to-back drop in difficulty.</li>
</ul>
</section>
<section>
<h4>September</h4>
<ul>
<li>Casascius coins mint physical Bitcoins.</li>
</ul>
</section>
<section>
<h4>November</h4>
<ul>
<li>Bitcoin & Future Technology European Conference in Prague, Czech Republic.</li>
</ul>
</section>
<section>
<h4>December</h4>
<ul>
<li><span class="price">$2</span> minimum price after the first price drop.</li>
</ul>
</section>
</section>
<section class="year">
<h3>2012</h3>
<section>
<h4>September</h4>
<ul>
<li>London 2012 Bitcoin Conference.</li>
<li>Bitcoin Foundation begins.</li>
</ul>
</section>
<section>
<h4>December</h4>
<ul>
<li>Slowly rising for a year. Price at <span class="price">$13.</span></li>
</ul>
</section>
</section>
<section class="year">
<h3>2013</h3>
<section>
<h4>February</h4>
<ul>
<li>Version 0.8 released.</li>
<li>Bitcoin goes up to <span class="price">$30.</span></li>
</ul>
</section>
<section>
<h4>March</h4>
<ul>
<li>Bitcoin spikes to $74.90.</li>
<li>Market cap reaches $1 billion.</li>
</ul>
</section>
<section>
<h4>April</h4>
<ul>
<li>Bitcoin surpasses <span class="price">$100.</span></li>
<li>Price hits an all-time high of <span class="price">$266.</span></li>
<li>Bitcoin Central is hacked.</li>
</ul>
</section>
<section>
<h4>May</h4>
<ul>
<li>First Bitcoin ATM unveiled.</li>
<li>Bitcoin Central gets hacked again.</li>
</ul>
</section>
<section>
<h4>October</h4>
<ul>
<li>FBI shuts down Silk Road.</li>
<li>Bitcoin price drops from <span class="price">$139</span> to <span class="price">$109.71</span> in less than three hours after Silk Road closure, recovers.</li>
</ul>
</section>
<section>
<h4>November</h4>
<ul>
<li>Bitcoin price surges to a new all-time record of <span class="price">$1242.</span></li>
</ul>
</section>
<section>
<h4>December</h4>
<ul>
<li>Price crashed to <span class="price">$600</span>, rebounded to <span class="price">$1000</span>, crashed again to the <span class="price">$500</span> range. Stabilized in between.</li>
<li>China's Central Bank bans Bitcoin transactions.</li>
<li>The network exceeded 10 petahash/sec.</li>
</ul>
</section>
</section>
<section class="year">
<h3>2014</h3>
<section>
<h4>January</h4>
<ul>
<li>Price spiked to <span class="price">$1000</span>, then settled in the <span class="price">$800–$900</span>range.</li>
</ul>
</section>
<section>
<h4>March</h4>
<ul>
<li>Version 0.9 released.</li>
</ul>
</section>
<section>
<h4>June</h4>
<ul>
<li>The network exceeded 100 petahash/sec.</li>
</ul>
</section>
<section>
<h4>December</h4>
<ul>
<li>Microsoft began to accept bitcoin to buy Xbox games and Windows apps.</li>
</ul>
</section>
</section>
<section class="year">
<h3>2015</h3>
<section>
<h4>February</h4>
<ul>
<li>Version 0.10 released.</li>
</ul>
</section>
<section>
<h4>July</h4>
<ul>
<li>Version 0.11 released.</li>
</ul>
</section>
<section>
<h4>November</h4>
<ul>
<li>2015 record high of <span class="price">$504.</span></li>
</ul>
</section>
</section>
<section class="year">
<h3>2016</h3>
<section>
<h4>January</h4>
<ul>
<li>Price at <span class="price">$1150</span> per bitcoin.</li>
<li>Price fell 30% in a week, reaching a multi-month low of <span class="price">$750.</span></li>
<li>The network exceeded 1 exahash/sec.</li>
</ul>
</section>
<section>
<h4>February</h4>
<ul>
<li>Version 0.12 released.</li>
</ul>
</section>
<section>
<h4>April</h4>
<ul>
<li>Steam started accepting bitcoin as payment.</li>
</ul>
</section>
<section>
<h4>August</h4>
<ul>
<li>Version 0.13 released.</li>
</ul>
</section>
<section>
<h4>September</h4>
<ul>
<li>There are 770 bitcoin ATMs worldwide.</li>
</ul>
</section>
</section>
<section class="year">
<h3>2017</h3>
<section>
<h4>March</h4>
<ul>
<li>Version 0.14 released.</li>
<li>The price of 1 bitcoin surpassed the spot price of an ounce of gold for the first time.</li>
<li>The number of GitHub projects related to bitcoin passed 10,000.</li>
<li>Price traded above <span class="price">$1290.</span></li>
</ul>
</section>
<section>
<h4>April</h4>
<ul>
<li>Japan Declares Bitcoin as Legel Tender</li>
</ul>
</section>
<section>
<h4>August</h4>
<ul>
<li>Bitcoin "splits" into Bitcoin (BTC) and Bitcoin Cash (BCH)</li>
</ul>
</section>
<section>
<h4>November</h4>
<ul>
<li>Bitcoin for the first time hit <span class="price">$10,000</span></li>
</ul>
</section>
<section>
<h4>Today</h4>
<ul>
<li>At the moment, one bitcoin cost:
<span class="price">
<div id="price"></div>.
</span>
</li>
</ul>
</section>
</section>
</div>
</div>
</div>
</div>
Raw
script.js
const API_URL = 'https://api.coinmarketcap.com/v1/ticker/?limit=1';
function displayData() {
fetch(API_URL)
.then(res => res.json())
.then(json => {
const topCoin = json[0];
document.getElementById('price').innerHTML = `$${topCoin.price_usd}`;
});
}
setInterval(displayData, 5000);
Raw
style.scss
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:200,400,500);
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
* {
border: 0;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: inherit;
display: flex;
flex-direction: column;
font-family: 'Fira Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #79838c;
}
a {
color: #50585f;
text-decoration: none;
&:hover {
color: #383e44;
}
}
div.container {
display: flex;
flex: auto;
flex-direction: column;
max-height: 100%;
}
div.header {
height: auto;
text-align: center;
background: slategrey;
color: ghostwhite;
padding: 2.3rem 1rem 2.3rem 1rem;
position: relative;
&:after{
content: '';
position: absolute;
bottom: -5rem;
left: 0rem;
height: 5.1rem;
display: block;
width: 100%;
z-index: 300;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
h1 {
margin: {
top: .8rem;
bottom: .5rem;
}
font: {
weight: 200;
size: 1.6em;
}
letter-spacing: 0.1rem;
text-transform: uppercase;
@media (min-width: 62em) {
font-size: 1.9em;
letter-spacing: 0.2rem;
}
}
h2 {
font: {
size: 1.1em;
weight: 400;
}
color: #cfd7de;
max-width: 30rem;
margin: auto;
}
}
div.item {
display: flex;
flex: auto;
overflow-y: auto;
padding: 0rem 1rem 0rem 1rem;
}
#timeline {
position: relative;
display: table; //*For Firefox
height: 100%;
margin: {
left: auto;
right: auto;
top: 5rem;
}
div {
&:after {
content: '';
width: 2px;
position: absolute;
top: .5rem;
bottom: 0rem;
left: 60px;
z-index: 1;
background: #C5C5C5;
}
}
h3 {
position: -webkit-sticky;
position: sticky;
top: 5rem;
color: #888;
margin: 0;
font: {
size: 1em;
weight: 400;
}
@media (min-width: 62em) {
font-size: 1.1em;
}
}
section.year {
position: relative;
&:first-child section{
margin-top: -1.3em;
padding-bottom: 0px;
}
section {
position: relative;
padding-bottom: 1.25em;
margin-bottom: 2.2em;
h4 {
position: absolute;
bottom: 0;
font: {
size: .9em;
weight: 400;
}
line-height: 1.2em;
margin: 0;
padding: 0 0 0 89px;
color: #C5C5C5;
@media (min-width: 62em) {
font-size: 1em;
}
}
ul {
list-style-type: none;
padding: 0 0 0 75px;
margin: -1.35rem 0 1em;
max-width: 32rem;
font-size: 1em;
@media (min-width: 62em) {
font-size: 1.1em;
padding: 0 0 0 81px;
}
&:last-child {
margin: {
bottom: 0;
}
}
&:first-of-type:after {
content: '';
width: 10px;
height: 10px;
background: #C5C5C5;
border: 2px solid #FFFFFF;
@include border-radius(50%);
position: absolute;
left: 54px;
top: 3px;
z-index: 2;
}
li {
margin-left: .5rem;
&:before {
content: '·';
margin-left: -.5rem;
padding-right: .3rem;
}
&:not(:first-child) {
margin-top: .4rem;
}
span.price {
color: mediumturquoise;
font-weight: 500;
}
}
}
}
}
}
#price {
display: inline;
}
svg {
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment