Skip to content

Commit

Permalink
[edit] index all animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Joy-port
Joy-port committed Aug 19, 2021
1 parent bf4f966 commit a18aca7
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 114 deletions.
227 changes: 128 additions & 99 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@
"
data-aos="fade-in"
data-aos-duration="1200"
data-aos-delay="100"
>
>
<div class="content">
<h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
<p class="h6 text-white | mb-3">01 JUN - 31 OCT</p>
Expand All @@ -48,7 +47,7 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
</div>

<!-- menu navbar -->
<nav class="border-bottom | border-md mb-6 mb-md-13 | ">
<nav class="border-bottom | border-md mb-6 mb-md-13 |">
<div class="container-lg | overflow-y-hidden menu-list | h-325r">
<ul
class="
Expand Down Expand Up @@ -136,14 +135,20 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
<!-- 熱門特展 -->
<section>
<div class="container-md mb-7 mb-md-13">
<h3 class="h3 fw-bold mb-2 mb-md-7" data-aos="fade-in" data-aos-duration="1200">熱門特展</h3>
<h3
class="h3 fw-bold mb-2 mb-md-7"
data-aos="fade-in"
data-aos-duration="1200"
>
熱門特展
</h3>
<ul class="ps-0">
<li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6">
<div class="row g-0 gx-7"
data-aos="fade-left"
data-aos-duration="1200"
<li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6"
data-aos="fade-left"
data-aos-duration="1400">
<div
class="row g-0 gx-7"
>

<!-- 不同圖片縮放效果 -->

<!-- 整張等比例放大縮小 -->
Expand All @@ -164,13 +169,13 @@ <h3 class="h3 fw-bold mb-2 mb-md-7" data-aos="fade-in" data-aos-duration="1200"
h-345 h-md-auto
"
>
<a href="info.html" class="p-0 d-block h-100 align-middle">
<img
src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
alt="展覽圖片"
class="card-img h-100 w-100"
/>
</a>
<a href="info.html" class="p-0 d-block h-100 align-middle">
<img
src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
alt="展覽圖片"
class="card-img h-100 w-100"
/>
</a>
</div>

<div class="col-md-5 col-lg-6 h-md-350 py-md-12">
Expand All @@ -181,30 +186,42 @@ <h3 class="h3 fw-bold mb-2 mb-md-7" data-aos="fade-in" data-aos-duration="1200"
d-flex
justify-content-between
align-items-center
mb-2
mb-md-1
mb-2 mb-md-1
"
>
<div class="d-flex align-items-center flex-wrap"
data-aos="fade-left"
data-aos-duration="1300">
<div
class="d-flex align-items-center flex-wrap"
data-aos="fade-left"
data-aos-duration="1300"
>
<h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
<a href="#" class="d-block link-black p-0 d-md-none">
<i class="fs-6 fab fa-facebook align-middle"></i>
</a>
</div>
<p class="mb-0 d-md-none">01 JUN — 31 OCT</p>
</div>
<p class="h6 mb-0 mb-2" data-aos="fade-left"
data-aos-duration="1300">$350</p>
<p class="h6 mb-0" data-aos="fade-left"
data-aos-duration="1400">
<p
class="h6 mb-0 mb-2"
data-aos="fade-left"
data-aos-duration="1300"
>
$350
</p>
<p
class="h6 mb-0"
data-aos="fade-left"
data-aos-duration="1400"
>
一年一度的台味設計展由經濟部工業局主辦、台灣創意設計中心執行，每年，針對在地生活、文化及產業發展特色，運用設計思考詮釋新時代的意涵，並以展覽呈現在地設計。
</p>
</div>

<div class="d-flex flex-wrap" data-aos="fade-left"
data-aos-duration="1400">
<div
class="d-flex flex-wrap"
data-aos="fade-left"
data-aos-duration="1400"
>
<a href="info.html" class="btn btn-primary me-1 py-2 px-5"
>購買票券</a
>
Expand All @@ -215,15 +232,8 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
</div>
</div>
<div
class="
h-md-350
d-none
d-md-block
offset-md-1
col-md-1
py-12
"
data-aos="fade-left"
class="h-md-350 d-none d-md-block offset-md-1 col-md-1 py-12"
data-aos="fade-left"
data-aos-duration="1400"
>
<div class="d-flex flex-column justify-content-between h-100">
Expand All @@ -241,19 +251,20 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
</div>
</div>
</li>
<li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6">
<div class="row g-0 gx-7"
data-aos="fade-left"
data-aos-duration="1200"
<li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6"
data-aos="fade-left"
data-aos-duration="1400">
<div
class="row g-0 gx-7"
>
<div class="col-md-5 col-lg-4 h-md-350">
<!-- 整張等比例放大縮小 -->
<a href="info.html" class="p-0 d-block h-100">
<img
class="card-img w-100 h-100 mb-2 | mb-md-0"
src="https://images.unsplash.com/photo-1510520001634-6af954f45759?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80"
alt="exhibition img"
/>
<img
class="card-img w-100 h-100 mb-2 | mb-md-0"
src="https://images.unsplash.com/photo-1510520001634-6af954f45759?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80"
alt="exhibition img"
/>
</a>
</div>
<div class="col-md-5 col-lg-6 h-md-350 py-md-12">
Expand All @@ -264,30 +275,42 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
d-flex
justify-content-between
align-items-center
mb-2
mb-md-1
mb-2 mb-md-1
"
>
<div class="d-flex align-items-center flex-wrap"
data-aos="fade-left"
data-aos-duration="1300">
<div
class="d-flex align-items-center flex-wrap"
data-aos="fade-left"
data-aos-duration="1300"
>
<h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
<a href="#" class="d-block link-black p-0 d-md-none">
<i class="fs-6 fab fa-facebook align-middle"></i>
</a>
</div>
<p class="mb-0 d-md-none">01 JUN — 31 OCT</p>
</div>
<p class="h6 mb-0 mb-2" data-aos="fade-left"
data-aos-duration="1300">$350</p>
<p class="h6 mb-0" data-aos="fade-left"
data-aos-duration="1400">
<p
class="h6 mb-0 mb-2"
data-aos="fade-left"
data-aos-duration="1300"
>
$350
</p>
<p
class="h6 mb-0"
data-aos="fade-left"
data-aos-duration="1400"
>
這是一個專屬於設計系畢業生的展覽，沒有華麗的名號、沒有浮誇的獎賞。讓我們用作品與理念，去碰撞真實世界裡的各種問題，創造更多美好的人事物。讓這個地球、這個世界變成每一個人心目中的理想鄉。
</p>
</div>

<div class="d-flex flex-wrap" data-aos="fade-left"
data-aos-duration="1400">
<div
class="d-flex flex-wrap"
data-aos="fade-left"
data-aos-duration="1400"
>
<a href="info.html" class="btn btn-primary me-1 py-2 px-5"
>購買票券</a
>
Expand All @@ -298,15 +321,8 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
</div>
</div>
<div
class="
h-md-350
d-none
d-md-block
offset-md-1
col-md-1
py-12
"
data-aos="fade-left"
class="h-md-350 d-none d-md-block offset-md-1 col-md-1 py-12"
data-aos="fade-left"
data-aos-duration="1400"
>
<div class="d-flex flex-column justify-content-between h-100">
Expand All @@ -324,17 +340,18 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
</div>
</div>
</li>
<li class="card border-0 bg-light | py-7 px-5 | p-md-0 mb-md-6">
<div class="row g-0 gx-7"
data-aos="fade-left"
data-aos-duration="1200" >
<li class="card border-0 bg-light | py-7 px-5 | p-md-0 mb-md-6" data-aos="fade-left"
data-aos-duration="1400">
<div
class="row g-0 gx-7"
>
<div class="col-md-5 col-lg-4 h-md-350">
<a href="info.html" class="p-0 d-block h-100">
<img
class="card-img w-100 h-100 img-fluid mb-2 | mb-md-0"
src="https://images.unsplash.com/photo-1545178803-4056771d60a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
alt="exhibition img"
/>
<img
class="card-img w-100 h-100 img-fluid mb-2 | mb-md-0"
src="https://images.unsplash.com/photo-1545178803-4056771d60a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
alt="exhibition img"
/>
</a>
</div>
<div class="col-md-5 col-lg-6 h-md-350 py-md-12">
Expand All @@ -345,31 +362,42 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
d-flex
justify-content-between
align-items-center
mb-2
mb-md-1
mb-2 mb-md-1
"
>
<div class="d-flex align-items-center flex-wrap">
<h2 class="h6 fw-bold mb-0 me-2"
data-aos="fade-left"
data-aos-duration="1300">高雄設計節</h2>
<div
class="d-flex align-items-center flex-wrap"
data-aos="fade-left"
data-aos-duration="1300"
>
<h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
<a href="#" class="d-block link-black p-0 d-md-none">
<i class="fs-6 fab fa-facebook align-middle"></i>
</a>
</div>
<p class="mb-0 d-md-none">01 JUN — 31 OCT</p>
</div>
<p class="h6 mb-0 mb-2"
data-aos="fade-left"
data-aos-duration="1300">$350</p>
<p class="h6 mb-0" data-aos="fade-left"
data-aos-duration="1400">
<p
class="h6 mb-0 mb-2"
data-aos="fade-left"
data-aos-duration="1300"
>
$350
</p>
<p
class="h6 mb-0"
data-aos="fade-left"
data-aos-duration="1400"
>
設計大高雄究竟是怎麼一回事？在這「設計」詞彙有點氾濫的年代，或許我們也搞不清楚究竟誰被誰設計了，設計生活？還是被生活設計？而當高雄這座城市建設硬體已相當程度完備時，文化軟實力又該如何輸出？
</p>
</div>

<div class="d-flex flex-wrap" data-aos="fade-left"
data-aos-duration="1400">
<div
class="d-flex flex-wrap"
data-aos="fade-left"
data-aos-duration="1400"
>
<a href="info.html" class="btn btn-primary me-1 py-2 px-5"
>購買票券</a
>
Expand All @@ -380,15 +408,8 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
</div>
</div>
<div
class="
h-md-350
d-none
d-md-block
offset-md-1
col-md-1
py-12
"
data-aos="fade-left"
class="h-md-350 d-none d-md-block offset-md-1 col-md-1 py-12"
data-aos="fade-left"
data-aos-duration="1400"
>
<div class="d-flex flex-column justify-content-between h-100">
Expand All @@ -412,15 +433,23 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>

<!-- 直播回顧 -->
<section>
<div class="container-md mb-7 mb-md-13">
<h3 class="fw-bold mb-2 mb-md-7" data-aos="fade-in" data-aos-duration="1200">直播回顧</h3>
<div class="container-md mb-7 mb-md-13"
data-aos="fade-in"
data-aos-duration="1200">
<h3
class="fw-bold mb-2 mb-md-7"
data-aos="fade-in"
data-aos-duration="1200"
>
直播回顧
</h3>
<div
class="bg-img | card border-0"
style="
background-image: url(https://github.com/hexschool/webLayoutTraining1st/blob/master/exhibition-week6/people2.png?raw=truehttps://images.unsplash.com/photo-1511368466880-3ea5d800152c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1500&q=80);
"
>
<div class="row g-0">
<div class="row g-0" data-aos="zoom-in" data-aos-duration="1300">
<!-- 顏色本身有透明度，不需要另外做調整 -->
<div class="col-lg-5 | bg-primary-dark text-white | py-12 px-7">
<p class="h5 mb-10">
Expand Down
12 changes: 7 additions & 5 deletions app/layout.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,9 +211,11 @@
<!-- 猜你也喜歡 -->
<section>
<div class="container-md mb-7 mb-md-13 <%- display %>">
<h2 class="h3 fw-bold mb-2 mb-md-7" data-aos="fade-in" data-aos-duration="1200" data-aos-delay="100">猜你也喜歡...</h2>
<h2 class="h3 fw-bold mb-2 mb-md-7" data-aos="fade-in" data-aos-duration="1300">猜你也喜歡...</h2>
<!-- Swiper for PC-->
<div class="swiper-container swiper | swiper-js | offset-md-1">
<div class="swiper-container swiper | swiper-js | offset-md-1"
data-aos="fade-in"
data-aos-duration="1400">
<ul
class="
swiper-wrapper
Expand Down Expand Up @@ -289,9 +291,9 @@
justify-content-end
"
>
<h4 class="h3 text-white | mb-0">想收到最新消息嗎？</h4>
<h4 class="h3 text-white | mb-2">快訂閱我們！</h4>
<div class="input-group | mt-1">
<h4 class="h3 text-white | mb-0" data-aos="fade-left" data-aos-duration="1200" >想收到最新消息嗎？</h4>
<h4 class="h3 text-white | mb-2" data-aos="fade-left" data-aos-duration="1300" >快訂閱我們！</h4>
<div class="input-group | mt-1" data-aos="fade-left" data-aos-duration="1400" >
<input
type="text"
name="subscribe email"
Expand Down
Loading

0 comments on commit a18aca7

Please sign in to comment.