Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@xjcAlicia
xjcAlicia committed Aug 22, 2023
1 parent c9a95a5 commit 767d858
Show file tree
Hide file tree
Showing 3 changed files with 241 additions and 26 deletions.
3 changes: 3 additions & 0 deletions SPA_202308/.vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
Binary file added SPA_202308/images/01.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
264 changes: 238 additions & 26 deletions SPA_202308/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,36 @@
/* 相反方向則用負數 */
}

.s09_text{
z-index: 10;
.btn-modal{
z-index: 5;
}

background-color: rgba(0, 0, 0, 0.6);
margin: 15px;
padding: 15px;
border-radius: 15px;
color: white;
.s09_text {
z-index: 10;

background-color: rgba(0, 0, 0, 0.6);
margin: 15px;
padding: 15px;
border-radius: 15px;
color: white;
}

.s12_text {
z-index: 10;

background-color: rgba(0, 0, 0, 0.6);
margin: 15px;
padding: 15px;
border-radius: 15px;
color: white;
}

/* 螢幕小於768(最大上限到768) */
@media screen and (max-width: 768px) {
.s05_text, .s07_text {

.s05_text,
.s07_text,
.s11_text {
z-index: 10;

background-color: rgba(0, 0, 0, 0.7);
Expand All @@ -80,10 +97,60 @@
right: 0;
}

.s07_img{
.s07_img {
left: 0;
}
}

.timeline-section {
position: relative;
}

.timeline-section::before {
position: absolute;
content: "";
top: 0;
bottom: 0;
/* 線的粗度 */
width: 3px;
/* background-color: aqua; */
/* 漸層色要使用在圖片上! */
background-image: linear-gradient(180deg, rgba(30, 240, 230, 0.1), rgba(30, 240, 230, 0.9));
left: 50%;
transform: translateX(-50%);
}

.timeline-section-pointer {
position: relative;
}

.timeline-section-pointer::before {
position: absolute;
content: "";
top: 50;
width: 20px;
height: 20px;
border-radius: 50%;
left: 50%;
/* 中空的圓=邊框圈 */
background-color: #ffffff;
border: 4px solid rgba(30, 240, 230, 0.9);
transform: translateX(-50%);
}

.timeline-section-pointer:hover::before {
width: 30px;
height: 30px;
border: 10px solid rgba(30, 240, 230, 0.9);
}

@media screen and (max-width: 768px) {

.timeline-section::before,
.timeline-section-pointer::before {
display: none;
}
}
</style>
</head>

Expand Down Expand Up @@ -135,8 +202,8 @@
</li>
</ul>
<form class="d-flex" role="search">
<a href="#" class="btn btn-info me-1" data-bs-toggle="modal" data-bs-target="#exampleModal">登入</a>
<a href="#" class="btn btn-outline-info" data-bs-toggle="modal" data-bs-target="#regModal">註冊</a>
<a href="#" class="btn btn-info me-1 btn-modal" data-bs-toggle="modal" data-bs-target="#exampleModal">登入</a>
<a href="#" class="btn btn-outline-info btn-modal" data-bs-toggle="modal" data-bs-target="#regModal">註冊</a>
</form>
</div>
</div>
Expand Down Expand Up @@ -235,7 +302,7 @@ <h6>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item bg-cover active "
<div class="carousel-item bg-cover active"
style="background-image: url(images/diane-picchiottino-SlZsdT9alwo-unsplash.jpg); height: 580px;">
<div class="carousel-caption d-none d-md-block">
<h5 class=".fw-400">01.特殊不想第二章，落實雜誌管理員工，人物</h5>
Expand Down Expand Up @@ -272,13 +339,11 @@ <h5>05.嘿嘿轉變教學臉上家園訊息跟着，還是十大保密二手共
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" style=" height: 720px;" data-bs-target="#carouselExampleDark"
data-bs-slide="prev">
<button class="carousel-control-prev" type="button" style="margin-bottom: 18%;" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" style=" height: 720px;" data-bs-target="#carouselExampleDark"
data-bs-slide="next">
<button class="carousel-control-next" type="button" style="margin-bottom: 18%;" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
Expand Down Expand Up @@ -347,7 +412,7 @@ <h2 class="fw-300">動態互動展區</h2>
</div>
</div>
</section>
<!-- s06 特展展區介紹 xx展區 xx展區 xx展區 xx展區-->
<!-- s06 特展展區介紹 文藝展區 歷史展區 互動展區 燈光展區-->
<section>
<div class="container">
<div class="display-3 text-center fw-900 text-info mt-5">特展展區介紹</div>
Expand Down Expand Up @@ -434,16 +499,21 @@ <h2>展覽價值</h2>
</div>
<!-- justify-content-end 將圖片排列在右邊 -->
<div class="row justify-content-end">
<div class="col-md-5 bg-cover s07_img" style="position: absolute; background-image: url(images/samuel-regan-asante-QoeijiMqCCg-unsplash.jpg); top: 0; bottom: 0;"></div>
<div class="col-md-5 bg-cover s07_img"
style="position: absolute; background-image: url(images/samuel-regan-asante-QoeijiMqCCg-unsplash.jpg); top: 0; bottom: 0;">
</div>
</div>
</section>
<!-- s08 地圖+詢問表單 -->
<div class="container">
<div class="row">
<div class="col-md-6">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3641.092353722594!2d120.67720358885497!3d24.1333946!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34693d1042abccf9%3A0x71ee765369fc0909!2z5paH5YyW6YOo5paH5YyW6LOH55Si5ZyS5Y2A!5e0!3m2!1szh-TW!2stw!4v1692234982672!5m2!1szh-TW!2stw" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3641.092353722594!2d120.67720358885497!3d24.1333946!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34693d1042abccf9%3A0x71ee765369fc0909!2z5paH5YyW6YOo5paH5YyW6LOH55Si5ZyS5Y2A!5e0!3m2!1szh-TW!2stw!4v1692234982672!5m2!1szh-TW!2stw"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- class="form-control" 讓表格以不同形式呈現! -->
<!-- class="form-control" 讓表格比較好看的呈現! -->
<div class="col-md-6">
<div class="mb-3">
<label for="">您的稱呼:</label>
Expand All @@ -462,7 +532,7 @@ <h2>展覽價值</h2>
<option>互動式</option>
<option>燈影效果</option>
<option>歷史古蹟</option>
</select>
</select>
</div>
<div class="mb-3">
<label for="">對於展覽的喜愛程度:(1-10分)</label>
Expand All @@ -489,6 +559,121 @@ <h2>展覽價值</h2>
</div>
</div>
</div>
<!-- s11 發布展覽數 | 目前展覽 -->
<section style="position:relative;">
<div class="row mt-5">
<div class="col-md-5 bg-cover s05_img" style="position: absolute;
top:0;
bottom: 0;
background-image: url(images/yi-liu-iWqQIp1vU7w-unsplash.jpg);">
</div>
</div>
<div class="container">
<div class="row justify-content-end">
<div class="col-md-7">
<div class="row">
<div class="col-6 s11_text">
<h2 class="fw-500 mt-5">展場合作與租借</h2>
<p>不同機構、組織或個人之間合作舉辦、籌劃或參與展覽活動的行為。這種合作可以在不同層面和範疇進行，旨在共同實現特定的目標，並加強展覽的品質和影響力。</p>
</div>
<div class="col-md-12 my-5 s11_text">
<div class="row counter">
<div class="col-3 text-center">
<h4>展場租借</h4>
<h2 class="fw-700 counter01">103</h2>
</div>
<div class="col-3 text-center">
<h4>合作次數</h4>
<h2 class="fw-700 counter02">527</h2>
</div>
<div class="col-3 text-center">
<h4>展友人數</h4>
<h2 class="fw-700 counter03">2077</h2>
</div>
<div class="col-3 text-center">
<h4>累積展次</h4>
<h2 class="fw-700 counter03">945</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- s12 時間軸 --><!-- 看展好朋友 & 組團須知 -->
<!-- 圖片跟文字要有關係 -->
<section>
<div class="timeline-bg bg-cover mt-3 p-5"
style="background-image: url(images/01.jpg); background-attachment: fixed;">
<div class="container">
<div class="row">
<div class="col-md-3 d-flex align-items-center">
<div class="s12_text">
<h3>看展好朋友</h3>
<p>策略人才尚未，正好多個動態其他解決方案沒人大多我又，當年持續不好意思，冠軍原文比賽逐漸符合負責，傳。</p>
</div>
</div>
<div class="col-md-9 timeline-section">
<div class="row align-items-center timeline-section-pointer">
<div class="col-md-6 text-left">
<div class="mytext s12_text">
<h4 class="fw-700">01.選取有興趣的展場</h4>
<p class="fw-400">紡織收藏刷新收費不到校園普通，你有人才說明影片得分女人電子郵件今年，參加圖像化長期，一句話碩士，女。</p>
</div>
</div>
<div class="col-md-6">
<div class="myimg bg-cover"
style="background-image: url(images/diane-picchiottino-kxhLEY0uN10-unsplash.jpg); height: 280px;">
</div>
</div>

</div>
<div class="row align-items-center flex-row-reverse timeline-section-pointer">
<div class="col-md-6 text-left">
<div class="mytext s12_text">
<h4 class="fw-700">02.線上加入專屬群組</h4>
<p class="fw-400">紡織收藏刷新收費不到校園普通，你有人才說明影片得分女人電子郵件今年，參加圖像化長期，一句話碩士，女。</p>
</div>
</div>
<div class="col-md-6">
<div class="myimg bg-cover"
style="background-image: url(images/diane-picchiottino-kxhLEY0uN10-unsplash.jpg); height: 280px;">
</div>
</div>

</div>
<div class="row align-items-center timeline-section-pointer">
<div class="col-md-6 text-center">
<div class="mytext s12_text">
<h4 class="fw-700">03.討論合適時間
</h4>
<p class="fw-400">紡織收藏刷新收費不到校園普通，你有人才說明影片得分女人電子郵件今年，參加圖像化長期，一句話碩士，女。</p>
</div>
</div>
<div class="col-md-6">
<div class="myimg bg-cover"
style="background-image: url(images/diane-picchiottino-kxhLEY0uN10-unsplash.jpg); height: 280px;">
</div>
</div>

</div>
<div class="row align-items-center flex-row-reverse timeline-section-pointer">
<div class="col-md-6 text-left">
<div class="mytext s12_text">
<h4 class="fw-700">04.一起與展友逛展吧!</h4>
<p class="fw-400">紡織收藏刷新收費不到校園普通，你有人才說明影片得分女人電子郵件今年，參加圖像化長期，一句話碩士，女。</p>
</div>
</div>
<div class="col-md-6">
<div class="myimg bg-cover"
style="background-image: url(images/diane-picchiottino-kxhLEY0uN10-unsplash.jpg); height: 280px;">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- s09 職缺徵人訊息 -->
<section class="mt-5">
<div class="row">
Expand Down Expand Up @@ -537,25 +722,52 @@ <h2 class="fw-700 m-2">展場工讀生</h2>
<div class="container text-center">
<ul class="nav">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link disabled" aria-current="page" >Power By Aliacia.202308</a>
</li>
<a class="nav-link active" href="#">贊助網站1</a>
<li class="nav-item">
<a class="nav-link disabled" aria-current="page">Power By Aliacia.202308</a>
</li>
<a class="nav-link active" href="#">贊助網站1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">贊助網站2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">贊助網站3</a>
</li>

</ul>
</div>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"> </script>
<script>
const counterUp = window.counterUp.default

const callback = entries => {
entries.forEach(entry => {
const el = entry.target
if (entry.isIntersecting && !el.classList.contains('is-visible')) {
counterUp(el, {
duration: 5000,
delay: 16,
})
el.classList.add('is-visible')
}
})
}

const IO = new IntersectionObserver(callback, { threshold: 1 })

const el01 = document.querySelector('.counter01')
IO.observe(el01)

const el02 = document.querySelector('.counter02')
IO.observe(el02)

const el03 = document.querySelector('.counter03')
IO.observe(el03)
</script>
</body>

</html>

0 comments on commit 767d858

Please sign in to comment.