index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fazl's github.io Website</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" type="text/css">
    <link rel="stylesheet" href="style.css">
    <!-- fix HTML5 semantic elements (??WHICH??) in old versions of Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Common header,  used across all pages of website -->
    <header> <h1>fazl.github.io</h1> </header>
    <p>GitHub lets you showcase repos or projects via github.io.</p>

    <!-- Page's main content -->
    <main>
      <!-- It contains an article -->
      <article>
        <hr/>
        <h3>Adventures in CSS/HTML/JavaScript</h3>

        <p>I'm a serverside guy normally.</p>
        <p>To get my teeth into HTML/CSS/JavaScript (..) I thought I'd build a tictactoe game <em>in a single HTML file</em>, after I saw an angular tutorial that built a simple tictactoe that took up about <em>25MB of disk space</em>...</p>
        <p>Each of these variants are a <b>single static HTML</b> file, merely a few KB in size.</p>

        <ul>
          <li> the <a href="tictactoe/basic-tictactoe.html">basic 3 x 3 Tic Tac Toe</a>, and </li>
          <li> the <a href="tictactoe/resizable-tictactoe.html">resizable n x n Tic Tac Toe</a>, and </li>
          <li> the <a href="tilepuzzle/tilepuzzle.html">Tile Puzzle</a> (Improved! Slide <em>multiple tiles with one click</em>..) </li>
        </ul>

        <!--
        <hr/>
        <h3>Another subsection</h3>
        <p>The ducks in Germany really have got their act together.
        They know to wait at a pedestrian crossing till the green man appears.</p>
        <p>Those German ducks could teach the Inselaffen a thing or two..</p>

      </article>
      <article>
        <p>Here is a horizontal rule:</p>
        <hr/>
        <h2>Using &lt;<code>br</code>&gt; line breaks</h2>
        <p>The ducks in Germany really have <br/>
        got their shit together.<br/>
        They know to wait at a pedestrian crossing <br/>
        till the green man appears.</p>
        <hr/>
        <h2>Using &lt;<code>pre</code>&gt; instead</h2>
        (Much cleaner markup without &lt;<code>br</code>&gt; sprinkled on the lines..)
        <pre>
        The ducks in Germany really have
        got their shit together.
        They know to wait at a pedestrian crossing
        till the green man appears.
        </pre>
      </article>


      /* the aside content can also be nested within the main content */
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>

    </main>
    -->

    <!-- Common footer used across website -->
    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>

  </body>
</html>