diff --git a/HTMLUserInput/icon.ico b/HTMLUserInput/icon.ico
new file mode 100644
index 0000000..54ce400
Binary files /dev/null and b/HTMLUserInput/icon.ico differ
diff --git a/HTMLUserInput/index.html b/HTMLUserInput/index.html
new file mode 100644
index 0000000..1470d60
--- /dev/null
+++ b/HTMLUserInput/index.html
@@ -0,0 +1,553 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/HTMLUserInput/newblacklogo960.png b/HTMLUserInput/newblacklogo960.png
new file mode 100644
index 0000000..25f1377
Binary files /dev/null and b/HTMLUserInput/newblacklogo960.png differ
diff --git a/HTMLUserInput/style.css b/HTMLUserInput/style.css
new file mode 100644
index 0000000..350b95a
--- /dev/null
+++ b/HTMLUserInput/style.css
@@ -0,0 +1,175 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300');
+
+body{
+ width: 100%;
+ float: left;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ background: rgb(10, 9, 9);
+ color: white;
+ font-family: 'Roboto', sans-serif;
+}
+#UpperInput{
+ width: 95%;
+ margin-left: 2.5%;
+ margin-right: 2.5;
+ float: left;
+ position: relative;
+}
+#LeftImg{
+ width: 25%;
+ float: left;
+ position: relative;
+}
+#LeftImg img{
+ width: 100%;
+ float: left;
+ display: block;
+}
+#RightSide{
+ width: 75%;
+ float: left;
+ position: relative;
+}
+.tableInput{
+ float: left;
+ width: 50%;
+ position: relative
+}
+
+#BottomInput{
+ width: 95%;
+ margin-left: 2.5%;
+ margin-right: 2.5%;
+ float: left;
+ position: relative;
+}
+
+#Trait1{
+ border-top-right-radius: 150px 90px;
+ border-bottom-left-radius: 50px;
+ width: 21%;
+ margin: 1%;
+ float: left;
+ position: relative;
+ background-color: rgba(255,254,254,0.2);
+ padding: 1%;
+}
+#Trait2{
+ border-top-left-radius: 150px 90px;
+ border-bottom-right-radius: 50px;
+ width: 21%;
+ margin: 1%;
+ float: left;
+ position: relative;
+ background-color: rgba(255,254,254,0.2);
+ padding: 1%;
+}
+#Trait4{
+ border-top-right-radius: 150px 90px;
+ border-bottom-left-radius: 50px;
+ width: 21%;
+ margin: 1%;
+ float: left;
+ position: relative;
+ background-color: rgba(255,254,254,0.2);
+ padding: 1%;
+}
+#Trait3{
+ border-top-left-radius: 150px 90px;
+ border-bottom-right-radius: 50px;
+ width: 21%;
+ margin: 1%;
+ float: left;
+ position: relative;
+ background-color: rgba(255,254,254,0.2);
+ padding: 1%;
+}
+.tr1{box-shadow: 5px 5px 5px 0 #13AB92}
+.tr2{box-shadow: -5px 5px 5px 0 #F61B35}
+.tr3{box-shadow: 5px -5px 5px 0 #41DB18}
+.tr4{box-shadow: -5px -5px 5px 0 #FF781C}
+input[type=text]{
+ color: white;
+ background-color: rgb(21, 20, 20);
+ width: 100%;
+}
+input[type=number]{
+ color: white;
+ background-color: rgb(21, 20, 20);
+ width: 100%;
+}
+/*input[type=text]{ width: 90%}*/
+select{
+ color: white;
+ width: 100%;
+ overflow: hidden;
+ background-color: rgba(255, 254, 254, 0.3);
+ border: 1px solid black;
+}
+select option {
+ color: #fff;
+ border: 0;
+ margin: 0;
+}
+
+#table{
+ width: 100%;
+ margin-top:15%;
+ margin-bottom: 0;
+ float: left;
+}
+.toRight{text-align: right}
+/*inner width*/
+.inWid{
+ width: 55px;
+}
+/*floatRight*/
+.fR{float: right}
+/*floatLeft*/
+.fL{float: left}
+.bgColorGray{background-color: rgba(255, 254, 254, 0.3)}
+/*innerRadiusBottomLeft*/
+.iRBL{border-bottom-left-radius: 20px}
+/*innerRadiusBottomRight*/
+.iRBR{border-bottom-right-radius: 20px}
+/*innerRadiusTopLeft*/
+.iRTL{border-top-left-radius: 20px}
+/*innerRadiusTopRight*/
+.iRTR{border-top-right-radius: 20px}
+/*innerRadiusBottomLeft big*/
+.iRBLb{border-bottom-left-radius: 40px}
+/*innerRadiusBottomRight big*/
+.iRBRb{border-bottom-right-radius: 40px}
+/*innerRadiusBottomLeft little*/
+.iRBLl{border-bottom-left-radius: 12px}
+/*innerRadiusBottomRight little*/
+.iRBRl{border-bottom-right-radius: 12px}
+/*innerRadiusTopLeft little*/
+.iRTLl{border-top-left-radius: 12px}
+/*innerRadiusTopRight little*/
+.iRTRl{border-top-right-radius: 12px}
+/*premade paddings*/
+.pdd0{padding: 0}
+.pdd1{padding: 1%}
+.pdd2{padding: 2%}
+.pdd3{padding: 3%}
+/*borderStyleNone*/
+.bSN{border-style: none}
+/*select Fix*/
+.selFix{
+ padding-top:6%;
+ padding-bottom:6%;
+ height: 88%;
+ font-size: 100%;
+ font-family: 'Roboto',sans-serif
+}
+.bShl{box-shadow: 0 0 1px white}
+/*traits box shadow*/
+.tr1bs{border: 1px solid #13AB92;box-shadow: 0 0 7px 0 #13AB92 inset}
+.tr2bs{border: 1px solid #F61B35;box-shadow: 0 0 7px 0 #F61B35 inset}
+.tr3bs{border: 1px solid #41DB18;box-shadow: 0 0 7px 0 #41DB18 inset}
+.tr4bs{border: 1px solid #FF781C;box-shadow: 0 0 7px 0 #FF781C inset}
+/*other box shadow*/
+.otbs{border: 1px solid white;box-shadow: 0 0 7px 0 white inset}
\ No newline at end of file