Skip to content

Commit

Permalink
[edit] info page header section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Joy-port
Joy-port committed Aug 18, 2021
1 parent 0db885c commit 9e1770e
Show file tree
Hide file tree
Showing 9 changed files with 297 additions and 183 deletions.
35 changes: 10 additions & 25 deletions app/assets/style/all.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion app/assets/style/all.css.map
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
</div>
<div class="d-flex">
<a
href="ticket.html"
href="design.html"
class="w-50 w-md-25 btn btn-secondary btn-lg | me-2"
>購買票券</a
>
Expand Down Expand Up @@ -187,7 +187,7 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
</div>

<div class="d-flex flex-wrap">
<a href="ticket.html" class="btn btn-primary me-1 py-2 px-5"
<a href="info.html" class="btn btn-primary me-1 py-2 px-5"
>購買票券</a
>
<a href="#" class="btn btn-outline-primary py-2 px-5"
Expand Down Expand Up @@ -263,7 +263,7 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
</div>

<div class="d-flex flex-wrap">
<a href="ticket.html" class="btn btn-primary me-1 py-2 px-5"
<a href="info.html" class="btn btn-primary me-1 py-2 px-5"
>購買票券</a
>
<a href="#" class="btn btn-outline-primary py-2 px-5"
Expand Down Expand Up @@ -338,7 +338,7 @@ <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
</div>

<div class="d-flex flex-wrap">
<a href="ticket.html" class="btn btn-primary me-1 py-2 px-5"
<a href="info.html" class="btn btn-primary me-1 py-2 px-5"
>購買票券</a
>
<a href="#" class="btn btn-outline-primary py-2 px-5"
Expand Down
118 changes: 113 additions & 5 deletions app/info.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,112 @@
<main>
<section>
<div class="container-md py-44 pt-md-80">
<div class="card border-0 | p-0 mb-5 | mb-md-6">

<!-- 票券購買 修改版本 -->
<div class="row">
<!-- exhibition info -->
<div class="col-md-6 mb-13">
<div class="card border-0 bg-transparent">
<!-- pc card img of exhibition & date -->
<div class="card border-0 bg-transparent | mb-2">
<img
class="h-256 | card-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="exhibition img"
/>
<div class="card-img-overlay d-none d-md-block p-0">
<div
class="d-flex justify-content-end align-items-center h-100"
>
<p class="h6 text-white fw-bold mb-0 w-65">
01 JUN
<br />
|
<br />
31 OCT
</p>
</div>
</div>
</div>
<!-- exibition info -->
<div class="d-flex flex-column justify-content-between h-100">
<div
class="
d-flex
justify-content-between
align-items-center
|
mb-1
|
mb-md-1
"
>
<div class="d-flex align-items-center">
<h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
<a href="#" class="link-black p-0">
<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">
一年一度的台味設計展由經濟部工業局主辦、台灣創意設計中心執行，每年，針對在地生活、文化及產業發展特色，運用設計思考詮釋新時代的意涵，並以展覽呈現在地設計。
</p>
</div>
</div>
</div>
<!-- tickets -->
<div class="col-md-6">
<div class="row">
<div class="col-md-6 h-md-256 pt-md-80">
<div class="d-flex justify-content-center align-items-center mb-7">
<a class="d-block link-black" type="button">
<span class="material-icons-outlined">
remove
</span>
</a>
<p class="h1 fw-bold mx-5 mb-0">01</p>
<a class="d-block link-black" type="button">
<span class="material-icons-outlined">
add
</span>
</a>
</div>
<p class="text-dark text-center w-100 mb-12">張</p>
</div>
<div class="col-md-6 h-md-256 pt-md-80">
<div class="mb-12">
<p class="h1 fw-bold text-center mb-7">NT $350</p>
<p class="text-dark text-center mb-2">票種</p>
<div class="input-group justify-content-center">
<a href="#" class="btn-hover-secondary px-2" type="button"
>學生</a
>
<a href="#" class="btn-hover-secondary px-2" type="button"
>全票</a
>
<a href="#" class="btn-hover-secondary px-2" type="button"
>愛心</a
>
</div>
</div>
</div>
<!-- 超過的部分會自動換行 -->
<div class="col-6 pt-md-11">
<a
href="#"
class=" btn btn-outline-primary w-100 py-2"
type="button"
>收藏展覽</a
>
</div>
<div class="col-6 pt-md-11">
<a href="#" class="btn btn-secondary w-100 py-2">購買票券</a>
</div>
</div>
</div>
</div>
<!-- 購買票券 原版 -->
<div class="row">
<!-- exhibition info -->
<div class="col-md-6">
Expand Down Expand Up @@ -75,8 +180,9 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
"
>
<a class="d-block link-black" type="button">
<!--materials outline 格式無法使用？ -->
<i class="fas fa-minus"></i>
<span class="material-icons-outlined">
remove
</span>
</a>
</div>
<div
Expand Down Expand Up @@ -113,7 +219,9 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
>
<a class="d-block link-black" type="button">
<!-- outline 格式無法使用？ -->
<i class="fas fa-plus"></i>
<span class="material-icons-outlined">
add
</span>
</a>
</div>
</div>
Expand Down Expand Up @@ -208,7 +316,7 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
</div>
</div>
</div>
</div>

</div>
</section>
<section>
Expand Down
61 changes: 36 additions & 25 deletions app/layout.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,7 @@
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css"
/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
Expand All @@ -28,6 +25,8 @@
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

<link rel="stylesheet" href="./assets/style/bootstrap.css" />
<link rel="stylesheet" href="./assets/style/all.css" />
</head>
Expand Down Expand Up @@ -288,13 +287,17 @@
"
>
<a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
><i class="fas fa-minus"></i></a
><span class="material-icons-outlined">
remove
</span></a
>
<a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
<p class="h1 fw-bold mb-0">01</p>
</a>
<a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
><i class="fas fa-plus"></i></a
><span class="material-icons-outlined">
add
</span></a
>
</div>
</div>
Expand Down Expand Up @@ -337,15 +340,19 @@
w-30
"
>
<a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
><i class="fas fa-minus"></i></a
>
<a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
<p class="h1 fw-bold mb-0">01</p>
</a>
<a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
><i class="fas fa-plus"></i></a
>
<a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
><span class="material-icons-outlined">
remove
</span></a
>
<a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
<p class="h1 fw-bold mb-0">01</p>
</a>
<a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
><span class="material-icons-outlined">
add
</span></a
>
</div>
</div>
</div>
Expand Down Expand Up @@ -387,15 +394,19 @@
w-30
"
>
<a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
><i class="fas fa-minus"></i></a
>
<a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
<p class="h1 fw-bold mb-0">01</p>
</a>
<a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
><i class="fas fa-plus"></i></a
>
<a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
><span class="material-icons-outlined">
remove
</span></a
>
<a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
<p class="h1 fw-bold mb-0">01</p>
</a>
<a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
><span class="material-icons-outlined">
add
</span></a
>
</div>
</div>
</div>
Expand All @@ -415,7 +426,7 @@

</div>


<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="./assets/js/vendors.js"></script>
Expand Down
Loading

0 comments on commit 9e1770e

Please sign in to comment.