diff --git a/connect.css b/connect.css new file mode 100644 index 0000000..0896009 --- /dev/null +++ b/connect.css @@ -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%); +} \ No newline at end of file diff --git a/connect.html b/connect.html new file mode 100644 index 0000000..b385627 --- /dev/null +++ b/connect.html @@ -0,0 +1,20 @@ + + + + + Document + + + +
+
+

Connect Your Wallet

+
+ Connect + Go Index +
+ +
+
+ + diff --git a/index.css b/index.css new file mode 100644 index 0000000..9011eed --- /dev/null +++ b/index.css @@ -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%); +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..581c70a --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + Document + + + +
+
+

Welcome to Contree

+
+ Wallet Connect + How To Work + About Us +
+ +
+
+ + diff --git a/menu.css b/menu.css new file mode 100644 index 0000000..fd2528e --- /dev/null +++ b/menu.css @@ -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%); +} \ No newline at end of file