new button and components modal

Max1mkasssss · Aug 20, 2024 · 2acac73 · 2acac73
1 parent dc5a110
commit 2acac73
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 28 deletions.
diff --git a/src/images/modal-photo/Tymur.jpg b/src/images/modal-photo/Tymur.jpg
diff --git a/src/partials/modal-team.html b/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="">

diff --git a/src/sass/components/_team-modal.scss b/src/sass/components/_team-modal.scss
@@ -6,23 +6,36 @@ body {
 }
 
 .open-modal-button {
-  margin: -30px;
+  color: #FEA5BB;
+  text-transform: uppercase;
+  text-decoration: none;
+  border: 2px solid #FEA5BB;
   padding: 10px 20px;
-  width: 150px;
-  height: 50px;
-  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 {

diff --git a/src/sass/main.css b/src/sass/main.css
@@ -1558,23 +1558,38 @@ body {
 }
 
 .open-modal-button {
-  margin: -30px;
+  color: #FEA5BB;
+  text-transform: uppercase;
+  text-decoration: none;
+  border: 2px solid #FEA5BB;
   padding: 10px 20px;
-  width: 150px;
-  height: 50px;
-  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 {
@@ -1757,7 +1772,8 @@ li {
 }
 
 .footer {
-  width: 1280px;
+  margin: 0 auto;
+  width: 90%;
   height: 247px;
   background-color: rgb(255, 245, 246);
 }

diff --git a/src/sass/main.css.map b/src/sass/main.css.map