Skip to content

Commit

Permalink
更改背景顏色和卡片換圖
Browse files Browse the repository at this point in the history 
增加按鈕
改變背景顏色
卡片換圖
更改一些小按鈕
  • Loading branch information
@YoshimiLiou
YoshimiLiou committed Jan 10, 2024
1 parent 57ae1f5 commit f55329e
Show file tree
Hide file tree
Showing 6 changed files with 30 additions and 23 deletions.
Binary file added Galaxy-Background.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.
Binary file added card_nomal.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 8 additions & 8 deletions choose_card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,22 @@


<div class="container">
<h2 class="title">請抽取一張卡片</h2>
<h2 class="title">選擇一張卡</h2>
<div class="row">
<a class="link_wrapper col-6 p-3" href="reveal_card.html"><img
class="mycard animate__animated animate__flipInX" id="card1" src="card.png"></a>
class="mycard animate__animated animate__flipInX" id="card1" src="card_nomal.png"></a>
<a class="link_wrapper col-6 p-3" href="reveal_card.html"><img
class="mycard animate__animated animate__flipInX" id="card2" src="card.png"></a>
class="mycard animate__animated animate__flipInX" id="card2" src="card_nomal.png"></a>
<a class="link_wrapper col-4 p-3" href="reveal_card.html"><img
class="mycard animate__animated animate__flipInX" id="card3" src="card.png"></a>
class="mycard animate__animated animate__flipInX" id="card3" src="card_nomal.png"></a>
<a class="link_wrapper col-4 p-3" href="reveal_card.html"><img
class="mycard animate__animated animate__flipInX" id="card4" src="card.png"></a>
class="mycard animate__animated animate__flipInX" id="card4" src="card_nomal.png"></a>
<a class="link_wrapper col-4 p-3" href="reveal_card.html"><img
class="mycard animate__animated animate__flipInX" id="card5" src="card.png"></a>
class="mycard animate__animated animate__flipInX" id="card5" src="card_nomal.png"></a>
<a class="link_wrapper col-6 p-3" href="reveal_card.html"><img
class="mycard animate__animated animate__flipInX" id="card6" src="card.png"></a>
class="mycard animate__animated animate__flipInX" id="card6" src="card_nomal.png"></a>
<a class="link_wrapper col-6 p-3" href="reveal_card.html"><img
class="mycard animate__animated animate__flipInX" id="card7" src="card.png"></a>
class="mycard animate__animated animate__flipInX" id="card7" src="card_nomal.png"></a>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ <h1 class="title-text">凡娜緹雅</h1>
<h1 class="title-text">2024</h1>
<h1 class="title-text">新春七脈輪占卜</h1>
</div>
<a id="btn" href="choose_card.html">開 始</a>
<a id="btn" href="choose_card.html">開 始 占 卜</a>
</div>

</div>
Expand Down
15 changes: 10 additions & 5 deletions reveal_card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<div id="particles-js">
<img id="spin2" src="spinngWeel.png"></img>
<div class="container">
<h2 id="reveal-title">我的2024專屬能量是</h2>
<h2 id="reveal-title">我的2024專屬能量</h2>
<div class="card_container">
<a href="reveal_card"><img id="reveal_card" class="reveal_card animate__animated animate__flipInX" id="card1"
src="card.png"></a>
Expand Down Expand Up @@ -69,14 +69,19 @@ <h2 id="reveal-title">我的2024專屬能量是</h2>
</div>
<div class="card-link">
<div class="btn-div">
<a class="btn" id="link" href="">了解更多</a>
<a href="https://www.instagram.com/venetia_nature/">
<img class="button-image" src="Instagram_icon.png" width="30" height="30" alt="Instagram Icon">
<a class="btn" id="link" href="">了解精油</a>
<a class="btn" href="index.html">再抽一次</a>
</a>
</div>
<div style = "width:100%;">
<a class="btn" id="downloadlink" href="">下載並上傳到IG抽專屬精油</a>
<a class="btn" id="downloadlink" href="">儲存並上傳IG抽專屬精油</a>


</div>
<div style = "width:100%;">
<a class="btn" href="https://www.instagram.com/venetia_nature/" >INSTAGRAM</a>
</div>


</div>

Expand Down
20 changes: 11 additions & 9 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,20 @@ body{
margin: 10px , 10px , 10px , 10px;
font-size: 20px;
color: azure;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-family: 'Noto Sans TC', sans-serif;

}


.btn-div{
display: flex;
letter-spacing: 10px;
/* letter-spacing: 10px; */
justify-content: center;
gap: 5px;
}
#link{
display: inline;
width: 150px;
/* display: inline; */
/* width: 150px; */
}

.button-image{
Expand All @@ -65,15 +65,17 @@ body{

html {
height:100%;
font-family: PingFangSC-Ultrathin, sans-serif;
font-family: 'Noto Sans TC', sans-serif;

}
body{
/* z-index: -1; */
margin: 0px;
}
canvas{
background-image: linear-gradient(#1A0B75, #730A75);
background-image: url("Galaxy-Background.jpg");
background-position: center;
background-size: cover;
z-index: -1;
width: 100%;
height: 100%;
Expand All @@ -87,14 +89,14 @@ canvas{
.title-text{
font-size: 30px;
color: white;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-family: 'Noto Sans TC', sans-serif;
letter-spacing: 10px;
}

h1{
font-size: 50px;
color: rgb(255, 255, 255);
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-family: 'Noto Sans TC', sans-serif;
margin: 0;
/* letter-spacing: 10px; */
margin-top: 0px;
Expand All @@ -103,7 +105,7 @@ h1{
h2{
font-size:10fr;
color: azure;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-family: 'Noto Sans TC', sans-serif;
letter-spacing: 10px;
/* margin-top: 30px; */
}
Expand Down

0 comments on commit f55329e

Please sign in to comment.