29 October 2020

Passing a Hypertext Markup Language Poem

Passing is an experiment in HTMLP or Hypertext Markup Language Poetry.

HTMLP or Hypertext Markup Language Poetry

A poem that has its own domain name, or sub domain, which is also written inside the HTML code of the site. The poem can be interactive but must always be present in full inside the source code comments of the site. Below is an example of this:

<!doctype html>
<html lang="en">
	<!-- 	Hypertext Markup Language Poetry - htmlp - Markup Your Words -->
	<!-- 	This is where Hypertext Markup Language Poetry should be included within a comment. -->
	<!--  ===========================================================================================  -->
	<!--	The whole poem text should be included here on the index page source code, including any other page content that the poem might be shown upon. 
			A link should be provided within every page of the hypertext poem to show this page source code. -->
	<!--  ===========================================================================================  -->
	<!-- Poem Title : PASSING by The Utopian Fool -->
	<!-- Poem Content : I'm just passing through, temporary. Falling like leaves on a tree, running down a river of me.

History like its rings, a notch of time. Rock worn away, my body to fade. Limited growth, stunted I sway in the winds of my life and clouds of dismay.

Spinning around on a massive ball, stuck to the surface with no end to the fall, just passing through making my own pitfalls.

I fight the passing, eager to dig in. Entrenched at home, pretending to win. Not equiped for this mountain I reluctantly strap on, connecting my crampons of hope, maybe there is something out there of note.

I have gone, I have been, I was there, there's evidence to bare. My pictures, my words, my feelings I have shared.

Just passing through, only a number of heart beats, only so many people I can meet. Can't stop it from turning, can't stop myself yearning for more than social media updates as my friends distillate their successful journeys innate.

The stakes are really high but I choose not to think why, because its easier to dig in and pretend its all alright.

But its not alright!
I'm running out of time!
Our passing is limited, temporary, its true. Like all material things we are just passing through.

STATISTICS
Within an average life span of 70 years

No. of mins = 36792000
No. of hours = 613200
No. of days = 25550
No. of weeks = 3650
No. of months = 840
1 human gets around 2.5 billion heart beats.

An average of 100000 per day.

The Speed of Things
Average walking speed is 3.1 mph

Earth spins at 1000 mph
Earth orbits the Sun at 67,000 mph
Solar System orbits the Milky Way Galactic centre at 514,000 mph
Milky Way travels through space at 1,304,880 mph
Speed of light is 670,616,629 mph

Speed of sound is 767.85 mph -->
	<!-- Poem Credits : http://www.utopianfool.co.uk , mp4 courtesy of https://videos.pexels.com/ -->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Passing - htmlp - A Hypertext, interactive poem. Hypertext Markup Language Poetry - htmlp - Markup Your Words">
    <meta name="author" content="Utopian Fool, Philip J Porter">
	<meta name="Keywords" content="htmlp, hypertext poetry, interactive poem, utopian fool, hypertext markup language poetry">
    <link rel="icon" href="htmlp-icon32.png">

    <title>Passing - Hypertext Poem</title>

    <!-- Bootstrap core CSS - Quick Start version 4.0 https://www.bootstrapcdn.com/ -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

  <body class="text-center">
  
	  <video autoplay muted loop id="myVideo">
	  <source src="media/daynightext.mp4" type="video/mp4">
	</video>

    <div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
      <header class="masthead mb-auto">
        <div class="inner">
          <a href="http://journals.utopianfool.co.uk/"><img class="masthead-brand" src="media/fool-logo-new.png" width="10%"/></a>
		  <a href="http://www.htmlp.org/"><img class="masthead-alt" src="media/htmlp-logo300.svg" width="10%"/></a>
		  <h4>CTRL + U <small>To view page source code</small></h4>
        </div>
      </header>

      <main role="main" class="inner cover">
			<div class="container">
				<div class="row">
					<div class="col">
						<h1 class="cover-statement">Passing</h1>
					</div>
				</div>
				<div class="row">
						<div class="col-sm-8">
							<p class="lead">I'm just passing through, temporary. Falling like leaves on a tree, running down a river of me.</p>
							<p class="lead">History like its rings, a notch of time. Rock worn away, my body to fade. Limited growth, stunted I sway in the winds of my life and clouds of dismay.</p>
							<p class="lead">Spinning around on a massive ball, stuck to the surface with no end to the fall, just passing through making my own pitfalls.</p>
							<p class="lead">I fight the passing, eager to dig in. Entrenched at home, pretending to win. Not equiped for this mountain I reluctantly strap on, connecting my crampons of hope, maybe there is something out there of note.</p>
							<p class="lead"></p>
							<p class="lead">I have gone, I have been, I was there, there's evidence to bare. My pictures, my words, my feelings I have shared.</p>
							<p class="lead">Just passing through, only a number of heart beats, only so many people I can meet. Can't stop it from turning, can't stop myself yearning for more than social media updates as my friends distillate their successful journeys innate.</p>
							<p class="lead">The stakes are really high but I choose not to think why, because its easier to dig in and pretend its all alright.</p>
							<h5 class="cover-statement">But its not alright!</h5>
							<h4 class="cover-statement">I'm running out of time!</h4>
							<p class="lead">Our passing is limited, temporary, its true. Like all material things we are just passing through.</p>
						</div>
					<div class="col-sm-4">
						<div class="content">
							<h3>STATISTICS</h3>
							<p>Within an average life span of 70 years</p>
							<ul class="humans">
								<li>No. of mins = <a class="highlights" href="http://unitconverter.io/years/minutes/70" target="_blank">36792000</a></li>
								<li>No. of hours = <a class="highlights" href="http://unitconverter.io/years/hours/70" target="_blank">613200</a></li>
								<li>No. of days = <a class="highlights" href="http://unitconverter.io/years/days/70" target="_blank">25550</a></li>
								<li>No. of weeks = <a class="highlights" href="https://www.calculateme.com/time/years/to-weeks/70" target="_blank">3650</a></li>
								<li>No. of months = <a class="highlights" href="http://unitconverter.io/years/months/70" target="_blank">840</a></li>
							</ul>
							<p>1 human gets around <a class="highlights" href="http://www.pbs.org/wgbh/nova/heart/heartfacts.html" target="_blank">2.5 billion heart beats</a>.</p>
							<p><small>An average of 100000 per day.</small></p>
							<h5>The Speed of Things</h5>
								<p>Average walking speed is <a class="highlights" href="https://en.wikipedia.org/wiki/Walking" target="_blank">3.1 mph</a></p>
								<ul class="humans">
									<li>Earth spins at <a class="highlights" href="http://earthsky.org/earth/why-cant-we-feel-earths-spin" target="_blank">1000 mph</a></li>
									<li>Earth orbits the Sun at <a class="highlights" href="http://curious.astro.cornell.edu/about-us/41-our-solar-system/the-earth/orbit/91-at-what-speed-does-the-earth-move-around-the-sun-beginner" target="_blank">67,000 mph</a></li>
									<li>Solar System orbits the Milky Way Galactic centre at <a class="highlights" href="https://en.wikipedia.org/wiki/Galactic_year" target="_blank">514,000 mph</a></li>
									<li>Milky Way travels through space at <a class="highlights" href="https://www.ancient-code.com/the-milky-way-is-moving-through-the-universe-at-2-1-million-kilometers-per-hour/" target="_blank">1,304,880 mph</a></li>
								</ul>
							<p><small>Speed of light is <a class="highlights" href="https://www.universetoday.com/38040/speed-of-light-2/" target="_blank">670,616,629 mph</a></small></p>
							<p><small>Speed of sound is <a class="highlights" href="http://convert-to.com/conversion/speed/convert-speed-of-sound-to-mi-per-hour.html" target="_blank">767.85 mph</a></small></p>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<div class="cover-button">
							<a href="https://www.psychologytoday.com/blog/how-do-life/201404/six-secrets-making-the-most-your-time" class="btn btn-lg btn-secondary" target="_blank">Make the Most of Your Time</a>
						</div>
					</div>
				</div>
			</div>
      </main>

      <footer class="mastfoot mt-auto">
		<div class="inner">
		  <div class="footmenu">
		  <nav class="nav justify-content-center">
            <a class="nav-link" href="http://www.htmlp.org" target="_blank" >Discover HTMLP</a>
            <a class="nav-link" href="source.html" target="_blank" >View Source Code</a>
          </nav>
		  </div>
		   <p class="copy"><a href="http://www.htmlp.org/"><img src="media/htmlp-logo300.svg" width="5%"/></a>Hypertext Poem by <a href="http://www.utopianfool.co.uk/"><img src="media/fool-logo-new.png" width="5%"/></a><a href="http://www.utopianfool.co.uk/">The Utopian Fool</a></p>
        </div>
      </footer>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>
  </body>
</html>

utopianfool

Creative Web Developer

View all posts by utopianfool →