solution #3896

Mariana-VV · 2023-12-20T08:09:29Z

DEMO LINK
TEST REPORT LINK
[ x] Icon implemented using background-image CSS property
[x ] Inputs are written inside of 'form' tag with correctly passed attributes
[ x] All Typical Mistakes from BEM lesson theory are checked.
[x ] Code follows all the Code Style Rules ❗️

lerastarynets

Pls add links to deployed version of your project and deployed test report to the description of the pr (README file)

SanyaBratashchuk

It doesn't look like on design

If you faces with any difficulties feel free to ask in slack

maxim2310

Good work, but lets make some improvement

1.need to check why you font family not applied

2. plz check one more time sizes and indents of icon, because on test as you can see it so different from referens

maxim2310 · 2023-12-20T19:39:16Z

src/index.html

+
+

Suggested change

plz remove all unnecessary spaces

maxim2310 · 2023-12-20T19:40:08Z

src/index.html

+      <input class="form__input--small"
+      type="text"
+      placeholder="Try “Los Angeles”"
+      data-qa="keypress"
+    >


Suggested change

<input class="form__input--small"

type="text"

placeholder="Try “Los Angeles”"

data-qa="keypress"

>

<input

class="form__input--small"

type="text"

placeholder="Try “Los Angeles”"

data-qa="keypress"

>

l4st1m0za

Before sending the review again, try to pass all the tests as it's clear from there that you have mojor difference in your styles

etojeDenys · 2023-12-20T18:53:49Z

readme.md

- [DEMO LINK](https://<your_account>.github.io/layout_search-bar-airbnb/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_search-bar-airbnb/report/html_report/)
+- [DEMO LINK](https://<Mariana-VV>.github.io/layout_search-bar-airbnb/)
+- [TEST REPORT LINK](https://<Mariana-VV>.github.io/layout_search-bar-airbnb/report/html_report/)


Suggested change

- [TEST REPORT LINK](https://<Mariana-VV>.github.io/layout_search-bar-airbnb/report/html_report/)

- [TEST REPORT LINK](https://Mariana-VV.github.io/layout_search-bar-airbnb/report/html_report/)

etojeDenys · 2023-12-21T18:05:03Z

src/index.html

+      <input
+      class="form__input--small"
+      type="text"
+      placeholder="Try “Los Angeles”"
+      data-qa="keypress"
+      >


Suggested change

<input

class="form__input--small"

type="text"

placeholder="Try “Los Angeles”"

data-qa="keypress"

>

<input

class="form__input--small"

type="text"

placeholder="Try “Los Angeles”"

data-qa="keypress"

>

etojeDenys · 2023-12-21T18:05:25Z

src/style.css

+.form__input--big:focus {
+  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
+}
+
+.form__input--small:focus {
+  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
+}


Suggested change

.form__input--big:focus {

background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);

}

.form__input--small:focus {

background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);

}

.form__input--big:focus,

.form__input--small:focus {

background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);

}

etojeDenys · 2023-12-21T18:05:32Z

src/style.css

+.form__input--big:hover {
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+}
+
+.form__input--small:hover {
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+}


etojeDenys · 2023-12-21T18:06:07Z

src/style.css

+  color: #3D4E61;
+  font-family: Avenir, sans-serif;
+  src: url(../src/fonts/Avenir.ttc);
+font-size: 14px;


you forgot to add some spaces

etojeDenys · 2023-12-21T18:07:32Z

src/style.css

+.form__input--big {
+  display: block;
+ width: 100%;
+ border-radius: 4px;
+ border: 1px solid #E1E7ED;
+background: #FFF;
+padding: 27px 63px;
+
+box-shadow: 0 1px 7px 0 rgba(61, 78, 97, 0.10);
+
+}
+
+.form__input--small {
+  display: block;
+  width: 100%;
+
+ border-radius: 4px;
+border: 1px solid #E1E7ED;
+background: #FFF;
+box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.10);
+
+  padding:12px 32px;
+}


create some general class form__input and move all duplicate styles there

etojeDenys · 2023-12-21T18:07:45Z

src/style.css

+.form__icon--big {
+  background-image: url(images/Search.svg);
+  background-repeat: no-repeat;
+  position: absolute;
+  left: 27px;
+  top: 24px;
+  width: 19px;
+  height: 19px;
+
+}
+
+.form__icon--small {
+  background-image: url(images/Search.svg);
+  background-repeat: no-repeat;
+  position: absolute;
+  left: 14px;
+  top: 14px;
+  width: 11px;
+  height: 11px;


make it everywhere

loralevitska

Looks like you have difference indents, please fix it.

If you have any questions, please ask them in fe_chat and tag mentors. It will be faster, because your answers in GitHub will be visible to mentor only after you re-request review

loralevitska · 2023-12-21T18:31:36Z

src/style.css

+  position: relative;
+margin: 20px 8px 10px;
+padding: 0;


Suggested change

position: relative;

margin: 20px 8px 10px;

padding: 0;

position: relative;

margin: 20px 8px 10px;

padding: 0;

loralevitska · 2023-12-21T18:32:15Z

src/style.css

+  display: block;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #E1E7ED;


It is a good practice to make all colors variable

loralevitska · 2023-12-21T18:32:39Z

src/style.css

+  background-image: url(images/Search.svg);
+  background-repeat: no-repeat;


Combine it with background property

loralevitska · 2023-12-21T18:33:22Z

src/style.css

+  font-family: Avenir, sans-serif;
+  src: url(../src/fonts/Avenir.ttc);
+  font-size: 14px;
+  font-style: normal;


Remove redundant default styles

Suggested change

font-style: normal;

etojeDenys

good job

volodymyr-soltys97

Good job 👍
Let's improve your code

Need to remove the default border when input is focusing

volodymyr-soltys97 · 2023-12-22T08:48:51Z

src/index.html

+        placeholder="Try “Los Angeles”"
+      >
+
+      <span class="form__icon--big form__icon"></span>


Span is redundant here, add icon as a background image

Suggested change

<span class="form__icon--big form__icon"></span>

volodymyr-soltys97 · 2023-12-22T08:49:20Z

src/style.css

+  padding: 0;
+}
+
+.form:last-child(){


Suggested change

.form:last-child(){

.form:last-child {

volodymyr-soltys97 · 2023-12-22T08:49:45Z

src/style.css

+  src: url(./src/fonts/Avenir.ttc);
+  font-size: 14px;
+  font-weight: 300;
+  line-height: normal;


Default value, so you can just remove it

Suggested change

line-height: normal;

anastasiiavorobiova

Great work! Consider fixing your layout: feel free to ask for help in the chat

Also, consider implementing focus styles

sTorba24

Nicely done!

Check height of small input and use the right quotes i explained in fe_chat
Then you can pass all tests

sTorba24 · 2023-12-25T14:58:49Z

src/style.css

+  font-size: 16px;
+  font-weight: 300;
+
+  font-family: Avenir, sans-serif;


set it for html and use inherit value

sTorba24 · 2023-12-25T14:59:07Z

src/style.css

+
+.form__input--big::placeholder {
+  font-size: 16px;
+  font-weight: 300;


for small the same, so set it for common form__input

solution

fa5dde6

lerastarynets suggested changes Dec 20, 2023

View reviewed changes

solution

598c156

Mariana-VV requested a review from lerastarynets December 20, 2023 17:30

SanyaBratashchuk suggested changes Dec 20, 2023

View reviewed changes

Mariana-VV added 2 commits December 20, 2023 20:03

repair

26b964e

improve

1f84d3e

Mariana-VV requested a review from SanyaBratashchuk December 20, 2023 19:26

maxim2310 suggested changes Dec 20, 2023

View reviewed changes

font, indents

f7a5bbb

Mariana-VV requested a review from maxim2310 December 20, 2023 19:54

l4st1m0za suggested changes Dec 21, 2023

View reviewed changes

messege

e780ad8

Mariana-VV requested a review from l4st1m0za December 21, 2023 17:46

etojeDenys suggested changes Dec 21, 2023

View reviewed changes

styles

5b19880

Mariana-VV requested a review from etojeDenys December 21, 2023 18:24

loralevitska suggested changes Dec 21, 2023

View reviewed changes

message

5ce281d

Mariana-VV requested a review from loralevitska December 22, 2023 08:38

etojeDenys approved these changes Dec 22, 2023

View reviewed changes

volodymyr-soltys97 suggested changes Dec 22, 2023

View reviewed changes

message

7fbb0ad

Mariana-VV requested review from volodymyr-soltys97 and etojeDenys December 25, 2023 11:13

anastasiiavorobiova suggested changes Dec 25, 2023

View reviewed changes

Mariana-VV added 4 commits December 25, 2023 13:38

message

84ff709

message

1bdbbe3

message

deb4af7

message

42ec12c

Mariana-VV requested a review from anastasiiavorobiova December 25, 2023 14:09

sTorba24 suggested changes Dec 25, 2023

View reviewed changes

Mariana-VV added 2 commits December 25, 2023 15:46

message

b8aa671

message

17d082f

Mariana-VV requested a review from sTorba24 December 25, 2023 14:52

sTorba24 approved these changes Dec 25, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

solution #3896

solution #3896

Mariana-VV commented Dec 20, 2023 •

edited

Loading

lerastarynets left a comment

SanyaBratashchuk left a comment

maxim2310 left a comment

maxim2310 Dec 20, 2023

maxim2310 Dec 20, 2023

l4st1m0za left a comment

etojeDenys Dec 20, 2023

etojeDenys Dec 21, 2023

etojeDenys Dec 21, 2023

etojeDenys Dec 21, 2023

etojeDenys Dec 21, 2023

etojeDenys Dec 21, 2023

etojeDenys Dec 21, 2023

loralevitska left a comment

loralevitska Dec 21, 2023

loralevitska Dec 21, 2023

loralevitska Dec 21, 2023

loralevitska Dec 21, 2023

etojeDenys left a comment

volodymyr-soltys97 left a comment

volodymyr-soltys97 Dec 22, 2023

volodymyr-soltys97 Dec 22, 2023

volodymyr-soltys97 Dec 22, 2023

anastasiiavorobiova left a comment

sTorba24 left a comment

sTorba24 Dec 25, 2023

sTorba24 Dec 25, 2023

	- [TEST REPORT LINK](https://<Mariana-VV>.github.io/layout_search-bar-airbnb/report/html_report/)
	- [TEST REPORT LINK](https://Mariana-VV.github.io/layout_search-bar-airbnb/report/html_report/)

		background-image: url(images/Search.svg);
		background-repeat: no-repeat;

solution #3896

Are you sure you want to change the base?

solution #3896

Conversation

Mariana-VV commented Dec 20, 2023 • edited Loading

lerastarynets left a comment

Choose a reason for hiding this comment

SanyaBratashchuk left a comment

Choose a reason for hiding this comment

maxim2310 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

l4st1m0za left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

loralevitska left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etojeDenys left a comment

Choose a reason for hiding this comment

volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anastasiiavorobiova left a comment

Choose a reason for hiding this comment

sTorba24 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Mariana-VV commented Dec 20, 2023 •

edited

Loading