feat(temperature) : add input and btn css

Author: gbasset

Temperature-convertor/index.html

@@ -11,8 +11,16 @@
     <h1>Temperature convertor</h1>
 
     <form action="" method="post" id="form">
-        <label for="response">Temperature</label>
-        <input type="text" name="response" id="response">
+        <h2 >Type of conversion</h2>
+        <div class="btn-section">
+            <button type="button" onclick="getSentenceResult();">Celsius</button>
+            <button type="button" onclick="getSentenceResult();">Fahrenheit </button>
+
+        </div>
+        <div class="input-section">
+            <label for="response">Temperature</label>
+            <input type="text" name="response" id="response"  placeholder="12">
+        </div>
         <button type="button" onclick="getSentenceResult();">Submit</button>
     </form>
     <section id="element_result" style="font-size: larger;">

Temperature-convertor/style.css

@@ -43,20 +43,30 @@ button{
     transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
     background: #fff;
     color: #222222;
-}
-:hover {
+}:hover {
     border-color: #000000;
     background: #f7f7f7;
 }
+.btn-section {
+    display: flex;
+    justify-content: space-around;
+}
+.btn-section button{
+    width: 150px;
+    color: #f7f7f7;
+    background-color: #86b0ff;
+    text-align: center;
+
+}:hover {
+    border-color: #000000;
+}
 #form{
-    
-    max-width: 300px;
+    max-width: 500px;
+    min-width: 450px;
     min-height: 200px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-  
-    max-width: 500px;
     height: 300px;
     padding: 35px;
 
@@ -65,3 +75,11 @@ button{
     background-color: rgba(255, 255, 255, 0.45);
     box-shadow: 0px 4px 6px 0px rgba(50,50,93,0.11) , 0px 1px 3px 0px rgba(0,0,0,0.08);
 }
+.input-section{
+    display: flex;
+    flex-direction: column;
+}
+.input-section label{
+   font-weight: bold;
+   margin-bottom: 5px;
+}