Skip to content

Commit

Permalink
Вёрстка и стилизация блока Team
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexChoirSPb
AlexChoirSPb committed Oct 22, 2024
1 parent 4ad1ee1 commit ce56e0a
Show file tree
Hide file tree
Showing 14 changed files with 543 additions and 10 deletions.
5 changes: 5 additions & 0 deletions images/icons/linkedin.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions images/team/1.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions images/team/2.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions images/team/3.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions images/team/4.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions images/team/5.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions images/team/6.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
297 changes: 297 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -613,6 +613,303 @@ <h3 class="process__accordion-title">
</div>
</div>
</section>

<section class="section container">
<header class="section__header">
<h2 class="section__title puddle-bg">Team</h2>
<div class="section__description">
<p>
Meet the skilled and experienced team behind our successful
digital marketing strategies
</p>
</div>
</header>
<div class="section__body">
<div class="team">
<ul class="team__list grid grid--3">
<li class="team__item">
<article class="team-card">
<header class="team-card__header">
<img
src="./images/team/1.svg"
alt=""
class="team-card__image"
width="100"
height="100"
/>
<div class="team-card__info">
<h3 class="team-card__name h4">John Smith</h3>
<p class="team-card__post">CEO and Founder</p>
</div>
<a href="" class="team-card__link" target="_blank">
<span class="visually-hidden">LinkedIn</span>
<svg
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.317757 17H3.81308V5.68438H0.317757V17Z"
fill="#B9FF66"
/>
<path
d="M0 2.07188C0 3.1875 0.900311 4.09062 2.06542 4.09062C3.17757 4.09062 4.07788 3.1875 4.07788 2.07188C4.07788 0.95625 3.17757 0 2.06542 0C0.900311 0 0 0.95625 0 2.07188Z"
fill="#B9FF66"
/>
<path
d="M13.4517 17H17V10.7844C17 7.75625 16.3115 5.36562 12.7632 5.36562C11.0685 5.36562 9.90343 6.32188 9.42679 7.225H9.37383V5.68438H6.03738V17H9.53271V11.4219C9.53271 9.93437 9.79751 8.5 11.6511 8.5C13.4517 8.5 13.4517 10.2 13.4517 11.475V17Z"
fill="#B9FF66"
/>
</svg>
</a>
</header>
<div class="team-card__body">
<p>
10+ years of experience in digital marketing. Expertise in
SEO, PPC, and content strategy
</p>
</div>
</article>
</li>
<li class="team__item">
<article class="team-card">
<header class="team-card__header">
<img
src="./images/team/1.svg"
alt=""
class="team-card__image"
width="100"
height="100"
/>
<div class="team-card__info">
<h3 class="team-card__name h4">Jane Doe</h3>
<p class="team-card__post">Director of Operations</p>
</div>
<a href="" class="team-card__link" target="_blank">
<span class="visually-hidden">LinkedIn</span>
<svg
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.317757 17H3.81308V5.68438H0.317757V17Z"
fill="#B9FF66"
/>
<path
d="M0 2.07188C0 3.1875 0.900311 4.09062 2.06542 4.09062C3.17757 4.09062 4.07788 3.1875 4.07788 2.07188C4.07788 0.95625 3.17757 0 2.06542 0C0.900311 0 0 0.95625 0 2.07188Z"
fill="#B9FF66"
/>
<path
d="M13.4517 17H17V10.7844C17 7.75625 16.3115 5.36562 12.7632 5.36562C11.0685 5.36562 9.90343 6.32188 9.42679 7.225H9.37383V5.68438H6.03738V17H9.53271V11.4219C9.53271 9.93437 9.79751 8.5 11.6511 8.5C13.4517 8.5 13.4517 10.2 13.4517 11.475V17Z"
fill="#B9FF66"
/>
</svg>
</a>
</header>
<div class="team-card__body">
<p>
7+ years of experience in project management and team
leadership. Strong organizational and communication skills
</p>
</div>
</article>
</li>
<li class="team__item">
<article class="team-card">
<header class="team-card__header">
<img
src="./images/team/3.svg"
alt=""
class="team-card__image"
width="100"
height="100"
/>
<div class="team-card__info">
<h3 class="team-card__name h4">Michael Brown</h3>
<p class="team-card__post">Senior SEO Specialist</p>
</div>
<a href="" class="team-card__link" target="_blank">
<span class="visually-hidden">LinkedIn</span>
<svg
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.317757 17H3.81308V5.68438H0.317757V17Z"
fill="#B9FF66"
/>
<path
d="M0 2.07188C0 3.1875 0.900311 4.09062 2.06542 4.09062C3.17757 4.09062 4.07788 3.1875 4.07788 2.07188C4.07788 0.95625 3.17757 0 2.06542 0C0.900311 0 0 0.95625 0 2.07188Z"
fill="#B9FF66"
/>
<path
d="M13.4517 17H17V10.7844C17 7.75625 16.3115 5.36562 12.7632 5.36562C11.0685 5.36562 9.90343 6.32188 9.42679 7.225H9.37383V5.68438H6.03738V17H9.53271V11.4219C9.53271 9.93437 9.79751 8.5 11.6511 8.5C13.4517 8.5 13.4517 10.2 13.4517 11.475V17Z"
fill="#B9FF66"
/>
</svg>
</a>
</header>
<div class="team-card__body">
<p>
5+ years of experience in SEO and content creation.
Proficient in keyword research and on-page optimization
</p>
</div>
</article>
</li>
<li class="team__item">
<article class="team-card">
<header class="team-card__header">
<img
src="./images/team/4.svg"
alt=""
class="team-card__image"
width="100"
height="100"
/>
<div class="team-card__info">
<h3 class="team-card__name h4">Emily Johnson</h3>
<p class="team-card__post">PPC Manager</p>
</div>
<a href="" class="team-card__link" target="_blank">
<span class="visually-hidden">LinkedIn</span>
<svg
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.317757 17H3.81308V5.68438H0.317757V17Z"
fill="#B9FF66"
/>
<path
d="M0 2.07188C0 3.1875 0.900311 4.09062 2.06542 4.09062C3.17757 4.09062 4.07788 3.1875 4.07788 2.07188C4.07788 0.95625 3.17757 0 2.06542 0C0.900311 0 0 0.95625 0 2.07188Z"
fill="#B9FF66"
/>
<path
d="M13.4517 17H17V10.7844C17 7.75625 16.3115 5.36562 12.7632 5.36562C11.0685 5.36562 9.90343 6.32188 9.42679 7.225H9.37383V5.68438H6.03738V17H9.53271V11.4219C9.53271 9.93437 9.79751 8.5 11.6511 8.5C13.4517 8.5 13.4517 10.2 13.4517 11.475V17Z"
fill="#B9FF66"
/>
</svg>
</a>
</header>
<div class="team-card__body">
<p>
3+ years of experience in paid search advertising. Skilled
in campaign management and performance analysis
</p>
</div>
</article>
</li>
<li class="team__item">
<article class="team-card">
<header class="team-card__header">
<img
src="./images/team/5.svg"
alt=""
class="team-card__image"
width="100"
height="100"
/>
<div class="team-card__info">
<h3 class="team-card__name h4">Brian Williams</h3>
<p class="team-card__post">Social Media Specialist</p>
</div>
<a href="" class="team-card__link" target="_blank">
<span class="visually-hidden">LinkedIn</span>
<svg
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.317757 17H3.81308V5.68438H0.317757V17Z"
fill="#B9FF66"
/>
<path
d="M0 2.07188C0 3.1875 0.900311 4.09062 2.06542 4.09062C3.17757 4.09062 4.07788 3.1875 4.07788 2.07188C4.07788 0.95625 3.17757 0 2.06542 0C0.900311 0 0 0.95625 0 2.07188Z"
fill="#B9FF66"
/>
<path
d="M13.4517 17H17V10.7844C17 7.75625 16.3115 5.36562 12.7632 5.36562C11.0685 5.36562 9.90343 6.32188 9.42679 7.225H9.37383V5.68438H6.03738V17H9.53271V11.4219C9.53271 9.93437 9.79751 8.5 11.6511 8.5C13.4517 8.5 13.4517 10.2 13.4517 11.475V17Z"
fill="#B9FF66"
/>
</svg>
</a>
</header>
<div class="team-card__body">
<p>
4+ years of experience in social media marketing.
Proficient in creating and scheduling content, analyzing
metrics, and building engagement
</p>
</div>
</article>
</li>
<li class="team__item">
<article class="team-card">
<header class="team-card__header">
<img
src="./images/team/6.svg"
alt=""
class="team-card__image"
width="100"
height="100"
/>
<div class="team-card__info">
<h3 class="team-card__name h4">Sarah Kim</h3>
<p class="team-card__post">Content Creator</p>
</div>
<a href="" class="team-card__link" target="_blank">
<span class="visually-hidden">LinkedIn</span>
<svg
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.317757 17H3.81308V5.68438H0.317757V17Z"
fill="#B9FF66"
/>
<path
d="M0 2.07188C0 3.1875 0.900311 4.09062 2.06542 4.09062C3.17757 4.09062 4.07788 3.1875 4.07788 2.07188C4.07788 0.95625 3.17757 0 2.06542 0C0.900311 0 0 0.95625 0 2.07188Z"
fill="#B9FF66"
/>
<path
d="M13.4517 17H17V10.7844C17 7.75625 16.3115 5.36562 12.7632 5.36562C11.0685 5.36562 9.90343 6.32188 9.42679 7.225H9.37383V5.68438H6.03738V17H9.53271V11.4219C9.53271 9.93437 9.79751 8.5 11.6511 8.5C13.4517 8.5 13.4517 10.2 13.4517 11.475V17Z"
fill="#B9FF66"
/>
</svg>
</a>
</header>
<div class="team-card__body">
<p>
2+ years of experience in writing and editing Skilled in
creating compelling, SEO-optimized content for various
industries
</p>
</div>
</article>
</li>
</ul>
<button class="team__button button">See all team</button>
</div>
</div>
</section>
</main>
<dialog class="mobile-overlay visible-mobile" id="mobileOverlay">
<form class="mobile-overlay__close-button-wrapper" method="dialog">
Expand Down
8 changes: 4 additions & 4 deletions styles/_globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,19 @@ h4 {
font-weight: 500;
}

h1 {
h1, .h1 {
@include fluid-text(60, 43);
}

h2 {
h2, .h2 {
@include fluid-text(40, 36);
}

h3 {
h3, .h3 {
@include fluid-text(30, 26);
}

h4 {
h4, .h4 {
@include fluid-text(20, 18);
}

54 changes: 54 additions & 0 deletions styles/blocks/_team-card.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
.team-card {
padding: 40px 35px;

border-radius: var(--border-radius-large);
border: var(--border);
box-shadow: var(--shadow);

height: 100%;

&__header {
display: flex;
}

&__image {
&:not(:last-child) {
margin-right: 20px;
}
}

&__info {
align-self: end;

&:not(:last-child) {
margin-right: 10px;
}
}

&__name {
&:not(:last-child) {
margin-bottom: 3px;
}
}


&__link {
@include flex-center;
@include square(34px);

flex-shrink: 0;

margin-left: auto;
align-self: start;

color: var(--color-accent);
background-color: var(--color-dark);
border-radius: 50%;
}

&__body {
padding-top: 28px;
margin-top: 28px;
border-top: var(--border);
}
}
Loading

0 comments on commit ce56e0a

Please sign in to comment.