init

css/style.css

@@ -0,0 +1,655 @@
+.navbar {
+    box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
+    background-color: white;
+    width: 100%;
+}
+
+.navbar .navbar-collapse {
+    flex-grow: 0;
+}
+
+.header {
+    margin-top: 77px;
+    padding-top: 6.5rem;
+    height: 75vh;
+    position: relative;
+    padding-bottom: 3rem;
+
+}
+
+.header__lefttop {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    width: 350px;
+}
+
+.header__title {
+    font-size: 4rem;
+    color: #20616D;
+    font-weight: 400;
+}
+
+.header__sub {
+    color: #38A7BB;
+    font-size: 1.5rem;
+    font-weight: 300;
+    position: relative;
+}
+
+.header__sub::before, .header__sub::after {
+    content: " ";
+    position: absolute;
+    width: 12%;
+    height: 1px;
+    background-color: #38A7BB;
+    top: 50%;
+}
+
+.header__sub::before {
+    left: 28%;
+}
+
+.header__sub::after  {
+    left: 60%;
+}
+
+.header__form {
+    margin: 1rem auto;
+    justify-content: center;
+}
+
+.header__form__input {
+    border-radius: 10rem;
+    padding: .4rem .8rem;
+    width: 60%;
+    margin-left: 4.5rem;
+}
+
+.header__form__sub {
+    border-radius: 10rem;
+    background-color: #FCA25E;
+    color: white;
+    border: none;
+    width: 5rem;
+    transform: translateX(-100%);
+    transition: all .3s;
+}
+
+.header__form__sub:hover {
+    background-color: #ff892e;
+}
+
+.header__right {
+    width: 80%;
+    height: 50vh;
+    background-image: url('../imgs/電腦2.webp');
+    background-size: contain;
+    background-repeat: no-repeat;
+    margin: 0 auto;
+    position: relative;
+}
+
+.header__right__cir {
+    width: 60%;
+    position: absolute;
+    right: 0%;
+    top: -5%;
+    z-index: -1;
+}
+
+.header__right__video {
+    position: absolute;
+    width: calc(80% - 10%);
+    height: auto;
+    left: 3.3rem;
+    top: 1.8rem;
+}
+
+.header__right__magnifier {
+    position: absolute;
+    width: 25%;
+    right: 3%;
+    bottom: 1%;
+}
+
+.header__right__bubble {
+    position: absolute;
+    width: 22%;
+    top: 0;
+    left: 0;
+    transform: translate(-60%, -50%);
+}
+
+.header__right__linecir {
+    width: 45%;
+    position: absolute;
+    left: -8%;
+    bottom: -3%;
+    z-index: -1;
+}
+
+.category {
+    padding: 2rem 0;
+}
+
+.category__btngrp {
+    padding: 0 8rem;
+}
+
+.category__btn {
+    background-color: #A7D9E2;
+    border: none;
+    border-radius: 5rem;
+    outline: none;
+    color: white;
+    font-size: 1.3rem;
+    padding: .4rem 2rem;
+}
+
+.category__btn.active {
+    background-color: #38A7BB;
+}
+
+.card__rank {
+    border: 1px solid #CECECE;
+    box-shadow: 1px 1px 5px 1px rgb(211, 211, 211);
+    position: relative;
+    padding: 1rem 1.5rem;
+}
+
+.top20 .card__rank {
+    margin-bottom: 1.5rem;
+}
+
+.top3 {
+    padding: 3rem 0rem;
+    padding-bottom: 5rem;
+    position: relative;
+}
+
+.top3 .row {
+    padding: 0rem 4rem;
+}
+
+.top3 .backfill {
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    background-color: #FFEBE8;
+    left: 0;
+    right: 0;
+    top: 7rem;
+}
+
+.top3__num {
+    color: #FCA25E;
+    font-size: 5.8rem;
+    font-family: 'Trebuchet MS';
+    position: absolute;
+    left: 1rem;
+    top: -3.5rem;
+    font-weight: 300;
+}
+
+.card__rank__word {
+    color: #20616D;
+    margin-left: 3rem;
+    font-size: 1.8rem;
+    font-weight: 400;
+}
+
+.card__rank__goto {
+    text-align: right;
+}
+
+.card__rank__link {
+    color: #38A7BB;
+    text-decoration: none;
+    font-weight: 400;
+}
+.card__rank__link:hover {
+    color: #19879b;
+}
+
+.top20 {
+    padding-bottom: 5rem;
+}
+
+.top20 .row {
+    padding: 0rem 4rem;
+}
+
+.top20 .card__rank__word {
+    margin-left: 0;
+}
+.top20__num {
+    color: #FCA25E;
+    font-size: 2.5rem;
+    font-family: 'Trebuchet MS';
+    font-weight: 300;
+    display: inline-block;
+    width: 2.2rem;
+    
+}
+
+.footer {
+    background-color: #555555;
+    padding: 50px 0;
+    color: #999999;
+}
+
+.footer h4 {
+    text-transform: uppercase;
+    color: white;
+    font-size: 14px;
+    font-weight: 800;
+}
+
+.footer__btn__text {
+    font-size: 1.3rem;
+    color: white;
+}
+
+.footer .btn {
+    border: 2px solid #38a7bb;
+    color: #38a7bb;
+    text-decoration: none;
+}
+
+.followus__btn {
+    text-decoration: none;
+    color: white;
+}
+
+.followus__btn:hover {
+    color: #38a7bb;
+}
+
+.footer .btn:hover {
+    color: white;
+    background-color: #38a7bb;
+}
+
+.followus__txt {
+    display: inline-block;
+    margin-right: 1rem;
+    color: white;
+    font-weight: 600;
+}
+
+.footer_img {
+    height: 60px;
+}
+
+
+/* content page */
+
+.cntheader {
+    margin-top: 81px;
+    padding: 4rem 0;
+    position: relative;
+    padding-bottom: 2rem;
+}
+
+.cntheader__sub {
+    color: #38A7BB;
+    font-size: 1.5rem;
+    font-weight: 300;
+    position: relative;
+}
+
+.cntheader__sub::before, .cntheader__sub::after {
+    content: " ";
+    position: absolute;
+    width: 15%;
+    height: 1px;
+    background-color: #38A7BB;
+    top: 50%;
+}
+
+.cntheader__sub::before {
+    left: 18%;
+}
+
+.cntheader__sub::after  {
+    left: 67%;
+}
+
+.cntheader .category__btngrp {
+    padding: 0 4rem;
+}
+
+.card__art {
+    padding: 1rem;
+    border: 1px solid #20616D;
+    border-radius: 1rem;
+    margin-bottom: 1rem;
+}
+
+.card__title {
+    font-size: 1.8rem;
+    font-weight: 400;
+}
+
+.card__text {
+    color: #918F8F;
+}
+
+.card__link {
+    display: inline-block;
+    color: #38A7BB;
+    margin-right: 1rem;
+    text-decoration: none;
+}
+
+.card__link:hover {
+    color: #20616D;
+}
+
+.toparticle {
+    border: 1px solid #CECECE;
+    box-shadow: 1px 2px 3px 1px rgb(224, 224, 224);
+}
+
+.toparticle__title {
+    color: white;
+    background-color: #38A7BB;
+    text-align: center;
+    font-size: 1.3rem;
+    padding: .3rem 0;
+    position: relative;
+}
+
+.toparticle__title img {
+    position: absolute;
+    width: 150px;
+    right: -4rem;
+    top: -3.5rem;
+}
+
+.toparticle__list {
+    padding: 1.5rem;
+    padding-top: 0;
+    list-style: none;
+    padding-bottom: 1rem;
+}
+
+.toparticle__list-item {
+    padding: .3rem;
+    border-bottom: 1px solid #CECECE;
+    color: #38A7BB;
+    position: relative;
+}
+
+.toparticle__list-item:nth-of-type(10) {
+    border: none;
+}
+
+
+.toparticle__list-item a {
+    text-decoration: none;
+    color: #38A7BB;
+}
+
+.toparticle__num {
+    color: #FCA25E;
+    font-size: 1.8rem;
+    font-family: 'Trebuchet MS';
+    font-weight: 300;
+    margin-right: 8px;
+}
+
+.toparticle__top {
+    font-size: 2rem;
+}
+
+.toparticle__list-item small {
+    position: absolute;
+    right: 0;
+    top: 45%;
+}
+
+.cntsubscribe {
+    text-align: center;
+}
+
+.cntsubscribe__form {
+    position: relative;
+}
+
+.cntsubscribe__sub {
+    border-radius: 10rem;
+    background-color: #FCA25E;
+    color: white;
+    border: none;
+    width: 5rem;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: .45rem .8rem;
+}
+
+.cntsubscribe__sub:hover {
+    background-color: #ff892e;
+    color: white;
+}
+
+.cntsubscribe__input {
+    border-radius: 10rem;
+    padding: .4rem .8rem;
+    width: 100%;
+}
+
+@media (max-width: 1300px) {
+    .header__right__video {
+        position: absolute;
+        width: calc(80% - 4%);
+    }
+}
+
+@media (max-width: 992px) {
+    .header__title {
+        font-size: 3rem;
+    }
+    .cntheader .header__title {
+        font-size: 2.2rem;
+    }
+    .header {
+        padding-top: 4rem;
+        height: 50vh;
+    }
+    .header__right {
+        height: 40vh;
+    }
+    .header__right__magnifier {
+        right: -2.5rem;
+        bottom: 1rem;
+    }
+    .header__sub {
+        font-size: 1.3rem;
+    }
+    .header__sub::before, .header__sub::after {
+        width: 8%;
+    }
+    .header__sub::before {
+        left: 30%;
+    }
+    .header__sub::after  {
+        left: 62%;
+    }
+    .header__form__input {
+        font-size: .9rem;
+    }
+    .category__btngrp {
+        padding: 0;
+    }
+    .category__btn {
+        padding: .3rem 1.5rem;
+        font-size: 1.2rem;
+    }
+    .ctncategory__btn {
+        padding: .2rem 1rem;
+        font-size: 1rem;
+    }
+    .top3 .row {
+        padding: 0;
+    }
+    .card__rank {
+        padding: .8rem 1rem;
+    }
+    .top3__num {
+        left: .6rem;
+        top: -2.5rem;
+        font-size: 4rem;
+    }
+    .card__rank__word {
+        margin-left: 1.5rem;
+        font-size: 1.2rem;
+    }
+    .card__rank hr {
+        margin-top: 8px;
+        margin-bottom: 8px;
+    }
+    .top20 .row {
+        padding: 0;
+    }
+    .top20__num {
+        font-size: 2.1rem;
+        width: 1.6rem;
+    }
+    .container__footer {
+        width: 95vw;
+    }
+    .header__form {
+        width: 85%;
+        position: relative;
+    }
+    .header__form__input {
+        margin-left: 0;
+        width: 100%;
+    }
+    .header__form__sub {
+        transform: none;
+        position: absolute;
+        right:0;
+        top: 0;
+    }
+    .header__right__linecir {
+        bottom: 0;
+    }
+    .cntheader__sub {
+        font-size: 1.2rem;
+    }
+    
+    .cntheader__sub::before {
+        left: 13%;
+    }
+    
+    .cntheader__sub::after  {
+        left: 72%;
+    }
+    .toparticle__title img {
+        position: absolute;
+        width: 90px;
+        right: -2rem;
+        top: -2rem;
+    }
+    .toparticle__top {
+        font-size: 1.7rem;
+    }
+    .fb__fr {
+        width: 100%;
+    }
+    .cntsubscribe__form {
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .header {
+        height: 70vh;
+    }
+    .header .col-md-5 {
+        margin-bottom: 3rem;
+    }
+    .header__right__bubble {
+        width: 15%;
+    }
+    .header__right__magnifier {
+        right: 4rem;
+        bottom: 1rem;
+    }
+    .category {
+        padding-top: 4rem;
+    }
+    .top3 {
+        padding-bottom: 2rem;
+    }
+    .top3 .col-md-4 {
+        margin-bottom: 1.5rem;
+    }
+    .top3 .col-md-4:nth-of-type(3) {
+        margin-bottom: 0;
+    }
+    .card__rank {
+        margin-bottom: 1.5rem;
+    }
+    .row-right {
+        margin-top: 2rem;
+    }
+    .cntheader {
+        padding-bottom: 0rem;
+    }
+    .header__right__video {
+        position: absolute;
+        width: calc(80% - 10%);
+        left: 2.3rem;
+        top: 1.5rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .header__title {
+        font-size: 2.5rem;
+    }
+    .header {
+        padding-top: 3rem;
+        height: 63vh;
+        padding-bottom: 0rem 
+    }
+    .header__right {
+        height: 30vh;
+    }
+    .header__right__magnifier {
+        right: 0rem;
+        bottom: 1.5rem;
+    }
+    .category__btn {
+        padding: .2rem 1rem;
+        font-size: 1rem;
+    }
+    .category {
+        padding: 1rem;
+    }
+    .footer_img {
+        height: 50px;
+    }
+    .footer {
+        font-size: .9rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .ctncategory__btn {
+        margin-top: .6rem;
+    }
+    .header__right__video {
+        position: absolute;
+        width: calc(80% - 5%);
+        left: 2.1rem;
+        top: 1.3rem;
+    }
+}
+

index.html

@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
+    <meta http-equiv="Cache-Control" content="no-cache">
+    <title>Choozmo Marketing Cloud</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" 
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">
+                <img src="imgs/logo@2x.webp" alt="" width="180" height="48" class="d-inline-block align-text-top">
+            </a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse ms-auto" id="navbarNav">
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="#">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">登入</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">聯絡我們</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <main>
+          <section class="header">
+            <img src="imgs/01.webp" alt="" class="header__lefttop">
+            <div class="row align-items-center g-0">
+                <div class="col-12 col-md-5 text-center ">
+                    <h2 class="header__title">趨勢日報</h2>
+                    <h4 class="header__sub">熱門排行</h4>
+                    <form class="d-flex header__form">
+                        <input class="form-control header__form__input" type="search" placeholder="輸入email 掌握最新資訊" aria-label="Search">
+                        <button class="btn header__form__sub" type="submit">訂閱</button>
+                    </form>
+                </div>
+                <div class="col-12 col-md-7">
+                    <div class="header__right">
+                        <img src="imgs/02.webp" alt="" class="header__right__cir">
+                        <img src="imgs/影片.webp" alt="" class="header__right__video">
+                        <img class="header__right__magnifier" src="imgs/放大鏡.webp" alt="">
+                        <img class="header__right__bubble" src="imgs/對話.webp" alt="">
+                        <img class="header__right__linecir" src="imgs/裝飾圓.webp" alt="">
+                    </div>
+                </div>
+            </div>
+          </section>
+          <section class="category container">
+            <div class="d-flex justify-content-around category__btngrp">
+                <button class="category__btn active">分類</button>
+                <button class="category__btn">分類</button>
+                <button class="category__btn">分類</button>
+                <button class="category__btn">分類</button>
+                <button class="category__btn">分類</button>
+            </div>
+          </section>
+          <section class="top3">
+            <div class="backfill"></div>
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <span class="top3__num">1</span>
+                            <strong class="card__rank__word">台灣民意基金會</strong>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <span class="top3__num">2</span>
+                            <strong class="card__rank__word">台灣民意基金會</strong>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <span class="top3__num">3</span>
+                            <strong class="card__rank__word">台灣民意基金會</strong>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+          </section>
+          <section class="top20">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">4</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">5</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">6</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">4</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">5</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">6</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">4</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">5</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">6</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">4</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">5</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">6</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">4</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">5</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">6</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">4</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">5</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="card card__rank">
+                            <div class="d-flex align-items-center">
+                                <span class="top20__num">6</span>
+                                <strong class="card__rank__word">台灣民意基金會</strong>
+                            </div>
+                            <hr>
+                            <div class="card__rank__goto">
+                                <a href="" class="card__rank__link">看新聞 ></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+          </section>
+      </main>
+      <footer class="footer">
+        <div class="container container__footer">
+            <div class="row">
+            <div class="col-6">
+                <h4>About us</h4>
+                <a href="http://www.choozmo.com/"><img src="imgs/logo_choozmo.webp" class="footer_img"></a>
+                <div class="followus">
+                    <span class="followus__txt">關注我們</span>
+                    <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img src="imgs/youtube-new-flat-logo-1.png" alt="" width="32px" height="32px"></a>
+                    <a href="https://line.me/R/ti/p/@choozmo?from=page" class="followus__img"><img src="imgs/line.png" alt=""></a>
+                    <br>
+                    <a href="" class="followus__btn">訂閱電子報<i class="fas fa-envelope"></i></a>
+                </div>
+                <hr class="d-block d-md-none">
+            </div>
+            <!-- <div class="col-md-4 col-6">
+                <div>
+                    <p class="footer__btn__text">想洽詢我們的專案製作嗎？</p>
+                    <a href="https://docs.google.com/forms/d/e/1FAIpQLSeygs4xXy-Xxeh2w9rI4zuQNFutLP_71Bwxo5hqqs2Ca-u5VA/viewform" class="btn btn-lg">洽詢專案製作</a>
+                </div>
+            </div> -->
+            <div class="col-6">
+              <h4>Contact</h4>
+                <p class="text-uppercase"><strong>集仕多股份有限公司</strong>
+            <br>新竹縣竹北市復興二路229號9樓之9
+            <br>聯絡電話：036670804
+            <br>聯絡信箱：service@choozmo.com
+          </p>
+                <hr class="hidden-md hidden-lg hidden-sm">
+            </div>
+            </div>
+        </div>
+    </footer>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" 
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" 
+    crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" 
+    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 
+    crossorigin="anonymous"></script>
+</body>
+</html>

index_content.html

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Choozmo Marketing Cloud</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" 
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div style="overflow: hidden;">
+        <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+            <div class="container-fluid">
+                <a class="navbar-brand" href="#">
+                    <img src="imgs/logo@2x.webp" alt="" width="200" height="52" class="d-inline-block align-text-top">
+                </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse ms-auto" id="navbarNav">
+                <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="#">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">登入</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">聯絡我們</a>
+                </li>
+                </ul>
+            </div>
+            </div>
+        </nav>
+        <main>
+            <section class="cntheader">
+                <img src="imgs/01.png" alt="" class="header__lefttop">
+                <div class="container">
+                    <div class="row align-items-center g-0">
+                        <div class="col-12 col-md-3 text-center ">
+                            <h2 class="header__title ">趨勢日報</h2>
+                            <h4 class="cntheader__sub">熱門排行</h4>
+                        </div>
+                        <div class="col-12 col-md-9 align-self-end">
+                            <div class="d-flex justify-content-around category__btngrp flex-wrap">
+                                <button class="category__btn active ctncategory__btn">分類</button>
+                                <button class="category__btn ctncategory__btn">分類</button>
+                                <button class="category__btn ctncategory__btn">分類</button>
+                                <button class="category__btn ctncategory__btn">分類</button>
+                                <button class="category__btn ctncategory__btn">分類</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section class="top3">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-12 col-md-8 col-xl-9">
+                            <div class="card card__art">
+                                <h4 class="card__title">陳美鳳最美歐巴桑變喬事王 新戲吸2百萬人逗熱鬧</h4>
+                                <p class="card__text"><a href="" class="card__link">東森新聞</a>「最美歐巴桑」陳美鳳時隔五年首次接演八點檔！與宏都拉斯對手戲精彩演出....</p>
+                                <div class="card__rank__goto">
+                                    <a href="" class="card__rank__link">查看完整新聞 ></a>
+                                </div>
+                            </div>
+                            <div class="card card__art">
+                                <h4 class="card__title">陳美鳳最美歐巴桑變喬事王 新戲吸2百萬人逗熱鬧</h4>
+                                <p class="card__text"><a href="" class="card__link">東森新聞</a>「最美歐巴桑」陳美鳳時隔五年首次接演八點檔！與宏都拉斯對手戲精彩演出....</p>
+                                <div class="card__rank__goto">
+                                    <a href="" class="card__rank__link">查看完整新聞 ></a>
+                                </div>
+                            </div>
+                            <div class="card card__art">
+                                <h4 class="card__title">陳美鳳最美歐巴桑變喬事王 新戲吸2百萬人逗熱鬧</h4>
+                                <p class="card__text"><a href="" class="card__link">東森新聞</a>「最美歐巴桑」陳美鳳時隔五年首次接演八點檔！與宏都拉斯對手戲精彩演出....</p>
+                                <div class="card__rank__goto">
+                                    <a href="" class="card__rank__link">查看完整新聞 ></a>
+                                </div>
+                            </div>
+                            <div class="card card__art">
+                                <h4 class="card__title">陳美鳳最美歐巴桑變喬事王 新戲吸2百萬人逗熱鬧</h4>
+                                <p class="card__text"><a href="" class="card__link">東森新聞</a>「最美歐巴桑」陳美鳳時隔五年首次接演八點檔！與宏都拉斯對手戲精彩演出....</p>
+                                <div class="card__rank__goto">
+                                    <a href="" class="card__rank__link">查看完整新聞 ></a>
+                                </div>
+                            </div>
+                            <div class="card card__art">
+                                <h4 class="card__title">陳美鳳最美歐巴桑變喬事王 新戲吸2百萬人逗熱鬧</h4>
+                                <p class="card__text"><a href="" class="card__link">東森新聞</a>「最美歐巴桑」陳美鳳時隔五年首次接演八點檔！與宏都拉斯對手戲精彩演出....</p>
+                                <div class="card__rank__goto">
+                                    <a href="" class="card__rank__link">查看完整新聞 ></a>
+                                </div>
+                            </div>
+                            <div class="card card__art">
+                                <h4 class="card__title">陳美鳳最美歐巴桑變喬事王 新戲吸2百萬人逗熱鬧</h4>
+                                <p class="card__text"><a href="" class="card__link">東森新聞</a>「最美歐巴桑」陳美鳳時隔五年首次接演八點檔！與宏都拉斯對手戲精彩演出....</p>
+                                <div class="card__rank__goto">
+                                    <a href="" class="card__rank__link">查看完整新聞 ></a>
+                                </div>
+                            </div>
+                            <div class="card card__art">
+                                <h4 class="card__title">陳美鳳最美歐巴桑變喬事王 新戲吸2百萬人逗熱鬧</h4>
+                                <p class="card__text"><a href="" class="card__link">東森新聞</a>「最美歐巴桑」陳美鳳時隔五年首次接演八點檔！與宏都拉斯對手戲精彩演出....</p>
+                                <div class="card__rank__goto">
+                                    <a href="" class="card__rank__link">查看完整新聞 ></a>
+                                </div>
+                            </div>
+                            <div class="card card__art">
+                                <h4 class="card__title">陳美鳳最美歐巴桑變喬事王 新戲吸2百萬人逗熱鬧</h4>
+                                <p class="card__text"><a href="" class="card__link">東森新聞</a>「最美歐巴桑」陳美鳳時隔五年首次接演八點檔！與宏都拉斯對手戲精彩演出....</p>
+                                <div class="card__rank__goto">
+                                    <a href="" class="card__rank__link">查看完整新聞 ></a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-12 col-md-4 col-xl-3 row-right">
+                            <div class="toparticle mb-3">
+                                <div class="toparticle__title">熱門排行文章<img src="imgs/放大鏡.webp" alt=""></div>
+                                <ul class="toparticle__list">
+                                    <li class="toparticle__list-item"><a href=""><strong class="toparticle__num toparticle__top">1</strong>台灣民意基金會<small>></small></a></li>
+                                    <li class="toparticle__list-item"><a href=""><strong class="toparticle__num toparticle__top">2</strong>台灣民意基金會<small>></small></a></li>
+                                    <li class="toparticle__list-item"><a href=""><strong class="toparticle__num toparticle__top">3</strong>台灣民意基金會<small>></small></a></li>
+                                    <li class="toparticle__list-item"><a href=""><strong class="toparticle__num">4</strong>台灣民意基金會<small>></small></a></li>
+                                    <li class="toparticle__list-item"><a href=""><strong class="toparticle__num">5</strong>台灣民意基金會<small>></small></a></li>
+                                    <li class="toparticle__list-item"><a href=""><strong class="toparticle__num">6</strong>台灣民意基金會<small>></small></a></li>
+                                    <li class="toparticle__list-item"><a href=""><strong class="toparticle__num">7</strong>台灣民意基金會<small>></small></a></li>
+                                    <li class="toparticle__list-item"><a href=""><strong class="toparticle__num">8</strong>台灣民意基金會<small>></small></a></li>
+                                    <li class="toparticle__list-item"><a href=""><strong class="toparticle__num">9</strong>台灣民意基金會<small>></small></a></li>
+                                    <li class="toparticle__list-item"><a href=""><strong class="toparticle__num">10</strong>台灣民意基金會<small>></small></a></li>
+                                </ul>
+                            </div>
+                            <div style="width:100%;">
+                                <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fchoozmo&tabs=timeline&width=270&
+                                height=900&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=831591714123614" 
+                                class="fb__fr" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" 
+                                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
+                            </div>
+                            <div class="cntsubscribe mt-3">
+                                <h3>掌握最新資訊</h3>
+                                <form class="d-flex header__form cntsubscribe__form">
+                                    <input class="form-control cntsubscribe__input" type="search" placeholder="輸入email" aria-label="Search">
+                                    <button class="btn cntsubscribe__sub" type="submit">訂閱</button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+        <footer class="footer">
+            <div class="container container__footer">
+                <div class="row">
+                <div class="col-6">
+                    <h4>About us</h4>
+                    <a href="http://www.choozmo.com/"><img src="imgs/logo_choozmo.webp" class="footer_img"></a>
+                    <div class="followus">
+                        <span class="followus__txt">關注我們</span>
+                        <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img src="imgs/youtube-new-flat-logo-1.png" alt="" width="32px" height="32px"></a>
+                        <a href="https://line.me/R/ti/p/@choozmo?from=page" class="followus__img"><img src="imgs/line.png" alt=""></a>
+                        <a href="" class="followus__btn">訂閱電子報<i class="fas fa-envelope"></i></a>
+                    </div>
+                    <hr class="hidden-md hidden-lg hidden-sm">
+                </div>
+                <!-- <div class="col-md-4 col-6">
+                    <div>
+                        <p class="footer__btn__text">想洽詢我們的專案製作嗎？</p>
+                        <a href="https://docs.google.com/forms/d/e/1FAIpQLSeygs4xXy-Xxeh2w9rI4zuQNFutLP_71Bwxo5hqqs2Ca-u5VA/viewform" class="btn btn-lg">洽詢專案製作</a>
+                    </div>
+                </div> -->
+                <div class="col-6">
+                    <h4>Contact</h4>
+                    <p class="text-uppercase"><strong>集仕多股份有限公司</strong>
+                    <br>新竹縣竹北市復興二路229號9樓之9
+                    <br>聯絡電話：036670804
+                    <br>聯絡信箱：service@choozmo.com
+                    </p>
+                    <hr class="hidden-md hidden-lg hidden-sm">
+                </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" 
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" 
+    crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" 
+    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 
+    crossorigin="anonymous"></script>
+</body>
+</html>