Skip to content

Commit

Permalink
[edit] layout nav header
Browse files Browse the repository at this point in the history
  • Loading branch information
@Joy-port
Joy-port committed Aug 18, 2021
1 parent 4da740a commit 689aa36
Show file tree
Hide file tree
Showing 3 changed files with 436 additions and 367 deletions.
46 changes: 30 additions & 16 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,17 @@
layout: ./app/layout.ejs
engine: ejs
current: index
menubar: ' d-none '
display: ' '
menubar: " d-none "
display: " "
---

<!-- exhibition banner -->
<div class="exhibition-banner bg-img h-480 pb-80 pb-md-0" style="background-image: url(https://images.unsplash.com/photo-1506846540181-347008948fff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1193&q=80);">
<div
class="exhibition-banner bg-img h-480 pb-80 pb-md-0"
style="
background-image: url(https://images.unsplash.com/photo-1506846540181-347008948fff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1193&q=80);
"
>
<div class="container-md h-100">
<div
class="
Expand All @@ -33,9 +38,7 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
class="w-50 w-md-25 btn btn-secondary btn-lg | me-2"
>購買票券</a
>
<a
href="info.html"
class="w-50 w-md-25 btn btn-outline-light btn-lg"
<a href="info.html" class="w-50 w-md-25 btn btn-outline-light btn-lg"
>詳細資訊</a
>
</div>
Expand Down Expand Up @@ -140,7 +143,7 @@ <h3 class="h3 fw-bold mb-2 mb-md-7">熱門特展</h3>
<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">
<!-- 不同圖片縮放效果 -->

<!-- 整張等比例放大縮小 -->
<!-- <div class="col-md-4 h-md-350">
<img
Expand All @@ -150,12 +153,20 @@ <h3 class="h3 fw-bold mb-2 mb-md-7">熱門特展</h3>
/>
</div> -->


<!-- 多加一個外框 圖片在方筐內放大縮小-->
<div class="col-md-5 col-lg-4
position-relative overflow-hidden
h-345 h-md-auto">
<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-345 w-100">
<div
class="
col-md-5 col-lg-4
position-relative
overflow-hidden
h-345 h-md-auto
"
>
<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-345 w-100"
/>
</div>

<div class="col-md-5 col-lg-6 h-md-350 py-md-12">
Expand Down Expand Up @@ -383,7 +394,12 @@ <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
<section>
<div class="container-md mb-7 mb-md-13">
<h3 class="fw-bold mb-2 mb-md-7">直播回顧</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="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="col-lg-5 | bg-primary-dark text-white | py-12 px-7">
Expand All @@ -395,7 +411,7 @@ <h3 class="fw-bold mb-2 mb-md-7">直播回顧</h3>
alt="user"
class="w-128 h-128 img-fluid mb-2"
/>

<p class="h6 fw-bold mt-1 mb-2">臺北現代聯合總監｜Ken Hsu</p>
<p class="h6 fw-normal mt-1 mb-5">
獨家由藝術家、策展人、畫廊總監帶您欣賞台
Expand All @@ -406,7 +422,5 @@ <h3 class="fw-bold mb-2 mb-md-7">直播回顧</h3>
</div>
</div>
</div>

</section>

</main>
191 changes: 94 additions & 97 deletions app/info.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,118 +3,115 @@
layout: ./app/layout.ejs
engine: ejs
current: exhibition
menubar: ' '
display: ' '
menubar: " "
display: " "
---

<main>
<section>
<div class="container-md py-44 pt-md-80">

<!-- 票券購買 修改版本 -->
<div class="row">
<!-- exhibition info -->
<div class="col-lg-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="row">
<!-- exhibition info -->
<div class="col-lg-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-between
align-items-center
|
mb-1
|
mb-md-1
"
class="d-flex justify-content-end align-items-center h-100"
>
<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>
<p class="h6 text-white fw-bold mb-0 w-65">
01 JUN
<br />
|
<br />
31 OCT
</p>
</div>
<p class="h6 mb-0">
一年一度的台味設計展由經濟部工業局主辦、台灣創意設計中心執行，每年，針對在地生活、文化及產業發展特色，運用設計思考詮釋新時代的意涵，並以展覽呈現在地設計。
</p>
</div>
</div>
</div>
<!-- tickets -->
<div class="col-lg-6">
<div class="row">
<div class="col-md-6 h-md-256 pt-md-80 border-0 border-end-md">
<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>
<!-- 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="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
>
<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-lg-6">
<div class="row">
<div class="col-md-6 h-md-256 pt-md-80 border-0 border-end-md">
<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>
<div class="col-6 pt-md-11">
<a href="#" class="btn btn-secondary w-100 py-2">購買票券</a>
<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>

</div>
</section>
<section>
Expand Down
Loading

0 comments on commit 689aa36

Please sign in to comment.