# *114332黃翊瑄的網頁設計筆記:wink:*
---
<style>
*{
transition: all 1s ease;
}
body {
background-image: linear-gradient(to right, #fff1eb , #ace 100%);
}
h1 {
color: rgb(131, 111, 120);
}
h2 {
color: rgb(131, 111, 120);
}
h3 {
color: rgb(131, 111, 120);
}
body{
background-color: #fcb69f;
}
h1:hover{
color: rgb(223, 210, 210);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
img:hover{
margin-left: 50px;
border: 5px dashed rgba(99, 100, 143, 0.5)
}
</style>
[老師的筆記]( https://hackmd.io/@iamfefe)
## ==自我介紹==
:::info
* 老師好，我是資二3的黃翊瑄
* 我的電腦很爛 所以想來學習更多有關電腦的事情
:::
## ==這學期的目標==
:::info
1. 希望我能把老師交代的所有作業做好
2. 希望能在網頁設計這方面比別人好 以後也有機會利用這個專業賺錢:money_mouth_face:
| 第一次段考 | 第二次段考 | 期末考 |
|:----------:|:----------:|:--------:|
| 100分 | 100分 | 100分 |
:::
---
# 學到的所有東西：
## 先按F4，然後ctrl+shift+p 打full 可截圖全畫面
## 在選取的狀態下按shift+alt+往下是快速複製
## 按ctrl+滑鼠點選會變超大游標
## 加假字： < p >lorem < /p >
## shift+end=複製
---
# 0906
## 語法練習
<h1 style="color:pink !important;background-color:#FEE9E1;">大標題</h1>
<h3 style="color:purple !important">大標題</h3>
<p>這裡是內文</p>
程式碼內容:
```htmlembedded=
<h1 style="color:pink !important">大標題</h1>
<h3 style="color:purple !important">大標題</h3>
<p>這裡是內文</p>
```
<h1 style="color:pink !important;background-color:#FEE9E1;">配色</h1>
<h3>
[網站名稱:coolors](https://coolors.co/b09e99-fee9e1-fad4c0-584b53-605770)
</h3>
<p style="color:#605770 !important">#605770</p>
<p style="color:#584B53 !important">#584B53</p>
<p style="color:#FAD4C0 !important">#FAD4C0</p>
<p style="color:#FEE9E1 !important">#FEE9E1</p>
<p style="color:#B09E99 !important">#B09E99</p>
<hr>
# 0913
閱讀心得：
我是看遊戲製作的影片，我發現製作遊戲很需要團隊合作，有設計師、藝術家、工程師、銷售部門，彼此負責不同崗位，要互相溝通配合，我覺得很酷的地方是如果想不到靈感時，居然有遊戲區可以玩遊戲，幫助思考!真的太酷啦
<hr>
# 1110
<h2 style="color:pink !important">專題網頁UIUX設計</h2>
### [ 影片介紹](https://drive.google.com/file/d/1wDEKJOGj6Ev4yWREkch1rEq2s2ornLmz/view?usp=sharing)
圖片介紹:
<p>工作分配：32figma製作<p>
<p>
心得：
第一次接觸到網頁製作，跟我想像中的不太一樣，原本以為困難的地方是動手操作與製作網頁，但實際上更困難的是從無到有的生產，要從"農"這個主題一路的延伸下去，製作企畫書、行銷策略...還要思考怎麼做才會吸引到客群，真的是非常不容易，壓力蠻大的，因為繳交期限都很短，還要同時學別的東西。雖然過程非常艱難，但還是學到了團體合作，溝通很重要，但我認為態度更重要，因為我是組長，如果我不積極製作與提出想法，組員們就會完全不行動，也不會想討論，整組就會爛在那邊，也讓我學到要承擔更多責任，未來不管是不是擔任領導者都不能把責任全部都推給對方。
</p>
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>昀澤好物</title>
<style>
*{
transition: all 1s ease;
}
body {
background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
}
h1 {
color: rgb(131, 111, 120);
}
h2 {
color: rgb(131, 111, 120);
}
h3 {
color: rgb(131, 111, 120);
}
body{
background-color: #fcb69f;
}
h1:hover{
color: rgb(223, 210, 210);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
img:hover{
margin-left: 100px;
border: 10px dashed rgba(99, 100, 143, 0.5)
}
</style>
<!-- 註解 -->
</head>
<body>
<h1 id="home">我是大標提</h1>
<h2>我是大標提</h2>
<h3>我是大標提</h3>
<h4>我是大標提</h4>
<h5>我是大標提</h5>
<<img src="https://picsum.photos/900/200" alt="">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas rerum iure eligendi odit hic praesentium
doloremque consectetur laborum repellendus corrupti quaerat voluptatibus dolores ipsa, nobis repellat rem
non illo quae!
Debitis, vero. Laudantium quae doloribus corrupti dicta ullam, quo aliquam? Harum itaque dolor, veritatis
quos sapiente enim aspernatur ad possimus mollitia dicta error magni excepturi cupiditate sunt provident eum
accusamus.
Omnis similique aperiam ducimus optio dicta corrupti labore soluta, temporibus odit voluptates repellendus,
ipsa alias nihil voluptate minima veritatis. Error sunt praesentium, explicabo debitis recusandae iure quae
eveniet suscipit pariatur!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas rerum iure eligendi odit hic praesentium
doloremque consectetur laborum repellendus corrupti quaerat voluptatibus dolores ipsa, nobis repellat rem
non illo quae!
Debitis, vero. <br>Laudantium quae doloribus corrupti dicta ullam, quo aliquam? Harum itaque dolor,
veritatis quos sapiente enim aspernatur ad possimus mollitia dicta error magni excepturi cupiditate sunt
provident eum accusamus.
Omnis similique aperiam ducimus optio dicta corrupti labore soluta, temporibus odit voluptates repellendus,
ipsa alias nihil voluptate minima veritatis. Error sunt praesentium, explicabo debitis recusandae iure quae
eveniet suscipit pariatur!
</p>
<hr>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas rerum iure eligendi odit hic praesentium
doloremque consectetur laborum repellendus corrupti quaerat voluptatibus dolores ipsa, nobis repellat rem
non illo quae!
Debitis, vero. Laudantium quae doloribus corrupti dicta ullam, quo aliquam? Harum itaque dolor, veritatis
quos sapiente enim aspernatur ad possimus mollitia dicta error magni excepturi cupiditate sunt provident eum
accusamus.
Omnis similique aperiam ducimus optio dicta corrupti labore soluta, temporibus odit voluptates repellendus,
ipsa alias nihil voluptate minima veritatis. Error sunt praesentium, explicabo debitis recusandae iure quae
eveniet suscipit pariatur!
</p>
<b>design by 黃翊瑄</b>
<h3>特色產品</h3>
<ul>
<li>魚腥草</li>
<li>雞蛋</li>
<li>蔥油餅</li>
</ul>
<h3>寄送方式</h3>
<ol>
<li>郵寄</li>
<li>冷凍貨運</li>
<li>自取</li>
</ol>
<a href="http://yahoo.com.tw" target="_blank">連到yahoo</a>
<a href="mailto:imafefe@clvsc.tyc.edu.tw">連到fefe</a>
<a href="#home">回首頁</a>
</body>
</html>
```
```
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
transition: all 0.5s ease;
}
body {
background-color: rgb(221, 192, 197);
}
nav ul {
display: flex;
justify-content: center;
}
nav li {
width: 200px;
height: 50px;
background-color: rgb(255, 255, 255);
list-style: none;
border-radius: 20px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 5px;
filter: blur(3px);
}
nav li:hover {
filter: blur(0px);
transform: scale(2) rotate(20deg);
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>選單內容</li>
<li>選單內容</li>
<li>選單內容</li>
<li>選單內容</li>
<li>選單內容</li>
</ul>
</nav>
</header>
<!-- 選單內容在這 -->
<section>
<img src="https://picsum.photos/100/100" alt="" />
</section>
<!-- 選單內容結束 -->
<!-- 選單內容在這 -->
<section>
<img src="https://picsum.photos/100/100" alt="" />
</section>
<!-- 選單內容結束 -->
<!-- 選單內容在這 -->
<section></section>
<!-- 選單內容結束 -->
<!-- 選單內容在這 -->
<section></section>
<!-- 選單內容結束 -->
<footer></footer>
</body>
</html>
```
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 100px;
border: 1px solid black;
margin: 20px;
}
#box1{
background-color: rgb(160, 153, 143);
width:50%;
height:100%;
transition: 0.5s ease;
}
#box1:hover,
#box2:hover,
#box3:hover,
#box4:hover,
#box5:hover{
margin-left: 300px;
}
#box2{
background-color: rgb(129, 128, 125);
transition: 0.5s ease-in;
}
#box3{
background-color: rgb(154, 165, 196);
transition: 0.5s ease;
}
#box4{
background-color: rgb(136, 106, 123);
transition: 0.5s ease;
}
#box5{
background-color: rgb(130, 148, 138);
transition: 0.5s ease;
}
</style>
</head>
<body>
<div id="box1">
<img src="https://picsum.photos/100/100" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur cumque esse ab dolor, perspiciatis pariatur quasi eius deserunt reiciendis perferendis harum illum, iste laudantium possimus ducimus non a sapiente odit.
Quis maxime expedita, similique quos incidunt laboriosam doloremque dolores obcaecati nostrum sit vitae minima facilis impedit excepturi soluta quae aspernatur iure labore voluptas, est maiores! Delectus ad ut eius ab?
Quibusdam aliquid explicabo nobis cum ullam vel nulla ipsum! Quam, tempore sapiente expedita blanditiis voluptatibus deleniti corrupti sequi accusamus ducimus vitae maxime? Eveniet atque veritatis numquam sapiente ad eaque fugiat.</p>
</div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</body>
</html>
```
# 0111從FIGMA變VSCODE
```
<style>
body{background-color: rgb(245, 238, 176);
color: rgb(0, 95, 55);}
.good{background-color: rgb(56, 168, 106);
/* 增加上邊界 */
padding-top: 20px;
/* 增加下邊界 */
padding-bottom: 20px;
/* 加圓角 */
border-radius: 2%;}
.card{
/* 加圓角 */
border-radius: 2%;
/* 內容物突出時隱藏 */
overflow: hidden;
}
a.nav-link{
/* 改按鈕顏色與大小 */
color: rgb(18, 117, 71) !important;
font-size: 20px;
margin-right: 20px;
}
.nav-item{
color: aliceblue;
}
</style>
<body>
<!-- 導覽列開始 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="/images/logo.png" alt="">昀澤有機農場</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link gogo" href="#p1">內容</a>
</li>
<li class="nav-item">
<a class="nav-link gogo" href="#p2">關於</a>
</li>
<li class="nav-item">
<a class="nav-link gogo" href="#p3">聯絡方式</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- 導覽列結束 -->
<!-- 倫波開始 -->
<div class="container mt-3">
<div class="row">
<div class="col-12">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleControls" data-slide-to="1"></li>
<li data-target="#carouselExampleControls" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- 第一塊 -->
<div class="carousel-item active">
<img class="d-block w-100" src="images/3.png" alt="First slide">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- 第二塊 -->
<div class="carousel-item">
<img class="d-block w-100" src="images/4.png" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- 第三塊 -->
<div class="carousel-item">
<img class="d-block w-100" src="images/2.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- 在選取的狀態下shift+alt+往下是快速複製 -->
<!-- 案ctrl+滑鼠點選會變超大游標 -->
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<!-- 小圖示區開始 -->
<div class="col-4">
<div class="row">
<div class="col-2"><img class="rounded-circle" alt="Free Shipping" src="images/10.png" width="50px"></div>
<div class="col-lg-6 col-10 ml-1">
<h4>有機</h4>
</div>
</div>
</div>
<!-- 小圖示區開始 -->
<div class="col-4">
<div class="row">
<div class="col-2"><img class="rounded-circle" alt="Free Shipping" src="images/11.png" width="50px"></div>
<div class="col-lg-6 col-10 ml-1">
<h4>健康</h4>
</div>
</div>
</div>
<!-- 小圖示區開始 -->
<div class="col-4">
<div class="row">
<div class="col-2"><img class="rounded-circle" alt="Free Shipping" src="images/12.png" width="50px"></div>
<div class="col-lg-6 col-10 ml-1">
<h4>新鮮</h4>
</div>
</div>
</div>
</div>
</div>
<!-- 水平線 -->
<hr id="p1">
<hr>
<div class="container">
<h1 class="display-1 text-center">商品</h1>
</div>
<hr />
<hr>
<div class="container good">
<div class="row text-center">
<!-- 卡片開始 -->
<div class="col-md-4 pb-1 pb-md-0">
<div class="card">
<img class="card-img-top" src="images/egg.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">無敵好吃的雞蛋!!!</h5>
<p class="card-text">NT$360</p>
<a href="#" class="btn btn-primary">加入購物車</a>
</div>
</div>
</div>
<!-- 卡片開始 -->
<div class="col-md-4 pb-1 pb-md-0">
<div class="card">
<img class="card-img-top" src="images/5.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">哇!現在還有人炒菜沒有加小米辣椒的嗎?</h5>
<p class="card-text">NT$60</p>
<a href="#" class="btn btn-primary">加入購物車</a>
</div>
</div>
</div>
<!-- 卡片開始 -->
<div class="col-md-4 pb-1 pb-md-0">
<div class="card">
<img class="card-img-top" src="images/6.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">有機北海道小松葉!!!</h5>
<p class="card-text">NT$60</p>
<a href="#" class="btn btn-primary">加入購物車</a>
</div>
</div>
</div>
<!-- 卡片開始 -->
</div>
<div class="row text-center mt-4">
<div class="col-md-4 pb-1 pb-md-0">
<div class="card">
<img class="card-img-top" src="images/7.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">隨便一熱就超好吃的蔥油餅!!!</h5>
<p class="card-text">NT$240</p>
<a href="#" class="btn btn-primary">加入購物車</a>
</div>
</div>
</div>
<!-- 卡片開始 -->
<div class="col-md-4 pb-1 pb-md-0">
<div class="card">
<img class="card-img-top" src="images/8.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">無敵酸的稀有無籽檸檬!</h5>
<p class="card-text">NT$50</p>
<a href="#" class="btn btn-primary">加入購物車</a>
</div>
</div>
</div>
<!-- 卡片開始 -->
<div class="col-md-4 pb-1 pb-md-0">
<div class="card">
<img class="card-img-top" src="images/9.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">有機菠菜</h5>
<p class="card-text">NT$60</p>
<a href="#" class="btn btn-primary">加入購物車</a>
</div>
</div>
</div>
</div>
</div>
<hr id="p2">
<div class="container">
<h1 class="display-1 text-center">特色產品</h1>
</div>
<hr/>
<!-- 容器 -->
<div class="container">
<!-- 列 -->
<div class="row">
<!-- 圖文介紹區 -->
<div class="col-lg-4">
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="images/100X125.gif" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="images/100X125.gif" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3" src="images/100X125.gif" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>
</div>
<!-- 圖文介紹區 -->
<div class="col-lg-4">
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="images/100X125.gif" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="images/100X125.gif" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3" src="images/100X125.gif" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>
</div>
<!-- 圖文介紹區 -->
<div class="col-lg-4">
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="images/100X125.gif" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="images/100X125.gif" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3" src="images/100X125.gif" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>
</div>
</div>
</div>
<hr id="p3">
<!-- 介紹區 -->
<div class="container text-white bg-dark p-4">
<div class="row">
<div class="col-6 col-md-8 col-lg-7">
<div class="row text-center">
<div class="col-sm-6 col-md-4 col-lg-4 col-12">
<ul class="list-unstyled">
<li class="https://www.instagram.com/yun.__.ze/"> <a>instagram</a> </li>
<li class="btn-link"> <a> yunzefarm@gmail.comyunzefarm@gmail.com </a> </li>
<li class="https://www.facebook.com/YunZeOrganicFarm/"> <a>facebook</a> </li>
<li class="btn-link"> <a>Link anchor</a> </li>
<li class="btn-link"> <a>Link anchor</a> </li>
</ul>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 col-12">
<ul class="list-unstyled">
<li class="btn-link"> <a>Link anchor</a> </li>
<li class="btn-link"> <a>Link anchor</a> </li>
<li class="btn-link"> <a>Link anchor</a> </li>
<li class="btn-link"> <a>Link anchor</a> </li>
<li class="btn-link"> <a>Link anchor</a> </li>
</ul>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 col-12">
<ul class="list-unstyled">
<li class="btn-link"> <a>Link anchor</a> </li>
<li class="btn-link"> <a>Link anchor</a> </li>
<li class="btn-link"> <a>Link anchor</a> </li>
<li class="btn-link"> <a>Link anchor</a> </li>
<li class="btn-link"> <a>Link anchor</a> </li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-lg-5 col-6">
<address>
<strong>MyStoreFront, Inc.</strong><br>
Indian Treasure Link<br>
Quitman, WA, 99110-0219<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
</div>
</div>
</div>
<footer class="text-center">
<div class="container">
<div class="row">
<div class="col-12">
<p>Copyright © MyWebsite. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!-- 使用動作JS套件 -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>
<script>
$(".gogo").click(function () {
var t = $(this).attr("href");
var st = $(t).offset().top;
$("html,body").animate({
scrollTop: st
}, 500);
});
</script>
Sign in with Wallet
Connect another wallet