From 2856e5da210337b1533e84c729766ca33f402b71 Mon Sep 17 00:00:00 2001
From: ARJUN AGARWAL <123585663+sahhoArjun097@users.noreply.github.com>
Date: Sun, 13 Oct 2024 17:36:36 +0530
Subject: [PATCH] added signup

---
 index.html    | 91 ++++++++++++++++++++++++++++++++++-----------------
 register.html | 57 ++++++++++++++++----------------
 styles.css    | 79 +++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 167 insertions(+), 60 deletions(-)

diff --git a/index.html b/index.html
index d095baa..8a27377 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@ <h1>Waste Management</h1>
 
                 <button class="button"><a href="#about">About Me</a></button>
 
-                <button class="button"><a href="#register.html">Sign up</a></button>
+                <button class="button"><a href="register.html">Sign up</a></button>
 
                 <button class="button"><a href="#footer">Contact</a></button>
 
@@ -175,24 +175,24 @@ <h2>Discover Our Features</h2>
                 <div class="features-container">
 
 
-            </div>
-            
-          </section>
-          
+                </div>
+
+            </section>
+
             <section class="features" id="features">
-                    <div class="feature-card" id="eco-friendly">
-                        <div class="icon">
-                            <i class="fas fa-leaf"></i>
-                        </div>
-                        <h3>Eco-Friendly Tips</h3>
-                        <blockquote id="eco-fact">
-                            Did you know <span id="fact-highlight">only 9% of all plastic ever produced has been
-                                recycled?</span>
-                        </blockquote>
-                        <p>Make a difference by embracing eco-friendly practices from home. Learn tips to help manage
-                            waste efficiently and reduce your environmental impact.</p>
-                        <a href="ecotips.html" class="cta-button">Get Tips!</a>
+                <div class="feature-card" id="eco-friendly">
+                    <div class="icon">
+                        <i class="fas fa-leaf"></i>
                     </div>
+                    <h3>Eco-Friendly Tips</h3>
+                    <blockquote id="eco-fact">
+                        Did you know <span id="fact-highlight">only 9% of all plastic ever produced has been
+                            recycled?</span>
+                    </blockquote>
+                    <p>Make a difference by embracing eco-friendly practices from home. Learn tips to help manage
+                        waste efficiently and reduce your environmental impact.</p>
+                    <a href="ecotips.html" class="cta-button">Get Tips!</a>
+                </div>
                 </div>
                 <div>
                     <div class="feature-card1">
@@ -202,12 +202,12 @@ <h3>Eco-Friendly Tips</h3>
                         <h3>Real-time Monitoring</h3>
                         <p>Keep track of your waste management activities instantly, with up-to-the-minute updates.</p>
                     </div>
-                 
-                 <div class="feature-card">
-                <h3>Community Engagement</h3>
-                <p>Join community efforts to promote effective waste management.</p>
-                <a href="community.html" class="hero-btn">Join Community</a>
-            </div>
+
+                    <div class="feature-card">
+                        <h3>Community Engagement</h3>
+                        <p>Join community efforts to promote effective waste management.</p>
+                        <a href="community.html" class="hero-btn">Join Community</a>
+                    </div>
 
             </section>
 
@@ -352,6 +352,36 @@ <h4>Responsibility</h4>
 
 
 
+
+                <div class="container">
+                    <div class="form_area">
+                        <p class="title">SIGN UP</p>
+                        <form action="">
+                            <div class="form_group">
+                                <label class="sub_title" for="name">Name</label>
+                                <input placeholder="Enter your full name" class="form_style" type="text">
+                            </div>
+                            <div class="form_group">
+                                <label class="sub_title" for="email">Email</label>
+                                <input placeholder="Enter your email" id="email" class="form_style" type="email">
+                            </div>
+                            <div class="form_group">
+                                <label class="sub_title" for="password">Password</label>
+                                <input placeholder="Enter your password" id="password" class="form_style"
+                                    type="password">
+                            </div>
+                            <div>
+                                <button class="btn">SIGN UP</button>
+                                <p>Have an Account? <a class="link" href="">Login Here!</a></p><a class="link" href="">
+                                </a>
+                            </div><a class="link" href="">
+
+                            </a>
+                        </form>
+                    </div><a class="link" href="">
+                    </a>
+                </div>
+
         </main>
 
         <footer id="footer">
@@ -378,15 +408,16 @@ <h3>Our Commitment to Sustainability</h3>
                 </a>
                 <a href="#">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
-                        <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
+                        <path
+                            d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
                     </svg>
                 </a>
-                
+
                 <a href="#">
                     <box-icon type="logo" name="instagram"></box-icon>
                 </a>
 
-          </div>
+            </div>
 
             <p>&copy; 2024 Waste Management. All rights reserved.</p>
         </footer>
@@ -399,12 +430,12 @@ <h3>Our Commitment to Sustainability</h3>
     <script src="script.js"></script>
 
 
-        </div>
-        <p>&copy; 2024 Waste Management. All rights reserved.</p>
+    </div>
+    <p>&copy; 2024 Waste Management. All rights reserved.</p>
     </footer>
-      
+
     <script src="script.js"></script>
-    
+
 
 </body>
 
diff --git a/register.html b/register.html
index 0967a99..313901f 100644
--- a/register.html
+++ b/register.html
@@ -129,36 +129,35 @@
         </nav>
     </header>
     <main>
-        <div class="container-register">
-            <div class="buttons-register">
-                <button onclick="showForm(1)" class="button-active button_1">Sign up</button>
-                <button onclick="showForm(2)" class="button_1">Login</button>
-            </div>
-            <form id="form1" class="form-register button-active" onsubmit="return validateSignup()">
-                <label class="label_1">Full Name:</label>
-                <input type="text" name="fullName" class="input_1">
-                <label class="label_1">Email:</label>
-                <input type="email" name="email" class="input_1">
-                <label class="label_1">Enter Password:</label>
-                <input type="password" name="password1" class="input_1">
-                <label class="label_1">Confirm Password:</label>
-                <input type="password" name="password2" class="input_1">
-                <button type="submit" class="button_2">Create Account</button>
-                <div id="error-message" style="color: red; margin-top: 10px;"></div> <!-- Error message -->
-            </form>
-            <form id="form2" class="form-register" onsubmit="return validateLogin()">
-                <label class="label_1">Email:</label>
-                <input type="email" name="email" class="input_1">
-                <label class="label_1">Enter Password:</label>
-                <input type="password" name="password1" class="input_1">
-                <button type="submit" class="button_2">Submit</button>
+        
+      <div class="container">
+        <div class="form_area">
+            <p class="title">SIGN UP</p>
+            <form action="">
+                <div class="form_group">
+                    <label class="sub_title" for="name">Name</label>
+                    <input placeholder="Enter your full name" class="form_style" type="text">
+                </div>
+                <div class="form_group">
+                    <label class="sub_title" for="email">Email</label>
+                    <input placeholder="Enter your email" id="email" class="form_style" type="email">
+                </div>
+                <div class="form_group">
+                    <label class="sub_title" for="password">Password</label>
+                    <input placeholder="Enter your password" id="password" class="form_style"
+                        type="password">
+                </div>
+                <div>
+                    <button class="btn">SIGN UP</button>
+                    <p>Have an Account? <a class="link" href="">Login Here!</a></p><a class="link" href="">
+                    </a>
+                </div><a class="link" href="">
+
+                </a>
             </form>
-            <div class="google-button">
-                <button class="button-google">
-                    <img src="https://tse3.mm.bing.net/th/id/OIP.ozaj5qvqQWzitrBQt0xp-QHaHa?rs=1&pid=ImgDetMain" alt="Google"> Continue with Google
-                </button>
-            </div>
-        </div>
+        </div><a class="link" href="">
+        </a>
+    </div>
     </main>
     
       
diff --git a/styles.css b/styles.css
index 3e6ce6e..8dbcb21 100644
--- a/styles.css
+++ b/styles.css
@@ -1784,4 +1784,81 @@ footer.dark-mode {
   cursor: pointer;
   user-select: none;
  }
- 
\ No newline at end of file
+ 
+
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.form_area {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: #eaf9e7;
+  height: auto;
+  width: auto;
+  border: 2px solid #264143;
+  border-radius: 20px;
+  box-shadow: 3px 4px 0px 1px #f7faf7;
+}
+
+.title {
+  color: #418270;
+  font-weight: 900;
+  font-size: 1.5em;
+  margin-top: 20px;
+}
+
+.sub_title {
+  font-weight: 600;
+  margin: 5px 0;
+}
+
+.form_group {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  margin: 10px;
+}
+
+.form_style {
+  outline: none;
+  border: 2px solid #264143;
+  box-shadow: 3px 4px 0px 1px #94cf3a;
+  width: 420px;
+  padding: 20px;
+  border-radius: 4px;
+  font-size: 15px;
+}
+
+.form_style:focus, .btn:focus {
+  transform: translateY(4px);
+  box-shadow: 1px 2px 0px 0px #bfe98c;
+}
+
+.btn {
+  padding: 15px;
+  margin: 25px 0px;
+  width: 290px;
+  font-size: 15px;
+  background: #DE5499;
+  border-radius: 10px;
+  font-weight: 800;
+  box-shadow: 3px 3px 0px 0px #E99F4C;
+}
+
+.btn:hover {
+  opacity: .9;
+}
+
+.link {
+  font-weight: 800;
+  color: #264143;
+  padding: 5px;
+}
\ No newline at end of file