diff --git a/css/style.css b/css/style.css
index bc0f8ca..bb45d3a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -31,6 +31,14 @@ html,
body {
width: 100%;
height: 100%;
+ moz-user-select: -moz-none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ overflow: hidden;
}
body {
@@ -100,20 +108,67 @@ body {
.banner .account {
position: absolute;
- background-color: red;
z-index: 11;
width: 4rem;
height: 4rem;
top: 17rem;
- left: 5rem;
+ left: 13vw;
}
.mx {
position: absolute;
- background-color: pink;
z-index: 11;
width: 4rem;
height: 4rem;
top: 17rem;
- left: 20rem;
+ left: 55vw;
+}
+
+.billing {
+ width: 100%;
+ min-height: 100%;
+ left: 100%;
+ position: fixed;
+ z-index: 99;
+ background-color: #fff;
+ padding-top: 48px;
+}
+
+.billing:target {
+ left: 0;
+ transition: left 0.4s;
+}
+
+.account-header {
+ position: relative;
+}
+.account-back {
+ width: 4rem;
+ height: 4rem;
+ position: absolute;
+ left: 0;
+ top: 0.5rem;
+ z-index: 99;
+}
+
+.container:target .billing {
+ left: 100%;
+ transition: left 0.4s;
+ position: fixed;
+}
+
+.loading {
+ width: 3rem;
+ position: fixed;
+ z-index: 100;
+ top: 48%;
+ left: 50%;
+ margin-left: -1.5rem;
+ animation: move 2s linear infinite;
+}
+
+@keyframes move {
+ 100% {
+ transform: rotate(360deg);
+ }
}
diff --git a/img/account.jpg b/img/account.jpg
new file mode 100644
index 0000000..47eecbd
Binary files /dev/null and b/img/account.jpg differ
diff --git a/img/list.jpg b/img/list.jpg
new file mode 100644
index 0000000..f91b33e
Binary files /dev/null and b/img/list.jpg differ
diff --git a/img/loading.png b/img/loading.png
new file mode 100644
index 0000000..1c0357f
Binary files /dev/null and b/img/loading.png differ
diff --git a/index.html b/index.html
index 2b672ff..1af9b9b 100644
--- a/index.html
+++ b/index.html
@@ -7,16 +7,31 @@
-
-
+
+
+
+
+
+
+
+
+
+
+
@@ -51,11 +66,20 @@
-
+ 
+ 
-
-
+