add task solution #3439
add task solution #3439
Conversation
src/index.html
Outdated
| <form action="index.html" method="get" | ||
| class="search search_big" data-qa="big"> |
There was a problem hiding this comment.
Checklist rule 5: [CODE STYLE] - If the HTML-element has long attribute values or number of attributes is more than 3 - start each one, including the first, on the new line with 2-space indentation related to tag. Tag’s closing bracket should be on the same level as opening one.
| <form action="index.html" method="get" | |
| class="search search_big" data-qa="big"> | |
| <form | |
| action="index.html" | |
| method="get" | |
| class="search search_big" | |
| data-qa="big" | |
| > |
Apply to the whole document :)
Generally you should add empty lines between siblings for readability:
<body>
<div>
<span>1</span>
<p>2</p>
</div>
<div>
<div>
<button></button>
</div>
<span></span>
</div>
</body>
src/style.css
Outdated
| .search { | ||
| display: flex; | ||
| width: 100%; | ||
| justify-content: center; | ||
| margin: 20px auto 0; | ||
| } | ||
|
|
||
| .search_big { | ||
| height: 70px; | ||
| } | ||
|
|
||
| .search_small { | ||
| height: 42px; | ||
| } |
There was a problem hiding this comment.
You can have one class describing big search and only one modifier for small search. You can apply this rule to other styles as well
| .search { | |
| display: flex; | |
| width: 100%; | |
| justify-content: center; | |
| margin: 20px auto 0; | |
| } | |
| .search_big { | |
| height: 70px; | |
| } | |
| .search_small { | |
| height: 42px; | |
| } | |
| .search { | |
| display: flex; | |
| width: 100%; | |
| justify-content: center; | |
| margin: 20px auto 0; | |
| height: 70px; | |
| } | |
| .search_small { | |
| height: 42px; | |
| } |
| } | ||
|
|
||
| .search__input:focus { | ||
| background: var(--gradient); |
There was a problem hiding this comment.
This focus background is not working, check for typos :)
src/style.css
Outdated
| :root { | ||
| --light-shadow: rgba(61, 78, 97, 0.1); | ||
| --dark-shadow: rgba(61, 78, 97, 0.2); | ||
| --gradienpmnt: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); |
src/style.css
Outdated
| .search__input { | ||
| width: 100%; | ||
| height: 100%; | ||
| font-family: inherit; | ||
| font-weight: 300; | ||
| color: #3d4e61; | ||
| border: 1px solid #e1e7ed; | ||
| border-radius: 4px; | ||
| box-shadow: 0 1px 8px var(--light-shadow); | ||
| outline: none; | ||
| } | ||
|
|
||
| .search__input_big { | ||
| padding-left: 62px; | ||
| font-size: 16px; | ||
| line-height: 22px; | ||
| } | ||
|
|
||
| .search__input_small { | ||
| padding-left: 33px; | ||
| padding-top: 0; | ||
| font-size: 14px; | ||
| line-height: 19px; | ||
| } |
There was a problem hiding this comment.
As suggested before you can add big form/label/input styles to the common selector, and add only one modifier for small
| .search__input { | |
| width: 100%; | |
| height: 100%; | |
| font-family: inherit; | |
| font-weight: 300; | |
| color: #3d4e61; | |
| border: 1px solid #e1e7ed; | |
| border-radius: 4px; | |
| box-shadow: 0 1px 8px var(--light-shadow); | |
| outline: none; | |
| } | |
| .search__input_big { | |
| padding-left: 62px; | |
| font-size: 16px; | |
| line-height: 22px; | |
| } | |
| .search__input_small { | |
| padding-left: 33px; | |
| padding-top: 0; | |
| font-size: 14px; | |
| line-height: 19px; | |
| } | |
| .search__input { | |
| width: 100%; | |
| height: 100%; | |
| font-family: inherit; | |
| font-weight: 300; | |
| color: #3d4e61; | |
| border: 1px solid #e1e7ed; | |
| border-radius: 4px; | |
| box-shadow: 0 1px 8px var(--light-shadow); | |
| outline: none; | |
| padding-left: 62px; | |
| font-size: 16px; | |
| line-height: 22px; | |
| } | |
| .search__input_small { | |
| padding-left: 33px; | |
| padding-top: 0; | |
| font-size: 14px; | |
| line-height: 19px; | |
| } |
Check for other selectors, you only need one modifier for small form, no need for creating big modifier
https://mareksax.github.io/layout_search-bar-airbnb/
https://mareksax.github.io/layout_search-bar-airbnb/report/html_report/