Survey Form

avionschool · jeraldbatal22 · Apr 20, 2021 · Apr 20, 2021 · Apr 20, 2021 · Apr 20, 2021
commit 001389a1e5cf268c2490270416a3ce45a3391bbd
diff --git a/batal-jerald/survey_form/images/Background Color In Html.jpg b/batal-jerald/survey_form/images/Background Color In Html.jpg
diff --git a/batal-jerald/survey_form/images/check.png b/batal-jerald/survey_form/images/check.png
diff --git a/batal-jerald/survey_form/images/heart.jpg b/batal-jerald/survey_form/images/heart.jpg
diff --git a/batal-jerald/survey_form/images/inalid.png b/batal-jerald/survey_form/images/inalid.png
diff --git a/batal-jerald/survey_form/images/wallpapertip_love-background-wallpaper_131771.jpg b/batal-jerald/survey_form/images/wallpapertip_love-background-wallpaper_131771.jpg
diff --git a/batal-jerald/survey_form/index.html b/batal-jerald/survey_form/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./style.css">
+  <title>Dating Form Survey</title>
+</head>
+<body> 
+  <div id="main">
+
+    <header id="title">
+      <h1>Dating Form Survey</h1>
+    </header>
+
+    <div id="form-container">
+      <p id="description">Answer this dating form, and you find strong relationship <3</p>
+
+      <form id="survey-form" action="./success.html" method="get">
+        <div id="fullname">
+          <label for="forfullname">Name <span>*</span></label>
+            <input type="text" required placeholder="Your name" name="name"> 
+        </div>
+
+        <br>
+
+        <div id="email">
+          <label>Email<span>*</span></label>
+            <input type="email" required placeholder="Your email" name="email"> 
+        </div> 
+
+        <br>
+
+        <div id="number">
+          <label>Age<span>*</span></label>
+            <input type="number" required min="18" max="100" placeholder="Your age" name="number"> 
+        </div>
+
+        <br>
+
+        <div id="option">
+          <label for="forplace">Gender</label>
+          <select name="gender">
+            <option>Your gender</option>
+            <option>Male</option>
+            <option>Female</option>
+          </select>
+        </div>
+
+        <br>
+
+
+        <div id="radio">
+          <h3>How would you describe your personality?</h3>
+              <label for="r1"><input type="radio" name="personality"> Shy and naive</label>
+              <label for="r2"><input type="radio" name="personality">Brave and talkative</label>
+              <label for="r4"><input type="radio" name="personality">Honest and reliable</label>
+              <label for="r7"><input type="radio" name="personality"> <input type="text" placeholder="Others"></label>
+        </div>
+
+        <div id="checkbox">
+          <h3 for="checkbox">What traits do you look for in a partner?</h3>
+              <label><input type="checkbox">Kind & Energetic</label>
+              <label><input type="checkbox">Honest & Faithful</label>
+              <label><input type="checkbox">Moody & clingy</label>
+              <label><input type="checkbox"><input type="text" placeholder="Others"></label>
+        </div>
+
+        <div id="text">
+          <label for="forage">Drescribed your perfect dream date?</label>
+            <textarea name="" id="" cols="30" rows="7" placeholder="Put something you want to say..."></textarea>
+        </div>
+
+        <div>
+          <button type="submit">Submit</button>
+        </div>
+
+      </form>
+
+    </div>
+
+  </div>
+</body>
+</html>
diff --git a/batal-jerald/survey_form/style.css b/batal-jerald/survey_form/style.css
@@ -0,0 +1,186 @@
+/* HTML tags */
+
+body {
+  padding: 0%;
+  background-image: url('./images/heart.jpg');
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+label, span {
+  display: flex;
+  margin-bottom: 0.5rem;
+}
+
+input, button, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+#radio label, #checkbox label {
+  text-align: start;
+  font-size:1rem !important;
+  font-weight:100;
+}
+
+span {
+  margin-left:7px;
+  color: red;
+}
+h3 {
+  text-align: start;
+}
+/* ID */
+
+#main {
+  margin-top: 1% !important;
+  margin-bottom: 1% !important;
+  width: 45%;
+  margin: auto;
+  text-align: center;
+  border-style:ridge;
+  background-color: white;
+}
+
+
+#title h1 {
+  color: black;
+  font-weight: bolder;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+#description {
+  margin: 4% 10%;
+  padding:20px 0px;
+  text-align: center;
+  font-style: italic;
+  font-weight: 200;
+  font-size: 1.3rem;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
+}
+
+#radio label, #checkbox label, #text label{
+  margin-bottom: 5%;
+  font-size: 1.5rem;
+}
+
+#survey-form {
+  margin: 0% 8%;
+}
+
+/* Input types */
+
+input[type=text], input[type=email] {
+  display: block;
+  width: 100%;
+  padding: 10px 20px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+#radio [type=text], #checkbox [type=text] {
+  width: 20%;
+}
+
+input[type=number], select {
+  display: block;
+  width: 50%;
+  padding: 10px 20px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+input[type=radio], input[type=checkbox] {
+    margin-right: 2rem;
+    transition: all 0.15s ease-out 0s;
+    cursor: pointer;
+}
+
+input[type=radio]:after {
+  width: 15px;
+  height: 15px;
+  border-radius: 15px;
+  top: -2px;
+  left: -1px;
+  position: relative;
+  background-color: #ffff;
+  content: '';
+  display: inline-block;
+  visibility: visible;
+  border: 2px solid gray;
+}
+
+input[type=checkbox]:after {
+  width: 15px;
+  height: 15px;
+  top: -2px;
+  left: -1px;
+  position: relative;
+  background-color: #ffff;
+  content: '';
+  display: inline-block;
+  visibility: visible;
+  border: 2px solid gray;
+}
+
+input[type=radio]:checked:after, input[type=checkbox]:checked:after {
+  width: 15px;
+  height: 15px;
+  top: -2px;
+  left: -1px;
+  position: relative;
+  background-color: #008CBA;
+  content: '';
+  display: inline-block;
+  visibility: visible;
+  border: 2px solid white;
+}
+
+input:focus:invalid {
+  background-image: url(./images/inalid.png);
+  background-position:99%;
+  background-size: 15px;
+  background-repeat: no-repeat;
+}
+
+input:required:valid {
+  background-image: url(./images/check.png);
+  background-position:99%;
+  background-size: 15px;
+  background-repeat: no-repeat;
+}
+
+/* Text Area */
+
+textarea {
+  width: 90%;
+  padding: 1rem;
+  font-size: 1.1rem;
+  outline: none;
+}
+
+/* Button */
+
+button {
+  background-color: #008CBA;
+  border: none;
+  color: #fff;
+  padding: 15px 32px;
+  font-size: 16px;
+  margin: 20px 2px;
+  cursor: pointer;
+  border-radius:10px;
+  width: 95%;
+}
+
+
+/* Media Queries */
+
+@media (max-width: 1252px) {
+  #main {
+    width: 75%;
+  }
+}
diff --git a/batal-jerald/survey_form/success.html b/batal-jerald/survey_form/success.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<style>
+  h1 {
+    border-style: ridge;
+    width: 30%;
+    margin: 20% auto;
+    text-align: center;
+    padding-bottom: 170px;
+    background-image: url('./images/check.png');
+    background-size: 195px;
+    background-repeat: no-repeat;
+    background-position:bottom;
+  }
+</style>
+<body style="background-image:url(./images/heart.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover;">
+  <h1>Successfully fill up your dating form</h1>
+
+</body>
+</html>