-
Dashboard
+
Brancher Influencer Sign Up
@@ -22,3 +25,5 @@
+
+
From 1ce0f5d7d2be1a334002cd5acf7c9aa527fdf228 Mon Sep 17 00:00:00 2001
From: 1776123 <50336512+1776123@users.noreply.github.com>
Date: Mon, 29 Jun 2020 17:44:29 -0400
Subject: [PATCH 2/4] ethao
---
css/login.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css/login.css b/css/login.css
index de03a90..bbc79e7 100644
--- a/css/login.css
+++ b/css/login.css
@@ -80,7 +80,7 @@ background:#3594D2;
}
.brancher{
background-image: ".css/res/inverse_branch.svg";
- filter: blur(6px);
+ background-filter: blur(6px);
-webkit-filter:blur(6px);
background-repeat:no-repeat;
background-position:center;
From 4c1645c8b962c342bc84fc07128100af5bc71c09 Mon Sep 17 00:00:00 2001
From: 1776123 <50336512+1776123@users.noreply.github.com>
Date: Wed, 1 Jul 2020 14:30:02 -0400
Subject: [PATCH 3/4] signup for influencers
---
css/login.css | 281 ++++++++++++++++++++++++++++++++-----------
css/signup.css | 211 ++++++++++++++++++++++++++++++++
css/signup.scss | 243 +++++++++++++++++++++++++++++++++++++
signup.html | 31 ++---
signupinfluence.html | 63 ++++++++++
5 files changed, 738 insertions(+), 91 deletions(-)
create mode 100644 css/signup.css
create mode 100644 css/signup.scss
create mode 100644 signupinfluence.html
diff --git a/css/login.css b/css/login.css
index bbc79e7..aa153c3 100644
--- a/css/login.css
+++ b/css/login.css
@@ -1,89 +1,230 @@
-body{
- font-family: 'Open Sans', sans-serif;
- background-color: rgb(0,0,0);
- background-color: rgb(0, 0, 4);
- color: "white";
- text-align: right;
- margin: 20px 0px 20px 0px;
+element.style{
+ background-image: "./css/res/inverse_branch.svg";
+}
+container{
+ width:100%;
+ height:100%;
+ background-color: rgb(255,255,255,0.5);
+ display:block;
+ background-image: "./css/res/inverse_branch.svg";
+}
+h1
+{
+
+}
+wrap-login100 {
+ width: 390px;
+ background: transparent;
+}
+.login100-form {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+.login100-form-title {
+ font-family: Montserrat-ExtraBold;
+ font-size: 24px;
+ color: #fff;
+ line-height: 1.2;
+ text-align: center;
+
+ width: 100%;
+ display: block;
+}
+.limiter {
+ width: 100%;
+ margin: 0 auto;
+}
+@media (max-width: 576px) {
+ .wrap-login100 {
+ padding-top: 80px;
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+}
+/*---------------------------------------------*/
+.login100-form-avatar {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ overflow: hidden;
+ margin: 0 auto;
+}
+.login100-form-avatar img {
+ width: 100%;
+}
+.login100-form-avatar {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ overflow: hidden;
+ margin: 0 auto;
+}
+.login100-form-avatar img {
+ width: 100%;
}
-p{
- font-size:12px;
- text-decoration: none;
- color:#ffffff;
+
+/*---------------------------------------------*/
+.wrap-input100 {
+ position: relative;
+ width: 100%;
+ z-index: 1;
}
-h1{
- font-size:1.5em;
- color:#fff;
+.input100 {
+ font-family: Montserrat-Bold;
+ font-size: 15px;
+ line-height: 1.2;
+ color: #333333;
+
+ display: block;
+ width: 100%;
+ background: #fff;
+ height: 50px;
+ border-radius: 25px;
+ padding: 0 30px 0 53px;
}
-.email{
- background:#ecf0f1;
- border: #212529 1px solid;
- border-bottom: #ccc 2px solid;
- padding: 8px;
- color:#AAAAAA;
- margin-top:10px;
- font-size:1em;
- border-radius:4px;
+
+/*------------------------------------------------------------------
+[ Focus ]*/
+.focus-input100 {
+ display: block;
+ position: absolute;
+ border-radius: 25px;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ box-shadow: 0px 0px 0px 0px;
+ color: rgba(0,91,234, 0.6);
}
-.password{
- border-radius:4px;
- background:#ecf0f1;
- border: #ccc 1px solid;
- padding: 8px;
- width:250px;
- font-size:1em;
+.input100:focus + .focus-input100 {
+ -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
+ animation: anim-shadow 0.5s ease-in-out forwards;
}
-.btn{
- background:#2ecc71;
- width:125px;
- padding-top:5px;
- padding-bottom:5px;
- color:white;
- border-radius:4px;
- border: #27ae60 1px solid;
-
- margin-top:20px;
- margin-bottom:20px;
- float:left;
- margin-left:16px;
- font-weight:800;
- font-size:0.8em;
+@-webkit-keyframes anim-shadow {
+ to {
+ box-shadow: 0px 0px 80px 30px;
+ opacity: 0;
+ }
}
-.btn:hover{
- background:#2CC06B;
+@keyframes anim-shadow {
+ to {
+ box-shadow: 0px 0px 80px 30px;
+ opacity: 0;
+ }
}
-#btn2{
- float:left;
- background:#3498db;
- width:125px; padding-top:5px;
- padding-bottom:5px;
- color:white;
- border-radius:4px;
- border: #2980b9 1px solid;
+.symbol-input100 {
+ font-size: 15px;
+ color: #999999;
- margin-top:20px;
- margin-bottom:20px;
- margin-left:10px;
- font-weight:800;
- font-size:0.8em;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ align-items: center;
+ position: absolute;
+ border-radius: 25px;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding-left: 30px;
+ pointer-events: none;
+
+ -webkit-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ transition: all 0.4s;
}
-#btn2:hover{
-background:#3594D2;
+.input100:focus + .focus-input100 + .symbol-input100 {
+ color: #00c6fb;
+ padding-left: 23px;
}
-.brancher{
- background-image: ".css/res/inverse_branch.svg";
- background-filter: blur(6px);
- -webkit-filter:blur(6px);
- background-repeat:no-repeat;
- background-position:center;
- background-size:cover;
- height:100%
+
+
+/*------------------------------------------------------------------
+[ Button ]*/
+.container-login100-form-btn {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.login100-form-btn {
+ font-family: Montserrat-Bold;
+ font-size: 15px;
+ line-height: 1.5;
+ color: #e0e0e0;
+
+ width: 100%;
+ height: 50px;
+ border-radius: 25px;
+ background: #333333;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 25px;
+
+ -webkit-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ transition: all 0.4s;
+
+ position: relative;
+ z-index: 1;
+}
+
+.login100-form-btn::before {
+ content: "";
+ display: block;
+ position: absolute;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ border-radius: 25px;
+ top: 0;
+ left: 0;
+ background: #005bea;
+ background: -webkit-linear-gradient(left, #005bea, #00c6fb);
+ background: -o-linear-gradient(left, #005bea, #00c6fb);
+ background: -moz-linear-gradient(left, #005bea, #00c6fb);
+ background: linear-gradient(left, #005bea, #00c6fb);
+ -webkit-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ transition: all 0.4s;
+ opacity: 0;
+}
+
+.login100-form-btn:hover {
+ background: transparent;
+ color: #fff;
+}
+
+.login100-form-btn:hover:before {
+ opacity: 1;
}
diff --git a/css/signup.css b/css/signup.css
new file mode 100644
index 0000000..b06e7c4
--- /dev/null
+++ b/css/signup.css
@@ -0,0 +1,211 @@
+@font-face {
+ font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+@font-face {
+ font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box; }
+
+body {
+ font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ color: #fff;
+ font-size: 13px;
+ margin: 0; }
+
+input, textarea, select, button {
+ font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ color: #070707;
+ font-size: 13px; }
+
+p, h1, h2, h3, h4, h5, h6, ul {
+ margin: 0; }
+
+img {
+ max-width: 100%;
+ }
+
+ul {
+ padding-left: 0;
+ margin-bottom: 0; }
+
+a:hover {
+ text-decoration: none; }
+
+:focus {
+ outline: none; }
+
+.wrapper {
+ min-height: 100vh;
+ background-size: cover;
+ background-repeat: no-repeat;
+ display: flex;
+ align-items: center; }
+
+.inner {
+ padding: 20px;
+ background: #070707;
+ max-width: 850px;
+ margin: auto;
+ display: flex; }
+ .inner .image-holder {
+ width: 50%; }
+ .inner form {
+ width: 200%;
+ padding-top: 36px;
+ padding-left: 45px;
+ padding-right: 45px; }
+ .inner h3 {
+ text-transform: uppercase;
+ font-size: 25px;
+ font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ text-align: center;
+ margin-bottom: 28px; }
+
+.form-group {
+ display: flex; }
+ .form-group input {
+ width: 50%; }
+ .form-group input:first-child {
+ margin-right: 25px; }
+
+.form-wrapper {
+ position: relative; }
+ .form-wrapper i {
+ position: absolute;
+ bottom: 9px;
+ right: 0; }
+
+.form-control {
+ border: 1px solid #333;
+ border-top: none;
+ border-right: none;
+ border-left: none;
+ display: block;
+ width: 100%;
+ height: 30px;
+ padding: 0;
+ margin-bottom: 25px; }
+ .form-control::-webkit-input-placeholder {
+ font-size: 13px;
+ color: #070707;
+ font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ }
+ .form-control::-moz-placeholder {
+ font-size: 13px;
+ color: #070707;
+ font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ }
+ .form-control:-ms-input-placeholder {
+ font-size: 13px;
+ color: #070707;
+ font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ }
+ .form-control:-moz-placeholder {
+ font-size: 13px;
+ color: #070707;
+ font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ }
+
+select {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ cursor: pointer;
+ padding-left: 20px; }
+ select option[value=""][disabled] {
+ display: none; }
+
+button {
+ border: none;
+ width: 164px;
+ height: 51px;
+ margin: auto;
+ margin-top: 40px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ background: #fff;
+ font-size: 15px;
+ color: #070707;
+ vertical-align: middle;
+ -webkit-transform: perspective(1px) translateZ(0);
+ transform: perspective(1px) translateZ(0);
+ -webkit-transition-duration: 0.3s;
+ transition-duration: 0.3s; }
+ button i {
+ margin-left: 10px;
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0); }
+ button:hover i, button:focus i, button:active i {
+ -webkit-animation-name: hvr-icon-wobble-horizontal;
+ animation-name: hvr-icon-wobble-horizontal;
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ -webkit-animation-iteration-count: 1;
+ animation-iteration-count: 1; }
+
+@-webkit-keyframes hvr-icon-wobble-horizontal {
+ 16.65% {
+ -webkit-transform: translateX(6px);
+ transform: translateX(6px); }
+ 33.3% {
+ -webkit-transform: translateX(-5px);
+ transform: translateX(-5px); }
+ 49.95% {
+ -webkit-transform: translateX(4px);
+ transform: translateX(4px); }
+ 66.6% {
+ -webkit-transform: translateX(-2px);
+ transform: translateX(-2px); }
+ 83.25% {
+ -webkit-transform: translateX(1px);
+ transform: translateX(1px); }
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0); } }
+@keyframes hvr-icon-wobble-horizontal {
+ 16.65% {
+ -webkit-transform: translateX(6px);
+ transform: translateX(6px); }
+ 33.3% {
+ -webkit-transform: translateX(-5px);
+ transform: translateX(-5px); }
+ 49.95% {
+ -webkit-transform: translateX(4px);
+ transform: translateX(4px); }
+ 66.6% {
+ -webkit-transform: translateX(-2px);
+ transform: translateX(-2px); }
+ 83.25% {
+ -webkit-transform: translateX(1px);
+ transform: translateX(1px); }
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0); } }
+@media (max-width: 1199px) {
+ .wrapper {
+ background-position: right center; } }
+@media (max-width: 991px) {
+ .inner form {
+ padding-top: 10px;
+ padding-left: 30px;
+ padding-right: 30px; } }
+@media (max-width: 767px) {
+ .inner {
+ display: block; }
+ .inner .image-holder {
+ width: 100%; }
+ .inner form {
+ width: 200%;
+ padding: 40px 0 30px; }
+
+ button {
+ margin-top: 60px; } }
+
+/*# sourceMappingURL=signup.css.map */
diff --git a/css/signup.scss b/css/signup.scss
new file mode 100644
index 0000000..d8227b5
--- /dev/null
+++ b/css/signup.scss
@@ -0,0 +1,243 @@
+@font-face {
+ font-family: "Poppins-Regular";
+ src: url('../fonts/poppins/Poppins-Regular.ttf');
+}
+@font-face {
+ font-family: "Poppins-SemiBold";
+ src: url('../fonts/poppins/Poppins-SemiBold.ttf');
+}
+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+body {
+ font-family: "Poppins-Regular";
+ color: #333;
+ font-size: 13px;
+ margin: 0;
+}
+input, textarea, select, button {
+ font-family: "Poppins-Regular";
+ color: #333;
+ font-size: 13px;
+}
+p, h1, h2, h3, h4, h5, h6, ul {
+ margin: 0;
+}
+img {
+ max-width: 100%;
+}
+ul {
+ padding-left: 0;
+ margin-bottom: 0;
+}
+a:hover {
+ text-decoration: none;
+}
+:focus {
+ outline: none;
+}
+.wrapper {
+ min-height: 100vh;
+ background-size: cover;
+ background-repeat: no-repeat;
+ display: flex;
+ align-items: center;
+}
+.inner {
+ padding: 20px;
+ background: #fff;
+ max-width: 850px;
+ margin: auto;
+ display: flex;
+ .image-holder {
+ width: 50%;
+ }
+ form {
+ width: 50%;
+ padding-top: 36px;
+ padding-left: 45px;
+ padding-right: 45px;
+ }
+ h3 {
+ text-transform: uppercase;
+ font-size: 25px;
+ font-family: "Poppins-SemiBold";
+ text-align: center;
+ margin-bottom: 28px;
+ }
+}
+.form-group {
+ display: flex;
+ input {
+ width: 50%;
+ &:first-child {
+ margin-right: 25px;
+ }
+ }
+}
+.form-wrapper {
+ position: relative;
+ i {
+ position: absolute;
+ bottom: 9px;
+ right: 0;
+ }
+}
+.form-control {
+ border: 1px solid #333;
+ border-top: none;
+ border-right: none;
+ border-left: none;
+ display: block;
+ width: 100%;
+ height: 30px;
+ padding: 0;
+ margin-bottom: 25px;
+ &::-webkit-input-placeholder {
+ font-size: 13px;
+ color: #333;
+ font-family: "Poppins-Regular";
+ }
+ &::-moz-placeholder {
+ font-size: 13px;
+ color: #333;
+ font-family: "Poppins-Regular";
+ }
+ &:-ms-input-placeholder {
+ font-size: 13px;
+ color: #333;
+ font-family: "Poppins-Regular";
+ }
+ &:-moz-placeholder {
+ font-size: 13px;
+ color: #333;
+ font-family: "Poppins-Regular";
+ }
+}
+select {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ cursor: pointer;
+ padding-left: 20px;
+ option[value=""][disabled] {
+ display: none;
+ }
+}
+button {
+ border: none;
+ width: 164px;
+ height: 51px;
+ margin: auto;
+ margin-top: 40px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ background: #333;
+ font-size: 15px;
+ color: #fff;
+ vertical-align: middle;
+ -webkit-transform: perspective(1px) translateZ(0);
+ transform: perspective(1px) translateZ(0);
+ -webkit-transition-duration: 0.3s;
+ transition-duration: 0.3s;
+ i {
+ margin-left: 10px;
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ }
+ &:hover, &:focus, &:active {
+ i {
+ -webkit-animation-name: hvr-icon-wobble-horizontal;
+ animation-name: hvr-icon-wobble-horizontal;
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ -webkit-animation-iteration-count: 1;
+ animation-iteration-count: 1;
+ }
+ }
+}
+@-webkit-keyframes hvr-icon-wobble-horizontal {
+ 16.65% {
+ -webkit-transform: translateX(6px);
+ transform: translateX(6px);
+ }
+ 33.3% {
+ -webkit-transform: translateX(-5px);
+ transform: translateX(-5px);
+ }
+ 49.95% {
+ -webkit-transform: translateX(4px);
+ transform: translateX(4px);
+ }
+ 66.6% {
+ -webkit-transform: translateX(-2px);
+ transform: translateX(-2px);
+ }
+ 83.25% {
+ -webkit-transform: translateX(1px);
+ transform: translateX(1px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+@keyframes hvr-icon-wobble-horizontal {
+ 16.65% {
+ -webkit-transform: translateX(6px);
+ transform: translateX(6px);
+ }
+ 33.3% {
+ -webkit-transform: translateX(-5px);
+ transform: translateX(-5px);
+ }
+ 49.95% {
+ -webkit-transform: translateX(4px);
+ transform: translateX(4px);
+ }
+ 66.6% {
+ -webkit-transform: translateX(-2px);
+ transform: translateX(-2px);
+ }
+ 83.25% {
+ -webkit-transform: translateX(1px);
+ transform: translateX(1px);
+ }
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+@media (max-width: 1199px) {
+ .wrapper {
+ background-position: right center;
+ }
+}
+@media (max-width: 991px) {
+ .inner form {
+ padding-top: 10px;
+ padding-left: 30px;
+ padding-right: 30px;
+ }
+}
+@media (max-width: 767px) {
+ .inner {
+ display: block;
+ .image-holder {
+ width: 100%;
+ }
+ form {
+ width: 100%;
+ padding: 40px 0 30px;
+ }
+ }
+ button {
+ margin-top: 60px;
+ }
+}
diff --git a/signup.html b/signup.html
index 1d1cc6e..2950308 100644
--- a/signup.html
+++ b/signup.html
@@ -1,28 +1,17 @@
+
-
-
-
+
-
-
-