Modified form on diet page

ishika1727 · Oct 3, 2021 · b20612c · b20612c
1 parent 4a174e2
commit b20612c
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 23 deletions.
diff --git a/css/clonediet.css b/css/clonediet.css
@@ -12,6 +12,18 @@
     margin-left: 2%;
     font-size: 30px;
     padding-top: 2%; 
+	z-index:1;
+}
+#one2{
+	margin: -47px 10px 0px 0px;
+}
+#one2 a{
+	font-size: 25px;
+    color: #adff2f;
+}
+#one2 a:hover{
+	color:#c5fa76;
+	text-decoration: underline;
 }
 #primary
 {
@@ -40,34 +52,37 @@ a:link, a:visited
 .header_info
 {
     text-align: center;
-    color: black;
+    /* color: black; */
+    color: #f7f7f7;
     font-size: 18px;
     font-weight: bold;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
     padding: 14px 25px;
+	z-index:2;
 }
 .plan
 {
     border: 4px solid rgb(0, 39, 17);
 }
 .form
 {
-	max-width:400px;
-	margin:50px auto;
-	background:#fff;
-	border-radius:2px;
-	padding:20px;
+	max-width: 490px;
+    margin: 50px auto;
+    background: #fff;
+    border-radius: 2px;
+    padding: 30px;
 	font-family: Georgia, "Times New Roman", Times, serif;
 }
 .form h1
 {
 	display: block;
 	text-align: center;
 	padding: 0;
-	margin: 0px 0px 20px 0px;
-	color: #5C5C5C;
-	font-size:x-large;
+	margin: 5px 0px 30px 0px;
+	color: #3f82e6;
+	font-size:30px;
 }
+
 .form ul
 {
 	list-style:none;
@@ -82,6 +97,17 @@ a:link, a:visited
 	margin-bottom: 30px;
 	border-radius: 3px;
 }
+.form li button{
+	padding: 10px 20px;
+	background-color: rgb(104, 155, 94);;
+    border: none;
+    color: white;
+    border-radius: 19px;
+    cursor: pointer;
+}
+.form li button:hover{
+	background-color: rgb(103, 177, 88);;
+}
 .form li:last-child
 {
 	border:none;

diff --git a/templates/diet2.html b/templates/diet2.html
@@ -16,7 +16,7 @@
             PERSONALIZED DIET CHART
         </div>
         <div id="one2" align="right">
-            <a href="../index.html" style="font-size: 28px;">Home </a>
+            <a href="../index.html">Home </a>
         </div>
         <div class="header_info">
             <br><br><br><br>
@@ -26,25 +26,26 @@
             <div>Create your meal plan right here in seconds.</div>
         </div>
         <form class="form" name="form" id="form">
+            <h1>Get Your Diet Plan</h1>
             <ul>
                 <li>
                     <label>Name</label>
-                    <input type="text" name="name" maxlength="100">
-                    <span>Enter your full name here</span>
+                    <input type="text" name="name" maxlength="100" placeholder="Enter your name">
+                    <!-- <span>Enter your full name here</span> -->
                 <li>
                     <label>Age</label>
-                    <input type="text" name="age">
-                    <span>Enter your age</span>
+                    <input type="text" name="age" placeholder="Enter your age">
+                    <!-- <span>Enter your age</span> -->
                 </li>
                 <li>
                     <label>Email</label>
-                    <input type="text" name="email" maxlength="100">
-                    <span>Enter a valid email address</span>
+                    <input type="text" name="email" maxlength="100" placeholder="Enter a valid email address">
+                    <!-- <span>Enter a valid email address</span> -->
                 </li>
                 <li>
                     <label>Calories</label>
-                    <input type="text" name="cal" id="cal">
-                    <span>Enter your prefered calorie intake(in cal.)</span>
+                    <input type="text" name="cal" id="cal" placeholder="Enter your prefered calorie intake(in cal.)">
+                    <!-- <span>Enter your prefered calorie intake(in cal.)</span> -->
                 </li>
                 </li>
                 <li>
@@ -61,17 +62,17 @@
                         <option id="diet" name="gluten" value="gluten free">Gluten free diet plan</option>
                         <option id="diet" name="vegan" value="vegan">Vegan diet plan</option>
                     </select>
-                    <span>Choose your prefered diet type</span>
+                    <!-- <span>Choose your prefered diet type</span> -->
                 </li>
                 <li>
                     <label>Exclude</label>
-                    <input type="text" name="exclude" maxlength="100" id="exclude">
-                    <span>Enter a food item you want to exclude</span>
+                    <input type="text" name="exclude" maxlength="100" id="exclude" placeholder="Enter a food item you want to exclude">
+                    <!-- <span>Enter a food item you want to exclude</span> -->
                 </li>
                 <li>
                     <label>About You</label>
-                    <textarea name="bio" onkeyup="adjust_textarea(this)"></textarea>
-                    <span>Say something about yourself</span>
+                    <textarea name="bio" onkeyup="adjust_textarea(this)" placeholder="Say something about yourself"></textarea>
+                    <!-- <span>Say something about yourself</span> -->
                 </li>
                 <li>
                     <button onclick="diet()">Get diet chart</button>