Skip to content

Commit

Permalink
add components
Browse files Browse the repository at this point in the history
  • Loading branch information
Vitalii committed Dec 3, 2024
1 parent b2ff4a5 commit 6297680
Show file tree
Hide file tree
Showing 13 changed files with 647 additions and 41 deletions.
Binary file added src/images/services/learn-more.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/testimonials/Rectangle-blue.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/testimonials/“.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
232 changes: 217 additions & 15 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
href="https://fonts.gstatic.com"
crossorigin="anonymous"
>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<script src="scripts/main.js">
</script>
Expand Down Expand Up @@ -112,40 +112,242 @@ <h2 class="header__information-text">We believe in the power of bold ideas that

</header>
<main class="main">
<!-- #region About us -->
<div class="container">

<div class="about-us">
<section class="about-us" id="about-us">
<div class="about-us__title">
<h2>Who we are</h2>
</div>
<div class="about-us__information">
We embrace a strategic approach to creative ideas. We are interested in people and human relationships. This is the main thing you need to know about us. We believe in the power of bold ideas that can solve business challenges.
</div>
</div>
</section>
</div>

<div class="our-expertise__wrapper">
<!-- #endregion -->
<!-- #region Our expertise -->
<section class="our-expertise__wrapper">
<div class="container">
<div class="our-expertise">
<h2 class="our-expertise">
Our expertise
</h2>
<div class="our-expertise__category ">

<article class="
our-expertise__category--wrapper
our-expertise__category--align-left
">
<div class="our-expertise__category--photo">
<img src="./images/our-expertise/image 1.png" alt="image 1">
</div>
<h3 class="our-expertise__category--title">
Branding
</h3>
<div class="our-expertise__category--information">
We create additional value for companies, products, services as well as verbal and visual ways to deliver it to the audience.
</div>
</article>

<article class="our-expertise__category--wrapper">
<div class="our-expertise__category--photo">
<img src="./images/our-expertise/image 2.png" alt="image 2">
</div>
<h2 class="our-expertise__category--title">
Communication
</h2>
<h3 class="our-expertise__category--information">
We strive to create communications that can increase media performance. We use everything — words, meanings, stories, art, movies.
</h3>
</article>

<article class="
our-expertise__category--wrapper
our-expertise__category--align-right
">
<div class="our-expertise__category--photo">
<img src="./images/our-expertise/image 3.png" alt="image 1">
</div>
<h2 class="our-expertise__category--title">
Strategy
</h2>
<h3 class="our-expertise__category--information">
We create business growth strategies, from the moment of its birth to the achievement of the necessary business indicators.
</h3>

</article>
</div>
</div>
</section>
<!-- #endregion -->
<!-- #region Services -->
<div class="container">
<section class="service">
<div class="service__title--column">
<p>Services</p>
<h2 class="service__title">
Air is a full service creative agency
</h2>
<div class="service__information">
Deep analytics, strong strategy and bright creative ideas.<br><br>
We are sure that first-rate job is possible only if all three components are united.
</div>
</div>

<div class="our-expertise__category">
<div class="our-expertise__category--photo">
<img src="./images/our-expertise/image 1.png" alt="image 1">

<div class="service--items-subgrid">
<div class="service__item-1">
<div class="service__item--number">
<p>001</p>
</div>
<div class="service__item--jobs">
Brand Development<br>
Copywriting<br>
Logo & Webite Design<br>
Packaging
</div>
<div class="service__item--learn-more">
<div id="learn-more1" class="service__item--learn-more-button">
<img src="./images/services/learn-more.png" alt="learn-more">
</div>
<label for="learn-more3">Learn more</label>
</div>
</div>
<div class="our-expertise__category--title">
Branding
<div class="service__item-2">
<div class="service__item--number">
<p>002</p>
</div>
<div class="service__item--jobs">
Сontent Production<br>
Graphic Design<br>
Video Production<br>
Post Production
</div>
<div class="service__item--learn-more">
<div id="learn-more2" class="service__item--learn-more-button">
<img src="./images/services/learn-more.png" alt="learn-more">
</div>
<label for="learn-more3">Learn more</label>
</div>
</div>
<div class="our-expertise__category--information">
We create additional value for companies, products, services as well as verbal and visual ways to deliver it to the audience.
<div class="service__item-3">
<div class="service__item--number">
<p>003</p>
</div>
<div class="service__item--jobs">
Marketing Strategy<br>
Email Marketing<br>
Paid Advertising<br>
Blog Content & SEO
</div>
<div class="service__item--learn-more">
<div id="learn-more3" class="service__item--learn-more-button">
<img src="./images/services/learn-more.png" alt="learn-more">
</div>
<label for="learn-more3">Learn more</label>
</div>
</div>
<div class="service__item-4">
<div class="service__item--number">
<p>004</p>
</div>
<div class="service__item--jobs">
Digital Communications<br>
Influencer Marketing<br>
Product Placements<br>
Strategic Partnerships
</div>
<div class="service__item--learn-more">
<div id="learn-more4" class="service__item--learn-more-button">
<img src="./images/services/learn-more.png" alt="learn-more">
</div>
<label for="learn-more3">Learn more</label>
</div>
</div>
</div>
</section>
</div>
<!-- #endregion -->
<!-- #region Testimonials -->
<div class="container">
<section class="testimonials block-margin">
<p>
Testimonials
</p>
<div class="testimonials__title">
What people&nbsp;say
</div>
<div class="testimonials__cards">

</div>
<article class="testimonials__card">
<div class="testimonials__card-photo">
<img src="./images/testimonials/testimonial-ava-1.jpg" alt="avatar">
</div>
<div class="testimonials__card-comment">
<img src="./images/testimonials/“.png" alt="image">
AIR’s ideas are refreshing and out of the box. Authentic team that focuses on the important path of the brand.
</div>
<div class="testimonials__card-name-professional--wrapper">
<div class="testimonials__card-name">
Tal Gilad
</div>
<div class="testimonials__card-profession">
Teach for America
</div>
</div>
</article>
<article class="testimonials__card">
<div class="testimonials__card-photo">
<img src="./images/testimonials//testimonial-ava-2.jpg" alt="avatar">
</div>
<div class="testimonials__card-comment">
<img src="./images/testimonials/“.png" alt="image">
AIR is an exceptional agency that leads with creative talent, first-class account servicing.
</div>
<div class="testimonials__card-name-professional--wrapper">
<div class="testimonials__card-name">
Azadeh Hawkins
</div>
<div class="testimonials__card-profession">
Hawkins Consulting
</div>
</div>
</article>
<article class="testimonials__card">
<div class="testimonials__card-photo">
<img src="./images/testimonials/testimonial-ava-3.jpg" alt="avatar">
</div>
<div class="testimonials__card-comment">
<img src="./images/testimonials/“.png" alt="image">
AIR raises the agency bar to stratospheric heights on both creative output and client service.
</div>
<div class="testimonials__card-name-professional--wrapper">
<div class="testimonials__card-name">
Michel Grover
</div>
<div class="testimonials__card-profession">
Hulu
</div>
</div>
</article>
</div>
</section>
</div>


<!-- #endregion -->
<!-- #region Components -->

<div class="components--background">
<div class="components container ">
<div class="components__title">
Vision, Passion, Results
</div>
<div class="components__information">
We are sure that first-rate job is possible only if all three components are united.
</div>
<button class="button">Apply</button>
</div>
</div>
<!-- #endregion -->
</main>
</body>
</html>
69 changes: 69 additions & 0 deletions src/styles/blocks/components.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
.components{
font-weight: 600;
padding-block: 72px;
justify-items: center;

&--background{
background: url('../images/Shapes.png') no-repeat center center;
background-color: #fff;
}

@include page-grid;

@include on-tablet{
padding-block: 200px;
}

&__title{
font-size: 44px;
line-height: 120%;
text-align: center;
color: #253757;
grid-column: 1 / -1;
margin-bottom: 24px;

@include on-tablet{
font-size: 52px;

}

@include on-small-desktop{
line-height: 150%;
grid-column: 3 / -3;
}
}

&__information{
font-family: "open sans", Arial, Helvetica, sans-serif;
font-size: 22px;
line-height: 150%;
text-align: center;
color: #6C788B;
margin-bottom: 56px;
grid-column: 1 / -1;

@include on-tablet{
font-size: 24px;
margin-bottom: 64px;
}

@include on-small-desktop{
grid-column: 3 / -3;
}
}

& button{
@extend %button;

grid-column: 1 / -1;

@include on-tablet{
grid-column: 2 / -2;
}

@include on-small-desktop{
grid-column: 3 / -3;
}

}
}
2 changes: 1 addition & 1 deletion src/styles/blocks/header.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.header {
display: none !important;
// display: none !important;
width: 100%;
height: 893px;
background-color: $bg-header;
Expand Down
Loading

0 comments on commit 6297680

Please sign in to comment.