Solution #4326
Solution #4326
Conversation
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> |
There was a problem hiding this comment.
The <!doctype html> declaration must be the very first thing in an HTML document, before the tag.
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" | ||
| rel="stylesheet" |
There was a problem hiding this comment.
The URL for the href attribute of the link tag seems to be missing. Ensure you provide the correct path to the stylesheet.
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" | ||
| rel="stylesheet" | ||
| /> |
There was a problem hiding this comment.
Attributes within the tag should be ordered consistently. You should place 'rel' before 'href' for readability and consistency.
| <form class="form"> | ||
| <div | ||
| class="form__search" | ||
| data-qa="big" | ||
| > | ||
| <label for="input-large"></label> | ||
| <img | ||
| class="form-img form__img--large" | ||
| src="images/Search.svg" | ||
| alt="Search" | ||
| /> | ||
| <input | ||
| class="form-input form__input--large" | ||
| type="text" | ||
| data-qa="keypress" | ||
| placeholder="Try “Los Angeles“" | ||
| /> |
There was a problem hiding this comment.
The label element should have content that describes the input it is associated with, or you can use the aria-label attribute on the input for screen reader users.
| class="form__search" | ||
| data-qa="big" | ||
| > | ||
| <label for="input-large"></label> |
There was a problem hiding this comment.
Attribute 'for' in the label should match the ID of the input it is related to, which is missing here.
| font-family: Avenir-Heavy, sans-serif; | ||
| src: url(fonts/Avenir-Heavy.ttf); | ||
| font-style: bold; | ||
| font-weight: bold; | ||
| } |
There was a problem hiding this comment.
The font-style and font-weight properties should not both be set to 'bold'. Instead, use font-weight: bold; or font-weight: 700; and remove the font-style: bold; declaration.
| } | ||
|
|
||
| .form { | ||
| margin-top: auto; |
There was a problem hiding this comment.
The margin-top: auto; on the .form class does not seem to serve a purpose unless it is within a flex or grid context with specific alignments.
|
|
||
| .form-input { | ||
| display: block; | ||
| margin: o; |
There was a problem hiding this comment.
There is a typo in the margin property value; it should be 0 instead of o.
| color: rgba(255, 255, 255, 1); | ||
| border: 1px solid rgba(225, 231, 237, 1); | ||
| border-radius: 4px; | ||
| box-shadow: rgba(61, 78, 97, 0.1); |
There was a problem hiding this comment.
The box-shadow property is missing horizontal and vertical offsets, and the blur radius. It should be something like box-shadow: 0 1px 4px rgba(61, 78, 97, 0.1);.
| height: 42px; | ||
| margin-top: 20px; | ||
| padding-left: 33px; /* додаємо відступ, щоб текст не накладався на іконку */ | ||
| size: 14px; |
There was a problem hiding this comment.
The size property is not a valid CSS property. If you meant to set the font size, use font-size instead.
No description provided.