diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..2affe8d Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..cbb7b3a --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/css/ms.css b/css/ms.css new file mode 100644 index 0000000..6d0c612 --- /dev/null +++ b/css/ms.css @@ -0,0 +1,784 @@ +@charset "UTF-8"; +*, ::before, ::after { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #000; +} + +a { + text-decoration: none; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +.w-100 { + width: 100%; +} + +.container-normal { + width: 90%; + max-width: 1596px; + margin: auto; +} + +.container-full { + width: 100%; + max-width: 1920px; + margin: auto; +} + +nav { + height: 54px; + display: flex; + justify-content: flex-start; + align-items: center; + position: relative; +} +nav .logo { + width: 137px; + height: 54px; + display: flex; + justify-content: center; + align-items: center; + padding: 16px 6px 16px 10px; +} +nav .logo img { + width: 108px; + height: 23px; + margin: -3px 0 0; +} +nav .menu { + height: 100%; + display: flex; +} +nav .menu li { + padding: 16px 8px 10px; + margin: 1px 2px 0; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 13px; + color: #262626; + white-space: nowrap; +} +nav .menu li:hover span { + border-bottom: 2px solid black; +} +nav .menu li:focus { + border: 1px dashed black; +} +nav .menu a:link, nav .menu a:visited { + color: #262626; +} +nav .pc-menu { + justify-content: flex-start; + width: 1000px; +} +nav .func-menu { + justify-content: flex-end; + width: 459px; +} +nav .func-menu .fa-chevron-down { + width: 8px; + height: 19px; + margin: 0 0 -7px 7px; +} +nav .func-menu .fa-magnifying-glass { + width: 16px; + height: 18px; + margin: 0 0 -7px 7px; +} +nav .func-menu .fa-cart-shopping { + width: 16px; + height: 18px; + margin: 0 0 -7px 7px; +} +nav .func-menu .fa-circle-user { + font-size: 20px; + margin: 0 0 2px 7px; +} +nav .func-menu .all-ms { + background-color: white; + border: none; + cursor: pointer; +} +nav .func-menu .all-ms .dropDown-menu { + background-color: #F2F2F2; + width: 1230px; + height: auto; + position: absolute; + top: 95%; + left: 50%; + transform: translateX(-50%); + border-bottom: 2px solid black; + display: none; + flex-wrap: wrap; + justify-content: flex-start; + z-index: 99; +} +nav .func-menu .all-ms .dropDown-menu .selection { + width: 100%; + display: flex; + justify-content: flex-start; +} +nav .func-menu .all-ms .dropDown-menu .selection .menu-item { + width: 15.8666666667%; + padding: 0 0 10px; +} +nav .func-menu .all-ms .dropDown-menu .selection .menu-item p { + color: #000000; + font-weight: bold; + padding: 18px 0 18px 24px; + text-align: left; +} +nav .func-menu .all-ms .dropDown-menu .selection .menu-item ul { + display: flex; + flex-direction: column; + align-items: flex-start; +} +nav .func-menu .all-ms .dropDown-menu .selection .menu-item ul a li { + margin: 0; + padding: 12px 0 12px 24px; + font-size: 13px; + color: #262626; +} +nav .func-menu .all-ms .dropDown-menu .selection .menu-item ul a:hover { + text-decoration: underline; +} +nav .func-menu .all-ms .dropDown-menu .selection .menu-item ul a:focus { + outline: 1px dotted; + outline-offset: 0px; +} +nav .func-menu .all-ms .dropDown-menu .drop-bottom-item { + width: 100%; + background-color: #E6E6E6; + font-size: 13px; + text-align: center; + padding: 10px; +} +nav .func-menu .all-ms .dropDown-menu .drop-bottom-item a:hover { + text-decoration: underline; +} +nav .func-menu .all-ms .dropDown-menu .drop-bottom-item a:focus { + outline: 1px dotted; + outline-offset: 10px; +} +nav .func-menu .all-ms:focus { + background-color: #F2F2F2; +} +nav .func-menu #all-ms-switch:checked ~ .dropDown-menu { + display: flex; +} + +@media (max-width: 1400px) { + nav .func-menu .hide-text { + display: none; + } +} +@media (max-width: 859px) { + nav.container-normal { + width: 90%; + } + nav .logo { + position: absolute; + left: 50%; + transform: translateX(-50%); + } + nav .pc-menu { + display: none; + } + nav .func-menu { + width: 100%; + } + nav .func-menu .all-ms { + display: none; + } + nav .func-menu .a-search { + margin-right: auto; + } +} +header.container-full { + margin-bottom: 50px; +} + +.change-img { + position: relative; +} + +.change-img .banner-text { + width: 40%; + position: absolute; + left: 5%; + top: 25%; + position: absolute; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 48px; +} + +.change-img .banner-text button { + background-color: #0067B8; + padding: 10px 12px; + color: white; + font-weight: bold; + border: none; + cursor: pointer; + font-size: 16px; + margin: 8px 0; +} + +@media (max-width: 1084px) { + .change-img .banner-text { + width: 95%; + background-color: white; + left: 2.5%; + top: 80%; + } +} +.change-img .banner-text button:hover { + background-color: #005cA8; +} + +.change-img .banner-text button:focus { + outline: 0.1875rem dotted white; + outline-offset: -5px; +} + +.change-img .banner-text { + margin: 0; +} +.change-img .banner-text .banner-title { + margin: 0 0 20px; +} +.change-img .banner-text .banner-title h2 { + font-size: 37px; + margin: 0; + line-height: 45px; + white-space: wrap; +} +.change-img .banner-text .banner-content { + margin: 0 0 24px; +} + +.big-img .banner-text { + width: 37%; + left: 5%; + top: 28%; +} +.big-img .banner-text .banner-title { + color: white; +} +.big-img .banner-text .banner-content { + color: white; +} + +@media (max-width: 1400px) { + .change-img .banner-text .banner-title h2 { + font-size: 29px; + } + .change-img .banner-text .banner-title { + margin: 0 0 16px; + } +} +@media (max-width: 1084px) { + .change-img .banner-text { + width: 95%; + background-color: white; + left: 2.5%; + top: 80%; + box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, 0.13), 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.11); + } + .change-img .banner-text .banner-title h2 { + font-size: 24px; + } + .change-img .banner-text .banner-title { + margin: 0 0 12px; + } + .big-img .banner-text .banner-title { + color: black; + } + .big-img .banner-text .banner-content { + color: black; + } +} +@media (max-width: 859px) { + .change-img .banner-text { + width: 100%; + background-color: white; + left: 0; + top: 100%; + padding: 24px 12px 16px; + } +} +main section { + margin-bottom: 50px; +} +main .three-choice { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + text-align: center; +} +main .three-choice .one-choice { + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; +} +main .three-choice .one-choice img { + width: 40px; +} +main .three-choice .one-choice button { + border: none; + background-color: transparent; + cursor: pointer; +} +main .three-choice .one-choice button p { + text-decoration: underline; + font-weight: bold; + font-size: 16px; +} +main .three-choice .one-choice button:focus p { + outline: 0.1875rem dotted #0067BB; + outline-offset: 1px; +} +main .three-choice .one-choice:link button, main .three-choice .one-choice:visited button { + color: #0067BB; +} +main .title { + margin-bottom: 0; +} +main .title h2 { + font-size: 37px; + margin: 0 0 20px; +} +main .four-card { + width: 100%; + height: auto; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} +main .four-card .one-card { + width: calc((100% - 72px) / 4); + height: 500px; + box-shadow: 0 0.1875rem 0.4375rem 0 rgba(0, 0, 0, 0.13), 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.11); + display: flex; + flex-direction: column; + justify-content: space-between; +} +main .four-card .one-card img { + width: 100%; +} +main .four-card .one-card .intro { + padding: 24px 24px 12px; + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} +main .four-card .one-card .intro h3 { + font-size: 29px; + margin: 0 0 16px; + line-height: 35px; +} +main .four-card .one-card .intro .content { + font-size: 16px; +} +main .four-card .one-card .intro .btn-new { + background-color: #FFB900; + color: black; + display: inline-block; + padding: 6px 12px; + font-weight: bold; +} +main .four-card .one-card .intro .empty { + background-color: transparent; + color: transparent; + display: inline-block; + padding: 6px 12px; + font-weight: bold; +} +main .four-card .one-card .intro .btn { + display: flex; + flex-wrap: wrap; + gap: 0 20px; +} +main .four-card .one-card .intro .btn .button { + font-size: 16px; + border: none; + background-color: #0067BB; + color: white; + font-weight: bold; + margin: 8px 0; + padding: 10px 12px; + cursor: pointer; +} +main .four-card .one-card .intro .btn .arrow { + position: relative; +} +main .four-card .one-card .intro .btn .arrow:hover { + text-decoration: underline; +} +main .four-card .one-card .intro .btn .arrow::before { + content: ">"; + font-size: 20px; + font-weight: 300; + margin-right: 8px; + color: #0067B8; + position: absolute; + right: -30%; + top: 0%; +} +main .four-card .one-card .intro .btn .arrow:hover::before { + right: -35%; + transition: 0.5s ease; +} +main .four-card .one-card .intro .btn .button:hover { + background-color: #005cA8; +} +main .four-card .one-card .intro .btn .button:focus { + outline: 0.1875rem dotted white; + outline-offset: -5px; +} +main .four-card .one-card .intro .btn .max-six { + background-color: transparent; + border: none; + color: #0067B8; + font-weight: bold; + font-size: 16px; + cursor: pointer; +} +main .four-card .one-card .intro .btn .max-six:focus { + outline: 0.1875rem dotted #0067B8; + outline-offset: -5px; +} +main .four-card .one-card:link, main .four-card .one-card:visited { + color: black; +} +main .bottom-word { + margin: 48px 0 0; +} +main .bottom-word .follow { + display: inline-block; + text-indent: 20px; + margin-right: 20px; +} +main .bottom-word .fa-facebook-f, main .bottom-word .fa-youtube { + font-size: 20px; + margin-right: 20px; +} +main .bottom-word i:active { + outline: 1px dotted black; + outline-offset: 4px; +} +main .bottom-word a:link, main .bottom-word a:visited { + color: black; +} + +@media (max-width: 1400px) { + section.four-card .one-card .intro h3 { + font-size: 24px; + } + section.title h2 { + font-size: 29px; + } +} +@media (max-width: 1080px) { + section.three-choice { + margin-top: 250px; + } + main section.title { + margin-top: 250px; + } + main section.title h2 { + font-size: 24px; + } +} +@media (max-width: 859px) { + main section.title { + margin-top: 300px; + } +} +@media (max-width: 604px) { + section.three-choice { + margin-top: 300px; + } +} +.go-top { + background-color: #DEDEDE; + color: black; + width: 120px; + border: none; + position: sticky; + left: 100%; + bottom: 0; + transform: translate(-20%, -50%); + margin: 0; + padding: 10px 12px; + cursor: pointer; +} +.go-top span { + font-weight: bold; + font-size: 16px; +} + +.go-top::before { + content: "↑"; + font-size: 20px; + margin-right: 8px; + color: black; +} + +.go-top:hover { + background-color: white; + box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.13), 0 0 0.0625rem 0 rgba(0, 0, 0, 0.11); +} + +.go-top:active { + outline: 0.1875rem dotted black; + outline-offset: -4px; +} + +@media (max-width: 1084px) { + section.four-card .one-card { + width: calc((100% - 24px) / 2); + margin-bottom: 20px; + } + section.four-card .one-card .intro h3 { + font-size: 21px; + } +} +@media (max-width: 540px) { + section.four-card .one-card { + width: 100%; + margin-bottom: 20px; + } +} +footer { + background-color: #F2F2F2; + width: 100%; +} +footer .container-normal .footer-menu { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} +footer .container-normal .footer-menu .main-item { + width: 16.6666666667%; +} +footer .container-normal .footer-menu .main-item p { + font-size: 15px; + font-weight: bold; + color: #616161; + margin: 0; + padding: 36px 0 4px; +} +footer .container-normal .footer-menu .main-item ul a:link, footer .container-normal .footer-menu .main-item ul a:visited { + color: black; +} +footer .container-normal .footer-menu .main-item ul li { + font-size: 11px; + color: #616161; + padding: 8px 0; +} +footer .container-normal .footer-menu .main-item ul li :hover span { + text-decoration: underline; + color: rgba(0, 0, 0, 0.9); +} +footer .container-normal .footer-menu .main-item ul li:focus span { + outline: 1px dashed; + outline-offset: 3px; +} +footer .container-normal .footer-nav { + padding: 20px 0; + display: flex; + justify-content: space-between; + font-size: 11px; + color: #616161; +} +footer .container-normal .footer-nav .footer-nav-left { + display: flex; + justify-content: flex-start; + align-items: center; +} +footer .container-normal .footer-nav .footer-nav-left .bottom-nav-item { + display: flex; + justify-content: center; + align-items: center; + margin-right: 30px; +} +footer .container-normal .footer-nav .footer-nav-left .bottom-nav-item .earth { + width: 24px; + height: 20px; +} +footer .container-normal .footer-nav .footer-nav-left .bottom-nav-item a:link, footer .container-normal .footer-nav .footer-nav-left .bottom-nav-item a:visited { + color: #616161; +} +footer .container-normal .footer-nav .footer-nav-left .bottom-nav-item a:hover span { + text-decoration: underline; + color: rgba(0, 0, 0, 0.9); +} +footer .container-normal .footer-nav .footer-nav-left .bottom-nav-item a:hover span { + outline: 1px dashed; + outline-offset: 3px; +} +footer .container-normal .footer-nav .footer-nav-right { + display: flex; + flex-wrap: wrap; +} +footer .container-normal .footer-nav .footer-nav-right a:link, footer .container-normal .footer-nav .footer-nav-right a:visited { + color: rgba(0, 0, 0, 0.9); +} +footer .container-normal .footer-nav .footer-nav-right li { + margin-right: 30px; + color: #616161; + white-space: nowrap; +} +footer .container-normal .footer-nav .footer-nav-right a li:hover span { + text-decoration: underline; + color: rgba(0, 0, 0, 0.9); +} +footer .container-normal .footer-nav .footer-nav-right a li:focus span { + outline: 1px dashed; + outline-offset: 3px; +} + +@media (max-width: 1084px) { + footer .container-normal .footer-menu .main-item { + width: 33.3333333333%; + } +} +@media (max-width: 540px) { + footer .container-normal .footer-menu .main-item { + width: 100%; + } +} +@media (max-width: 1084px) { + .footer-nav .footer-nav-left { + display: flex; + flex-direction: column; + align-items: flex-start; + } + .footer-nav .footer-nav-left .bottom-nav-item { + margin: 0; + margin-bottom: 20px; + } + .footer-nav .footer-nav-right { + align-items: flex-end; + } +} +@media (max-width: 770px) { + .footer-nav { + display: flex; + flex-direction: column; + align-items: flex-start; + } +} +nav .func-menu .ham-small { + display: none; +} +nav .ham-btn { + display: block; + width: 32px; + height: 32px; +} +nav .ham-btn .fa-bars { + font-size: 25px; + margin: auto; +} +nav .ham-btn .fa-x { + font-size: 20px; +} +nav .mobile-menu { + background-color: #F2F2F2; + width: 112%; + margin: 0; + padding: 0; + position: absolute; + left: -6%; + top: 100%; + z-index: 9; + border-bottom: 2px solid black; + display: none; +} +nav .mobile-menu li { + padding: 20px 30px; + border-bottom: 0.5px solid #e0e0e0; + justify-content: flex-start; +} +nav .mobile-menu label ul { + padding: 1px 0 0 30px; +} +nav .mobile-menu label ul li { + padding: 14px 15px 15px; + margin: 1px; + border: none; +} +nav .mobile-menu:hover li span { + border-bottom: none; +} + +@media (max-width: 859px) { + nav .func-menu .ham-small { + display: block; + } +} +#ham-btn-switch + .ham-btn .fa-x { + display: none; +} + +#ham-btn-switch:checked + .ham-btn .fa-bars { + display: none; +} + +@media (max-width: 859px) { + #ham-btn-switch:checked + .ham-btn .fa-x { + display: block; + } +} +@media (max-width: 859px) { + #ham-btn-switch:checked ~ .mobile-menu { + display: block; + } +} +.chevron-switch + label li .fa-chevron-down, .chevron-switch + label li .fa-chevron-up { + margin-left: auto; + color: #616161; +} + +.chevron-switch + label li .fa-chevron-up { + display: none; +} + +.chevron-switch:checked + label li .fa-chevron-down { + display: none; +} + +.chevron-switch:checked + label li .fa-chevron-up { + display: block; +} + +.chevron-switch + label .sub-dropdown-menu { + display: none; +} + +.chevron-switch:checked + label .sub-dropdown-menu { + display: block; +}/*# sourceMappingURL=ms.css.map */ \ No newline at end of file diff --git a/css/ms.css.map b/css/ms.css.map new file mode 100644 index 0000000..1756b41 --- /dev/null +++ b/css/ms.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["ms.css","../scss/ms.scss"],"names":[],"mappings":"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","file":"ms.css"} \ No newline at end of file diff --git a/earth.jpg b/earth.jpg new file mode 100644 index 0000000..6ffc58f Binary files /dev/null and b/earth.jpg differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..64d477e Binary files /dev/null and b/favicon.ico differ diff --git a/four-card/01-1.jpeg b/four-card/01-1.jpeg new file mode 100644 index 0000000..17b5e70 Binary files /dev/null and b/four-card/01-1.jpeg differ diff --git a/four-card/01-2.avif b/four-card/01-2.avif new file mode 100644 index 0000000..7f27947 Binary files /dev/null and b/four-card/01-2.avif differ diff --git a/four-card/01-3.webp b/four-card/01-3.webp new file mode 100644 index 0000000..f3319fd Binary files /dev/null and b/four-card/01-3.webp differ diff --git a/four-card/01-4.avif b/four-card/01-4.avif new file mode 100644 index 0000000..9f695ce Binary files /dev/null and b/four-card/01-4.avif differ diff --git a/four-card/02-1.avif b/four-card/02-1.avif new file mode 100644 index 0000000..d06ddd9 Binary files /dev/null and b/four-card/02-1.avif differ diff --git a/four-card/02-2.webp b/four-card/02-2.webp new file mode 100644 index 0000000..c71f44a Binary files /dev/null and b/four-card/02-2.webp differ diff --git a/four-card/02-3.avif b/four-card/02-3.avif new file mode 100644 index 0000000..2e4bf5d Binary files /dev/null and b/four-card/02-3.avif differ diff --git a/four-card/02-4.jpeg b/four-card/02-4.jpeg new file mode 100644 index 0000000..63e00a8 Binary files /dev/null and b/four-card/02-4.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ee33e62 --- /dev/null +++ b/index.html @@ -0,0 +1,772 @@ + + + + + + + Microsoft – 雲端、電腦、應用程式和遊戲 + + + + + + + + +
+ + + + + + + + +
+
+
+
+ + + + + + + + + + + + +
+
+ + +
+
+

Surface Laptop 5

+
配備細緻的風格和由第 12 代 Intel® Core 支援的多工速度,以及 Windows 11。
+
+
+ +
+
+
+ + +
+
+

透過 Microsoft 365 善用每一天

+
取得線上保護、安全的雲端儲存空間,以及專為滿足需求而設計的創新應用程式,全都在一個方案中。
+
+
+ + +
+
+
+ + +
+
+

Xbox Series X

+
有史以來最快、最強大的 Xbox。
+
+
+ +
+
+
+ + +
+
+

Xbox Game Pass Ultimate

+
在首發日遊玩新遊戲。再加上在主機和電腦上與朋友一起享受數百款高品質遊戲。
+
+
+ +
+
+
+
+
+ + + + + + + + +
+
+

適用於商務

+
+
+ + +
+
+
+

適用於商務的 Surface

+
無論從事哪種工作,都有一款有助於成功的 Surface。
+
+
+ +
+
+
+ + +
+
+
+

免費取得 Microsoft Teams

+
線上會議、聊天和共用雲端儲存空間,盡在一處。
+
+
+ +
+
+
+ + +
+
+
新上市
+

Copilot for Microsoft 365

+
透過商務用 Microsoft 365 中的 AI,節省時間並專注於最重要的事情。 +
+
+
+ +
+
+
+ + +
+
+
+

商務用 Windows 11

+
專為混合式辦公而設計。 為員工帶來實用性。 為 IT 帶來一致性。 為所有人帶來安全性。
+
+
+ +
+
+
+
+
+
+ + + +
+
+

台灣微軟股份有限公司統編 23525730

+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/logo/logo.png b/logo/logo.png new file mode 100644 index 0000000..afbbb4f Binary files /dev/null and b/logo/logo.png differ diff --git a/ms.js b/ms.js new file mode 100644 index 0000000..9d57ecc --- /dev/null +++ b/ms.js @@ -0,0 +1,22 @@ +let topButton = document.querySelector(".go-top"); + +topButton.style.display = "none"; +topButton.addEventListener("click",goTop) + + +window.onscroll = scrollFunction; + + +function scrollFunction(){ + if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500){ + topButton.style.display = "block"; + }else{ + topButton.style.display = "none"; + } +}; + +function goTop() { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; +} + diff --git a/scss/ms.scss b/scss/ms.scss new file mode 100644 index 0000000..5df0c61 --- /dev/null +++ b/scss/ms.scss @@ -0,0 +1,942 @@ +*,::before,::after{ + box-sizing: border-box; +} + +body { + margin: 0; + font-family: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #000; + // background-color: #fff; +} + +a{ + text-decoration: none; +} + +ul{ + list-style: none; + margin:0; + padding:0; +} + +.w-100{ + width: 100%; +} + +.container-normal{ + width: 90%; + max-width:1596px; + margin:auto; +} + +.container-full{ + width: 100%; + max-width:1920px; + margin:auto; +} + +nav{ + height: 54px; + // background-color: antiquewhite; + display:flex; + justify-content: flex-start; + align-items: center; + position: relative; + + .logo{ + width: 137px; + height: 54px; + display:flex; + justify-content: center; + align-items: center; + padding:16px 6px 16px 10px; + + img{ + width: 108px; + height: 23px; + margin:-3px 0 0; + } + } + + .menu{ + height: 100%; + display: flex; + + + li{ + padding:16px 8px 10px; + margin:1px 2px 0; + height: 100%; + display:flex; + justify-content: center; + align-items: center; + font-size:13px; + color:#262626; + white-space: nowrap; + } + + li:hover span{ + border-bottom: 2px solid black; + } + li:focus{ + // border:2px solid black; + border: 1px dashed black; + } + + a:link,a:visited{ + color:#262626; + } + } + + .pc-menu{ + // background-color: aquamarine; + justify-content: flex-start; + width: 1000px; + + } + .func-menu{ + // background-color: orange; + justify-content: flex-end; + width: 459px; + // min-width: 379px; + + .fa-chevron-down{ + width: 8px; + height: 19px; + margin: 0 0 -7px 7px; + } + + .fa-magnifying-glass{ + width: 16px; + height: 18px; + margin: 0 0 -7px 7px; + } + .fa-cart-shopping{ + width: 16px; + height: 18px; + margin: 0 0 -7px 7px; + } + .fa-circle-user { + font-size: 20px; + margin: 0 0 2px 7px; + } + .all-ms{ + background-color: white; + border:none; + cursor:pointer; + + .dropDown-menu{ + background-color: #F2F2F2; + width:1230px; + height: auto; + position: absolute; + top:95%; + left:50%; + transform: translateX(-50%); + border-bottom: 2px solid black; + display:none; + flex-wrap: wrap; + justify-content: flex-start; + z-index:99; + + .selection{ + width: 100%; + display: flex; + justify-content: flex-start; + + .menu-item{ + width:calc(95.2%/6); + padding:0 0 10px; + + p{ + color:#000000; + font-weight: bold; + padding:18px 0 18px 24px; + text-align: left; + } + ul{ + display: flex; + flex-direction: column; + align-items: flex-start; + a{ + li{ + margin:0; + padding:12px 0 12px 24px; + font-size:13px; + color:#262626; + } + } + + a:hover{ + text-decoration: underline; + } + + a:focus{ + outline: 1px dotted; + outline-offset:0px; + } + } + } + } + + .drop-bottom-item{ + width: 100%; + background-color: #E6E6E6; + font-size: 13px; + text-align: center; + padding:10px; + a:hover{ + text-decoration: underline; + } + + a:focus{ + outline: 1px dotted; + outline-offset:10px; + } + } + } + } + + .all-ms:focus{ + background-color: #F2F2F2; + } + + #all-ms-switch:checked~ .dropDown-menu{ + display: flex; + + } + } +} + +@media(max-width:1400px){ + nav { + .func-menu{ + .hide-text{ + display:none; + } + } + } +} + +@media(max-width:859px){ + nav.container-normal{ + width: 90%; + } + + nav .logo{ + position: absolute; + left:50%; + transform: translateX(-50%); + } + + nav .pc-menu{ + display:none; + } + nav .func-menu{ + width:100%; + } + + nav .func-menu .all-ms{ + display:none; + } + nav .func-menu .a-search { + margin-right: auto; + } +} + + +header.container-full{ + margin-bottom:50px; +} + +.change-img{ + position: relative; +} + +.change-img .banner-text{ + width: 40%; + position: absolute; + left:5%; + top:25%; + position: absolute; + display:flex; + flex-direction:column; + justify-content: space-between; + padding:48px; +} +.change-img .banner-text button{ + background-color: #0067B8; + padding:10px 12px; + color:white; + font-weight: bold; + border:none; + cursor:pointer; + font-size: 16px; + margin:8px 0; + +} + + + +@media(max-width:1084px){ + .change-img .banner-text{ + width: 95%; + background-color:white ; + left:2.5%; + top:80%; + } +} + + +.change-img .banner-text button:hover{ + background-color: #005cA8; +} +.change-img .banner-text button:focus{ + outline: .1875rem dotted white; + outline-offset: -5px; +} + +.change-img { + .banner-text { + margin:0; + .banner-title { + margin:0 0 20px; + h2{ + font-size:37px; + margin:0; + line-height: 45px; + white-space:wrap; + } + } + .banner-content{ + margin:0 0 24px; + } + } +} + +.big-img { + .banner-text { + width: 37%; + left:5%; + top:28%; + .banner-title{ + color:white; + } + .banner-content{ + color:white; + } + } +} + +@media(max-width:1400px){ + .change-img .banner-text .banner-title h2{ + font-size:29px; + } + .change-img .banner-text .banner-title{ + margin:0 0 16px; + } +} + +@media(max-width:1084px){ + .change-img .banner-text{ + width: 95%; + background-color:white ; + left:2.5%; + top:80%; + box-shadow: 0 .1875rem .4375rem 0 rgba(0, 0, 0, .13), 0 .0625rem .125rem 0 rgba(0, 0, 0, .11); + } + .change-img .banner-text .banner-title h2{ + font-size:24px; + } + .change-img .banner-text .banner-title{ + margin:0 0 12px; + } + + .big-img .banner-text .banner-title{ + color:black; + } + .big-img .banner-text .banner-content{ + color:black; + } +} + +@media(max-width:859px){ + .change-img .banner-text{ + width: 100%; + background-color:white ; + left:0; + top:100%; + padding:24px 12px 16px; + } +} + + + +main{ + // background-color: lightblue; + // height: 2000px; + + section{ + margin-bottom: 50px; + } + .three-choice{ + // background-color: lightpink; + // height: 300px; + width: 100%; + display:flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + text-align: center; + + .one-choice{ + padding:20px; + display:flex; + flex-direction: column; + align-items: center; + img{ + width: 40px; + } + button{ + border:none; + background-color: transparent; + cursor:pointer; + p{ + text-decoration: underline; + font-weight: bold; + font-size:16px; + } + } + + button:focus p{ + outline: .1875rem dotted #0067BB; + outline-offset: 1px; + } + + } + .one-choice:link button,.one-choice:visited button{ + color:#0067BB; + } + } + .title{ + margin-bottom:0; + h2{ + font-size:37px; + + margin: 0 0 20px; + } + } + + + .four-card{ + // background-color: cornflowerblue; + width: 100%; + height:auto; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + + .one-card{ + width:calc((100% - 24px*3)/4); + height: 500px; + box-shadow:0 .1875rem .4375rem 0 rgba(0, 0, 0, .13), 0 .0625rem .125rem 0 rgba(0, 0, 0, .11); + display: flex; + flex-direction: column; + justify-content: space-between; + + img{ + width: 100%; + // height: 202.94px; + } + + .intro{ + padding:24px 24px 12px; + flex:1; + display: flex; + flex-direction: column; + justify-content: space-between; + + h3{ + font-size: 29px; + margin:0 0 16px; + line-height: 35px; + } + .content{ + font-size:16px; + } + .btn-new{ + background-color: #FFB900; + color:black; + display:inline-block; + padding:6px 12px; + font-weight: bold; + } + + .empty{ + background-color: transparent; + color:transparent; + display:inline-block; + padding:6px 12px; + font-weight: bold; + } + .btn{ + display: flex; + flex-wrap: wrap; + gap:0 20px; + .button{ + // display: inline-block; + font-size: 16px; + border:none; + background-color: #0067BB; + color:white; + font-weight: bold; + margin:8px 0; + padding:10px 12px; + cursor:pointer; + } + + .arrow{ + position: relative; + } + .arrow:hover{ + text-decoration: underline; + } + + + .arrow::before{ + content: '\003E'; + font-size: 20px; + font-weight: 300; + margin-right: 8px; + color: #0067B8; + position: absolute; + right:-30%; + top:0%; + } + + .arrow:hover::before{ + right:-35%; + transition: 0.5s ease + } + + .button:hover{ + background-color: #005cA8; + } + .button:focus{ + outline: .1875rem dotted white; + outline-offset:-5px; + } + + .max-six{ + background-color: transparent ; + border: none; + color:#0067B8; + font-weight: bold; + font-size: 16px; + cursor:pointer; + } + .max-six:focus{ + outline: .1875rem dotted #0067B8; + outline-offset:-5px; + } + } + } + } + + .one-card:link,.one-card:visited{ + color:black; + } + } + .bottom-word{ + margin:48px 0 0; + .follow{ + display: inline-block; + text-indent: 20px; + margin-right:20px; + } + .fa-facebook-f,.fa-youtube{ + font-size:20px; + margin-right:20px; + } + i:active{ + outline: 1px dotted black; + outline-offset: 4px; + } + a:link,a:visited{ + color:black; + } + } +} + +@media(max-width:1400px){ + section.four-card .one-card .intro h3{ + font-size:24px; + } + section.title h2{ + font-size:29px; +} +} + +@media(max-width:1080px){ + + section.three-choice{ + margin-top:250px; + } + + main section.title { + margin-top:250px; + } + main section.title h2{ + font-size:24px; + } +} + +@media(max-width:859px){ + main section.title { + margin-top:300px; + } +} + +@media(max-width:604px){ + section.three-choice{ + margin-top:300px; + } +} + + +.go-top{ + background-color: #DEDEDE; + color:black; + width: 120px; + // height: 50px; + border:none; + position:sticky; + left:100%; + bottom:0; + transform: translate(-20%,-50%); + margin:0; + padding:10px 12px; + cursor:pointer; + span{ + font-weight: bold; + font-size: 16px; + } +} + +.go-top::before { + content: '\2191'; + font-size: 20px; + margin-right: 8px; + color: black; +} + +.go-top:hover{ + background-color: white; + box-shadow: 0 .125rem .25rem 0 rgba(0, 0, 0, .13), 0 0 .0625rem 0 rgba(0, 0, 0, .11); +} + +.go-top:active{ + outline: .1875rem dotted black; + outline-offset: -4px; +} + +@media(max-width:1084px){ + section.four-card .one-card{ + width:calc((100% - 24px)/2); + margin-bottom:20px; + } + section.four-card .one-card .intro h3{ + font-size:21px; + } +} + +@media(max-width:540px){ + section.four-card .one-card{ + width:100%; + margin-bottom:20px; + } +} + + + +footer{ + background-color: #F2F2F2; + // height: 800px; + width: 100%; + + .container-normal{ + + .footer-menu{ + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + .main-item{ + width:calc(100%/6); + + p{ + font-size: 15px; + font-weight:bold; + color:#616161; + margin:0; + padding:36px 0 4px; + } + ul{ + a:link,a:visited{ + color:black; + } + + li{ + font-size:11px; + color:#616161; + padding:8px 0; + } + li :hover span{ + // border-bottom: 2px solid #616161; + text-decoration: underline; + color:rgba(0, 0, 0, .9) + } + li:focus span{ + outline: 1px dashed; + outline-offset: 3px; + } + } + } + } + + + .footer-nav{ + // background-color: rgb(138, 206, 228); + padding: 20px 0; + display: flex; + justify-content: space-between; + font-size: 11px; + color:#616161; + + .footer-nav-left{ + display:flex; + justify-content: flex-start; + align-items: center; + // flex-wrap:wrap; + // font-size: 11px; + + .bottom-nav-item { + display: flex; + justify-content: center; + + align-items: center; + margin-right:30px; + .earth{ + width: 24px; + height: 20px; + } + + a:link,a:visited{ + color:#616161; + } + a:hover span { + // border-bottom: 2px solid #616161; + text-decoration: underline; + color:rgba(0, 0, 0, .9) + } + a:hover span { + // border-bottom: 2px solid #616161; + outline: 1px dashed; + outline-offset:3px; + } + } + } + + .footer-nav-right{ + display: flex; + flex-wrap:wrap; + a:link,a:visited{ + color:rgba(0,0,0,0.9); + } + li{ + // font-size:11px; + margin-right:30px; + color:#616161; + white-space: nowrap; + } + a li:hover span{ + text-decoration: underline; + color:rgba(0, 0, 0, .9) + } + a li:focus span { + outline: 1px dashed; + outline-offset: 3px; + } + } + + } + } +} + +@media(max-width:1084px){ + footer .container-normal .footer-menu .main-item{ + width:calc(100%/3); + } +} + +@media(max-width:540px){ + footer .container-normal .footer-menu .main-item{ + width:calc(100%); + } +} + +@media(max-width:1084px){ + .footer-nav .footer-nav-left{ + display:flex; + flex-direction: column; + align-items: flex-start; + } + .footer-nav .footer-nav-left .bottom-nav-item{ + margin:0; + margin-bottom:20px; + } + + .footer-nav .footer-nav-right{ + align-items: flex-end; + } +} + +@media(max-width:770px){ + .footer-nav{ + display:flex; + flex-direction: column; + align-items: flex-start; + } +} + + +nav{ + .func-menu{ + .ham-small{ + display:none; + } + + } + + + .ham-btn{ + display:block; + width: 32px; + height: 32px; + // background-color:aquamarine; + // 三線圖 + .fa-bars{ + font-size:25px; + margin:auto; + } + .fa-x{ + font-size:20px; + } + } + + + + .mobile-menu{ + background-color: #F2F2F2; + width: 112%; + margin:0; + padding:0; + position:absolute; + left:-6%; + top:100%; + z-index:9; + border-bottom:2px solid black; + display:none; + + li{ + padding:20px 30px; + border-bottom:0.5px solid #e0e0e0; + justify-content:flex-start ; + } + label{ + ul{ + padding:1px 0 0 30px; + li{ + padding:14px 15px 15px; + margin:1px; + border:none; + } + } + } + } + + .mobile-menu:hover li span{ + border-bottom:none; + } + +} + + +@media(max-width:859px){ + nav{ + .func-menu{ + .ham-small{ + display:block; + } + } + } +} + +#ham-btn-switch+.ham-btn .fa-x{ + display:none; +} +#ham-btn-switch:checked+.ham-btn .fa-bars{ + display:none; +} + + + +@media(max-width:859px){ + #ham-btn-switch:checked+.ham-btn{ + // background-color: #0067B8; + // 打叉圖 + .fa-x{ + display:block; + } + } +} + +@media(max-width:859px){ + #ham-btn-switch:checked~.mobile-menu{ + display:block; + } +} + + +.chevron-switch+label li .fa-chevron-down,.chevron-switch+label li .fa-chevron-up{ + margin-left:auto; + color:#616161; + } +.chevron-switch+label li .fa-chevron-up{ + display: none; + } +.chevron-switch:checked+label li .fa-chevron-down{ + display: none; +} + +.chevron-switch:checked+label li .fa-chevron-up{ + display: block; + } + +.chevron-switch+label .sub-dropdown-menu { + display: none; +} +.chevron-switch:checked+label .sub-dropdown-menu { + display: block; +} + + + + + + + diff --git a/swiper/Copilot-1083x600.avif b/swiper/Copilot-1083x600.avif new file mode 100644 index 0000000..8320997 Binary files /dev/null and b/swiper/Copilot-1083x600.avif differ diff --git a/swiper/Copilot-1399x600.avif b/swiper/Copilot-1399x600.avif new file mode 100644 index 0000000..ad7cff3 Binary files /dev/null and b/swiper/Copilot-1399x600.avif differ diff --git a/swiper/Copilot-1920x600.avif b/swiper/Copilot-1920x600.avif new file mode 100644 index 0000000..703a376 Binary files /dev/null and b/swiper/Copilot-1920x600.avif differ diff --git a/swiper/Copilot-859x540.avif b/swiper/Copilot-859x540.avif new file mode 100644 index 0000000..ab74909 Binary files /dev/null and b/swiper/Copilot-859x540.avif differ diff --git a/swiper/Highlight-Hero-1083x600.avif b/swiper/Highlight-Hero-1083x600.avif new file mode 100644 index 0000000..5394529 Binary files /dev/null and b/swiper/Highlight-Hero-1083x600.avif differ diff --git a/swiper/Highlight-Hero-1260x600.avif b/swiper/Highlight-Hero-1260x600.avif new file mode 100644 index 0000000..cb7a846 Binary files /dev/null and b/swiper/Highlight-Hero-1260x600.avif differ diff --git a/swiper/Highlight-Hero-1596x600.jpeg b/swiper/Highlight-Hero-1596x600.jpeg new file mode 100644 index 0000000..e2ef98b Binary files /dev/null and b/swiper/Highlight-Hero-1596x600.jpeg differ diff --git a/swiper/Highlight-Hero-859x540.avif b/swiper/Highlight-Hero-859x540.avif new file mode 100644 index 0000000..57e6b9a Binary files /dev/null and b/swiper/Highlight-Hero-859x540.avif differ diff --git a/swiper/Surface-Pro-1083x600.avif b/swiper/Surface-Pro-1083x600.avif new file mode 100644 index 0000000..1face61 Binary files /dev/null and b/swiper/Surface-Pro-1083x600.avif differ diff --git a/swiper/Surface-Pro-1399x600.avif b/swiper/Surface-Pro-1399x600.avif new file mode 100644 index 0000000..657b73a Binary files /dev/null and b/swiper/Surface-Pro-1399x600.avif differ diff --git a/swiper/Surface-Pro-1920x600.avif b/swiper/Surface-Pro-1920x600.avif new file mode 100644 index 0000000..2630983 Binary files /dev/null and b/swiper/Surface-Pro-1920x600.avif differ diff --git a/swiper/Surface-Pro-859x540.avif b/swiper/Surface-Pro-859x540.avif new file mode 100644 index 0000000..8454e4a Binary files /dev/null and b/swiper/Surface-Pro-859x540.avif differ diff --git a/swiper/avatar-pic.jpg b/swiper/avatar-pic.jpg new file mode 100644 index 0000000..b741baa Binary files /dev/null and b/swiper/avatar-pic.jpg differ diff --git a/three/.DS_Store b/three/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/three/.DS_Store differ diff --git a/three/1.svg b/three/1.svg new file mode 100644 index 0000000..270a3d5 --- /dev/null +++ b/three/1.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/three/2.svg b/three/2.svg new file mode 100644 index 0000000..f431b05 --- /dev/null +++ b/three/2.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/\346\202\250\347\232\204\351\232\261\347\247\201\346\254\212\351\201\270\346\223\207\351\200\200\345\207\272\345\234\226\347\244\272.svg" "b/\346\202\250\347\232\204\351\232\261\347\247\201\346\254\212\351\201\270\346\223\207\351\200\200\345\207\272\345\234\226\347\244\272.svg" new file mode 100644 index 0000000..2e74d60 --- /dev/null +++ "b/\346\202\250\347\232\204\351\232\261\347\247\201\346\254\212\351\201\270\346\223\207\351\200\200\345\207\272\345\234\226\347\244\272.svg" @@ -0,0 +1,7 @@ + + 您的隱私權選擇退出圖示 + + + + + \ No newline at end of file