Simple Web (Copy 10558)

✨ นางสาวกัลยกร ยี่นาง

<head>
  <style>
    @import url(//db.onlinewebfonts.com/c/84ed805b799a7034568767668b7c9316?family=YasashiiW01-Bold);
    @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Petit+Formal+Script&family=Pinyon+Script&display=swap');
    @font-face {font-family: "YasashiiW01-Bold";
      src: url("//db.onlinewebfonts.com/t/84ed805b799a7034568767668b7c9316.woff") format("woff");}
    * {
      margin: 0;
      padding: 0;
    }
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #071017;
      }
    .img {
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      width: 50vh;
      }
    .title1 {
      position: absolute;
      width: 50vh;
      font-family: 'YasashiiW01-Bold';
      color: white;
      text-align: center;
      font-size: 10vh;
    }
    .title2 {
      position: absolute;
      width: 50vh;
      top: 20vh;
      font-family: 'Pinyon Script', cursive;
      color: yellow;
      opacity: 0.7;
      text-align: center;
      font-size: 6vh;
    }
    .palette {
      width: 50vh;
      height: 8.34vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .color {
      width: 8.34vh;
      height: 8.34vh;
    }
    .color1 {
      background: #262C45;
    }
    .color2 {
      background: #5A6E9E;
    }
    .color3 {
      background: #567C94;
    }
    .color4 {
      background: #765E6A;
    }
    .color5 {
      background: #6c4854;
    }
    .color6 {
		background: #6d5e12;
    }
    .rgb {
      font-family: 'Dongle', sans-serif;
      font-size: 2.5vh;
      width: 8.34vh;
      height: 8.34vh;
      display: flex;
      align-items: center;
      justify-content: center;
		color: white;
      opacity: 0;
      transition: .5s;
    }
    .rgb:hover {
      opacity: 1;
      cursor: context-menu;
    }
    .printer {
      position: absolute;
      width: 20vh;
      left: 84vh;
      top: 60vh;
    }
    video {
      position: absolute;
      opacity: 0;
      transition: .5s;
      width: 20vh;
      top: 52vh;
    }
    .video {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .container:hover video {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <p class="title1">la la land</p>
    <p class="title2">la&nbsp;&nbsp;la&nbsp;&nbsp;land</p>
    <img class="img" src="https://cdn.discordapp.com/attachments/812749326543487058/935428611098423306/Untitled-1.jpg">
    <div class="video"><video controls>
      <source src="https://cdn.discordapp.com/attachments/812749326543487058/935472175048192040/Instagram_advertising__La_La_Land.mp4" type="video/mp4">
      </video></div>
    <div class="palette">
      <div class="color color1"><div class="rgb"><p>#262C45</p></div></div>
      <div class="color color2"><div class="rgb"><p>#5A6E9E</p></div></div>
      <div class="color color3"><div class="rgb"><p>#567C94</p></div></div>
      <div class="color color4"><div class="rgb"><p>#765E6A</p></div></div>
      <div class="color color5"><div class="rgb"><p>#6c4854</p></div></div>
      <div class="color color6"><div class="rgb"><p>#6d5e12</p></div></div>
    </div>
  </div>
</body>