Hugging Face's logo

Spaces:
adarshadda
/
mlproject
Sleeping

App Files Community
adarshadda commited on
Commit
f8e481f
•
1 Parent(s): 04c6a1c

updated html&css

Browse files
Files changed (2) hide show
  1. static/style.css +34 -22
  2. templates/home.html +3 -5
static/style.css CHANGED
@@ -11,22 +11,27 @@ body {
11
  /* Add some margin around the body */
12
  }
13
  .all {
14
- background-color: #7895CB;
15
  border-radius: 20px;
16
  border: none;
17
  }
18
 
19
  h1 {
20
- background-color: #7895CB; /* Light blue background */
21
- color: #001C30; /* Dark text color for readability */
22
- padding: 10px 20px;
23
- border-radius: 5px;
24
- margin: 10px;
25
-
26
- display: flex;
27
- justify-content: center;
28
- text-align: center;
29
- /* Rounded corners */
 
 
 
 
 
30
  }
31
  .login {
32
  border: none; /* Add a border to the login form */
@@ -44,18 +49,25 @@ body {
44
  border: none;
45
  /* Add space below labels */
46
  }
47
-
48
  .btn-primary {
49
- background-color: #3C5B6F; /* Set blue color for button */
50
- color: #001C30; /* Set white text color for button */
51
- border: none; /* Remove button border */
52
- padding: 10px 20px; /* Add padding to the button */
53
- border-radius: 5px;
54
- border-color: #001C30;
55
- display: flex;
56
- justify-content: center;
57
- text-align: center; /* Add rounded corners to button */
58
- }
 
 
 
 
 
 
 
 
59
  select {
60
  width: 100%; /* Make select boxes fill full width */
61
  }
 
11
  /* Add some margin around the body */
12
  }
13
  .all {
14
+ background-color: #6bb1e0;
15
  border-radius: 20px;
16
  border: none;
17
  }
18
 
19
  h1 {
20
+ background-color: #127dc4; /* Scale up slightly on hover */
21
+ color: #e5e8eb; /* Dark text color for readability */
22
+ padding: 40px; /* Increased padding for better spacing */
23
+ border-radius: 30px; /* Rounded corners */
24
+ margin: 5px; /* Margin around the heading */
25
+ text-align: center; /* Center align text */
26
+ box-shadow: 0 4px 8px rgba(231, 222, 222, 0.1); /* Subtle shadow for depth */
27
+
28
+ /* Animation for hover effect */
29
+ transition: transform 0.3s ease-in-out;
30
+ }
31
+
32
+ h1:hover {
33
+ transform: scale(1.05);
34
+ background-color: #020f1a; /* Scale up slightly on hover */
35
  }
36
  .login {
37
  border: none; /* Add a border to the login form */
 
49
  border: none;
50
  /* Add space below labels */
51
  }
 
52
  .btn-primary {
53
+
54
+ background-color: #0c010c; /* Updated background color for button */
55
+ color: #ffffff; /* Updated text color to white */
56
+ padding: 8px 20px; /* Slightly increased padding for better spacing */
57
+ border-radius: 5px; /* Rounded corners */
58
+ display: inline-block; /* Changed display to inline-block for better alignment */
59
+ text-align: center; /* Center-align text */
60
+ text-decoration: none; /* Remove underline by default */
61
+ font-size: 16px; /* Adjust font size */
62
+ cursor: pointer; /* Cursor style on hover */
63
+ transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Smooth transition on hover */
64
+ }
65
+
66
+ .btn-primary:hover {
67
+ background-color: #045c91; /* Darker background color on hover */
68
+ color: #ffffff;
69
+ transform: scale(1.05); /* Change text color to white on hover */
70
+ }
71
  select {
72
  width: 100%; /* Make select boxes fill full width */
73
  }
templates/home.html CHANGED
@@ -2,14 +2,12 @@
2
  <html>
3
  <head>
4
  <title>Student Exam Performance Indicator</title>
5
- <link rel="stylesheet" type="text/css" href="style.css">
6
  </head>
7
 
8
  <body>
9
  <div class="all">
10
- <div class="login">
11
- <h1>Student Exam Performance Indicator</h1>
12
-
13
  <form action="{{ url_for('predict_datapoint')}}" method="post">
14
  <h1>
15
  <legend>Student Exam Performance Prediction</legend>
@@ -112,7 +110,7 @@
112
  </div>
113
  </form>
114
  <h2>
115
- THE prediction is {{results}}
116
  </h2>
117
  </div>
118
  <body>
 
2
  <html>
3
  <head>
4
  <title>Student Exam Performance Indicator</title>
5
+ <link rel="stylesheet" type="text/css" href="/static/style.css">
6
  </head>
7
 
8
  <body>
9
  <div class="all">
10
+ <div class="login">
 
 
11
  <form action="{{ url_for('predict_datapoint')}}" method="post">
12
  <h1>
13
  <legend>Student Exam Performance Prediction</legend>
 
110
  </div>
111
  </form>
112
  <h2>
113
+ Your Maths Score prediction is {{results}}
114
  </h2>
115
  </div>
116
  <body>