index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Webpage (main page)</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

        <style>

        h1 {
          color: maroon;
          text-align: center;
        }


        h3,p{
          color:black;
          text-align: justify;
          font-family: "Times New Roman", Times,serif;

        }
        </style>


        <link rel="stylesheet" href="mystyle.css">
      
    </head>

    <body>

        <h1>A little about me</h1>
        <h3> My backgroud</h3>

          <p>
          I was born in Ningbo, China. A seaport city in the Zhe Jiang province near Shanghai. I had my
          elementary school and Grade 7 to 9 there. Since Ningbo is right beside the ocean, we had a lot of chances
          eat seafood. Therefore, I am not too interested in eating seafood. Since I had it a lot in my childhood.
        </p>


        <div class="row">
          <div class="column">
            <img src="Ningbo.jpg" alt="Ningbo,Zhejiang" style="height:100%">
          </div>
          <div class="column">
             <img src="port.jpg" alt="Ningbo Port" style="height:100%">
          </div>
        </div>

        &nbsp;&nbsp;

        <div class="alert alert-success" role="alert">
        The left image shows the central area of Ningbo, where the right image shows the port of Ningbo.
        </div>

        <h3>My education</h3>

        <ul>
          <li>elementary School: JiangDond Central School</li>
          <li>Grade 7 to 9 (middle School): SongZhaoQiao Middle School</li>
          <li>High School: Semiahmoo Secondary School </li>
          <li>Univeristy: Univeristy of Calgary</li>
        </ul>


        <p>
          <a href="page2.html" target="_self">More about myself</a>
          <p><a href="page3.html" target="_self">Learn more about my university life</p>
        </p>


    </body>
</html>