landing page

by 000dd

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Title of the document</title>
	<link rel="stylesheet"  href="style.css" />
	
</head>
  
<body>
      
  <header>
		<div class="logo">Bookstore</div>
		<div class="link">
      <a href="#">Help</a>
      <a href="#">SignUp</a>
      <a href="#">Login</a>
    </div>
  </header>
      
  
    
	<nav>
		<ul>         		       
      <li><a href="#">本日精選</a></li>
      <li><a href="#">熱門書籍</a></li>
      <li><a href="#">新書上架</a></li>
    </ul>
  </nav>

  <div class="background">
  <main>	
		
       
  </main>
  </div>
  <div class="email_block">
    <div class="email-box">
      <div class="subscription">
<p>訂閱我們了解更多</p>
      </div>
	<input class="email" type="email" name="email" placeholder="您的信箱">
  <input class="submit" type="submit" value="Submit">
    </div>
  </div>
</body>

</html>

CSS

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


body{
  background-image: url("https://images.unsplash.com/photo-1533327325824-76bc4e62d560?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80");
  background-attachment: fixed;  
  background-size: cover;
  
  
}
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 auto;
  display: flex;
  background: white;
  padding: 10px;
}
.logo{
  flex: none;
  font-size: 2.6em;
  width: 20%;
  font-weight:900;
  
  margin-left: 20px;
}
.link{
  display: flex;
  flex: auto;
  justify-content: flex-end;
  margin-right: 15px;
}
.link a{
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 1.6em;
  font-weight:500;
  color: black;
}
.link a:nth-child(3){
  background: red;
  border-radius:15px;
  color: white;
}

nav{
  margin: 62px -9px;
  background: #a9a9a9;
}

nav ul {
  display: flex;
  list-style-type: none;
  justify-content: center;
}

nav li a {
  display: block;
  align-items: center;
  text-decoration: none;
  margin: 13px 20px;
  color: white;
  text-align: center;
  font-size: 1.8em;
  
}

.email{
  width:300px;
  height:35px;
}
.submit{
  width:60px;
  height:30px;
  border-radius:15px;
  background-color:	#FF9224;
  border:none;
}
.submit:hover {
  background-color:#FFBB77;
  font-size: 10px;
  width:70px;
  height:35px;
  border-radius:20px;
}
 .email_block{
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  background: white;
}
.email-box{
  width: 400px;
  text-align: center;
  margin-right: 30px;
  margin-left: 30px;
  
}
.subscription{
  position: relative;
  top: -5px;
  right: 10px;
  font-size: 1.7em;
}