Skip to content

Commit

Permalink
'fixed'
Browse files Browse the repository at this point in the history
  • Loading branch information
@kandyy9
kandyy9 committed Mar 5, 2024
1 parent a04fc4b commit 43c653d
Show file tree
Hide file tree
Showing 2 changed files with 176 additions and 145 deletions.
24 changes: 23 additions & 1 deletion css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,20 +231,42 @@ img{
margin-bottom: 8px;
}

.portfolio ul{
.portfolio .section-title{
margin-bottom: 72px;
}

.portfolio-list {
display: flex;
flex-wrap: wrap;
column-gap: 24px;
row-gap: 48px;
}

.portfolio-card{
width: calc((100% - 48px) / 3);
}

.application-info{
padding: 32px 16px;
border: 1px solid #e7e9fc;
border-top: none;
}

.application-info .section-item-title{
margin-bottom: 8px
}

.footer-info{
background-color: var(--dark-color);
display: flex;
flex-direction: column;
padding:100px 0;
}

footer .logo>{
display: inline-block;
margin-bottom: 16px;
}

footer .logo > .logo-separation{
color: var(--light-color);
Expand Down
297 changes: 153 additions & 144 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,170 +59,179 @@ <h1 class="hero-title">Effective Solutions for Your Business</h1>
</section>
<section class="quality">
<div class="container wrap">
<h2 class="visually-hidden"></h2>
<ul class="quality-list">
<li class="quality-list-item">
<h3 class="section-item-title">Strategy</h3>
<p class="section-paragraph">
Our goal is to identify the business problem to walk away with
the perfect and creative solution.
</p>
</li>
<li class="quality-list-item">
<h3 class="section-item-title">Punctuality</h3>
<p class="section-paragraph">
Bring the key message to the brand's audience for the best
price within the shortest possible time.
</p>
</li>
<li class="quality-list-item">
<h3 class="section-item-title">Diligence</h3>
<p class="section-paragraph">
Research and confirm brands that present the strongest digital
growth opportunities and minimize risk.
</p>
</li>
<li class="quality-list-item">
<h3 class="section-item-title">Technologies</h3>
<p class="section-paragraph">
Design practice focused on digital experiences. We bring forth
a deep passion for problem-solving.
</p>
</li>
</ul>
</div>
<h2 class="visually-hidden"></h2>
<ul class="quality-list">
<li class="quality-list-item">
<h3 class="section-item-title">Strategy</h3>
<p class="section-paragraph">
Our goal is to identify the business problem to walk away with
the perfect and creative solution.
</p>
</li>
<li class="quality-list-item">
<h3 class="section-item-title">Punctuality</h3>
<p class="section-paragraph">
Bring the key message to the brand's audience for the best price
within the shortest possible time.
</p>
</li>
<li class="quality-list-item">
<h3 class="section-item-title">Diligence</h3>
<p class="section-paragraph">
Research and confirm brands that present the strongest digital
growth opportunities and minimize risk.
</p>
</li>
<li class="quality-list-item">
<h3 class="section-item-title">Technologies</h3>
<p class="section-paragraph">
Design practice focused on digital experiences. We bring forth a
deep passion for problem-solving.
</p>
</li>
</ul>
</div>
</section>
<section class="team">
<div class="container">
<h2 class="section-title">Our Team</h2>
<ul class="team-list">
<li class="team-member-card">
<img
class="our-team-images"
src="./images/img-3-min.jpg"
alt="Mark Guerrero"
/>
<div class="member-info">
<h3 class="section-item-title">Mark Guerrero</h3>
<p class="section-paragraph">Product Designer</p>
</div>
</li>
<li class="team-member-card">
<img
class="our-team-images"
src="./images/img-2-min.jpg"
alt="Tom Ford"
width="264"
height="260"
/>
<div class="member-info">
<h3 class="section-item-title">Tom Ford</h3>
<p class="section-paragraph">Frontend Developer</p>
</div>
</li>
<li class="team-member-card">
<img
class="our-team-images"
src="./images/img-1-min.jpg"
alt="Camila Garcia"
width="264"
height="260"
/>
<div class="member-info">
<h3 class="section-item-title">Camila Garcia</h3>
<p class="section-paragraph">Marketing</p>
</div>
</li>
<li class="team-member-card">
<img
class="our-team-images"
src="./images/img-min.jpg"
alt="Daniel Wilson"
width="264"
height="260"
/>
<div class="member-info">
<h3 class="section-item-title">Daniel Wilson</h3>
<p class="section-paragraph">UI Designer</p>
</div>
</li>
</ul>
<h2 class="section-title">Our Team</h2>
<ul class="team-list">
<li class="team-member-card">
<img
class="our-team-images"
src="./images/img-3-min.jpg"
alt="Mark Guerrero"
/>
<div class="member-info">
<h3 class="section-item-title">Mark Guerrero</h3>
<p class="section-paragraph">Product Designer</p>
</div>
</li>
<li class="team-member-card">
<img
class="our-team-images"
src="./images/img-2-min.jpg"
alt="Tom Ford"
width="264"
height="260"
/>
<div class="member-info">
<h3 class="section-item-title">Tom Ford</h3>
<p class="section-paragraph">Frontend Developer</p>
</div>
</li>
<li class="team-member-card">
<img
class="our-team-images"
src="./images/img-1-min.jpg"
alt="Camila Garcia"
width="264"
height="260"
/>
<div class="member-info">
<h3 class="section-item-title">Camila Garcia</h3>
<p class="section-paragraph">Marketing</p>
</div>
</li>
<li class="team-member-card">
<img
class="our-team-images"
src="./images/img-min.jpg"
alt="Daniel Wilson"
width="264"
height="260"
/>
<div class="member-info">
<h3 class="section-item-title">Daniel Wilson</h3>
<p class="section-paragraph">UI Designer</p>
</div>
</li>
</ul>
</div>
</section>
<section class="portfolio">
<div class="container">
<div class="wrap">
<h2 class="section-title">Our Portfolio</h2>
<ul>
<li class="portfolio-card">
<img
class="portfolio-images"
src="./images/row1-1.jpg"
alt="Bank application"
width="360"
height="300"
/>
<h2 class="section-title">Our Portfolio</h2>
<ul class="portfolio-list">
<li class="portfolio-card">
<img
class="portfolio-images"
src="./images/row1-1.jpg"
alt="Bank application"
width="360"
height="300"
/>
<div>
<h3 class="section-item-title">Banking App</h3>
<p class="section-paragraph">App</p>
</li>
<li>
<img
class="portfolio-images"
src="./images/row1-2.jpg"
alt="Paying with smartphone"
width="360"
height="300"
/>
</div>
</li>
<li>
<img
class="portfolio-images"
src="./images/row1-2.jpg"
alt="Paying with smartphone"
width="360"
height="300"
/>
<div class="application-info">
<h3 class="section-item-title">Cashless Payment</h3>
<p class="section-paragraph">Marketing</p>
</li>
<li class="portfolio-card">
<img
class="portfolio-images"
src="./images/row1-3.jpg"
alt="Phone and laptop"
width="360"
height="300"
/>
</div>
</li>
<li class="portfolio-card">
<img
class="portfolio-images"
src="./images/row1-3.jpg"
alt="Phone and laptop"
width="360"
height="300"
/>
<div class="application-info">
<h3 class="section-item-title">Meditation App</h3>
<p class="section-paragraph">App</p>
</li>
<li>
<img
class="portfolio-images"
src="./images/row2-1.jpg"
alt="Driving taxi"
width="360"
height="300"
/>
</div>
</li>
<li>
<img
class="portfolio-images"
src="./images/row2-1.jpg"
alt="Driving taxi"
width="360"
height="300"
/>
<div class="application-info">
<h3 class="section-item-title">Taxi Service</h3>
<p class="section-paragraph">Marketing</p>
</li>
<li class="portfolio-card">
<img
class="portfolio-images"
src="./images/row2-2.jpg"
alt="Background illustrations"
width="360"
height="300"
/>
</div>
</li>
<li class="portfolio-card">
<img
class="portfolio-images"
src="./images/row2-2.jpg"
alt="Background illustrations"
width="360"
height="300"
/>
<div class="application-info">
<h3 class="section-item-title">Screen Illustrations</h3>
<p class="section-paragraph">Design</p>
</li>
<li class="portfolio-card">
<img
class="portfolio-images"
src="./images/row2-3.jpg"
alt="Girl speaks on the phone"
width="360"
height="300"
/>
</div>
</li>
<li class="portfolio-card">
<img
class="portfolio-images"
src="./images/row2-3.jpg"
alt="Girl speaks on the phone"
width="360"
height="300"
/>
<div class="application-info">
<h3 class="section-item-title">Online Courses</h3>
<p class="section-paragraph">Marketing</p>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</section>
</main>
Expand Down

0 comments on commit 43c653d

Please sign in to comment.