Merge pull request #7 from Dev-Qwerty/frontend-main

feat: create sign up page

client/src/App.vue

@@ -1,17 +1,18 @@
 <template>
   <div id="app">
-    <LMain />
+    <SMain />
   </div>
 </template>
 
 <script>
 //import Main from './components/Home/Main.vue'
-import LMain from './components/Login/LMain.vue'
+//import LMain from './components/Login/LMain.vue'
+import SMain from './components/Signup/SMain.vue'
 
 export default {
   name: 'app',
   components: {
-    LMain,
+    SMain,
   }
 }
 </script>

client/src/components/Login/LStackBox.vue

@@ -4,7 +4,6 @@
     <p id="one">Hello let's get started</p>
     <div class="wrapper">
       <div class="col googleIcon"></div>
-      <div class="col fbookIcon"></div>
     </div>
     <p id="two">Login with your social network</p>
   </div>
@@ -38,7 +37,7 @@
     font-size: 14px;
   }
   .wrapper {
-    width: 55%;
+    width: 25%;
     margin: 0px;
     padding-left: 0px;
     padding-right: 5px;
@@ -48,7 +47,7 @@
   }
   .col {
     margin-right: 15px;
-    height: 28px;
+    height: 25px;
     background-blend-mode: overlay;
     background-repeat: no-repeat;
     background-position: center;
@@ -58,9 +57,6 @@
   .col.googleIcon {
     background-image: url('../../assets/Gicon.jpg');
   }
-  .col.fbookIcon {
-    background-image: url('../../assets/Fb.jpg');
-  }
   #two {
     margin-top: 5px;
     color: #aaa;

client/src/components/Signup/SMain.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <Nav />
+    <Swrapper />
+    <Sbox />
+    <SignStackBox />
+  </div>
+</template>
+
+<script>
+import Nav from '@/components/Home/Navbar'
+import Swrapper from '@/components/Signup/Swrapper'
+import Sbox from '@/components/Signup/Sbox'
+import SignStackBox from '@/components/Signup/SignStackBox'
+
+export default {
+  components: {
+    Nav,
+    Swrapper,
+    Sbox,
+    SignStackBox
+  }
+}
+</script>

client/src/components/Signup/Sbox.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class = "box">
+    <form action="" method="POST">
+      <div>
+        <input class="input-box" type="text" name="uname" placeholder="USERNAME">
+      </div>
+      <div>
+        <input class="input-box" type="text" name="email" placeholder="EMAIL">
+      </div>      
+      <div>
+        <input class="input-box" type="Password" name="password" placeholder="PASSWORD">
+      </div>
+      <div>
+        <label>Keep me signed in</label>
+        <input type="checkbox" name="check1" value="">
+      </div>
+      <div>
+        <input class="sbutton" type="submit" name="" value="Sign up">
+      </div>
+    </form>
+
+  </div>
+</template>
+
+<style scoped>    
+  .box {
+    width: 33%;
+    height: 65%;
+    background-color: #fff;
+    top: 63%;
+    left: 50%;
+    position: absolute;
+    box-sizing: border-box;
+    transform: translate(-50%, -50%);
+    padding-top: 100px;
+    padding-bottom: 5px;
+    padding-left: 50px;
+    padding-right: 50px;
+    border-radius: 10px;
+    border: none;
+    box-shadow: 3px 3px #ceced1
+  }
+  input[type="submit"] {
+    width: 100%;
+    background-color: #000;
+    border: none;
+    color: #fff;
+    height: 40px;
+    opacity: 0.9;
+    border-radius: 3px;
+    box-shadow: 5px 5px #eeefef;
+    font-size: 19px;
+  }
+  .input-box {
+    font-size: 14px;
+    width: 100%;
+    padding-left: 15px;
+    margin-top: 30px;
+    height: 50px;
+    border: 1px solid #dedee0;
+    box-shadow: 4px 4px #eeefef;
+  }
+  .box label {
+    font-size: 14px;
+    padding-top: 15px;
+    padding-right: 12px;
+    padding-bottom: 15px;
+  }
+</style>

client/src/components/Signup/SignStackBox.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class = "box">
+    <h4>Sign up</h4>
+    <p id="one">Hello let's get started</p>
+    <div class="wrapper">
+      <div class="col googleIcon"></div>
+    </div>
+    <p id="two">Sign up with your social network</p>
+  </div>
+</template>
+
+<style scoped>    
+  .box {
+    width: 27%;
+    height: 165px;
+    background-color: #000;
+    color: #fff;
+    opacity: 0.9;
+    top: 32%;
+    left: 50%;
+    position: absolute;
+    box-sizing: border-box;
+    transform: translate(-50%, -50%);
+    padding: 0px;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #000;
+    box-shadow: 7px 7px #eeefef;
+  }
+  .box h4 {
+    font-size: 23px;
+    color: #fff;
+    margin-bottom: 2px;
+  }
+  #one {
+    color: #aaa;
+    font-size: 14px;
+  }
+  .wrapper {
+    width: 25%;
+    margin: 0px;
+    padding-left: 0px;
+    padding-right: 5px;
+    padding-bottom: 0px;
+    padding-top: 0px;    
+    display: flex;
+  }
+  .col {
+    margin-right: 15px;
+    height: 25px;
+    background-blend-mode: overlay;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    border-radius: 2px; 
+  }  
+  .col.googleIcon {
+    background-image: url('../../assets/Gicon.jpg');
+  }
+  #two {
+    margin-top: 5px;
+    color: #aaa;
+    font-size: 10px;
+  }
+</style>

client/src/components/Signup/Swrapper.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="wrapper">
+  </div>  
+</template>
+
+<style scoped>
+  .wrapper {
+    width: 100%;
+    height: 648px;
+    background-color: #eeefef;
+  }
+</style>