mang-web

✨ SASITHORN SRIJUN

<html>
<head>
	<title>Let's Start</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Gaegu&family=Itim&display=swap');
    * {
      margin: 0;
      box-sizing: border-box;
      font-family: 'Gaegu', cursive;
    }
    body{
      background:hsl(54, 100%, 90%);
      margin:1em;
      font-family:sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .book{
      height:700px;
      width:500px;
      border-radius:20px;
      overflow:hidden;
      display:flex;
      box-shadow:5px 5px 7px #0002;
      transition: .6s;
    }
    .book:hover{
      transform: scale(1.1);
      transition: .6s;
      box-shadow:0 0 10px #fff;
    }
    .book:hover .picture{
      transform: scale(1.1);
      transition: .6s;
    }
    .title{
      height:150px;
      display: flex;
      justify-content: center;
      align-items: center;
}
    .pic-bar{
      height:350px;
      display: flex;
      justify-content: center;
      align-items: center;
}
    .infor-bar{
      height:200px;
      display: flex;
      justify-content: center;
      align-items: center;
}
    .pic{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius:50%;
      width: 350px;
      height: 300px;
      overflow: hidden;
      border:5px solid #8383832b;
    }
    .picture{
      width="600px";
      transition: .6s;
    }
    .infor{
      background:#BF9AD8;
      width:400px;
      height:110;
      overflow: hidden;
      border-radius:20px;
    }
    .name{
      background:#BF9AD8;
      height:70px;
      width:400px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top:15px;
      color:#fff;
    }
    .date{      
      background:#BF9AD8 ;
      height:40px;
      width:400px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom:20px;
      color:#fff;
    }
    .title-text > h1 {
      display: flex;
      justify-content: center;
      align-items: center;
      animation-name: forplay;
      animation-duration: 5s;
      animation: h1 .5s infinite alternate;
      transition: all .5s;
      font-size:4em;
      color:#fff;
      text-shadow:3px 3px 0px #000a;
    }
    @keyframes h1 {
        from {
            transform: rotate(5deg);
        }

to {
            transform: rotate(-5deg);
        }
    }
    #book-san{
      background-color:#BF9AD8;
      height:100%;
      width:45px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #book-page{
      height:100%;
      width:455px;
    }
    #book-page {
    background: linear-gradient(60deg, #FFC4E3, #C4F3FF );
    background-size: 200% 200%;

animation: AnimationName 10s ease infinite;
}

@keyframes AnimationName {
    	0%{background-position:0% 68%}
    	50%{background-position:100% 33%}
    	100%{background-position:0% 68%}
}
  </style>
</head>
<body>
  <div class="book">
    <div id="book-san">
    </div>
    <div id="book-page">
      <div class="title">
        <div class="title-text">
          <h1>
            friendship
          </h1>
        </div>
      </div>
      <div class="pic-bar">
        <div class="pic">
          <img src="https://cdn.discordapp.com/attachments/859484949430009898/935969299452010516/e67de6b0eg5b8b62f82f8c70517ea016_2.JPG" width="600px" class="picture">
        </div>
      </div>
      <div class="infor-bar">
        <div class="infor">
          <div class="name">
          	<h2 style="font-size:2em;">
            	Name: Mangpo & Mai
          	</h2>
          </div>
          <div class="date">
            <h3>
             Date: 27-Jan-2022
            </h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>