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

Solution #4326

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

Solution #4326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02ec39e
Update index.html
vkryvytskyy Jun 10, 2024
b5d3eea
Update style.css
vkryvytskyy Jun 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
53 changes: 43 additions & 10 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!-- #region head -->
<!doctype html>
<html lang="en">
<head>
Comment on lines 2 to 4
Copy link

Choose a reason for hiding this comment

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

The <!doctype html> declaration must be the very first thing in an HTML document, before the tag.

Expand All @@ -15,18 +16,50 @@
rel="stylesheet"
href="style.css"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
rel="stylesheet"
Comment on lines +20 to +21
Copy link

Choose a reason for hiding this comment

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

The URL for the href attribute of the link tag seems to be missing. Ensure you provide the correct path to the stylesheet.

/>
Comment on lines +20 to +22
Copy link

Choose a reason for hiding this comment

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

Attributes within the tag should be ordered consistently. You should place 'rel' before 'href' for readability and consistency.

</head>
<!-- #endregion -->
<body>
<input
type="text"
data-qa="keypress"
placeholder="Try “Los Angeles“"
/>
<form class="form">
<div
class="form__search"
data-qa="big"
>
<label for="input-large"></label>
Copy link

Choose a reason for hiding this comment

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

Attribute 'for' in the label should match the ID of the input it is related to, which is missing here.

<img
class="form-img form__img--large"
src="images/Search.svg"
alt="Search"
/>
Comment on lines +32 to +36
Copy link

Choose a reason for hiding this comment

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

The 'alt' attribute should more accurately describe the image content, for example, 'Search icon'.

<input
class="form-input form__input--large"
type="text"
data-qa="keypress"
placeholder="Try “Los Angeles“"
/>
Comment on lines +26 to +42
Copy link

Choose a reason for hiding this comment

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

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.

</div>

<input
type="text"
data-qa="hover"
placeholder="Try “Los Angeles“"
/>
<div
class="form__search"
data-qa="small"
>
<label for="input-small"></label>
Copy link

Choose a reason for hiding this comment

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

Attribute 'for' in the label should match the ID of the input it is related to, which is missing here.


<input
class="form-input form__input--small"
type="text"
data-qa="hover"
placeholder="Try “Los Angeles“"
/>
<img
class="form-img form__img--small"
src="images/Search.svg"
alt="Search"
/>
Comment on lines +51 to +61
Copy link

Choose a reason for hiding this comment

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

Although the class name 'form__input--small' suggests a modifier for a BEM element, make sure that the element class 'form__input' exists, as it's not clear from this snippet. Also, ensure 'form-img' and 'form-input' follow BEM conventions if they are part of the same component.

</div>
</form>
</body>
</html>
82 changes: 82 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,83 @@
/* add styles here */
* {
box-sizing: border-box;
}
Comment on lines +2 to +4
Copy link

Choose a reason for hiding this comment

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

Avoid using the '*' selector for setting box-sizing as it can impact performance. Consider setting box-sizing for specific elements or use inheritance from a common parent.


@font-face {
font-family: Avenir-Book, sans-serif;
src: url(fonts/Avenir-Book.ttf);
Comment on lines +7 to +8
Copy link

Choose a reason for hiding this comment

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

The font-family should include fallback fonts to ensure content is displayed with an alternative font if the main one fails to load.

}

@font-face {
font-family: Avenir-Heavy, sans-serif;
src: url(fonts/Avenir-Heavy.ttf);
font-style: bold;
font-weight: bold;
}
Comment on lines +12 to +16
Copy link

Choose a reason for hiding this comment

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

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;
Copy link

Choose a reason for hiding this comment

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

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;
Copy link

Choose a reason for hiding this comment

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

There is a typo in the margin property value; it should be 0 instead of o.

width: 100%;
font-family: Avenir-Book, sans-serif;
font-weight: 300;
font-size: 16px; /* розмір шрифтк */
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);
Copy link

Choose a reason for hiding this comment

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

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);.

}

.form__input--large {
margin-top: 20px;
height: 70px;
padding-left: 62px; /* додаємо відступ, щоб текст не накладався на іконку */
}

.form__input--small {
height: 42px;
margin-top: 20px;
padding-left: 33px; /* додаємо відступ, щоб текст не накладався на іконку */
size: 14px;
Copy link

Choose a reason for hiding this comment

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

The size property is not a valid CSS property. If you meant to set the font size, use font-size instead.

}

.form__img {
margin-right: 100px;
}

.form__img--large {
width: 19px;
height: 19px;
position: absolute;
top: 45px;
left: 34px;
}

.form__img--small {
width: 11px;
height: 11px;
position: relative;
bottom: 30px;
left: 13px;
}

.form-input:hover {
border: 1px solid rgba(225, 231, 237, 1);
box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.2);
}

.form-input:focus {
font-family: Avenir-Heavy, sans-serif;
background: rgba(246, 246, 247, 1);
border-radius: 3px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
color: rgba(61, 78, 97, 1);
border-color: rgba(225, 231, 237, 1);
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
font-weight: bold;
font-style: bold;
}
Loading