The Simple Web (Copy 13792)

✨ Earth

<html>
<head>
	<title>Let's Start</title>
  <style>
   *{
  margin: 0;
  padding: 0;
}
:root{
  --oneColor:#87CEEB;
}
.bg{
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.6)),url(https://media.discordapp.net/attachments/793500625778114570/944676691098370108/262478393_1247119792448008_7995548807906665446_n.jpg?width=894&height=670);
  height: 100vh;
  overflow-x: hidden;
  position: relative;
}
.navbar{
  display: flex;
  padding: 20px 55px;
}
.brand{
  font-size: 35PX;
}
.brand p{
  margin-left: 50px;
  margin-top: 0;
  color: var(--oneColor);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.nav-links ul{
  margin-left: 150px;
  display: inline;
  cursor: pointer;
}
.nav-links ul li{
  list-style: none;
  display: inline-block;
  font-size: 16px;
  padding-bottom: 10px;
  -webkit-transition: all 10ms ease;
  -moz-transition: all 10ms ease;
  -ms-transition: all 10ms ease;
  transition: all 10ms ease;
}
a{
  cursor: pointer;
  padding: 8px 25px;
  color: #fff;
  text-decoration: none;
}
.active, li:hover{
  border-bottom: 4px solid var(--oneColor);
  cursor: pointer;
}

.content{
  margin: 90px 110px;
  color: #fff;
}
.content h1{
  font-size: 80px;
  margin-bottom: 40px;
}
span{
  color: var(--oneColor);
}

.s-media{
  position: absolute;
  height: 18%;
  width: auto;
  text-align: center;
  bottom: 0;
}
.s-media .fa{
  margin: 20px 13px;
  display: block;
  padding: 13px;
  border: 1px solid #000;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 10ms ease;
  -moz-transition: all 10ms ease;
  -ms-transition: all 10ms ease;
  transition: all 10ms ease;
}
.s-media .fa:hover{
  color: var(--oneColor);
  background: ;
}
  </style>
</head>
<body>

  <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
  
  <body>
    <div class="bg">
      <div class="navbar">
        <div class="brand">
          <p>GINPLA (กินปลา)</p>
        </div>
        <div class="nav-links">
          <ul>
            <a href="#"><li class="active">HOME</li></a>
            <a href="https://www.wongnai.com/restaurants/27292Br-%E0%B8%81%E0%B8%B4%E0%B8%99%E0%B8%9B%E0%B8%A5%E0%B8%B2"><li>ABOUT</li></a>
            <a href="https://youtu.be/0vhVCKRga74"><li>VIDEOS</li></a>
          </ul>
        </div>
      </div>
      <div class="content">
        <h1>มาร้านนี้ต้อง <span> <br> กินปลา <br> </h1>
      </div>
      <div class="left">
        <div class="left-top">
        </div>
        <div class="s-media">
          <div class="social">
            <a href="https://www.facebook.com/Ginplaram24/?ref=page_internal"><i class="fa fa-facebook"></i> </a>
            
          </div>
        </div>
      </div>
    </div>
</body>