Skip to content

Commit

Permalink
Initial before validation
Browse files Browse the repository at this point in the history
  • Loading branch information
@SWizzard779
SWizzard779 committed Nov 17, 2023
1 parent 63b492d commit aae990c
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 16 deletions.
45 changes: 45 additions & 0 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,10 @@ main {
display: flex;
}

.studio-item .list-items {
color: #404bbf;
}

.studio-item::after {
display: flex;
gap: 20px;
Expand Down Expand Up @@ -318,6 +322,34 @@ main {
border-top: none;
}

.overlay-box {
position: relative;
width: 360px;
height: 300px;
overflow: hidden;
}

.overlay { /* cashless payment h3 and Marketing p are out :) */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #4D5AE5;

transform: translateY(100%);
transition: transform 250ms cubic-bezier(0.4, 0 0.2, 1);
}

.overlay p {
color:#F4F4FD;
padding: 40px 32px 164px 32px;
}

.overlay-box:hover .overlay {
transform: translateY(0);
}

.portfolio-header {
font-size: 36px;
line-height: 1.11;
Expand All @@ -337,6 +369,11 @@ main {

.list-portfolio {
width: calc((100% - 48px) / 3);
transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.list-portfolio:hover {
box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08), 0px 1px 1px 0px rgba(46, 47, 66, 0.16), 0px 1px 6px 0px rgba(46, 47, 66, 0.08);
}

.list-portfolio .strategy {
Expand Down Expand Up @@ -401,6 +438,14 @@ main {
display: inline-flex;
}

.socials-footer .social-items {
transition: background-color 250ms cubic-bezier(0.4, 0 0.2, 1);
}

.social-items:hover {
background-color: #31D0AA;
}




35 changes: 19 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,45 +206,48 @@ <h3 class="strategy team-header">Daniel Wilson</h3>
<h2 class="portfolio-header">Our Portfolio</h2>
<ul class="portfolio-menu">
<li class="list-portfolio">
<img src="./images/img.jpg" alt="login page to banking app" width="360" height="420">
<img src="./images/img.jpg" alt="login page to banking app" width="360" height="300">
<div class="portfolio-container">
<h3 class="strategy portfolio-subheader">Banking App</h3>
<p class="paragraph portfolio-paragraph">App</p>
</div>
</li>
<li class="list-portfolio">
<img src="./images/img-2.jpg" alt="wireless payment transaction" width="360" height="420">
<li class="list-portfolio overlay-box">
<div class="overlay">
<p>14 Stylish and User-Friendly App Design Concepts · Task Manager App · Calorie Tracker App · Exotic Fruit Ecommerce App · Cloud Storage App</p>
</div>
<img src="./images/img-2.jpg" alt="wireless payment transaction" width="360" height="300">
<div class="portfolio-container">
<h3 class="strategy portfolio-subheader">Banking App</h3>
<p class="paragraph portfolio-paragraph">App</p>
<h3 class="strategy portfolio-subheader">Cashless Payment</h3>
<p class="paragraph portfolio-paragraph">Marketing</p>
</div>
</li>
<li class="list-portfolio">
<img src="./images/img-3.jpg" alt="laptop and smartphone in use for meditation" width="360" height="420">
<img src="./images/img-3.jpg" alt="laptop and smartphone in use for meditation" width="360" height="300">
<div class="portfolio-container">
<h3 class="strategy portfolio-subheader">Banking App</h3>
<h3 class="strategy portfolio-subheader">Mediation App</h3>
<p class="paragraph portfolio-paragraph">App</p>
</div>
</li>
<li class="list-portfolio">
<img src="./images/img-4.jpg" alt="heands on a car wheel" width="360" height="420">
<img src="./images/img-4.jpg" alt="heands on a car wheel" width="360" height="300">
<div class="portfolio-container">
<h3 class="strategy portfolio-subheader">Banking App</h3>
<p class="paragraph portfolio-paragraph">App</p>
<h3 class="strategy portfolio-subheader">Taxi Service</h3>
<p class="paragraph portfolio-paragraph">Marketing</p>
</div>
</li>
<li class="list-portfolio">
<img src="./images/img-5.jpg" alt="design visualization" width="360" height="420">
<img src="./images/img-5.jpg" alt="design visualization" width="360" height="300">
<div class="portfolio-container">
<h3 class="strategy portfolio-subheader">Banking App</h3>
<p class="paragraph portfolio-paragraph">App</p>
<h3 class="strategy portfolio-subheader">Screen Illustrations</h3>
<p class="paragraph portfolio-paragraph">Design</p>
</div>
</li>
<li class="list-portfolio">
<img src="./images/img-6.jpg" alt="a girl using smartphone" width="360" height="420">
<img src="./images/img-6.jpg" alt="a girl using smartphone" width="360" height="300">
<div class="portfolio-container">
<h3 class="strategy portfolio-subheader">Banking App</h3>
<p class="paragraph portfolio-paragraph">App</p>
<h3 class="strategy portfolio-subheader">Online Courses</h3>
<p class="paragraph portfolio-paragraph">Marketing</p>
</div>
</li>
</ul>
Expand Down

0 comments on commit aae990c

Please sign in to comment.