modal

src/partials/footer.html

@@ -1,5 +1,5 @@
-<footer data-aos="fade-up" class="footer">
-    <div class="footer-div">
+<footer  class="footer">
+    <div data-aos="fade-up" class="footer-div">
         <div class="footer-name">
             <p class="homemade_ice_cream_made">
                 homemade ice cream made
@@ -8,6 +8,9 @@
                 WITH PASSION
             </p>
         </div>
+        <div class="footer-button-modal">
+            <button class="open-modal-button" onclick="openModal()">GoIT Students</button>
+        </div>
         <div>
             <ul class="icons">
                 <li class="icon icon1"><img class="icon-photo" src="./images/footer/Githab.png" alt=""></li>

src/partials/modal-team.html

@@ -84,6 +84,7 @@ <h1 class="team__title">People developers</h1>
         </div>
         <div class="team__card">
             <div class="team_photo">
+              <img src="../images/modal-photo/Tymur.jpg" alt="photo-people" class="team_photo__img">
             </div>
             <a href="#" target="_blank">
               <img src="../images/modal-photo/modal-github.svg" alt="">

src/partials/section-gallery.html

@@ -1,3 +1,3 @@
 <section class="gallery-section">
-<img src="../images/secrion-gallery/gallery.png" alt="">
+<img src="https://i.postimg.cc/wjQ8SxQ4/gallery.png" alt="gallery">
 </section>

src/sass/components/_footer.scss

@@ -1,19 +1,26 @@
+.footer {
+    width: 90%;
+    // border: 1px solid red;
+    margin: 0 auto;
+}
 li {
     list-style: none;
 }
 
 .footer {
-    width: 1280px;
+    margin: 0 auto;
+    width: 90%;
     height: 247px;
     background-color: rgb(255, 245, 246);
 }
 
 .footer-div {
+
     display: flex;
     justify-content: space-around;
 }
 
-.div{
+.div {
     margin-left: 120px;
     margin-top: 58px;
 }
@@ -128,7 +135,9 @@ li {
     width: 1280px;
     height: 45px;
     border: 1px solid rgb(225, 225, 225);
-}li {
+}
+
+li {
     list-style: none;
 }
 
@@ -144,7 +153,7 @@ li {
     justify-content: space-around;
 }
 
-.div{
+.div {
     margin-left: 120px;
     margin-top: 58px;
 }

src/sass/components/_section-slider.scss

@@ -10,7 +10,7 @@ body {
     position: relative;
     width: 100%;
     max-width: 926px;
-    height: 330px;
+    height: 350px;
     margin: auto;
     overflow: hidden;
 

src/sass/components/_team-modal.scss

@@ -6,21 +6,36 @@ body {
 }
 
 .open-modal-button {
-  margin: 20px;
+  color: #FEA5BB;
+  text-transform: uppercase;
+  text-decoration: none;
+  border: 2px solid #FEA5BB;
   padding: 10px 20px;
-  background-color: #FEA5BB;
+  font-size: 17px;
+  font-weight: bold;
+  background: transparent;
+  position: relative;
+  transition: all 1s;
+  overflow: hidden;
+}
+.open-modal-button:hover {
   color: white;
-  border: none;
-  cursor: pointer;
-  font-size: 16px;
-  border-radius: 5px;
-  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+}
+.open-modal-button::before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 0%;
+  top: 0;
+  left: -40px;
+  transform: skewX(45deg);
+  background-color: #FEA5BB;
+  z-index: -1;
+  transition: all 1s;
 }
 
-.open-modal-button:hover {
-  background-color: #d6718a;
-  transform: scale(1.05);
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
+.open-modal-button:hover::before {
+  width: 160%;
 }
 
 .modal-backdrop {

src/sass/main.css

@@ -1119,7 +1119,7 @@ body {
   position: relative;
   width: 100%;
   max-width: 926px;
-  height: 330px;
+  height: 350px;
   margin: auto;
   overflow: hidden;
 }
@@ -1557,21 +1557,38 @@ body {
 }
 
 .open-modal-button {
-  margin: 20px;
+  color: #FEA5BB;
+  text-transform: uppercase;
+  text-decoration: none;
+  border: 2px solid #FEA5BB;
   padding: 10px 20px;
-  background-color: #FEA5BB;
-  color: white;
-  border: none;
-  cursor: pointer;
-  font-size: 16px;
-  border-radius: 5px;
-  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+  font-size: 17px;
+  font-weight: bold;
+  background: transparent;
+  position: relative;
+  transition: all 1s;
+  overflow: hidden;
 }
 
 .open-modal-button:hover {
-  background-color: #d6718a;
-  transform: scale(1.05);
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
+  color: white;
+}
+
+.open-modal-button::before {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 0%;
+  top: 0;
+  left: -40px;
+  transform: skewX(45deg);
+  background-color: #FEA5BB;
+  z-index: -1;
+  transition: all 1s;
+}
+
+.open-modal-button:hover::before {
+  width: 160%;
 }
 
 .modal-backdrop {
@@ -1744,12 +1761,18 @@ body {
   transform: scale(1.05);
 }
 
+.footer {
+  width: 90%;
+  margin: 0 auto;
+}
+
 li {
   list-style: none;
 }
 
 .footer {
-  width: 1280px;
+  margin: 0 auto;
+  width: 90%;
   height: 247px;
   background-color: rgb(255, 245, 246);
 }