Develop by Chalaczi · Pull Request #2727 · mate-academy/layout_miami

Chalaczi · 2026-01-13T12:20:42Z

No description provided.

natalia-klonowska · 2026-01-13T12:43:34Z

src/styles/blocks/footer.scss

+.footer {
+  width: 100%;
+  height: 200px;
+  background-image: url(../../images/footer\ pic.jpg);


popraw ścieżkę do obrazka i usuń dodawanie go za pomocą img aby nie duplikować

Suggested change

background-image: url(../../images/footer\ pic.jpg);

background-image: url(../images/footer\ pic.jpg);

natalia-klonowska · 2026-01-13T12:48:43Z

index.html

+      </section>
+      <footer class="footer">
+        <img src="./src/images/footer pic.jpg" alt="footer bike">
+      </footer>
+    </main>


to img ci poszerzało layout bo nie ustawiłeś mu konkretnej szerokości. możesz usunąć img bo i tak dodajesz ten obraz jako background image a footer lepiej mieć poza kontenerem main aby na background image nie wpływał padding

Suggested change

</section>

<footer class="footer">

<img src="./src/images/footer pic.jpg" alt="footer bike">

</footer>

</main>

</section>

</main>

<footer class="footer"></footer>

natalia-klonowska

deploy your project using npm run deploy command and add link to demo in pr description

adjust background image position so it matches design
phone number should be visible only when hovering over phone icon
navigation has too much horizontal spacing because two paddings are applied (one on header and one on navigation)
burger menu icon is too small
title is positioned slightly too low

close icon should be positioned on the right
list of links starts too low
spacing between links is too large
the last two links shouldn't be on the same line and should be positioned higher

natalia-klonowska

deploy your project using npm run deploy command and add demo link to pr description

natalia-klonowska

logo oraz ikony menu powinny być na tej samej wysokości aby dało się bez zmiany położenia kursora otwierać i zamykać menu

musisz dodać jeszcze breakpointy oraz stylowanie dla wersji tabletowej

pamiętaj o CHECKLIST:

Add a favicon
Change text color on hover for phone, email and address
When you click on phone icon or phone number in contacts section, make sure that there is no 404 error, make it a real link to start a call on device
Pictures in Gallery should increase on hover
Location-related addresses / links should open google maps in a new tab target="_blank"
Form shouldn't be submitted if some of the fields are not filled
disable page scrolling under the menu

natalia-klonowska · 2026-01-29T15:36:19Z

src/styles/blocks/footer.scss

+.footer {
+  width: 100%;
+  height: 200px;
+  background-image: url(../images/footer\ pic.jpg);


zmień nazwę pliku z tej ścieżki pozbywając się spacji bo zdjęcie ci się nie pokazuje

natalia-klonowska

za każdym razem gdy commitujesz zmiany musisz zaktualizować demo link poprzez ponowne odpalenie komendy npm run deploy

natalia-klonowska

moje komentarze naprawią ci stylowanie wersji mobile i desktop. musisz jeszcze zaimplementować wersję tabletową.

natalia-klonowska · 2026-02-03T13:56:59Z

src/styles/blocks/header.scss

+  background-size: cover;
+  background-position: 90%;
+  min-height: 100vh;
+  padding: 0 20px 80px;


you already have margin bottom for title

Suggested change

padding: 0 20px 80px;

padding: 0 20px;

natalia-klonowska · 2026-02-03T14:07:38Z

src/styles/blocks/main.scss

+  &__title {
+    margin-right: 24px;
+    margin-bottom: 32px;


title shouldn't be centered and have all this additional margins

Suggested change

&__title {

margin-right: 24px;

margin-bottom: 32px;

&__title {

justify-self: flex-start;

padding-bottom: 32px;

natalia-klonowska · 2026-02-03T14:10:25Z

src/styles/blocks/main.scss

+    font-size: 23px;
+    line-height: 140%;
+    letter-spacing: 0;
+    margin-bottom: 92px;


you already have padding for section

Suggested change

margin-bottom: 92px;

natalia-klonowska · 2026-02-03T14:12:53Z

src/styles/blocks/title.scss

+    font-weight: 500;
+    font-style: Medium;
+    font-size: 32px;
+    padding-bottom: NONE;


invalid value

Suggested change

padding-bottom: NONE;

padding-bottom: 0;

natalia-klonowska · 2026-02-03T14:15:10Z

src/styles/blocks/model.scss

@@ -0,0 +1,31 @@
+.model {
+  &__photo {


add margin

Suggested change

&__photo {

&__photo {

margin-bottom: 32px;

natalia-klonowska · 2026-02-03T14:24:28Z

src/styles/blocks/footer.scss

+.footer {
+  width: 100%;
+  height: 200px;
+  background-image: url(../images/footer\ pic.jpg);


zmień nazwę pliku z tej ścieżki pozbywając się spacji bo zdjęcie ci się nie pokazuje

natalia-klonowska · 2026-02-03T14:30:14Z

src/styles/blocks/main.scss

+    margin-bottom: 32px;
+    grid-column: 1 / 3;
+
+    @include mixins.desktop {


Suggested change

@include mixins.desktop {

@include mixins.desktop {

padding: 120px 120px 0;

natalia-klonowska · 2026-02-03T14:41:40Z

src/styles/blocks/contact.scss

+
+  @include desktop {
+    &__form {
+      grid-column: 1 / 7;


Suggested change

grid-column: 1 / 7;

grid-column: 1 / 6;

natalia-klonowska · 2026-02-03T14:47:47Z

src/styles/blocks/article.scss

+  &__description {
+    font-family: Poppins, sans-serif;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 16px;
+    line-height: 140%;
+    letter-spacing: 0;
+    margin-bottom: 16px;
+  }


Suggested change

&__description {

font-family: Poppins, sans-serif;

font-weight: 400;

font-style: Regular;

font-size: 16px;

line-height: 140%;

letter-spacing: 0;

margin-bottom: 16px;

}

&__description {

font-family: Poppins, sans-serif;

font-weight: 400;

font-style: Regular;

font-size: 16px;

line-height: 140%;

letter-spacing: 0;

margin-bottom: 16px;

@include desktop {

width: 70%;

}

}

natalia-klonowska · 2026-02-03T14:53:51Z

src/styles/blocks/header.scss

+.header {
+  background-color: rgb(0, 0, 0);
+  background-image: url(../images/Cover_photo.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 90%;
+  min-height: 100vh;
+  padding: 0 20px 80px;
+  box-sizing: border-box;
+
+  grid-template-rows: 1fr 1fr;


lepiej jest centrować tło dla wersji desktop

Suggested change

.header {

background-color: rgb(0, 0, 0);

background-image: url(../images/Cover_photo.jpg);

background-repeat: no-repeat;

background-size: cover;

background-position: 90%;

min-height: 100vh;

padding: 0 20px 80px;

box-sizing: border-box;

grid-template-rows: 1fr 1fr;

.header {

background-color: rgb(0, 0, 0);

background-image: url(../images/Cover_photo.jpg);

background-repeat: no-repeat;

background-size: cover;

background-position: 90%;

min-height: 100vh;

padding: 0 20px 80px;

box-sizing: border-box;

grid-template-rows: 1fr 1fr;

@include desktop {

background-position: center;

}

natalia-klonowska

element ma podwójny padding ponieważ na header nadajesz padding z wersji tabletowej a na nawigacji pozostaje nadal padding z wersji mobilnej:

podobny problem z podwójnym paddingiem dla tytułu tyle że żaden z nich nie jest tym prawidłowym z wersji tabletowej:

padding boczny dla main powinien być taki sam co w headerze dla wersji tabletowej

sekcja compare bikes powinna mieć dodatkowe wcięcie w wersji tabletowej

zdjęcia powinny mieć inne proporcje w wersji tabletowej

zmiana układu dla sekcji contact us

usuń domyślny border dla inputów w formularzu
zdjęcie z footera nie jest wyświetlane. zmień nazwę używanego zdjęcia w taki sposób aby nie było tam spacji

Chalaczi added 7 commits December 16, 2025 09:19

first part

3b54e48

button

e2621a6

address block

e7b15c9

chack

8d26806

extract grid mixins

efb895b

gallery grid

35165e8

new

c269ed3

natalia-klonowska suggested changes Jan 13, 2026

View reviewed changes

Chalaczi added 2 commits January 14, 2026 12:25

burger hover

19532d3

BUTTON FINISH

ae0e38c

Chalaczi requested a review from natalia-klonowska January 16, 2026 12:57

natalia-klonowska suggested changes Jan 19, 2026

View reviewed changes

solution

1c8c3d1

Chalaczi requested a review from natalia-klonowska January 27, 2026 12:07

natalia-klonowska suggested changes Jan 28, 2026

View reviewed changes

natalia-klonowska suggested changes Jan 29, 2026

View reviewed changes

better

6edc857

Chalaczi requested a review from natalia-klonowska February 2, 2026 12:36

natalia-klonowska suggested changes Feb 2, 2026

View reviewed changes

Chalaczi requested a review from natalia-klonowska February 3, 2026 08:36

natalia-klonowska suggested changes Feb 3, 2026

View reviewed changes

good job!

0f54f0f

Chalaczi requested a review from natalia-klonowska February 9, 2026 13:32

natalia-klonowska suggested changes Feb 9, 2026

View reviewed changes

Chalaczi added 3 commits March 11, 2026 13:18

final

c5b81f8

end

3bc5343

last

67d5f18

	background-image: url(../../images/footer\ pic.jpg);
	background-image: url(../images/footer\ pic.jpg);

	@include mixins.desktop {
	@include mixins.desktop {
	padding: 120px 120px 0;

Conversation

Chalaczi commented Jan 13, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

natalia-klonowska left a comment

Choose a reason for hiding this comment

Uh oh!

natalia-klonowska left a comment

Choose a reason for hiding this comment

Uh oh!

natalia-klonowska left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

natalia-klonowska left a comment

Choose a reason for hiding this comment

Uh oh!

natalia-klonowska left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

natalia-klonowska left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

natalia-klonowska left a comment •

edited

Loading