From a9502a62cdaf5fa4796d5558ff1d3e5b805f5a17 Mon Sep 17 00:00:00 2001
From: MalWa2021 <malwina.kinga.wajdzik@gmail.com>
Date: Sun, 28 Nov 2021 15:14:12 +0100
Subject: [PATCH 1/2] Personality + ToolTip

---
 index.html | 25 +++++++++++++++++++++++++
 style.css  | 26 +++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f9c7c6b..830c515 100644
--- a/index.html
+++ b/index.html
@@ -171,6 +171,31 @@ <h1>Przykładowy form 1</h1>
           </div>
         </div>
 
+                <div>
+                  <fieldset>
+                    <legend class="description_tooltip" id="title9">
+                      Jaki jest Twój typ osobowości:<span class="tooltiptext">4 typy osobowości według Hipokratesa</span></legend>
+                    <div>
+                      <div>
+                        <input type="radio" id="radio_4" name="radio1" value="default" checked="checked" />
+                        <label class="choice1" id="title9_0" for="radio_4">Sangwinik</label>
+                      </div>
+                      <div>
+                        <input type="radio" id="radio_5" name="radio1" value="melancholik" />
+                        <label class="choice1" id="title9_1" for="radio_5">Melancholik</label>
+                      </div>
+                      <div>
+                        <input type="radio" id="radio_6" name="radio1" value="choleryk" />
+                        <label class="choice1" id="title9_2" for="radio_6">Choleryk</label>
+                      </div>
+                      <div>
+                        <input type="radio" id="radio_7" name="radio1" value="flegmatyk" />
+                        <label class="choice1" id="title9_3" for="radio_7">Flegmatyk</label>
+                      </div>
+                    </div>
+                  </fieldset>
+                </div>
+
         <div>
           <input
             type="submit"
diff --git a/style.css b/style.css
index 8ecfd95..499b10c 100644
--- a/style.css
+++ b/style.css
@@ -99,4 +99,28 @@ form input, textarea{
     background-color: pink;
     color: white;
     border-radius: 5px;
-}
\ No newline at end of file
+}
+.description_tooltip {
+  position: relative;
+  display: inline-block;
+  font-style: italic; 
+}
+
+.description_tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+  top: -5px;
+  left: 105%;
+}
+
+.description_tooltip:hover .tooltiptext {
+  visibility: visible;
\ No newline at end of file

From bde6f210ad92aa3e4ca063fa49c650ce235ffd74 Mon Sep 17 00:00:00 2001
From: MalWa2021 <malwina.kinga.wajdzik@gmail.com>
Date: Sun, 28 Nov 2021 15:16:36 +0100
Subject: [PATCH 2/2] bugFixing

---
 style.css | 126 +++++++++++++++++++++++++++---------------------------
 1 file changed, 64 insertions(+), 62 deletions(-)

diff --git a/style.css b/style.css
index 499b10c..85dfa7c 100644
--- a/style.css
+++ b/style.css
@@ -1,109 +1,110 @@
-h1{
-    color: blue;
-    font-weight: bold;
+h1 {
+  color: blue;
+  font-weight: bold;
 }
 
-*{
-    box-sizing: border-box;
+* {
+  box-sizing: border-box;
 }
 
-body{
-    padding: 30px 30%;
-
+body {
+  padding: 30px 30%;
 }
 
-form{
-    font-size: 1rem;
-    color: darkgray;
-    background-color: lightyellow;
-} 
+form {
+  font-size: 1rem;
+  color: darkgray;
+  background-color: lightyellow;
+}
 
-form label, form legend{
-    width: 40%;
-    float: left;
+form label,
+form legend {
+  width: 40%;
+  float: left;
 }
 
 form input {
-    width: 60%;
+  width: 60%;
 }
 
-form div{
-    overflow: hidden;
-    /* clear: both; */
-    padding: 5px;
-
+form div {
+  overflow: hidden;
+  /* clear: both; */
+  padding: 5px;
 }
 
-form > div > fieldset{
-    border: 0;
-    /* padding: 10px; */
-    padding: 0;
-    margin: 0;
+form > div > fieldset {
+  border: 0;
+  /* padding: 10px; */
+  padding: 0;
+  margin: 0;
 }
 
 form > div > fieldset > div > div > label {
-    font-size: 0.9rem;
-    color: black;
-    padding-left: 0.6rem;
+  font-size: 0.9rem;
+  color: black;
+  padding-left: 0.6rem;
 }
 
-form textarea{
-    width: 100%;
+form textarea {
+  width: 100%;
 }
 
 /* form/div[6]/div */
 
 form > div > div {
-    padding-left:0;
+  padding-left: 0;
 }
 
-
-form > div > fieldset > div > div > input{
-    width: auto;
-    float: left;
-    /* margin-left: 0; */
+form > div > fieldset > div > div > input {
+  width: auto;
+  float: left;
+  /* margin-left: 0; */
 }
 
 /* xpath full path */
 /* /html/body/div/form/div[7]/fieldset/div/div[1] */
 form > div > fieldset > div > div {
-    padding: 0;
+  padding: 0;
 }
 
 .cities > div > input {
-    width: auto;
-    float: left;
+  width: auto;
+  float: left;
 }
 
-form input:focus{
-    border: 3px solid orange;
+form input:focus {
+  border: 3px solid orange;
 }
 
-form input, textarea{
-    background-color: yellow;
+form input,
+textarea {
+  background-color: yellow;
 }
 
-#sendForm{
-    background-color:red;
-    font-weight: bold;
-    font-size: 1.5rem;
-    width: 100px;
-    height: 40px;
-    display: block;
-    margin: 0 auto;
+#sendForm {
+  background-color: red;
+  font-weight: bold;
+  font-size: 1.5rem;
+  width: 100px;
+  height: 40px;
+  display: block;
+  margin: 0 auto;
 }
 
-#sendForm:hover{
-    transition: border 2s ease-in-out, background-color 2s ease-in-out, color 1s ease-in, border-radius 2s ease-in-out;
-    border: 3px solid darkorange;
-    background-color: pink;
-    color: white;
-    border-radius: 5px;
+#sendForm:hover {
+  transition: border 2s ease-in-out, background-color 2s ease-in-out,
+    color 1s ease-in, border-radius 2s ease-in-out;
+  border: 3px solid darkorange;
+  background-color: pink;
+  color: white;
+  border-radius: 5px;
 }
+
 .description_tooltip {
   position: relative;
   display: inline-block;
-  font-style: italic; 
+  font-style: italic;
 }
 
 .description_tooltip .tooltiptext {
@@ -114,7 +115,7 @@ form input, textarea{
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
-  
+
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
@@ -123,4 +124,5 @@ form input, textarea{
 }
 
 .description_tooltip:hover .tooltiptext {
-  visibility: visible;
\ No newline at end of file
+  visibility: visible;
+}