smokbel/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from smokbel's block: scrollerpractice

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>

    .heading {
      text-align: center;
      margin-top: 20vh;
      margin-bottom: 20vh;
      position: relative;
      height: 200px;

    }
    body {
    	font-family: Helvetica, Arial;
   	}

    #container {
      position: relative;
      z-index: 100;
    }
    #viz {
      position: absolute;
      top: 50vh;
      right: 10%;
      width: 35%;
      height: 50vh;
      z-index: 50;
      background-color: DarkGrey;

    }
    .text {
      width: 50%;
      padding-left: 200px;
      padding-top: 25vh;
      padding-bottom: 25vh;
    }

    .text:first-child {
      padding-top: 45vh;
    }
    .text:last-child {
      padding-bottom: 45vh;
    }
  </style>
</head>

<body>


  <div id="viz">
  </div>

	<div id="container" style="height: 100vh; overflow: scroll">
    <div id="sections">
    <div class="heading">
      <h2> Data Story Title Placed Here</h2>
    <h4> Short intriguing paragraph summarizing the below data will be described here.</h4>
  </div>

      <div class="text">
        <p>This will describe the first piece of data</p>
      </div>

      <div class="text">
        <p>This will describe the second piece of data</p>
      </div>

      <div class="text">
        <p>This will describe the third piece of data</p>
      </div>

      <div class="text">
        <p>This will describe the fourth piece of data</p>
      </div>

      <div class="text">
        <p>This will describe the fifth piece of data</p>
      </div>

      <div class="text">
        <p>This will describe the sixth piece of data</p>
      </div>

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


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>

	.heading {
	text-align: center;
	margin-top: 20vh;
	margin-bottom: 20vh;
	position: relative;
	height: 200px;

	}
	body {
	font-family: Helvetica, Arial;
	}

	#container {
	position: relative;
	z-index: 100;
	}
	#viz {
	position: absolute;
	top: 50vh;
	right: 10%;
	width: 35%;
	height: 50vh;
	z-index: 50;
	background-color: DarkGrey;

	}
	.text {
	width: 50%;
	padding-left: 200px;
	padding-top: 25vh;
	padding-bottom: 25vh;
	}

	.text:first-child {
	padding-top: 45vh;
	}
	.text:last-child {
	padding-bottom: 45vh;
	}
	</style>
	</head>

	<body>


	<div id="viz">
	</div>

	<div id="container" style="height: 100vh; overflow: scroll">
	<div id="sections">
	<div class="heading">
	<h2> Data Story Title Placed Here</h2>
	<h4> Short intriguing paragraph summarizing the below data will be described here.</h4>
	</div>

	<div class="text">
	<p>This will describe the first piece of data</p>
	</div>

	<div class="text">
	<p>This will describe the second piece of data</p>
	</div>

	<div class="text">
	<p>This will describe the third piece of data</p>
	</div>

	<div class="text">
	<p>This will describe the fourth piece of data</p>
	</div>

	<div class="text">
	<p>This will describe the fifth piece of data</p>
	</div>

	<div class="text">
	<p>This will describe the sixth piece of data</p>
	</div>

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




	</script>
	</body>