JSFiddle - React, Tailwind, and code Playground

by etai200

HTML

<!DOCTYPE html>
<html lang="zh-tw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>練習網站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>立擷專業攝影</h1>
</header>
<main>
 <section class="info">
 
 <h2>為您保留任何一個精彩時刻</h2><br>
 <blockquote>"你的照片不夠好，是因為你不夠靠近。 – Robert Capa"</blockquote><br>
 <p><a href="#">立即預約</a></p>
 
 </section>
  <section class="Portfolio">
  
 <img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?q=80&w=1638&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="首頁相機圖">
 <div class="Portfolio2">
 <h2>過去的美好時光值得一再回味</h2><br>
 <p><a href="#">觀賞我們的作品</a></p>
 </div>
 </section>
 <Footer>
 <p>copyright © 2024 立擷專業攝影 All Rights reseved.</p>
 </Footer>

 
</main>
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
}


header{
  height: 45px;
  width: 100%;
 background-color: rgba(0, 0, 0, 0.2);
 position: fixed;
  z-index: 5; /* 圖層優先度 */
}
header h1{
  color: Snow;
  text-align: center;
}

section a{
  border: 1px solid #ffffff50;
  padding: 10px 20px;
  margin: 20px;
     -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
     border-radius: 1px;
     color: Snow;
     text-decoration: none;
}
blockquote{
   color: Snow;
 }
.info{
color: Snow;
height: 200vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)),url("https://images.unsplash.com/photo-1532800783378-1bed60adaf58?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-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.info h2{
  color: Snow;
  font-size: 40px;
}
.Portfolio{
  display: flex;
  background-color: #000000dd;
}
.Portfolio h2{
  color: Snow;
  font-size: 40px;
}
.Portfolio img{
  opacity: 0.7;
  height: 50%;
  width: 50%;
  }
.Portfolio2{
  width: 50%;
  display: flex;
  flex-direction: column; /* 排列方式:垂直 */
  align-items: center;  /* 水平至中 */
  justify-content: center; /* 垂直至中 */
}
footer{
  background-color: black;
  color: snow;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  
}