為你的專屬旅行

訂房網站

by max002215

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>為你的專屬旅行</title>
  <link rel="stylesheet" href="./css/landingpage.css">
</head>
<body>
  <div class="background">
  <div class="content">
  <div class="text">
  <h1>專屬於個人的旅行</h1>
  <h3>立即詢問</h3>
  <form>
    <input type="email" class="email" name="email" placeholder="email">
    <input type="submit" class="submit"value="送出">
  </form>
  </div>
  </div>
  </div>
</body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.background {
  background-image: url("https://images.unsplash.com/photo-1676557059846-2dad064ae6e2?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 100%;
  height: 800px;
  width: 1000px;
  text-align: center;
  position: relative;
}

.content {
  position: relative;
  top: 25%;
  left: 25%;
  text-align: content;
  border: solid 1px #D2D2D2;
  background-color: rgba(42, 144, 5, 0.25);
  width: 500px;
  height: 250px;

}

.text {
  position: absolute;
  top: 60px;
  left: 100px;
  width: 300px;
  height: 200px;
}

h1,
h3 {
  display: block;
  padding-bottom: 10px;
  color: #F6F6F6;
}

.submit {
  margin-top: 10px;
  width: 65px;
  height: 25px;
  border: none;
  border-radius: 30px;
  color: #F6F6F6;
  background-color: #91824B;
}

.email {
  height: 25px;
  background-color: rgba(255, 255, 255, 0.1);
  border: solid 1px #CACACA;
}