Style changes

onlyoncev2 · Dec 12, 2023 · a44995d · a44995d
1 parent 4a77501
commit a44995d
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 16 deletions.
diff --git a/artificial-intelligence-ai-chip-icon.svg b/artificial-intelligence-ai-chip-icon.svg
diff --git a/index.html b/index.html
@@ -15,18 +15,27 @@
 <body>
     <main class="container">
         <div id="header">
-            <h1>OnlyOnce</h1>
+            <img src="/oo-logo-v2.jpg" alt="OnlyOnce BV Logo">
             <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 class="grid">
-                <button class="primary outline">Upload an Agile Expert</button>
-                <button class="primary outline">All Filters</button>
+            <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>
+                <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>
     </main>

diff --git a/oo-logo-v2.jpg b/oo-logo-v2.jpg
diff --git a/style.css b/style.css
@@ -1,22 +1,55 @@
+.svg-icon {
+  width: 1.5em;
+  height: 1.5em;
+}
+
+.svg-icon path,
+.svg-icon polygon,
+.svg-icon rect {
+  fill: #4691f6;
+}
+
+.svg-icon circle {
+  stroke: #4691f6;
+  stroke-width: 1;
+}
+
 #header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20pt;
+}
+
+#buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 20pt;
+}
+
+#buttons > button {
+  max-width: 250pt;
 }
 
 h2 {
-    font-size: 14pt;
-    font-weight: 600;
+  font-size: 14pt;
+  font-weight: 600;
 }
 
 form > h5 {
-    color: #32b9b9;
-    font-weight: 400;
-    text-align: center;
+  color: #018bd3;
+  font-weight: 400;
+  text-align: center;
+}
+
+form img {
+  margin: 5pt;
 }
 
 footer {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-}
+  display: flex;
+  justify-content: center;
+  gap: 20pt;
+}