Hugging Face's logo

Spaces:
bhaglepravesh
/
heartdiseasepredictions
Running

App Files Community
bhaglepravesh commited on
Commit
3a2f8cb
•
1 Parent(s): e525c15

Upload 9 files

Browse files
Files changed (9) hide show
  1. Predict Disease.html +110 -0
  2. Prescription.html +39 -0
  3. about.html +158 -0
  4. background.jpg +0 -0
  5. index.html +116 -19
  6. login form.html +64 -0
  7. logo.png +0 -0
  8. new user registration form.html +53 -0
  9. 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
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
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
+ }