Availability of all theme colors has been reduced.

KoptevAnton · Aug 7, 2024 · a839c76 · a839c76
1 parent 7442f85
commit a839c76
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 42 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -154,23 +154,23 @@
 }
 
 .lime-theme-option {
-  background-color: #c6e327;
+  background-color: #677908;
 }
 
 .blue-theme-option {
-  background-color: #0041e8;
+  background-color: #3368f1;
 }
 
 .pink-theme-option {
-  background-color: #e6533c;
+  background-color: #c61ea4;
 }
 
 .aquamarine-theme-option {
-  background-color: #2b4441;
+  background-color: #417d77;
 }
 
 .orange-theme-option {
-  background-color: #ff7f08;
+  background-color: #a56326;
 }
 
 .mobile-menu-btn {

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -29,7 +29,7 @@
   line-height: 1.5;
   letter-spacing: -0.02em;
 
-  --main-color: #d73941;
+  --main-color: #ce3138;
   --hover-color: #9e1d23;
   --middle-color: #69292d;
 

diff --git a/src/index.html b/src/index.html
@@ -12,17 +12,17 @@
     <link rel="stylesheet" href="./css/styles.css" />
   </head>
   <body>
-    <load ="partials/header.html" />
+    <load src="partials/header.html" />
     <main>
-      <load ="partials/hero.html" />
-      <load ="partials/about-me.html" />
-      <load ="partials/benefits.html" />
-      <load ="partials/projects.html" />
-      <load ="partials/faq.html" />
-      <load ="partials/covers.html" />
-      <load ="partials/reviews.html" />
+      <load src="partials/hero.html" />
+      <load src="partials/about-me.html" />
+      <load src="partials/benefits.html" />
+      <load src="partials/projects.html" />
+      <load src="partials/faq.html" />
+      <load src="partials/covers.html" />
+      <load src="partials/reviews.html" />
     </main>
-    <load ="partials/work-together.html" />
+    <load src="partials/work-together.html" />
     <script type="module" src="./main.js"></script>
   </body>
 </html>
diff --git a/src/js/header.js b/src/js/header.js
@@ -64,32 +64,32 @@ menuList.addEventListener('click', evt => {
 const themes = {
   red: {
     mainColor: '#ed3b44',
-    hoverColor: '#e0373f',
+    hoverColor: '#991017',
     middleColor: '#69292d',
   },
   lime: {
-    mainColor: '#c6e327',
-    hoverColor: '#b3d11f',
+    mainColor: '#677908',
+    hoverColor: '#495607',
     middleColor: '#596808',
   },
   blue: {
-    mainColor: '#0041e8',
+    mainColor: '#3368F1',
     hoverColor: '#0a3dca',
     middleColor: '#001958',
   },
   pink: {
-    mainColor: '#e6533c',
-    hoverColor: '#d24e39',
+    mainColor: '#C61EA4',
+    hoverColor: '#9B1480',
     middleColor: '#9f3626',
   },
   aquamarine: {
-    mainColor: '#2b4441',
+    mainColor: '#417D77',
     hoverColor: '#31524f',
     middleColor: '#1e3633',
   },
   orange: {
-    mainColor: '#ff7f08',
-    hoverColor: '#e87809',
+    mainColor: '#A56326',
+    hoverColor: '#88511E',
     middleColor: '#ac5300',
   },
 };

diff --git a/src/partials/header.html b/src/partials/header.html
@@ -67,21 +67,3 @@
     </div>
   </div>
 </div>
-<div class="change-color-button-wrapper">
-  <button type="button" class="change-color-btn">Change theme</button>
-</div>
-<div class="change-color-wrapper">
-  <div class="change-color">
-    <ul class="theme-colors">
-      <li data-theme="red" class="red-theme-option color-option"></li>
-      <li data-theme="lime" class="lime-theme-option color-option"></li>
-      <li data-theme="blue" class="blue-theme-option color-option"></li>
-      <li data-theme="pink" class="pink-theme-option color-option"></li>
-      <li
-        data-theme="aquamarine"
-        class="aquamarine-theme-option color-option"
-      ></li>
-      <li data-theme="orange" class="orange-theme-option color-option"></li>
-    </ul>
-  </div>
-</div>
diff --git a/src/partials/work-together.html b/src/partials/work-together.html
@@ -100,4 +100,49 @@ <h2 class="footer-title-elem">together</h2>
       </button>
     </div>
   </div>
+  <div class="change-color-button-wrapper">
+    <button
+      type="button"
+      class="change-color-btn"
+      aria-label="change color theme"
+    >
+      Change theme
+    </button>
+  </div>
+  <div class="change-color-wrapper">
+    <div class="change-color">
+      <ul class="theme-colors">
+        <li
+          data-theme="red"
+          class="red-theme-option color-option"
+          aria-label="color theme red"
+        ></li>
+        <li
+          data-theme="lime"
+          class="lime-theme-option color-option"
+          aria-label="color theme lime"
+        ></li>
+        <li
+          data-theme="blue"
+          class="blue-theme-option color-option"
+          aria-label="color theme blue"
+        ></li>
+        <li
+          data-theme="pink"
+          class="pink-theme-option color-option"
+          aria-label="color theme pink"
+        ></li>
+        <li
+          data-theme="aquamarine"
+          class="aquamarine-theme-option color-option"
+          aria-label="color theme aquamarine"
+        ></li>
+        <li
+          data-theme="orange"
+          class="orange-theme-option color-option"
+          aria-label="color theme orange"
+        ></li>
+      </ul>
+    </div>
+  </div>
 </footer>