src/joke.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link href="style/style.css" type="text/css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to build a horse</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <style type="text/css">
        .main {
            padding-top: 5%;
            margin: auto;
            max-width: 800px;
            text-align: justify;
        }

        .center {
            text-align: center;
        }

        li {
            list-style-type: none;

        }

        a {
            color: inherit;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <!-- Main container -->
    <div class="main container">
        <h1 class="center">Hey, wanna read a good joke?</h1>
        <hr>
        <br />
        <img id="joke" src="https://24t9d72kcs873my15o9hr1pu-wpengine.netdna-ssl.com/wp-content/uploads/2018/08/toggl-how-to-create-horse-with-programming.jpg" />
        <hr>
        <br> 
        <h2> 'Why did Sally fall off the swing?' </h2>
        <h3> 'She had no arms' </h3>
        <!-- Reading this in terminal view... you won't see the picture so here is a joke! --> 
        <h1 class="center">See ya!</h1>
        <br />
    </div>
  	<br /><br /><center><a id="back_to_home" href="home.html">Go back to home</a><br /><br /></center>
</body>

</html>