Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Develop #978

Open
wants to merge 19 commits into
base: master
Choose a base branch
from
Open

Develop #978

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
a48505a
add navigation for header mobile version
Mykyta-snacj Aug 15, 2024
5f4d00c
add navigation for header
Mykyta-snacj Aug 15, 2024
77a14de
header-start
Mykyta-snacj Aug 29, 2024
305870e
header v0.1
Mykyta-snacj Aug 31, 2024
bc4394b
add new section our-expertise
Mykyta-snacj Sep 7, 2024
f52f4c1
adaptive blocks
Mykyta-snacj Sep 11, 2024
904c6b6
add navigation list
Mykyta-snacj Sep 11, 2024
afbb553
less code
Mykyta-snacj Sep 13, 2024
451ea40
less code
Mykyta-snacj Sep 13, 2024
6d60a66
add section services
Mykyta-snacj Sep 14, 2024
fe645bb
section services
Mykyta-snacj Sep 19, 2024
b2faffa
rework section services
Mykyta-snacj Sep 21, 2024
9933389
add block card-people
Mykyta-snacj Sep 28, 2024
b11328d
add new section vision
Mykyta-snacj Sep 28, 2024
d2040bf
add section send-a-message
Mykyta-snacj Sep 28, 2024
7652592
finish footer
Mykyta-snacj Oct 1, 2024
ddb3dd5
add menu
Mykyta-snacj Oct 5, 2024
3d7743a
add vars
Mykyta-snacj Oct 10, 2024
a795d63
use project rules
Mykyta-snacj Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"@linthtml/linthtml": "^0.9.5",
"@mate-academy/bemlint": "latest",
"@mate-academy/linthtml-config": "latest",
"@mate-academy/scripts": "^1.7.3",
"@mate-academy/scripts": "^1.9.3",
"@mate-academy/stylelint-config": "latest",
"@parcel/transformer-sass": "^2.12.0",
"jest": "^29.7.0",
Expand Down
3 changes: 3 additions & 0 deletions src/images/Vector.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/images/learn-more__arrow.svg
View file
Open in desktop
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/our-expertise/branding.jpg
View file
Open in desktop
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/our-expertise/communication.jpg
View file
Open in desktop
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/our-expertise/strategy.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/images/slider/slide-img-1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
322 changes: 320 additions & 2 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,331 @@
content="width=device-width, initial-scale=1.0"
/>
<title>Dia</title>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
/>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,100&display=swap"
rel="stylesheet"
/>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="./styles/main.scss"
/>
</head>
<body>
<h1>Dia</h1>
<body class="page-content">
<header class="header">
<nav class="navigation header__navigation">
<a
href="#logo"
class="navigation__item navigation__item--logo"
>
<img
src="./images/logo/dia-logo.svg"
alt="logo"
/>
</a>
<a
href="#menu"
class="navigation__item navigation__item--menu"
>
<img
src="./images/Vector.svg"
alt="menu"
/>
</a>
Comment on lines +67 to +75
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for desktop you should replace burger menu with links (you can make use of display: none)


<ul class="navigation__list list navigation__item">
<li class="list__item">
<a
class="list__link"
href="#about-us"
>
About us
</a>
</li>
<li class="list__item">
<a
class="list__link"
href="#services"
>
Services
</a>
</li>
<li class="list__item">
<a
class="list__link"
href="#testimonials"
>
Testimonials
</a>
</li>
<li class="list__item">
<a
class="list__link"
href="#contact-us"
>
Contact Us
</a>
</li>
</ul>

<a
href="#hire-us"
class="navigation__item navigation__item--hire-us"
>
Hire Us
</a>
</nav>

<div class="header__info-block">
<h1 class="header__title">Strategic Agency</h1>
<p class="header__paragraph">
We believe in the power of bold ideas that can solve business
challenges.
</p>
<a
href="#expertise"
class="button header__button"
>
Learn more
</a>
</div>

<div class="header__slider-block">
<img
src="../src/images/slider/slide-img-1.jpg"
alt="slide"
class="header__slider-image"
/>
</div>
Comment on lines +134 to +140
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you should center position of this image and only clip sides (you can change it for the one used in design to better see differences)

</header>

<main class="main">
<section
class="who-we-are"
id="about-us"
>
<h2 class="main__title who-we-are__title">Who we are</h2>

<p class="main__paragraph--primary who-we-are__paragraph">
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>

<section
class="our-expertise"
id="expertise"
>
<h2 class="main__title--primary our-expertise__title">Our expertise</h2>

<article class="our-expertise__card">
<img
src="../src/images/our-expertise/branding.jpg"
alt="branding"
class="our-expertise__picture"
/>

<h3 class="main__title--secondary our-expertise__title--secondary">
Branding
</h3>

<p class="main__paragraph">
We create additional value for companies, products, services as well
as verbal and visual ways to deliver it to the audience.
</p>
</article>

<article class="our-expertise__card">
<img
src="../src/images/our-expertise/communication.jpg"
alt="branding"
class="our-expertise__picture"
/>

<h3 class="main__title--secondary our-expertise__title--secondary">
Communication
</h3>

<p class="main__paragraph">
We strive to create communications that can increase media
performance. We use everything — words, meanings, stories, art,
movies.
</p>
</article>

<article class="our-expertise__card">
<img
src="../src/images/our-expertise/strategy.jpg"
alt="branding"
class="our-expertise__picture"
/>

<h3 class="main__title--secondary our-expertise__title--secondary">
Strategy
</h3>

<p class="main__paragraph">
We create business growth strategies, from the moment of its birth
to the achievement of the necessary business indicators.
</p>
</article>
</section>

<section
class="services"
id="services"
>
<p class="services__section-name">Services</p>

<h2 class="main__title services__title">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You broke BEM rule here: The parent block element cannot be used inside another, nested block.

Air is a full service creative agency
</h2>

<p class="main__paragraph services__paragraph">
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.
</p>

<article class="services__card-learn card-learn">
<div class="card-learn__number">001</div>

<p class="card-learn__paragraph main__paragraph--primary">
Brand Development
<br />
Copywriting
<br />
Logo & Webite Design
<br />
Packaging
</p>

<a
href="#services"
class="card-learn__button button-more"
>
<img
src="./images/learn-more__arrow.svg"
alt="arrow"
class="button-more__arrow"
/>

<p class="button-more__text">Learn more</p>
</a>
</article>

<article class="services__card-learn card-learn">
<div class="card-learn__number">002</div>

<p class="card-learn__paragraph main__paragraph--primary">
Сontent Production
<br />
Graphic Design
<br />
Video Production
<br />
Post Production
</p>

<a
href="#services"
class="card-learn__button button-more"
>
<img
src="./images/learn-more__arrow.svg"
alt="arrow"
class="button-more__arrow"
/>

<p class="button-more__text">Learn more</p>
</a>
</article>

<article class="services__card-learn card-learn">
<div class="card-learn__number">003</div>

<p class="card-learn__paragraph main__paragraph--primary">
Marketing Strategy
<br />
Email Marketing
<br />
Paid Advertising
<br />
Blog Content & SEO
</p>

<a
href="#services"
class="card-learn__button button-more"
>
<img
src="./images/learn-more__arrow.svg"
alt="arrow"
class="button-more__arrow"
/>

<p class="button-more__text">Learn more</p>
</a>
</article>

<article class="services__card-learn card-learn">
<div class="card-learn__number">004</div>

<p class="card-learn__paragraph main__paragraph--primary">
Digital Communications
<br />
Influencer Marketing
<br />
Product Placements
</p>

<a
href="#services"
class="card-learn__button button-more"
>
<img
src="./images/learn-more__arrow.svg"
alt="arrow"
class="button-more__arrow"
/>

<p class="button-more__text">Learn more</p>
</a>
</article>
</section>
</main>

<script src="scripts/main.js"></script>
</body>
</html>
3 changes: 0 additions & 3 deletions src/styles/_utils.scss
View file
Open in desktop

This file was deleted.

33 changes: 33 additions & 0 deletions src/styles/blocks/button-more.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.button-more {
display: flex;
width: max-content;
gap: 16px;
align-items: center;
color: #334563;
text-decoration: none;

&__arrow {
padding: 12px;
border-radius: 40px;
display: inline-block;
background: #2060f6;
width: 16px;
height: 16px;
object-fit: cover;
vertical-align: bottom;
transition: 300ms;
}

&__text {
font-family: Poppins, sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 22.5px;
text-align: center;
}

&:hover > &__arrow {
transition: 300ms;
transform: scale(1.2);
}
}
Loading