# 稀飯版 Day5
Date: 2024/10/05
### [CSScoke](https://youtu.be/-mmzaE6eLzY)
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>超通用橫式版面</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap" rel="stylesheet" />
</head>
<body>
<div class="wrap">
<div class="container">
<div class="item">
<div class="pic">
<img src="https://picsum.photos/400/400/?random=10" alt="" />
</div>
<div class="txt">
<h2>臨海的列車</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus debitis sit, voluptates officiis sequi doloremque atque culpa dolorem ducimus ratione sapiente architecto est vero asperiores cum nobis ab in excepturi.</p>
<a href="#" class="btn">more</a>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/400/400/?random=20" alt="" />
</div>
<div class="txt">
<h2>六月星圖</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus debitis sit, voluptates officiis sequi doloremque atque culpa dolorem ducimus ratione sapiente architecto est vero asperiores cum nobis ab in excepturi.</p>
<a href="#" class="btn">more</a>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/400/400/?random=30" alt="" />
</div>
<div class="txt">
<h2>夢海</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus debitis sit, voluptates officiis sequi doloremque atque culpa dolorem ducimus ratione sapiente architecto est vero asperiores cum nobis ab in excepturi.</p>
<a href="#" class="btn">more</a>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/400/400/?random=40" alt="" />
</div>
<div class="txt">
<h2>微行動劇</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus debitis sit, voluptates officiis sequi doloremque atque culpa dolorem ducimus ratione sapiente architecto est vero asperiores cum nobis ab in excepturi.</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
</div>
</body>
</html>
```
```css
/* style.css */
/******************** Main Starts ********************/
* {
margin: 0;
padding: 0;
list-style: none;
font-family: "Noto Sans TC", sans-serif;
}
html {
height: 100vh;
}
body {
height: 100%;
background: linear-gradient(-30deg, #fdaecb, #e7597f, #fe8556);
}
.wrap {
height: 100%;
}
.container {
height: 400px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap; /* 如果有更多 item 就開始換行
(調整 width 就可以拉各種版型了) */
}
.item {
width: 368px; /* 368 + 1 * 2 = 370 */
margin: 15px 15px; /* 370 + 15 * 2 = 400 */
display: flex; /* 文字與圖片橫向排列 */
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid #888;
box-shadow: 6px 8px 30px rgba(160, 0, 0, 0.5); /*
Amos : 黑色髒髒的。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
就設計上來講，會希望陰影色彩和背景較融合在一起。
所以讓陰影色彩帶一點背景色比較漂亮。
(所以這裡選擇加一些紅色)
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
}
.item .pic {
width: 50%;
}
.item .pic img {
width: 100%;
height: 100%;
object-fit: cover; /* 可以直接設定在 img 上，
然後相較於 background 嵌入圖片，
再用 background-size: cover 設定，
這作法利於 SEO (圖片連結在 HTML 上) */
}
.item .txt {
width: 50%;
/* 文字和圖片拉開距離，但又要維持 50% 50%
(換 border-box 模型) */
box-sizing: border-box;
padding: 20px;
display: flex;
flex-direction: column;
}
.item .txt h2 {
padding: 5px; /* Rogelio: 文字和周遭拉出空間 */
font-weight: 700;
/* margin-bottom: .4em; */
}
.item .txt p {
padding: 5px; /* Rogelio: 文字和周遭拉出空間 */
white-space: normal;
font-weight: 300;
/* Rogelio: 多行省略大禮包
*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
box-sizing: border-box;
}
/* 按鈕要 .txt 在右下角 */
.item .txt .btn {
line-height: 2em;
border: 1px solid #888;
padding: 0 1em;
align-self: flex-end; /* 縮到右邊 */
text-decoration: none;
border-radius: 20px;
margin-top: auto; /* 按鈕 box 往上填到最滿，
這樣才會對齊最底下 */
color: #888;
transition: 500ms;
}
.item .txt .btn:hover {
background-color: #bbb;
color: #fff;
}
/******************** Main Ends ********************/
```
### My Practice
Sign in with Wallet
Connect another wallet