web page-simple

by TzuChieh

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tzu-Chieh</title>
    <link href="https://fonts.googleapis.com/css?family=Merienda:700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lekton:400,700&display=swap" rel="stylesheet">
  </head>

  <body>
    <div class="page">
      <div class="name">Tzu-Chieh Chan (Judy)</div>
      <div class="introduce">
        <p><img src="https://i.imgur.com/OS2xzXW.jpg" alt="">
          <span>Birthday:</span>2000/04/05
          <span>Hometown:</span>Taipei,Taiwan
          <span>Hobby:</span><br> 
          Playing moblie/online games<br> 
          Reading novels<br> 
          Watching variety show<br> 
          Hiking<br> 
          Playing volleyball</p>
      </div>
    </div>
  </body>

</html>

CSS

body {
  background-color: #b3b3ff;
  width: 600px;
  margin: auto;
}

.name {
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid #003366;
  font-family: 'Merienda', cursive;
  font-weight: bold;
  font-size: 36px;
  text-align: center;
  color: #003366;
  text-shadow: 2px 2px white;
}

.introduce {
  margin: 20px 10px auto;
  font-family: 'Lekton', sans-serif;
  font-size: 22px;
}

.introduce span {
  color: blue;
  font-weight: bold;
}

.introduce img {
  width: 250px;
  margin: 50px 20px 50px 10px;
  float: left;
}