Refactor background color and gradient in style2.css

apu52 · Apr 17, 2024 · 3540542 · 3540542
1 parent 5bf658a
commit 3540542
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 45 deletions.
diff --git a/Job Search/indexFreelance.html b/Job Search/indexFreelance.html
@@ -1,47 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>get freelance</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="style2.css" />
-  </head>
-  <body>
-    <div class="jobs-list-container">
-      <h2>6 Internship</h2>
-      <div class="result-count"></div>
-
-
-      <input class="job-search" type="text" placeholder="Search here..." />
-
-      <div class="jobs"></div>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>get freelance</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="style2.css" />
+</head>
+
+<body>
+  <div class="jobs-list-container">
+    <h2>6 Internship</h2>
+    <div class="result-count"></div>
+
+
+    <input class="job-search" type="text" placeholder="Search here..." />
+
+    <div class="jobs"></div>
+  </div>
+  <!-- Accessibility Mode Button -->
+  <div class="accessibility-button hover-speak" onclick="toggleAccessibilityMenu()"
+    onmouseover="speakText('click here to select accessibility mode')" onmouseleave="stopSpeaking()">
+    <div class="accessibility-icon">
+
     </div>
-        <!-- Accessibility Mode Button -->
- <div class="accessibility-button hover-speak" onclick="toggleAccessibilityMenu()"
- onmouseover="speakText('click here to select accessibility mode')" onmouseleave="stopSpeaking()">
- <div class="accessibility-icon">
-
- </div>
-</div>
-
-<!-- Accessibility Menu -->
-<div class="accessibility-menu" id="accessibilityMenu">
- <ul>
-   <li><button class="hover-speak" onclick="toggleScreenReader()" id="screenReaderButton"
-       onmouseover="speakText('click here to change the screen reader mode')" onmouseleave="stopSpeaking()">Enable
-       Screen Reader</button></li>
-   <li><button onclick="toggleKeyboardNavigation()">Enable Voice Recognition</button></li>
- </ul>
-</div>
-
-
-    <script src="main2.js"></script>
-  </body>
-</html>
+  </div>
+
+  <!-- Accessibility Menu -->
+  <div class="accessibility-menu" id="accessibilityMenu">
+    <ul>
+      <li><button class="hover-speak" onclick="toggleScreenReader()" id="screenReaderButton"
+          onmouseover="speakText('click here to change the screen reader mode')" onmouseleave="stopSpeaking()">Enable
+          Screen Reader</button></li>
+      <li><button onclick="toggleKeyboardNavigation()">Enable Voice Recognition</button></li>
+    </ul>
+  </div>
+
+
+  <script src="main2.js"></script>
+</body>
+
+</html>
diff --git a/Job Search/style2.css b/Job Search/style2.css
@@ -1,4 +1,7 @@
-
+body{
+  background: rgb(215,177,177);
+background: linear-gradient(135deg, rgba(215,177,177,1) 0%, rgba(207,221,221,1) 14%);
+}
 .jobs-list-container {
     max-width: 900px;
     margin: 20px auto;
@@ -29,6 +32,7 @@
     display: flex;
     flex-direction: column;
     transition: all 400ms ease;
+    border: 1px solid black;
   }
 
   .jobs-list-container .job:hover {