Add button ,input and text area, Add register files and Login files

components/register.html

@@ -0,0 +1,68 @@
+
+<section class="Register">
+  <div class="Registersignup">
+  <div class="Reg__container">
+    <div class="Reg__img">
+      <div class="Reg__logo-box">
+        <img src="assets/icons/Vectorimg.png" alt="" class="logo"/>
+        <img src="assets/icons/Digit.png" alt="" class="text"/>
+      </div>
+      <!-- <div>
+<img src="/assets/images/wes-hicks-4-EeTnaC1S4-unsplash 1.png" alt="wes photo">
+</div> -->
+      <div class="Rigister__transparent">
+        <h1 class="Rigister__title">Tips!!!</h1>
+        <p class="Rigister__desc">We offer a complete package of high-quality digital marketing services at affordable
+          prices. Call now for a fast quote!</p>
+      </div>
+    </div>
+    <div class="form-container">
+    <h1>Create Account</h1>
+    <p> Enter your details to get start your track
+      started with us.</p>
+
+    <div class="container">
+      <form action="form" class="">
+            <label for="fname">Name:</label><br>
+            <input type="text" id="fname" name="fname" value="John"><br>
+            <label for="lname">Email:</label><br>
+            <input type="text" id="email" name="email" placeholder="Your email..">
+            <label for="fname">Phone Number:</label><br>
+            <input id="phone number" name="phone number"><br>
+            <label for="lname">Address:</label><br>
+            <input type="text" id="address" name="address" placeholder="  Your address..">
+            <div>
+              <label for="gender"><b>Gender</b></label>
+              <input type="gender" id="gender" name="gender" placeholder=" gender..">
+
+                <label for="age range">Age Range
+                  <input id="age range" name="age range">
+                </label>
+          </div>
+          <label for="fname"><b>Track</b>:</label><br>
+          <input type="text" id="track" name="track" placeholder="Track.."><br>
+          <div class="time-e">
+            <div class="employ">
+          <label for="time dedication"><b>Time Dedication:</b></label>
+            <label for="employment status"><b>Employment Status:</b></label>
+          </div>
+          <div class="time-dedication">
+            <input type="time dedication" id="time dedication" name="time dedication" placeholder="Time Dedication..">
+            <input type="employment status" id="employment status" name="employment status"
+              placeholder="employment status..">
+            </div>
+            </div>
+            <input type="submit" value="Register  ">
+      </form>
+
+      <p>
+        Already have an account?
+        <span>
+          <a href="/login" class="login-link" id="register-on-login">Login here</a>
+        </span>
+      </p>
+    </div>
+  </div>
+    </div>
+  </div>
+  </section>

css/reg.css

@@ -0,0 +1,145 @@
+body {
+  font-family: Arial;
+}
+
+input[type=text] {
+  width: 50%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  display: block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+input[type=submit] {
+  width: 50%;
+  background-color: blue;
+  color: white;
+  padding: 14px 20px;
+  margin: 8px 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+input[type=submit]:hover {
+  background-color: blue;
+}
+
+div.container {
+  border-radius: 5px;
+  background-color: #f2f2f2;
+  padding: 20px;
+}
+
+.Registersignup{
+  border: 2px red solid; 
+}
+
+ .Reg__img{
+  background: url("/assets/images/wes-hicks-4-EeTnaC1S4-unsplash\ 1.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 795px;
+  height: 983px;
+  position: relative; }
+
+.Reg__logo-box {
+  display: flex;
+  margin-left: 6.2em;
+  gap: 1em;
+  padding-top: 2em;
+  width: 70px; }
+
+.lRigister__transparen {
+  width: 602px;
+  height: 192px;
+  position: absolute;
+  left: 6.2em;
+  background: #FFFFFF;
+  opacity: 0.4;
+  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  filter: blur(0.5px); }
+
+.Rigister__title {
+  width: 88px;
+  height: 40px;
+  margin-left: 1.2em;
+  margin-top: 1em;
+  font-weight: 700;
+  font-size: 2em;
+  line-height: 40px; }
+  @media (min-width: 481px) and (max-width: 700px) {
+    .Rigister__title {
+      width: 50px; } }
+
+.Rigister__desc {
+  margin-left: 2em;
+  margin-top: 10px;
+  width: 528px;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 30px; }
+
+  .Reg__container{
+    display: flex;
+    flex-direction: row;
+    gap: 40px;
+    background: #F5F5F5;
+  }
+
+  .form-container{
+    display: flex;
+    flex-direction: column;
+  }
+
+  .time-e{
+     display: flex;
+     flex-direction: column;
+     gap: 20px;
+  }
+
+  .employ{
+  display: flex;
+  gap: 20px;
+  }
+
+  .time-dedication{
+    display: flex;
+    gap: 20px;
+  }
+
+  .Rigister__transparent{
+    /* background: white;
+    opacity: 0.4;
+    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.08);
+    filter: blur(1px);
+    border-radius: 12px; */
+
+    position: absolute;
+    width: 602px;
+    height: 192px;
+    left: 102px;
+    top: 647px;
+    background: #FFFFFF;
+    opacity: 0.4;
+    box-shadow: 2px 2px 15px rgb(0 0 0 / 8%);
+    filter: blur(1px);
+    border-radius: 12px;
+  }
+
+  .Rigister__desc{
+    font-family: 'Mulish';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 30px;
+
+    top: 50%;
+    /* or 150% */
+
+
+    color: black;
+  }

register.html

@@ -4,10 +4,11 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/reg.css" />
     <title>Digit Register Page</title>
   </head>
   <body>
-    <h1>Hello Register Page!</h1>
+    <div data-include="Register"></div>
+    <script src="./js/script.js"></script>
   </body>
 </html>