-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
157 lines (131 loc) · 5.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>FarmMarket</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="icon" href="images/logo.jpeg" type="image/x-icon">
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<a href="#"><img src="images/logo.jpeg" alt="farmMarket logo" style="border-radius: 50%; height: 70px; width: 70px; float: left; margin-top: 5px; margin-left: 20px;"></a>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</nav>
<section class="#home`">
<div>
</div>
<div class="login">
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">SignUp</button>
<button onclick="document.getElementById('id012').style.display='block'" style="width:auto;">Login</button>
</div>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Form">×</span>
<form class="modal-content animate" action="" method="post">
<div class="imgcontainer">
<img src="images/logo.jpeg" alt="logo" class="avatar" style="height: 100px; width: 100px;">
</div>
<div class="imgcontainer">
<h2>Sign Up Form</h2>
<p>Fill In the Fields Correctly to Create Your Account</p>
</div>
<hr>
<div class="container">
<p><label for="fname"><b>First Name</b></label>
<input type="text" placeholder="Enter First Name" name="fname" required></p>
<p><label for="lname"><b>Last Name</b></label>
<input type="text" placeholder="Enter last Name" name="lname" required></p>
<p><label for="email"><b>E-mail</b></label>
<input type="email" placeholder="example@mail.com" name="email" required></p>
<p><label for="number"><b>Phone Number</b></label>
<input type="tel" placeholder="0901-234-5678" name="number" maxlength=11 required></p>
<p><input type="radio" name="Gender"> Male
<input type="radio" name="Gender"> Female</p>
<p><label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required></p>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms, Condtions & Privacy</a>.</p>
<button type="submit">Submit</button>
</div>
<div class="Forgottenpsw">
<p>
<a href="#"><i class="fa fa-google fa-fw"></i>Sign Up with Google+ </a>
</p>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button onclick={closeAndOpenNext1()} style="width:auto;">Already Have an Account Login</button>
</div>
</form>
</div>
<div id="id012" class="modal">
<span onclick="document.getElementById('id012').style.display='none'" class="close" title="Close Form">×</span>
<form class="modal-content animate" action="" method="post">
<div class="imgcontainer">
<img src="images/logo.jpeg" alt="logo" class="avatar" style="height: 100px; width: 100px;">
</div>
<div class="imgcontainer">
<h2>Login Form</h2>
<p>Enter Your Login Details</p>
</div>
<hr>
<div class="container">
<p><label for="email"><b>E-mail or Phonenumber</b></label>
<input type="text" placeholder="Enter Your E-mail or Phonenumber" name="email" required></p>
<p><label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required></p>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<button type="submit">Submit</button>
</div>
<div class="Forgottenpsw">
<p><a href="#">Forgotten Password?</a></p>
<p><a href="#"><i class="fa fa-google fa-fw"></i>Sign in with Google </a></p>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id012').style.display='none'" class="cancelbtn">Cancel</button>
<button onclick={closeAndOpenNext()} style="width:auto;">Don't Have an Account SignUp</button>
</div>
</form>
</div>
</section>
<script>
// Get the modal
var modal = document.getElementById('id01');
var modal = document.getElementById('id012');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
//when the user clicks on don't have an account
function closeAndOpenNext() {
console.log("Called function")
document.getElementById('id01').style.display='block'
document.getElementById('id012').style.display='none'
}
// when the user clicks on Already have an account
function closeAndOpenNext1() {
console.log("Called function")
document.getElementById('id012').style.display='block'
document.getElementById('id01').style.display='none'
}
</script>
</body>
</html>