Refactor: style changes

onlyoncev2 · Dec 18, 2023 · 1399794 · 1399794
1 parent 3c50e7c
commit 1399794
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -20,26 +20,31 @@
                 <h2>Connecting world's top agilists with your business needs</h2>
             </div>
             <form disabled>
-                <textarea placeholder="Example: RTE, SPC, manufacturing, chips, SAP MES"></textarea>
-                <h5>
-                    <img width="42" src="/artificial-intelligence-ai-chip-icon.svg" alt="ai-icon" />
-                    AI-Powered precision for finding your perfect agile match!
-                </h5>
+                <div id="input">
+                    <svg id="searchIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                        fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <textarea id="search" placeholder="Example: RTE, SPC, manufacturing, chips, SAP MES"></textarea>
+                    <h5>
+                        <img width="42" src="/artificial-intelligence-ai-chip-icon.svg" alt="ai-icon" />
+                        AI-Powered precision for finding your perfect agile match!
+                    </h5>
+                </div>
 
                 <div id="buttons">
                     <button class="secondary outline">
-                        <svg class="svg-icon" viewBox="0 0 20 20">
-                            <path
-                                d="M4.317,16.411c-1.423-1.423-1.423-3.737,0-5.16l8.075-7.984c0.994-0.996,2.613-0.996,3.611,0.001C17,4.264,17,5.884,16.004,6.88l-8.075,7.984c-0.568,0.568-1.493,0.569-2.063-0.001c-0.569-0.569-0.569-1.495,0-2.064L9.93,8.828c0.145-0.141,0.376-0.139,0.517,0.005c0.141,0.144,0.139,0.375-0.006,0.516l-4.062,3.968c-0.282,0.282-0.282,0.745,0.003,1.03c0.285,0.284,0.747,0.284,1.032,0l8.074-7.985c0.711-0.71,0.711-1.868-0.002-2.579c-0.711-0.712-1.867-0.712-2.58,0l-8.074,7.984c-1.137,1.137-1.137,2.988,0.001,4.127c1.14,1.14,2.989,1.14,4.129,0l6.989-6.896c0.143-0.142,0.375-0.14,0.516,0.003c0.143,0.143,0.141,0.374-0.002,0.516l-6.988,6.895C8.054,17.836,5.743,17.836,4.317,16.411">
-                            </path>
-                        </svg>
-                        Upload an Agile Expert</button>
+                        <a href="https://forms.onlyonce.com/id/oo/AI-Form">
+                            <svg class="svg-icon" viewBox="0 0 20 20">
+                                <path
+                                    d="M4.317,16.411c-1.423-1.423-1.423-3.737,0-5.16l8.075-7.984c0.994-0.996,2.613-0.996,3.611,0.001C17,4.264,17,5.884,16.004,6.88l-8.075,7.984c-0.568,0.568-1.493,0.569-2.063-0.001c-0.569-0.569-0.569-1.495,0-2.064L9.93,8.828c0.145-0.141,0.376-0.139,0.517,0.005c0.141,0.144,0.139,0.375-0.006,0.516l-4.062,3.968c-0.282,0.282-0.282,0.745,0.003,1.03c0.285,0.284,0.747,0.284,1.032,0l8.074-7.985c0.711-0.71,0.711-1.868-0.002-2.579c-0.711-0.712-1.867-0.712-2.58,0l-8.074,7.984c-1.137,1.137-1.137,2.988,0.001,4.127c1.14,1.14,2.989,1.14,4.129,0l6.989-6.896c0.143-0.142,0.375-0.14,0.516,0.003c0.143,0.143,0.141,0.374-0.002,0.516l-6.988,6.895C8.054,17.836,5.743,17.836,4.317,16.411">
+                                </path>
+                            </svg>
+                            Upload an Agile Expert
+                        </a>
+                    </button>
                     <button class="secondary outline">
-                        <svg class="svg-icon" viewBox="0 0 20 20">
-                            <path
-                                d="M6.176,7.241V6.78c0-0.221-0.181-0.402-0.402-0.402c-0.221,0-0.403,0.181-0.403,0.402v0.461C4.79,7.416,4.365,7.955,4.365,8.591c0,0.636,0.424,1.175,1.006,1.35v3.278c0,0.222,0.182,0.402,0.403,0.402c0.222,0,0.402-0.181,0.402-0.402V9.941c0.582-0.175,1.006-0.714,1.006-1.35C7.183,7.955,6.758,7.416,6.176,7.241 M5.774,9.195c-0.332,0-0.604-0.272-0.604-0.604c0-0.332,0.272-0.604,0.604-0.604c0.332,0,0.604,0.272,0.604,0.604C6.377,8.923,6.105,9.195,5.774,9.195 M10.402,10.058V6.78c0-0.221-0.181-0.402-0.402-0.402c-0.222,0-0.402,0.181-0.402,0.402v3.278c-0.582,0.175-1.006,0.714-1.006,1.35c0,0.637,0.424,1.175,1.006,1.351v0.461c0,0.222,0.181,0.402,0.402,0.402c0.221,0,0.402-0.181,0.402-0.402v-0.461c0.582-0.176,1.006-0.714,1.006-1.351C11.408,10.772,10.984,10.233,10.402,10.058M10,12.013c-0.333,0-0.604-0.272-0.604-0.604S9.667,10.805,10,10.805c0.332,0,0.604,0.271,0.604,0.604S10.332,12.013,10,12.013M14.629,8.448V6.78c0-0.221-0.182-0.402-0.403-0.402c-0.221,0-0.402,0.181-0.402,0.402v1.668c-0.581,0.175-1.006,0.714-1.006,1.35c0,0.636,0.425,1.176,1.006,1.351v2.07c0,0.222,0.182,0.402,0.402,0.402c0.222,0,0.403-0.181,0.403-0.402v-2.07c0.581-0.175,1.006-0.715,1.006-1.351C15.635,9.163,15.21,8.624,14.629,8.448 M14.226,10.402c-0.331,0-0.604-0.272-0.604-0.604c0-0.332,0.272-0.604,0.604-0.604c0.332,0,0.604,0.272,0.604,0.604C14.83,10.13,14.558,10.402,14.226,10.402 M17.647,3.962H2.353c-0.221,0-0.402,0.181-0.402,0.402v11.27c0,0.222,0.181,0.402,0.402,0.402h15.295c0.222,0,0.402-0.181,0.402-0.402V4.365C18.05,4.144,17.869,3.962,17.647,3.962 M17.245,15.232H2.755V4.768h14.49V15.232z">
-                            </path>
-                        </svg>
                         All Filters</button>
                 </div>
             </form>

diff --git a/style.css b/style.css
@@ -34,6 +34,25 @@ body {
   gap: 20pt;
 }
 
+#buttons svg {
+  margin-top:-5px;
+}
+
+#input {
+  position: relative;
+}
+
+#input > svg {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  opacity: 0.8;
+}
+
+#input > textarea {
+  padding: 20px 60px;
+}
+
 #buttons > button {
   max-width: 250pt;
 }