Commit
•
3a2f8cb
1
Parent(s):
e525c15
Upload 9 files
Browse files- Predict Disease.html +110 -0
- Prescription.html +39 -0
- about.html +158 -0
- background.jpg +0 -0
- index.html +116 -19
- login form.html +64 -0
- logo.png +0 -0
- new user registration form.html +53 -0
- style.css +93 -28
Predict Disease.html
ADDED
@@ -0,0 +1,110 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<link rel="icon" type = "image/x-icon" href="logo.png">
|
7 |
+
<title>Heart Disease Risk Predictor</title>
|
8 |
+
<style>
|
9 |
+
body {
|
10 |
+
font-family: Arial, sans-serif;
|
11 |
+
background-color: #f5f5f5;
|
12 |
+
}
|
13 |
+
.container {
|
14 |
+
width: 400px;
|
15 |
+
margin: 50px auto;
|
16 |
+
padding: 20px;
|
17 |
+
background-color: #fff;
|
18 |
+
border-radius: 8px;
|
19 |
+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
20 |
+
}
|
21 |
+
h2 {
|
22 |
+
text-align: center;
|
23 |
+
color: #007bff;
|
24 |
+
}
|
25 |
+
input[type="number"] {
|
26 |
+
width: 100%;
|
27 |
+
padding: 10px;
|
28 |
+
margin-bottom: 15px;
|
29 |
+
border: 1px solid #ccc;
|
30 |
+
border-radius: 4px;
|
31 |
+
box-sizing: border-box;
|
32 |
+
}
|
33 |
+
button {
|
34 |
+
width: 100%;
|
35 |
+
padding: 12px;
|
36 |
+
background-color: #007bff;
|
37 |
+
color: #fff;
|
38 |
+
border: none;
|
39 |
+
border-radius: 4px;
|
40 |
+
cursor: pointer;
|
41 |
+
}
|
42 |
+
#result {
|
43 |
+
margin-top: 20px;
|
44 |
+
padding: 10px;
|
45 |
+
border: 1px solid #ccc;
|
46 |
+
border-radius: 4px;
|
47 |
+
background-color: #f9f9f9;
|
48 |
+
}
|
49 |
+
</style>
|
50 |
+
</head>
|
51 |
+
<body>
|
52 |
+
|
53 |
+
<div class="container">
|
54 |
+
<h2>Heart Disease Risk Predictor</h2>
|
55 |
+
<input type="number" id="age" placeholder="Age">
|
56 |
+
<input type="number" id="education" placeholder="Education Level">
|
57 |
+
<input type="number" id="Gender" placeholder="Gender">
|
58 |
+
<input type="number" id="issmoking" placeholder="Smoking">
|
59 |
+
<input type="number" id="cigsPerDay" placeholder="Cigarettes Per Day">
|
60 |
+
<input type="number" id="BPMeds" placeholder="Blood Pressure Medications">
|
61 |
+
<input type="number" id="prevalentStroke" placeholder="Prevalent Stroke">
|
62 |
+
<input type="number" id="prevalentHyp" placeholder="Prevalent Hypertension">
|
63 |
+
<input type="number" id="diabetes" placeholder="Diabetes">
|
64 |
+
<input type="number" id="totChol" placeholder="Total Cholesterol">
|
65 |
+
<input type="number" id="sysBP" placeholder="Systolic Blood Pressure">
|
66 |
+
<input type="number" id="diaBP" placeholder="Diastolic Blood Pressure">
|
67 |
+
<input type="number" id="BMI" placeholder="Body Mass Index">
|
68 |
+
<input type="number" id="heartRate" placeholder="Heart Rate">
|
69 |
+
<input type="number" id="glucose" placeholder="Glucose">
|
70 |
+
<button onclick="predictRisk()">Predict Risk</button>
|
71 |
+
<div id="result"></div>
|
72 |
+
</div>
|
73 |
+
|
74 |
+
<script>
|
75 |
+
function predictRisk() {
|
76 |
+
// Collect input values
|
77 |
+
var age = parseFloat(document.getElementById('age').value);
|
78 |
+
var education = parseFloat(document.getElementById('education').value);
|
79 |
+
var Gender = parseFloat(document.getElementById('Gender').value);
|
80 |
+
var issmoking = parseFloat(document.getElementById('issmoking').value);
|
81 |
+
var cigsPerDay = parseFloat(document.getElementById('cigsPerDay').value);
|
82 |
+
var BPMeds = parseFloat(document.getElementById('BPMeds').value);
|
83 |
+
var prevalentStroke = parseFloat(document.getElementById('prevalentStroke').value);
|
84 |
+
var prevalentHyp = parseFloat(document.getElementById('prevalentHyp').value);
|
85 |
+
var diabetes = parseFloat(document.getElementById('diabetes').value);
|
86 |
+
var totChol = parseFloat(document.getElementById('totChol').value);
|
87 |
+
var sysBP = parseFloat(document.getElementById('sysBP').value);
|
88 |
+
var diaBP = parseFloat(document.getElementById('diaBP').value);
|
89 |
+
var BMI = parseFloat(document.getElementById('BMI').value);
|
90 |
+
var heartRate = parseFloat(document.getElementById('heartRate').value);
|
91 |
+
var glucose = parseFloat(document.getElementById('glucose').value);
|
92 |
+
|
93 |
+
// Make API call to your ML model and get the prediction
|
94 |
+
// For demonstration purposes, let's assume the prediction is 0 or 1
|
95 |
+
var prediction = Math.round(Math.random());
|
96 |
+
|
97 |
+
// Display the prediction result
|
98 |
+
var resultElement = document.getElementById('result');
|
99 |
+
if (prediction === 1) {
|
100 |
+
resultElement.innerHTML = '<strong>Result:</strong> High risk of heart disease';
|
101 |
+
resultElement.style.color = '#ff0000'; // Red color for high risk
|
102 |
+
} else {
|
103 |
+
resultElement.innerHTML = '<strong>Result:</strong> Low risk of heart disease';
|
104 |
+
resultElement.style.color = '#008000'; // Green color for low risk
|
105 |
+
}
|
106 |
+
}
|
107 |
+
</script>
|
108 |
+
|
109 |
+
</body>
|
110 |
+
</html>
|
Prescription.html
ADDED
@@ -0,0 +1,39 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
|
2 |
+
<!DOCTYPE html>
|
3 |
+
<html lang="en">
|
4 |
+
<head>
|
5 |
+
<meta charset="UTF-8">
|
6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7 |
+
<title>Heart Disease Information</title>
|
8 |
+
<link rel="icon" type = "image/x-icon" href="logo.png">
|
9 |
+
<style>
|
10 |
+
|
11 |
+
</style>
|
12 |
+
</head>
|
13 |
+
<body
|
14 |
+
style= "background-color: Lightskyblue; color: black;">
|
15 |
+
<h1>Understanding Heart Disease</h1>
|
16 |
+
<p>Heart disease is a leading cause of death worldwide. It's important to be aware of the risk factors and how to maintain a healthy heart.</p>
|
17 |
+
|
18 |
+
<h2>Risk Factors</h2>
|
19 |
+
<ul>
|
20 |
+
<li>High blood pressure</li>
|
21 |
+
<li>High cholesterol</li>
|
22 |
+
<li>Diabetes</li>
|
23 |
+
<li>Smoking</li>
|
24 |
+
<li>Family history of heart disease</li>
|
25 |
+
<li>Unhealthy diet</li>
|
26 |
+
<li>Lack of physical activity</li>
|
27 |
+
</ul>
|
28 |
+
|
29 |
+
<h2>Prevention and Treatment</h2>
|
30 |
+
<p>There are many things you can do to reduce your risk of heart disease. These include:</p>
|
31 |
+
<ul>
|
32 |
+
<li>Eating a healthy diet low in saturated fat and cholesterol</li>
|
33 |
+
<li>Maintaining a healthy weight</li>
|
34 |
+
<li>Exercising regularly</li>
|
35 |
+
<li>Managing stress</li>
|
36 |
+
<li>Following your doctor's recommendations for medication</li>
|
37 |
+
</ul>
|
38 |
+
</body>
|
39 |
+
</html>
|
about.html
ADDED
@@ -0,0 +1,158 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html>
|
3 |
+
<head>
|
4 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
5 |
+
<link rel="icon" type = "image/x-icon" href="logo.png">
|
6 |
+
<title> About us</title>
|
7 |
+
<style>
|
8 |
+
body {
|
9 |
+
font-family: Arial, Helvetica, sans-serif;
|
10 |
+
margin: 0;
|
11 |
+
}
|
12 |
+
|
13 |
+
html {
|
14 |
+
box-sizing: border-box;
|
15 |
+
}
|
16 |
+
|
17 |
+
*, *:before, *:after {
|
18 |
+
box-sizing: inherit;
|
19 |
+
}
|
20 |
+
|
21 |
+
.column {
|
22 |
+
float: left;
|
23 |
+
width: 25%;
|
24 |
+
margin-bottom: 16px;
|
25 |
+
padding: 0 8px;
|
26 |
+
}
|
27 |
+
|
28 |
+
.card {
|
29 |
+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
30 |
+
margin: 8px;
|
31 |
+
}
|
32 |
+
|
33 |
+
.about-section {
|
34 |
+
padding: 50px;
|
35 |
+
text-align: center;
|
36 |
+
background-color: #474e5d;
|
37 |
+
color: white;
|
38 |
+
}
|
39 |
+
|
40 |
+
.container {
|
41 |
+
padding: 0 16px;
|
42 |
+
}
|
43 |
+
|
44 |
+
.container::after, .row::after {
|
45 |
+
content: "";
|
46 |
+
clear: both;
|
47 |
+
display: table;
|
48 |
+
}
|
49 |
+
|
50 |
+
.title {
|
51 |
+
color: blue;
|
52 |
+
}
|
53 |
+
|
54 |
+
.button {
|
55 |
+
border: none;
|
56 |
+
outline: 0;
|
57 |
+
display: inline-block;
|
58 |
+
padding: 8px;
|
59 |
+
color: white;
|
60 |
+
background-color: #000;
|
61 |
+
text-align: center;
|
62 |
+
cursor: pointer;
|
63 |
+
width: 100%;
|
64 |
+
}
|
65 |
+
|
66 |
+
.button:hover {
|
67 |
+
background-color: #555;
|
68 |
+
}
|
69 |
+
|
70 |
+
@media screen and (max-width: 650px) {
|
71 |
+
.column {
|
72 |
+
width: 100%;
|
73 |
+
display: block;
|
74 |
+
}
|
75 |
+
}
|
76 |
+
</style>
|
77 |
+
</head>
|
78 |
+
<body style="background-color: lime;">
|
79 |
+
|
80 |
+
<div class="about-section">
|
81 |
+
<h1>About Us</h1>
|
82 |
+
|
83 |
+
<p>Welcome to HeartGuardian, your trusted ally in heart health. Our advanced predictor and chatbot combine
|
84 |
+
cutting-edge technology and medical expertise to empower you in managing heart disease risk. Discover
|
85 |
+
personalized insights and guidance for a healthier heart journey.</p>
|
86 |
+
</div>
|
87 |
+
|
88 |
+
<h2 style="text-align:center">Our Team</h2>
|
89 |
+
<div class="row">
|
90 |
+
<div class="column">
|
91 |
+
<div class="card">
|
92 |
+
<!-- <img src="/w3images/team1.jpg" alt="Jane" style="width:100%"> -->
|
93 |
+
<div class="container">
|
94 |
+
<h2>Pravesh Kumar</h2>
|
95 |
+
|
96 |
+
<p class="title">CEO & Founder</p>
|
97 |
+
<p> Working in Tata Consultancy Services, Graduated From Lovely Professional University Punjab.</p>
|
98 |
+
<p> Email Id-<br>praveshkumar.my255@gmail.com</p>
|
99 |
+
<p> mob. No.-8126853262</p>
|
100 |
+
<p><button class="button">Contact</button></p>
|
101 |
+
|
102 |
+
</div>
|
103 |
+
</div>
|
104 |
+
</div>
|
105 |
+
|
106 |
+
<div class="column">
|
107 |
+
<div class="card">
|
108 |
+
<!-- <img src="/w3images/team2.jpg" alt="Mike" style="width:100%"/> -->
|
109 |
+
<div class="container">
|
110 |
+
<h2>Sahil Raj</h2>
|
111 |
+
|
112 |
+
<p class="title">Data Scientist</p>
|
113 |
+
<p> Working in Honda Company, Graduated From Lovely Professional University Punjab.</p>
|
114 |
+
<p> Email Id-<br>razsahil121@gmail.com</p>
|
115 |
+
<p> mob. No.-9515395437</p>
|
116 |
+
<p><button class="button">Contact</button></p>
|
117 |
+
|
118 |
+
</div>
|
119 |
+
</div>
|
120 |
+
</div>
|
121 |
+
|
122 |
+
|
123 |
+
<div class="column">
|
124 |
+
<div class="card">
|
125 |
+
<!-- <img src="/w3images/team2.jpg" alt="Mike" style="width:100%"/> -->
|
126 |
+
<div class="container">
|
127 |
+
<h2>Gautam Kumar</h2>
|
128 |
+
|
129 |
+
<p class="title">Manager & Art Director</p>
|
130 |
+
<p> Working in Capgemini India, Graduated From Lovely Professional University Punjab.</p>
|
131 |
+
<p> Email Id-<br>krgauti678@gmail.com</p>
|
132 |
+
<p> mob. No.-9717618577</p>
|
133 |
+
<p><button class="button">Contact</button></p>
|
134 |
+
|
135 |
+
</div>
|
136 |
+
</div>
|
137 |
+
</div>
|
138 |
+
|
139 |
+
|
140 |
+
<div class="column">
|
141 |
+
<div class="card">
|
142 |
+
<!-- <img src="/w3images/team3.jpg" alt="John" style="width:100%"> -->
|
143 |
+
<div class="container">
|
144 |
+
<h2>Satyanand Kumar</h2>
|
145 |
+
|
146 |
+
<p class="title">Designer</p>
|
147 |
+
<p> Working in RINEX Technologies, Graduated From Lovely Professional University Punjab.</p>
|
148 |
+
<p> Email Id-<br>9771satyanandsharma@gmail.com</p>
|
149 |
+
<p> mob. No.-9958422947</p>
|
150 |
+
<p><button class="button">Contact</button></p>
|
151 |
+
|
152 |
+
</div>
|
153 |
+
</div>
|
154 |
+
</div>
|
155 |
+
</div>
|
156 |
+
|
157 |
+
</body>
|
158 |
+
</html>
|
background.jpg
ADDED
![]() |
index.html
CHANGED
@@ -1,19 +1,116 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7 |
+
<link rel="icon" type = "image/x-icon" href="logo.png">
|
8 |
+
<title> Heart Disease Prediction System</title>
|
9 |
+
<style>
|
10 |
+
.inner-div {
|
11 |
+
/* Style the inner div */
|
12 |
+
width: 550px;
|
13 |
+
height: 200px;
|
14 |
+
background-color: #555;
|
15 |
+
position: absolute;
|
16 |
+
bottom: 0;
|
17 |
+
right: 0;
|
18 |
+
}
|
19 |
+
|
20 |
+
|
21 |
+
nav {
|
22 |
+
text-align: center;
|
23 |
+
}
|
24 |
+
.menu {
|
25 |
+
display: inline-block;
|
26 |
+
|
27 |
+
}
|
28 |
+
.menu>li {
|
29 |
+
float: left;
|
30 |
+
|
31 |
+
width: 170px;
|
32 |
+
height: 30px;
|
33 |
+
line-height: 30px;
|
34 |
+
background: rgba(0, 0, 0, 0.7);
|
35 |
+
cursor: pointer;
|
36 |
+
font-size: 20px;
|
37 |
+
text-decoration: none;
|
38 |
+
}
|
39 |
+
.sub-menu {
|
40 |
+
transform: scale(0);
|
41 |
+
transform-origin: top center;
|
42 |
+
transition: all 300ms ease-in-out;
|
43 |
+
text-decoration: none;
|
44 |
+
}
|
45 |
+
.sub-menu li {
|
46 |
+
font-size: 14px;
|
47 |
+
background: rgba(0, 0, 0, 0.8);
|
48 |
+
padding: 8px 0;
|
49 |
+
color: white;
|
50 |
+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
51 |
+
transform: scale(0);
|
52 |
+
transform-origin: top center;
|
53 |
+
transition: all 300ms ease-in-out;
|
54 |
+
text-decoration: none;
|
55 |
+
}
|
56 |
+
.sub-menu li:last-child {
|
57 |
+
border-bottom: 0;
|
58 |
+
}
|
59 |
+
.sub-menu li:hover {
|
60 |
+
background: black;
|
61 |
+
}
|
62 |
+
.menu>li:hover .sub-menu li {
|
63 |
+
transform: scale(1);
|
64 |
+
}
|
65 |
+
.menu>li:hover .sub-menu {
|
66 |
+
transform: scale(1);
|
67 |
+
}
|
68 |
+
</style>
|
69 |
+
|
70 |
+
|
71 |
+
|
72 |
+
</head>
|
73 |
+
<body style="background-color: black;">
|
74 |
+
|
75 |
+
<div class="main" style="border: 3px solid black; width: 100%; height: 100px;">
|
76 |
+
|
77 |
+
|
78 |
+
<div class="div1" style="border: 1px solid black; width: 100%; height: 30px;">
|
79 |
+
|
80 |
+
|
81 |
+
<div style="border: 1px solid black; width:100%; height: 30px; background-color: black; margin: -15px;">
|
82 |
+
<nav>
|
83 |
+
<ul class="menu">
|
84 |
+
<li><a href="#" style="color: gold;">home</a></li>
|
85 |
+
<li><a href="Prescription.html"style="color: gold;">Services</a></li>
|
86 |
+
|
87 |
+
<li><a href="Predict Disease.html" style="color: gold;"> Predict Disease</a> </li>
|
88 |
+
<li><a href="about.html" style="color: gold;">about us</a></li>
|
89 |
+
<li class="class1"><a href="login form.html" style="color: gold;">login</a></li>
|
90 |
+
<li class="class2" ><a href="new user registration form.html" style="color: gold;">new user</a></li>
|
91 |
+
</ul>
|
92 |
+
</nav>
|
93 |
+
</div>
|
94 |
+
</div>
|
95 |
+
|
96 |
+
<div class="div2" style="border: 1px solid black; width: 100%;">
|
97 |
+
<div style=" background-color: darkolivegreen; color: limegreen; height: 40px; font-size: 25px;"> <marquee scrollamount="12" style="margin: 5px;"> HEART DISEASE PREDICTION SYSTEM</marquee></div>
|
98 |
+
</div>
|
99 |
+
<div style= "
|
100 |
+
background-image: url('background.jpg');
|
101 |
+
background-size: cover;
|
102 |
+
background-position: center;
|
103 |
+
background-repeat: no-repeat;
|
104 |
+
width: 500px;
|
105 |
+
height: 300px;
|
106 |
+
height: 480%; width: 100%; color: blue;">
|
107 |
+
<div class="inner-div">
|
108 |
+
|
109 |
+
<!-- Your content goes here -->
|
110 |
+
</div>
|
111 |
+
</div>
|
112 |
+
|
113 |
+
|
114 |
+
|
115 |
+
</body>
|
116 |
+
</html>
|
login form.html
ADDED
@@ -0,0 +1,64 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html>
|
3 |
+
<head>
|
4 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
5 |
+
<title> Login Page </title>
|
6 |
+
<style>
|
7 |
+
Body {
|
8 |
+
font-family: Calibri, Helvetica, sans-serif;
|
9 |
+
background-color: pink;
|
10 |
+
}
|
11 |
+
button {
|
12 |
+
background-color: #4CAF50;
|
13 |
+
width: 100%;
|
14 |
+
color: orange;
|
15 |
+
padding: 15px;
|
16 |
+
margin: 10px 0px;
|
17 |
+
border: none;
|
18 |
+
cursor: pointer;
|
19 |
+
}
|
20 |
+
form {
|
21 |
+
border: 3px solid #f1f1f1;
|
22 |
+
}
|
23 |
+
input[type=text], input[type=password] {
|
24 |
+
width: 100%;
|
25 |
+
margin: 8px 0;
|
26 |
+
padding: 12px 20px;
|
27 |
+
display: inline-block;
|
28 |
+
border: 2px solid green;
|
29 |
+
box-sizing: border-box;
|
30 |
+
}
|
31 |
+
button:hover {
|
32 |
+
opacity: 0.7;
|
33 |
+
}
|
34 |
+
.cancelbtn {
|
35 |
+
width: auto;
|
36 |
+
padding: 10px 18px;
|
37 |
+
margin: 10px 5px;
|
38 |
+
}
|
39 |
+
|
40 |
+
|
41 |
+
.container {
|
42 |
+
padding: 25px;
|
43 |
+
background-color: lightblue;
|
44 |
+
}
|
45 |
+
</style>
|
46 |
+
</head>
|
47 |
+
<body>
|
48 |
+
<center> <h1> Student Login Form </h1> </center>
|
49 |
+
<form>
|
50 |
+
<div class="container">
|
51 |
+
<label>Username : </label>
|
52 |
+
<input type="text" placeholder="Enter Email Id/Mobile Number" name="username" required>
|
53 |
+
<label>Password : </label>
|
54 |
+
<input type="password" placeholder="Enter Password" name="password" required>
|
55 |
+
<button type="submit">Login</button>
|
56 |
+
<input type="checkbox" checked="checked"> Remember me
|
57 |
+
<button type="button" class="cancelbtn"> Cancel</button>
|
58 |
+
Forgot <a href="#"> password? </a>
|
59 |
+
</div>
|
60 |
+
</form>
|
61 |
+
</body>
|
62 |
+
</html>
|
63 |
+
|
64 |
+
|
logo.png
ADDED
![]() |
new user registration form.html
ADDED
@@ -0,0 +1,53 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<Html>
|
2 |
+
<head>
|
3 |
+
<link rel="icon" type = "image/x-icon" href="logo.png">
|
4 |
+
<title>
|
5 |
+
Registration Page
|
6 |
+
</title>
|
7 |
+
</head>
|
8 |
+
<body bgcolor="Lightskyblue">
|
9 |
+
<br>
|
10 |
+
<br>
|
11 |
+
<form>
|
12 |
+
<fieldset>
|
13 |
+
<legend style="color: 3px solid olive;"> New user registration</legend>
|
14 |
+
<label> Firstname </label>
|
15 |
+
<input type="text" name="firstname" placeholder="Enter first name" size="15"/> <br> <br>
|
16 |
+
|
17 |
+
<label> Lastname: </label>
|
18 |
+
<input type="text" name="lastname" placeholder="Enter last name" size="15"/> <br> <br>
|
19 |
+
|
20 |
+
Date of Birth: <input type = "date"> <br>
|
21 |
+
Gender :
|
22 |
+
</label><br>
|
23 |
+
|
24 |
+
<input type="radio" name="Gender" value="male"> Male <br>
|
25 |
+
<input type="radio" name="Gender" value="male"> Female <br>
|
26 |
+
<input type="radio" name="Gender" value="male" > transgender
|
27 |
+
|
28 |
+
<br>
|
29 |
+
<br>
|
30 |
+
|
31 |
+
<label>
|
32 |
+
Phone :
|
33 |
+
</label>
|
34 |
+
<input type="text" name="country code" value="+91" size="2"/>
|
35 |
+
<input type="text" name="phone" placeholder="Enter mobile number" size="10"/> <br> <br>
|
36 |
+
Address
|
37 |
+
<br>
|
38 |
+
<textarea cols="80" rows="5" value="address">
|
39 |
+
</textarea>
|
40 |
+
<br> <br>
|
41 |
+
Email:
|
42 |
+
<input type="email" id="email" placeholder="Enter email id" name="email"/> <br>
|
43 |
+
<br> <br>
|
44 |
+
Password:
|
45 |
+
<input type="Password" id="pass" placeholder="Enter password" name="pass"> <br>
|
46 |
+
<br> <br>
|
47 |
+
Re-type password:
|
48 |
+
<input type="Password" id="repass" placeholder="Enter re-password" name="repass"> <br> <br>
|
49 |
+
<input type="button" value="Submit"/>
|
50 |
+
</fieldset>
|
51 |
+
</form>
|
52 |
+
</body>
|
53 |
+
</html>
|
style.css
CHANGED
@@ -1,28 +1,93 @@
|
|
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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
*{
|
2 |
+
box-sizing: border-box;
|
3 |
+
}
|
4 |
+
html, body {
|
5 |
+
overflow-x: hidden;
|
6 |
+
height: 100%;
|
7 |
+
}
|
8 |
+
body {
|
9 |
+
font-family: 'Varela Round', sans-serif;
|
10 |
+
background: #fff;
|
11 |
+
padding: 0;
|
12 |
+
margin: 0;
|
13 |
+
}
|
14 |
+
h1{
|
15 |
+
text-align: center;
|
16 |
+
padding-top: 30px;
|
17 |
+
}
|
18 |
+
.header {
|
19 |
+
background-color: #eb4d4b;
|
20 |
+
width: 100%;
|
21 |
+
height: 60px;
|
22 |
+
position: fixed;
|
23 |
+
z-index: 10;
|
24 |
+
}
|
25 |
+
.main {
|
26 |
+
height: 100%;
|
27 |
+
margin-top: 60px;
|
28 |
+
padding: 10px 50px;
|
29 |
+
}
|
30 |
+
#sidebarMenu {
|
31 |
+
height: 100%;
|
32 |
+
position: fixed;
|
33 |
+
left: 0;
|
34 |
+
top: 0;
|
35 |
+
width: 250px;
|
36 |
+
margin-top: 60px;
|
37 |
+
transform: translateX(-250px);
|
38 |
+
transition: transform 250ms ease-in-out;
|
39 |
+
background: #2e86de;
|
40 |
+
}
|
41 |
+
.menu{
|
42 |
+
list-style: none;
|
43 |
+
margin:0;
|
44 |
+
padding:0;
|
45 |
+
}
|
46 |
+
.menu li{
|
47 |
+
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
|
48 |
+
}
|
49 |
+
.menu li a{
|
50 |
+
color: #fff;
|
51 |
+
display: block;
|
52 |
+
padding: 20px;
|
53 |
+
text-transform: uppercase;
|
54 |
+
font-weight: bold;
|
55 |
+
text-decoration: none;
|
56 |
+
}
|
57 |
+
#openSidebarMenu:checked ~ #sidebarMenu {
|
58 |
+
transform: translateX(0);
|
59 |
+
}
|
60 |
+
|
61 |
+
input#openSidebarMenu{
|
62 |
+
display: none;
|
63 |
+
}
|
64 |
+
.sidebarIconToggle {
|
65 |
+
height: 22px;
|
66 |
+
width: 22px;
|
67 |
+
position: absolute;
|
68 |
+
z-index: 99;
|
69 |
+
top: 22px;
|
70 |
+
left: 15px;
|
71 |
+
transition: all 0.3s;
|
72 |
+
cursor: pointer;
|
73 |
+
}
|
74 |
+
.spinner {
|
75 |
+
height: 3px;
|
76 |
+
background-color: #fff;
|
77 |
+
transition: all 0.3s;
|
78 |
+
}
|
79 |
+
.spinner.middle ,
|
80 |
+
.spinner.bottom{
|
81 |
+
margin-top: 3px;
|
82 |
+
}
|
83 |
+
#openSidebarMenu:checked ~ .sidebarIconToggle > .spinner.middle {
|
84 |
+
opacity: 0;
|
85 |
+
}
|
86 |
+
#openSidebarMenu:checked ~ .sidebarIconToggle > .spinner.top {
|
87 |
+
transform: rotate(135deg);
|
88 |
+
margin-top: 8px;
|
89 |
+
}
|
90 |
+
#openSidebarMenu:checked ~ .sidebarIconToggle > .spinner.bottom {
|
91 |
+
transform: rotate(-135deg);
|
92 |
+
margin-top: -9px;
|
93 |
+
}
|