Cooks - Home Work of Dem2014

dm-morozov · Aug 1, 2022 · aec0199 · aec0199
1 parent b9b67c5
commit aec0199
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
   <title>Cooks</title>
 
 </head>
-<body>
+<body class="bg bg1">
   <header class="header">
     <div class="container">
       <img class="logo" src="img/logo.svg" alt="Cooks" >

diff --git a/java.js b/java.js
@@ -4,18 +4,28 @@ $(document).ready(function() {
     $('.slide-container.slide1').addClass("active");
     $(".slide-container.slide2").removeClass("active");
     $(".slide-container.slide3").removeClass("active");
+    $('body').addClass("bg1");
+    $("body").removeClass("bg2");
+    $("body").removeClass("bg3");
     return;
   });
   $(".slider-trigger-2").click(function () {
     $(".slide-container.slide1").removeClass("active");
     $(".slide-container.slide3").removeClass("active");
     $('.slide-container.slide2').addClass("active");
+    $('.slide-container.slide2').addClass("active");
+    $('body').addClass("bg2");
+    $("body").removeClass("bg1");
+    $("body").removeClass("bg3");
     return;
   });
   $(".slider-trigger-3").click(function () {
     $(".slide-container.slide1").removeClass("active");
     $(".slide-container.slide2").removeClass("active");
     $('.slide-container.slide3').addClass("active");
+    $('body').addClass("bg3");
+    $("body").removeClass("bg1");
+    $("body").removeClass("bg2");
     return;
   });
 });
diff --git a/style.css b/style.css
@@ -1,17 +1,41 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
 
-body {
+body.bg {
     font-family: 'Lato', sans-serif;
     max-width: 1440px;
     min-width: 1200px;
     margin: auto;
+}
+
+.bg1 {
+    background: radial-gradient(50% 50% at 50% 50%, #FBBC05 0%, #FF8F3F 100%);
+    background-image: url("img/bg3.jpg");
+    background-repeat: no-repeat;
+    background-size: 100%; 
+    background-color: rgba(251, 173, 57,0.9);
+    background-blend-mode: multiply;
+}
+
+.bg2 {
     background: radial-gradient(50% 50% at 50% 50%, #FBBC05 0%, #FF8F3F 100%);
     background-image: url("img/bg.png");
     background-repeat: no-repeat;
     background-size: 100%; 
     background-color: rgba(251, 173, 57,0.9);
+    background-blend-mode: multiply;
 }
 
+.bg3 {
+    background: radial-gradient(50% 50% at 50% 50%, #FBBC05 0%, #FF8F3F 100%);
+    background-image: url("img/bg2.jpg");
+    background-repeat: no-repeat;
+    background-size: 100%; 
+    background-color: rgba(251, 173, 57,0.9);
+    background-blend-mode: multiply;
+}
+
+
+
 .container {
     margin: 50px 0 0 80px;
     min-width: 1100px;
@@ -124,6 +148,7 @@ header .container .menu-main a:hover:after, header .container .menu-main .curren
     display: flex;
     flex-direction: column;
     transition: opacity 0.3s ease-in;
+
 }
 
 .slide-container .slide-row {
@@ -201,6 +226,7 @@ header .container .menu-main a:hover:after, header .container .menu-main .curren
     background-color: #ffffff;
     float: right;
     width: 180px;
+    height: 500px;
     text-align: right;
     left: 100px;
 }