基隆市信義區孝東路136號3樓
This commit is contained in:
parent
85a5c1f579
commit
d04c054cb3
116
connect.css
Normal file
116
connect.css
Normal file
@ -0,0 +1,116 @@
|
||||
*{
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html,body{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
height: 100%;
|
||||
background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
|
||||
}
|
||||
.wel{
|
||||
text-decoration: none;
|
||||
font-family: Monospace;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.btn,.btn1{
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-family: Monospace;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background-color: #556c9F;
|
||||
padding: 10px 30px;
|
||||
line-height: 24px;
|
||||
direction: inline-block;
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.btn{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn1{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background-color: rgba(256,256,256,0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn:hover{
|
||||
color: #003C90;
|
||||
background-color: #fff;
|
||||
border:2px #003C90D solid;
|
||||
}
|
||||
.btn:hover:before{
|
||||
width: 20%;
|
||||
padding-top: 120%;
|
||||
}
|
||||
.btn:active{
|
||||
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.btn1:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background-color: rgba(256,256,256,0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn1:hover{
|
||||
color: #003C90;
|
||||
background-color: #fff;
|
||||
border:2px #003C90D solid;
|
||||
}
|
||||
.btn1:hover:before{
|
||||
width: 20%;
|
||||
padding-top: 120%;
|
||||
}
|
||||
.btn1:active{
|
||||
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.cat{
|
||||
width: 300px;
|
||||
top: 80%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
20
connect.html
Normal file
20
connect.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="connect.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="wel">
|
||||
<h1>Connect Your Wallet</h1>
|
||||
</div>
|
||||
<a class="btn" href="menu.html"><span>Connect</span></a>
|
||||
<a class="btn1" href="index.html"><span>Go Index</span></a>
|
||||
<div class="cat">
|
||||
<img src="https://web3.contree.io/wp-content/uploads/2022/07/cropped-cropped-ego-2048x296.png" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
149
index.css
Normal file
149
index.css
Normal file
@ -0,0 +1,149 @@
|
||||
*{
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html,body{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
height: 100%;
|
||||
background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
|
||||
}
|
||||
.wel{
|
||||
text-decoration: none;
|
||||
font-family: Monospace;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.btn,.btn1,.btn2{
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-family: Monospace;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background-color: #556c9F;
|
||||
padding: 10px 30px;
|
||||
line-height: 24px;
|
||||
direction: inline-block;
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.btn{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn1{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn2{
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background-color: rgba(256,256,256,0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn:hover{
|
||||
color: #003C90;
|
||||
background-color: #fff;
|
||||
border:2px #003C90D solid;
|
||||
}
|
||||
.btn:hover:before{
|
||||
width: 20%;
|
||||
padding-top: 120%;
|
||||
}
|
||||
.btn:active{
|
||||
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.btn1:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background-color: rgba(256,256,256,0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn1:hover{
|
||||
color: #003C90;
|
||||
background-color: #fff;
|
||||
border:2px #003C90D solid;
|
||||
}
|
||||
.btn1:hover:before{
|
||||
width: 20%;
|
||||
padding-top: 120%;
|
||||
}
|
||||
.btn1:active{
|
||||
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.btn2:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background-color: rgba(256,256,256,0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn2:hover{
|
||||
color: #003C90;
|
||||
background-color: #fff;
|
||||
border:2px #003C90D solid;
|
||||
}
|
||||
.btn2:hover:before{
|
||||
width: 20%;
|
||||
padding-top: 120%;
|
||||
}
|
||||
.btn2:active{
|
||||
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.cat{
|
||||
width: 300px;
|
||||
top: 80%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
21
index.html
Normal file
21
index.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="wel">
|
||||
<h1>Welcome to Contree</h1>
|
||||
</div>
|
||||
<a class="btn" href="connect.html"><span>Wallet Connect</span></a>
|
||||
<a class="btn1" href="https://web3.contree.io/howtowork/"><span>How To Work</span></a>
|
||||
<a class="btn2" href="https://web3.contree.io"><span>About Us</span></a>
|
||||
<div class="cat">
|
||||
<img src="https://web3.contree.io/wp-content/uploads/2022/07/cropped-cropped-ego-2048x296.png" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
191
menu.css
Normal file
191
menu.css
Normal file
@ -0,0 +1,191 @@
|
||||
*{
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html,body{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
height: 100%;
|
||||
background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
|
||||
}
|
||||
.wel{
|
||||
text-decoration: none;
|
||||
font-family: Monospace;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.walletaddress{
|
||||
text-decoration: none;
|
||||
font-family: Monospace;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
.btn,.btn1,.btn2,.btn3{
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-family: Monospace;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background-color: #556c9F;
|
||||
padding: 10px 30px;
|
||||
line-height: 24px;
|
||||
direction: inline-block;
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.btn{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn1{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn2{
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn3{
|
||||
position: absolute;
|
||||
top: 70%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background-color: rgba(256,256,256,0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn:hover{
|
||||
color: #003C90;
|
||||
background-color: #fff;
|
||||
border:2px #003C90D solid;
|
||||
}
|
||||
.btn:hover:before{
|
||||
width: 20%;
|
||||
padding-top: 120%;
|
||||
}
|
||||
.btn:active{
|
||||
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.btn1:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background-color: rgba(256,256,256,0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn1:hover{
|
||||
color: #003C90;
|
||||
background-color: #fff;
|
||||
border:2px #003C90D solid;
|
||||
}
|
||||
.btn1:hover:before{
|
||||
width: 20%;
|
||||
padding-top: 120%;
|
||||
}
|
||||
.btn1:active{
|
||||
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.btn2:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background-color: rgba(256,256,256,0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn2:hover{
|
||||
color: #003C90;
|
||||
background-color: #fff;
|
||||
border:2px #003C90D solid;
|
||||
}
|
||||
.btn2:hover:before{
|
||||
width: 20%;
|
||||
padding-top: 120%;
|
||||
}
|
||||
.btn2:active{
|
||||
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.btn3:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background-color: rgba(256,256,256,0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn3:hover{
|
||||
color: #003C90;
|
||||
background-color: #fff;
|
||||
border:2px #003C90D solid;
|
||||
}
|
||||
.btn3:hover:before{
|
||||
width: 20%;
|
||||
padding-top: 120%;
|
||||
}
|
||||
.btn3:active{
|
||||
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.cat{
|
||||
width: 300px;
|
||||
top: 80%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user