Skip to content

Commit

Permalink
other devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@MOODDDII
MOODDDII committed Oct 8, 2024
1 parent 976eb38 commit 332580f
Show file tree
Hide file tree
Showing 18 changed files with 365 additions and 72 deletions.
9 changes: 9 additions & 0 deletions src/images/slider/GwVmBgpP-PQ.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.
9 changes: 0 additions & 9 deletions src/images/slider/Photo(cut).svg
View file

This file was deleted.

9 changes: 0 additions & 9 deletions src/images/slider/Photo.svg
View file

This file was deleted.

9 changes: 9 additions & 0 deletions src/images/slider/qPojqUji_y4.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.
138 changes: 89 additions & 49 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,30 @@
alt="logo"
>
<img
class="top_bar_left_img top_bar_left_img-menu-btn"
class="top_bar_left_img top_bar_left_img-burger_btn"
id="menu-btn"
src="./images/Menu.svg"
alt="menu"
>
</div>

<div class="top_bar_center">
<ul class="top_bar_list">
<li class="top_bar_list_item">
<a href="#" class="top_bar_list_link">About us</a>
</li>
<li class="top_bar_list_item">
<a href="#" class="top_bar_list_link">Services</a>
</li>
<li class="top_bar_list_item">
<a href="#" class="top_bar_list_link">Testimonials</a>
</li>
<li class="top_bar_list_item">
<a href="#" class="top_bar_list_link">Contact Us</a>
</li>
</ul>
</div>

<div class="top_bar_right">
<a class="top_bar_right_hire_us" href="#">Hire us</a>
</div>
Expand All @@ -68,14 +85,14 @@
<div class="header_content">
<div class="header_content_agency container">
<h1 class="header_content_agency_title">Strategic Agency</h1>
<p class="header_content_agency_text">We believe in the power of bold ideas that can solve business challenges.</p>
<p class="header_content_agency_text">We believe in the power of bold ideas that<span class="header_content_agency_text--br"></span> can solve business challenges.</p>
<a class="header_content_agency_btn" href="#">Learn more</a>
</div>

<div class="header_content_slider slider">
<div class="slider_slide">
<img
src="./images/slider/Photo(cut).svg"
src="./images/slider/GwVmBgpP-PQ.svg"
alt="slide"
class="slider_slide_img"
>
Expand All @@ -99,7 +116,7 @@ <h3 class="slider_slide_extra_title">Intro</h3>

<div class="slider_slide">
<img
src="./images/slider/Photo(cut).svg"
src="./images/slider/qPojqUji_y4.svg"
alt="slide"
class="slider_slide_img"
>
Expand All @@ -125,11 +142,15 @@ <h3 class="slider_slide_extra_title">Intro 2</h3>
</header>

<main class="sections">
<section class="sections_section who_we container">
<h2 class="who_we_title">Who we are</h2>
<p class="who_we_text">
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.
</p>
<section class="sections_section who_we">
<div class="container">
<div class="who_we_wrapper">
<h2 class="who_we_title">Who we are</h2>
<p class="who_we_text">
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.
</p>
</div>
</div>
</section>

<section class="sections_section expertise">
Expand Down Expand Up @@ -179,7 +200,7 @@ <h3 class="expertise_items_item_child expertise_items_item_title">Strategy</h3>
<section class="sections_section services">
<div class="container">
<div class="services_items">
<article class="services_items_item services_items_item_head">
<article class="services_items_item services_items_item--0 services_items_item_head">
<h4 class="services_items_item_head_title">Services</h4>
<h2 class="services_items_item_head_second-title">Air is a full service creative agency</h2>
<p class="services_items_item_head_text">
Expand All @@ -189,7 +210,7 @@ <h2 class="services_items_item_head_second-title">Air is a full service creative
</p>
</article>

<article class="services_items_item services_items_item_body">
<article class="services_items_item services_items_item--1 services_items_item_body">
<p class="services_items_item_body_number">001</p>
<p class="services_items_item_body_text">
Brand Development <br>
Expand All @@ -209,7 +230,7 @@ <h2 class="services_items_item_head_second-title">Air is a full service creative
</div>
</article>

<article class="services_items_item services_items_item_body">
<article class="services_items_item services_items_item--2 services_items_item_body">
<p class="services_items_item_body_number">002</p>
<p class="services_items_item_body_text">
Сontent Production <br>
Expand All @@ -229,7 +250,7 @@ <h2 class="services_items_item_head_second-title">Air is a full service creative
</div>
</article>

<article class="services_items_item services_items_item_body">
<article class="services_items_item services_items_item--3 services_items_item_body">
<p class="services_items_item_body_number">003</p>
<p class="services_items_item_body_text">
Marketing Strategy <br>
Expand All @@ -249,7 +270,7 @@ <h2 class="services_items_item_head_second-title">Air is a full service creative
</div>
</article>

<article class="services_items_item services_items_item_body">
<article class="services_items_item services_items_item--4 services_items_item_body">
<p class="services_items_item_body_number">004</p>
<p class="services_items_item_body_text">
Digital Communications <br>
Expand All @@ -275,10 +296,10 @@ <h2 class="services_items_item_head_second-title">Air is a full service creative
<section class="sections_section what-they-say">
<div class="container">
<h4 class="what-they-say_title">Testimonials</h4>
<h2 class="what-they-say_second-title">What people say</h2>
<h2 class="what-they-say_second-title">What<span class="new-line"></span> people say</h2>

<div class="what-they-say_cards">
<article class="what-they-say_cards_card">
<article class="what-they-say_cards_card what-they-say_cards_card--1">
<div class="what-they-say_cards_card_person">
<img
class="what-they-say_cards_card_person_img"
Expand All @@ -298,7 +319,7 @@ <h2 class="what-they-say_second-title">What people say</h2>
<p class="what-they-say_cards_card_position">Teach for America</p>
</article>

<article class="what-they-say_cards_card">
<article class="what-they-say_cards_card what-they-say_cards_card--2">
<div class="what-they-say_cards_card_person">
<img
class="what-they-say_cards_card_person_img"
Expand All @@ -318,7 +339,7 @@ <h2 class="what-they-say_second-title">What people say</h2>
<p class="what-they-say_cards_card_position">Hawkins Consulting</p>
</article>

<article class="what-they-say_cards_card">
<article class="what-they-say_cards_card what-they-say_cards_card--3">
<div class="what-they-say_cards_card_person">
<img
class="what-they-say_cards_card_person_img"
Expand All @@ -343,11 +364,13 @@ <h2 class="what-they-say_second-title">What people say</h2>

<section class="sections_section assurance">
<div class="container">
<h2 class="assurance_title">Vision, Passion, Results</h2>
<p class="assurance_text">
We are sure that first-rate job is possible only if all three components are united.
</p>
<a href="#" class="assurance_btn">Apply</a>
<div class="assurance_wrapper">
<h2 class="assurance_title">Vision, Passion, Results</h2>
<p class="assurance_text">
We are sure that first-rate job is possible only if all three components are united.
</p>
<a href="#" class="assurance_btn">Apply</a>
</div>
</div>
</section>
</main>
Expand All @@ -363,16 +386,19 @@ <h2 class="form_title">Send us a message</h2>
class="form_input"
type="email"
placeholder="Your email"
required
>
<input
class="form_input"
type="text"
placeholder="Your name"
required
>
<input
class="form_input"
type="text"
placeholder="Your message"
required
>
<input
class="form_btn"
Expand All @@ -394,38 +420,52 @@ <h4 class="contact-us_wrapper_title-small">Visit us</h4>

<h4 class="contact-us_wrapper_title-small">Our socials</h4>
<div class="contact-us_wrapper_images">
<img src="./images/icons/Layer 2.svg" alt="facebook">
<img src="./images/icons/twitter 1.svg" alt="twitter">
<img src="./images/icons/instagram.svg" alt="instagram">
<img
class="contact-us_wrapper_images_img"
src="./images/icons/Layer 2.svg"
alt="facebook"
>
<img
class="contact-us_wrapper_images_img"
src="./images/icons/twitter 1.svg"
alt="twitter"
>
<img
class="contact-us_wrapper_images_img"
src="./images/icons/instagram.svg"
alt="instagram"
>
</div>
</div>
</div>

<div class="bottom-bar footer_wrapper_bottom-bar">
<img
class="top_bar_left_img top_bar_left_img-logo"
src="./images/logo/Logo.svg"
alt="logo"
>
<div class="bottom-bar_wrapper">
<img
class="bottom-bar_left_img bottom-bar_left_img-logo"
src="./images/logo/Logo.svg"
alt="logo"
>

<div class="bottom-bar bottom-bar_menu">
<ul class="bottom-bar_list">
<li class="bottom-bar_list_item">
<a href="#" class="bottom-bar_list_link">About us</a>
</li>
<li class="bottom-bar_list_item">
<a href="#" class="bottom-bar_list_link">Home</a>
</li>
<li class="bottom-bar_list_item">
<a href="#" class="bottom-bar_list_link">Work</a>
</li>
<li class="bottom-bar_list_item">
<a href="#" class="bottom-bar_list_link">Services</a>
</li>
<li class="bottom-bar_list_item">
<a href="#" class="bottom-bar_list_link">Contact us</a>
</li>
</ul>
<div class="bottom-bar bottom-bar_menu">
<ul class="bottom-bar_list">
<li class="bottom-bar_list_item">
<a href="#" class="bottom-bar_list_link">About us</a>
</li>
<li class="bottom-bar_list_item">
<a href="#" class="bottom-bar_list_link">Home</a>
</li>
<li class="bottom-bar_list_item">
<a href="#" class="bottom-bar_list_link">Work</a>
</li>
<li class="bottom-bar_list_item">
<a href="#" class="bottom-bar_list_link">Services</a>
</li>
<li class="bottom-bar_list_item">
<a href="#" class="bottom-bar_list_link">Contact us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Expand Down
21 changes: 21 additions & 0 deletions src/styles/components/assurance.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,21 @@
padding: 72px 0;
text-align: center;

@include on-small-desktop {
padding: 200px 0;
}

&_wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

@include on-small-desktop {
padding: 0 135px;
}
}

&_title {
font-size: 44px;
line-height: 52.8px;
Expand All @@ -28,6 +43,12 @@
justify-content: center;
align-items: center;
transition: $transition;
width: 100%;

@include on-tablet {
width: 264px;
text-align: center;
}

&:hover {
-webkit-box-shadow: 0 0 45px -18px rgba(32, 96, 246, 1);
Expand Down
15 changes: 15 additions & 0 deletions src/styles/components/bottom-bar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,25 @@
.bottom-bar {
&_wrapper {
@include on-small-desktop {
display: flex;
justify-content: space-between;
}
}

&_list {
display: flex;
flex-direction: column;
padding: 0;
gap: 24px;

@include on-tablet {
flex-direction: row;
}

@include on-small-desktop {
gap: 64px;
}

&_link {
font-size: 13px;
font-weight: 700;
Expand Down
4 changes: 4 additions & 0 deletions src/styles/components/contact-us.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
&_images {
display: flex;
gap: 32px;

&_img {
cursor: pointer;
}
}
}
}
12 changes: 9 additions & 3 deletions src/styles/components/expertise.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
border-radius: 30px;
padding: 72px 0;

@include on-small-desktop {
padding: 128px 0;
}

&_title {
text-align: center;
font-size: 44px;
Expand All @@ -22,17 +26,19 @@

&--1 {
@include on-small-desktop {
grid-column: 1 / 4;
grid-column: 1 / 5;
}
}

&--2 {
@include on-small-desktop {
grid-column: 4 / 8;
grid-column: 5 / 9;
}
}

&--3 {
@include on-small-desktop {
grid-column: 8 / 12;
grid-column: 9 / -1;
}
}

Expand Down
Loading

0 comments on commit 332580f

Please sign in to comment.