# 狗狗前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=100%, initial-scale=1.0">
<title>mydeerdognft</title>
<script>
window.onload = function () {
var img = document.getElementsByClassName("php")[0];
var imgArr=["./images/banner1.jpeg","./images/banner2.jpeg","./images/banner3.jpeg","./images/banner4.jpeg","./images/banner5.jpeg"]
var index = 0;
var info = document.getElementById("info");
document.getElementById("prev").onclick = function () {
index--;
if (index < 0) {
index = imgArr.length - 1;
}
img.src = imgArr[index];
};
document.getElementById("next").onclick = function () {
index++;
if (index > imgArr.length - 1) {
index = 0;
}
img.src = imgArr[index];
}
};
</script>
</head>
<body style="background-color:#fff7e9" " >
<noscript>You need to enable JavaScript to run this app.</noscript>
<div class="first" style="position: relative";>
<img src="new2 狗與鹿 NFT 網頁設計-01.jpg"
style="
width:100% ;
margin-top: -5.5px;
" >
<a href="https://medium.com/@mydeerdognft">
<button style="
background-color: aqua;
opacity: 0;
position: absolute;
top: 4%;
left: 41% ;
width: 10%;
height: 5.5%;
cursor: pointer;
">
</button>
</a>
<a href="#foreword">
<button style="
background-color: rgb(90, 84, 202);
opacity: 0;
position: absolute;
top: 4%;
left: 52% ;
width: 11%;
height: 5.5%;
cursor: pointer;
">
</button>
</a>
<a href="#power">
<button style="
background-color: rgb(202, 84, 176);
opacity: 0;
position: absolute;
top: 4%;
left: 63% ;
width: 11%;
height: 5.5%;
cursor: pointer;
">
</button>
</a>
<a href="#art">
<button style="
background-color: rgb(129, 202, 84);
opacity: 0;
position: absolute;
top: 4%;
left: 75% ;
width: 11%;
height: 5.5%;
cursor: pointer;
">
</button>
</a>
<a href="https://www.oursong.com/@MydeerdogNFT">
<button style="
background-color: rgb(190, 122, 33);
opacity: 0;
position: absolute;
top: 52%;
left: 63% ;
width: 18%;
height: 13%;
cursor: pointer;"
>
</button>
</a>
</a>
<a href="#team">
<button style="
background-color: rgb(190, 122, 33);
opacity: 0;
position: absolute;
top: 4%;
left: 86.5% ;
width: 11%;
height: 5.5%;
cursor: pointer;
">
</button>
</a>
</div>
<div class="container" style="position: relative ;">
<div class="p002">
<div id="foreword"
style="
position: absolute;
opacity: 1;
left: 50%;
top: 70%;
">
</div>
<div class="p001">
<iframe src="https://www.youtube.com/embed/CHwo5jXigJE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
style="
position: absolute;
left: 26.2%;
width: 46.7%;
height: 44.5%;
border-radius: 10pt;
top:7.3%;
" >
</iframe>
</div>
<img src="new2 狗與鹿 NFT 網頁設計-02.jpg"
style="width:100%;
margin-top:-5.8px;
" >
</div>
</div>
<img src="new2 狗與鹿 NFT 網頁設計-03.jpg"
style="width:100%;
margin-top: -5.8px;
" >
</div>
<div style="position: relative ;">
<div class="p003" ;">
<div id="power"
style="
position: absolute;
border: 10px solid gray;
opacity: 0;
left: 50%;
top: 53%;
">
</div></div>
<img src="new2 狗與鹿 NFT 網頁設計-04.jpg"
style="width:100%;
margin-top: -5.83px;
" >
</div></div>
<div style="position: relative ;">
<div class="p004">
<div id="art"
style="
position: absolute;
border: 10px solid rgb(43, 173, 28);
opacity: 0;
left: 50%;
top: 25%;
">
</div>
<img src="new2 狗與鹿 NFT 網頁設計-05.jpg"
id="art"
style="width:100%;
margin-top: -5.8px;
" >
</div>
<div style="position: relative ;">
<div class="outer">
<p id="info"></p>
<img src="./images/banner1.jpeg" alt="圖片" title="圖片"
class="php"
style= "
position: absolute;
width: 25%;
top:7%;
height: 13.5%;
left:38.3% ">
</div>
<button id='prev' style= "position: absolute;left:15%;top:12%;width: 12%;height: 6%;background-color: #ffffff00;border: 0px; cursor: pointer;"></button>
<button id='next' style= "position: absolute;right:15%;top:12%;width: 12%;height: 6%;background-color: #ffffff00;border: 0px; cursor: pointer;"></button>
<div class="p005">
<div id="team"
style="
position: absolute;
border: 10px solid rgb(28, 108, 173);
opacity: 0;
left: 50%;
top: 25%;
">
</div>
<img src="new2 狗與鹿 NFT 網頁設計-06.jpg"
style="width:100%;
margin-top: -5.8px;
z-index: 0;" >
</div>
<img src="new2 狗與鹿 NFT 網頁設計-07.jpg"
style="width:100%;
margin-top: -5.8px;
" >
<img src="new2 狗與鹿 NFT 網頁設計-08.jpg"
style="width:100%;
margin-top: -5.8px;
" >
</div></div>
</body>
</html>