From 5bb2a337f21d564de1202dbd42819cfbd51da188 Mon Sep 17 00:00:00 2001
From: DenisTsymbaliuk <138362539+DenisTsymbaliuk@users.noreply.github.com>
Date: Tue, 21 Nov 2023 23:38:35 +0100
Subject: [PATCH] add4

---
 css/styles.css | 36 ++++++++++++++++++++++++++++++++++--
 index.html     | 48 ++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index fabe443..782f7cc 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -77,6 +77,7 @@ body {
 .logo-link {
   color: #2e2f42;
   padding: 24px 0;
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .current::after {
   content: "";
@@ -153,6 +154,7 @@ body {
   display: block;
   padding-bottom: 24px;
   padding-top: 24px;
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .link-contacts-menu:hover,
@@ -304,6 +306,7 @@ body {
 }
 .title-container {
   padding: 32px 0;
+  margin-bottom: 8px;
 }
 .list-team-container {
   text-align: center;
@@ -342,7 +345,7 @@ body {
 }
 .team-link:hover,
 .team-link:focus {
-  background-color: #404BBF;
+  background-color: #404bbf;
 }
 /*Our Portfolio*/
 .our-portfolio {
@@ -360,12 +363,40 @@ body {
 }
 .list-portfolio {
   width: calc((100% - 48px) / 3);
+  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  margin-left: auto;
+}
+.list-portfolio:hover {
+  box-shadow: 0px 1px 6px rgba(46, 47, 66, 0.08),
+    0px 1px 1px rgba(46, 47, 66, 0.16), 0px 2px 1px rgba(46, 47, 66, 0.08);
+}
+.list-portfolio:hover .portfolio-text,
+.list-portfolio:focus .portfolio-text {
+  transform: translateY(0%);
 }
 .portfilio-container {
   padding: 32px 16px;
   border: 1px solid #e7e9fc;
   border-top: none;
 }
+.portfolio-images {
+  position: relative;
+  overflow: hidden;
+}
+.portfolio-text {
+  position: absolute;
+  top: auto;
+  font-size: 16px;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+  color: #f4f4fd;
+  padding: 40px 32px;
+  background-color: #4d5ae5;
+  height: 100%;
+  width: 100%;
+  transform: translateY(100%);
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 
 /*Footer*/
 .end {
@@ -445,4 +476,5 @@ body {
 }
 .end-link-icons:hover,
 .end-link-icons:focus {
-  background-color: #31D0AA;
+  background-color: #31d0aa;
+}
diff --git a/index.html b/index.html
index 3eed1dc..6adc542 100644
--- a/index.html
+++ b/index.html
@@ -274,42 +274,78 @@ <h3 class="list-title list-team-container">Daniel Wilson</h3>
                 <h2 class="sectoin-title sectoin-title-portfolio">Our Portfolio</h2>
                 <ul class="title-portfolio">
                     <li class="list-portfolio">
-                        <img src="./images/img.jpg" alt="img" width="360" height="300" style="display: block" />
+                        <div class="portfolio-images">
+                            <img src="./images/img.jpg" alt="img" width="360" height="300" style="display: block" />
+                            <p class="portfolio-text">14 Stylish and User-Friendly App Design Concepts · Task Manager
+                                App · Calorie Tracker App
+                                · Exotic Fruit Ecommerce App ·
+                                Cloud Storage App</p>
+                        </div>
                         <div class="portfilio-container">
                             <h3 class="list-title">Banking App</h3>
                             <p class="list-text">App</p>
                         </div>
                     </li>
                     <li class="list-portfolio">
-                        <img src="./images/img1.jpg" alt="img1" width="360" height="300" style="display: block" />
+                        <div class="portfolio-images">
+                            <img src="./images/img1.jpg" alt="img1" width="360" height="300" style="display: block" />
+                            <p class="portfolio-text">14 Stylish and User-Friendly App Design Concepts · Task Manager
+                                App · Calorie Tracker App
+                                · Exotic Fruit Ecommerce App ·
+                                Cloud Storage App</p>
+                        </div>
                         <div class="portfilio-container">
                             <h3 class="list-title">Cashless Payment</h3>
                             <p class="list-text">Marketing</p>
                         </div>
                     </li>
                     <li class="list-portfolio">
-                        <img src="./images/img2.jpg" alt="img2" width="360" height="300" style="display: block" />
+                        <div class="portfolio-images">
+                            <img src="./images/img2.jpg" alt="img2" width="360" height="300" style="display: block" />
+                            <p class="portfolio-text">14 Stylish and User-Friendly App Design Concepts · Task Manager
+                                App · Calorie Tracker App
+                                · Exotic Fruit Ecommerce App ·
+                                Cloud Storage App</p>
+                        </div>
                         <div class="portfilio-container">
                             <h3 class="list-title">Meditation App</h3>
                             <p class="list-text">App</p>
                         </div>
                     </li>
                     <li class="list-portfolio">
-                        <img src="./images/img3.jpg" alt="img3" width="360" height="300" style="display: block" />
+                        <div class="portfolio-images">
+                            <img src="./images/img3.jpg" alt="img3" width="360" height="300" style="display: block" />
+                            <p class="portfolio-text">14 Stylish and User-Friendly App Design Concepts · Task Manager
+                                App · Calorie Tracker App
+                                · Exotic Fruit Ecommerce App ·
+                                Cloud Storage App</p>
+                        </div>
                         <div class="portfilio-container">
                             <h3 class="list-title">Taxi Service</h3>
                             <p class="list-text">Marketing</p>
                         </div>
                     </li>
                     <li class="list-portfolio">
-                        <img src="./images/img4.jpg" alt="img4" width="360" height="300" style="display: block" />
+                        <div class="portfolio-images">
+                            <img src="./images/img4.jpg" alt="img4" width="360" height="300" style="display: block" />
+                            <p class="portfolio-text">14 Stylish and User-Friendly App Design Concepts · Task Manager
+                                App · Calorie Tracker App
+                                · Exotic Fruit Ecommerce App ·
+                                Cloud Storage App</p>
+                        </div>
                         <div class="portfilio-container">
                             <h3 class="list-title">Screen Illustrations</h3>
                             <p class="list-text">Design</p>
                         </div>
                     </li>
                     <li class="list-portfolio">
-                        <img src="./images/img5.jpg" alt="img5" width="360" height="300" style="display: block" />
+                        <div class="portfolio-images">
+                            <img src="./images/img5.jpg" alt="img5" width="360" height="300" style="display: block" />
+                            <p class="portfolio-text">14 Stylish and User-Friendly App Design Concepts · Task Manager
+                                App · Calorie Tracker App
+                                · Exotic Fruit Ecommerce App ·
+                                Cloud Storage App</p>
+                        </div>
                         <div class="portfilio-container">
                             <h3 class="list-title">Online Courses</h3>
                             <p class="list-text">Marketing</p>