Hello World! (Copy 7677) (Copy 7679)

✨ NLiGhtzA North

<html>
<head>
	<title>Let's Start</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;600;800&display=swap');
    body{
      background:#eee;
      margin:1em;
      font-family:sans-serif;
    }
	.center { 
  height: 200px;
  position: relative;
  border: 5px solid green; 
}
  .center p{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:4em;
  font-family: 'Kanit', sans-serif;
}
  .pic1{
  background-image: url("https://storage.googleapis.com/voicetv-web-assets/original/aW1hZ2UvMjAxOC0wOC9jNTQ0ODFiOWUxNWM1NGE5YmRhMGE3YjQzMDIzZDBjZS5qcGc=.jpg");
  background-position:center;
  background-size: auto;
  background-repeat:no-repeat;
  height:49%;
  width:49%;
  margin:5px 5px 1px;
  float:left;
    }
  .textbox{
  background:pink;
  background-position:center;
  background-size: auto;
  background-repeat:no-repeat;
  height:49%;
  width:49%;
  font-size:5em;
  color:red;
  text-shadow: 2px 2px 5px black;
  font-family: 'Kanit', sans-serif;
  float:right;
  margin:5px 5px 1px;
    }
    .pic2{
      background-position:center;
		background:blue;
      top:75%;
      height:100%;
      width:100%;
    }
  </style>
</head>
<body>

  <div class="center">
  <p>ปัญหาหมอกควันข้ามพรมแดน</p>
</div>
  <div class="pic1">
  </div>
  <div class="textbox">
    abcde
  </div>
  <div class="pic2">
  </div>
</body>
</html>