💄 Update styles to keep to specifications

sandovaldavid · Sep 10, 2024 · f99171f · f99171f
1 parent 6044a5b
commit f99171f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/google/google-advance/index.html b/google/google-advance/index.html
@@ -19,7 +19,7 @@ <h1>Advanced Search</h1>
     </header>
     <div class="div-adv">
         <form class="form-adv" action="https://google.com/search">
-            <legend>Find pages with...</legend>
+            <h3>Find pages with...</h3>
             <label for="allWords">All these words:
                 <input id="allWords" type="text" name="as_q">
             </label>
@@ -32,7 +32,7 @@ <h1>Advanced Search</h1>
             <label for="noneWords">None of these words:
                 <input id="noneWords" type="text" name="as_eq">
             </label>
-            <input type="submit" value="Google Search">
+            <input type="submit" value="Advanced Search">
         </form>
     </div>
 

diff --git a/google/google-images/index.html b/google/google-images/index.html
@@ -24,7 +24,7 @@
         <input type="text" name="q">
         <input type="hidden" name="sclient" value="img">
         <input type="hidden" name="udm" value="2">
-        <input type="submit" value="Google Search">
+        <input type="submit" class="button" value="Google Search">
     </form>
 </div>
 </body>

diff --git a/google/index.html b/google/index.html
@@ -21,8 +21,8 @@
     <form action="https://google.com/search">
         <input type="text" name="q">
         <div>
-            <input type="submit" value="Google Search">
-            <input type="submit" value="I'm Feelling Lucky" name="btnI">
+            <input type="submit" class="button" value="Google Search">
+            <input type="submit" class="button" value="I'm Felling Lucky" name="btnI">
         </div>
     </form>
 </div>

diff --git a/google/styles/styles.css b/google/styles/styles.css
@@ -111,7 +111,7 @@ form > div {
     margin-top: 20px;
 }
 
-input[type="submit"] {
+.button {
     margin: 20px 5px 0;
     padding: 10px 20px;
     font-size: 14px;
@@ -123,11 +123,27 @@ input[type="submit"] {
     transition: all 0.2s ease-in-out;
 }
 
-input[type="submit"]:hover {
+.button:hover {
     border: 1px solid #dadce0;
     background-color: #f8f9fa;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
+input[value="Advanced Search"]{
+    box-sizing: border-box;
+    background-color: #4d90fe;
+    color: white;
+    font-weight: bold;
+    border-radius: 2px;
+    border-color: #4d90fe;
+    font-size: 11px;
+    cursor: default;
+    margin: 10px 5px 0 0;
+    padding: 8px 15px;
+    align-self: end;
+}
+input[value="Advanced Search"]:hover{
+    background: linear-gradient(to bottom, #4d90fe, #4787ed); ;
+}
 
 input[type="submit"]:focus {
     outline: none;
@@ -144,9 +160,10 @@ span{
     white-space: nowrap;
 }
 
-legend{
+h3{
     width: 100%;
     font-weight: bold;
+    text-align: left;
 }
 .div-adv{
     display: flex;
@@ -172,5 +189,6 @@ legend{
 }
 .form-adv > label > input{
     width: 400px;
-
+    margin-left: 20px;
+    border-radius: inherit;
 }