lesson3_hw

https://codelove.tw/@howtomakeaturn/post/YqZWQx

by j437437

HTML

<!--參考網址 https://www.storm.mg/lifestyle/4731967-->
<div class="container">
  <div class="logo">
    <a href="#"><img src="https://www.storm.mg/images/logo.svg" alt="風傳媒logo" width="169"></a>
  </div>
  <div class="navbar">
    <ul>
      <li><a href="#"><img src="https://www.storm.mg/images/logo_new7.svg" alt=""></a></li>
      <li><a href="#"><img src="https://www.storm.mg/images/1percentstyle.svg" alt=""></a></li>
      <li><a href="#"><img src="https://www.storm.mg/images/vip_logo.png" alt=""></a></li>
      <li><a href="#">新聞</a></li>
      <li><a href="#">評論</a></li>
      <li><a href="#">財經</a></li>
      <li><a href="#">生活</a></li>
      <li><a href="#">下班經濟學</a></li>
    </ul>
    <hr>
  </div>

  <header>
    <div class="tags-link-wrapper">
      <a class="tags-link" href="#">風生活</a>
      <a class="tags-link" href="#">美食</a>
      <a class="tags-link" href="#">消費</a>
      <a class="tags-link" href="#">時事話題</a>
    </div>
    <h1>麥當勞限時優惠！麥克鷄塊、OREO冰炫風加1元多1件，再加碼15層「無敵大麥克」限時回歸</h1>
    <p>風生活綜合報導 2023-02-14 15:37 850 人氣</p>
  </header>
  <div class="wrap">
    <div class="content-col">
      <img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2023/02/14/20230214-033524_U25889_M829730_d563.jpg?itok=TFZN3rAP" alt="麥當勞套餐照片" class="img-fluid">
      <p class="img-desc">重量級「無敵大麥克」，自2月15日起至3月14日（或售完為止）限期登場。（圖／麥當勞提供）</p>
      <div class="content-col-card">
        <p>台灣麥當勞自2月15日起至3月14日止，肉量加倍的「無敵大麥克」限時回歸！包含4層100％純牛肉，滿足嗜肉族對於多汁肉排的絕對慾望。此外，至3月14日止推出麥當勞加一元多一件，包含大家最愛的4塊麥克鷄塊、OREO冰炫風、雙倍OREO冰炫風...人氣美食。</p>
        <h2 class="promotion">麥當勞歡樂送：輸入優惠碼「1FOR1」享指定商品加1元多1件</h2>
        <p><strong>期間：</strong>2月1日起至3月14日止。</p>
        <p><strong>內容：</strong>使用「麥當勞歡樂送」網路訂餐，於購物車頁面促銷優惠碼處，輸入優惠碼「1FOR1」，即享4塊麥克鷄塊、OREO冰炫風、雙倍OREO冰炫風、金黃地瓜條或經典美式(冰/熱)加1元多1件優惠。</p>
        <p>贈送品項與點購項目需相同，恕不更換其他品項；訂單需消費滿38元起方可使用此優惠；每筆訂單限使用乙次，本活動Uber Eats、foodpanda均不適用。</p>
        <h3 class="promotion">「大麥克家族」2／15起限時回歸、15層「無敵大麥克」挑戰張嘴極限！</h3>
       ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Sans:wght@500;700&display=swap');

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans', sans-serif;
  letter-spacing: 1.5px;
}

@media (max-width:900px) {
  .popular-col {
    display: none;
  }
}

h1 {
  letter-spacing: 2px;
  font-size: 28px;
  margin-top: 20px;
}

h2 {
  margin-top: 15px;
}

h3 {
  margin-top: 15px;
}

h4 {
  color: red;
  padding: 10px 0px;
  letter-spacing: 2px;
}

p {
  padding: 10px 0px;
  color: #272727;
}

.logo{
  border-bottom: 1px solid black;
}
.logo a img{
  margin: 16px auto;
  display: block;
}

.navbar {
  margin-bottom: 15px;
}

.navbar ul {
  display: flex;
  list-style-type: none;

}

.navbar li a {
  display: block;
  align-items: center;
  text-decoration: none;
  margin: 13px 15px;
  color: black;
  text-align: center;
  font-size: 18px;
}

.navbar li a img {
  height: 25px;
  width: 79px;
}

body {
  background-color: #F0F0F0;
}

.container {
  max-width: 1150px;
  margin: auto;
  padding: 0px 0px 50px 0px;
}

.content-col-card {
  background-color: #fff;
  padding: 10px 30px 50px;
}

header {
  padding: 5px;
}

.wrap {
  display: flex;
}

.content-col {
  width: 820px;
}

.popular-col {
  width: 300px;
  padding-top: 7px;
  margin-left: 30px;
}

.content-col a:visited {
  color: ForestGreen;
}

.content-col a:hover {
  color: red;
}

.tags-link-wrapper {
  display: flex;
  border-left: 10px solid #2894FF;
}

.tags-link {
  display: block;
  margin: 6px 10px;
  text-decoration: none;
  color: #272727;
  font-weight: 700;
  font-size: 20px;
}

.hot-video {
  padding-bottom: 20px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

.article {
  border-bottom: 1px solid black;
}

.article h4 {
  border-bottom: 1px solid #ccc;
}

.read-more {
  display: block;
  color: black;
  margin: 30px 0px;

}

.article-list {
 ...