Skip to content

Commit

Permalink
added signup
Browse files Browse the repository at this point in the history
  • Loading branch information
@sahhoArjun097
sahhoArjun097 committed Oct 13, 2024
1 parent fc2446f commit 2856e5d
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 60 deletions.
91 changes: 61 additions & 30 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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">
Expand All @@ -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>

Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>

Expand Down
57 changes: 28 additions & 29 deletions register.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>


Expand Down
79 changes: 78 additions & 1 deletion styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1784,4 +1784,81 @@ footer.dark-mode {
cursor: pointer;
user-select: none;
}




.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;
}

0 comments on commit 2856e5d

Please sign in to comment.