Skip to content

Commit

Permalink
add4
Browse files Browse the repository at this point in the history
  • Loading branch information
@DenisTsymbaliuk
DenisTsymbaliuk committed Nov 21, 2023
1 parent 99c44a3 commit 5bb2a33
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 8 deletions.
36 changes: 34 additions & 2 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: "";
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -304,6 +306,7 @@ body {
}
.title-container {
padding: 32px 0;
margin-bottom: 8px;
}
.list-team-container {
text-align: center;
Expand Down Expand Up @@ -342,7 +345,7 @@ body {
}
.team-link:hover,
.team-link:focus {
background-color: #404BBF;
background-color: #404bbf;
}
/*Our Portfolio*/
.our-portfolio {
Expand All @@ -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 {
Expand Down Expand Up @@ -445,4 +476,5 @@ body {
}
.end-link-icons:hover,
.end-link-icons:focus {
background-color: #31D0AA;
background-color: #31d0aa;
}
48 changes: 42 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 5bb2a33

Please sign in to comment.