-
Notifications
You must be signed in to change notification settings - Fork 4k
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.
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
add task solution #4554
base: master
Are you sure you want to change the base?
add task solution #4554
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,16 +17,22 @@ | |
/> | ||
</head> | ||
<body> | ||
<input | ||
type="text" | ||
data-qa="keypress" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
<form class="form"> | ||
<input | ||
class="form__input form__input--big" | ||
type="text" | ||
data-qa="big" | ||
data-action="keypress" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
Comment on lines
+21
to
+27
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The class names 'form__input' and 'form__input--big' are well-structured, but ensure they represent the meaning of the content rather than the styles or tag names. |
||
|
||
<input | ||
type="text" | ||
data-qa="hover" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
<input | ||
class="form__input form__input--small" | ||
type="text" | ||
data-qa="small" | ||
data-action="hover" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
Comment on lines
+29
to
+35
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The class names 'form__input' and 'form__input--small' should represent the meaning of the content rather than the styles or tag names. |
||
</form> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,90 @@ | ||
/* add styles here */ | ||
@font-face { | ||
font-family: Avenir; | ||
font-weight: 300; | ||
src: url(/src/fonts/Avenir-Book.ttf); | ||
} | ||
|
||
@font-face { | ||
font-family: Avenir; | ||
font-weight: 700; | ||
src: url(/src/fonts/Avenir-Heavy.ttf); | ||
} | ||
|
||
:root { | ||
--font-weight: 300; | ||
--border-color: #e1e7ed; | ||
--text-color: #3d4e61; | ||
} | ||
|
||
body { | ||
margin-top: 0; | ||
font-family: Avenir, Arial, sans-serif; | ||
font-weight: var(--font-weight); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Consider adding a fallback font for 'Avenir' to ensure consistent rendering across different browsers and systems. The current setup already includes Arial and sans-serif as fallbacks, which is good practice. |
||
color: var(--text-color); | ||
font-size: 16px; | ||
} | ||
|
||
.form { | ||
display: flex; | ||
flex-direction: column; | ||
padding-top: 20px; | ||
} | ||
|
||
.form__input { | ||
box-sizing: border-box; | ||
margin-bottom: 20px; | ||
border: 1px solid var(--border-color); | ||
border-radius: 4px; | ||
background-image: url('/src/images/Search.svg'); | ||
background-size: 19px 19px; | ||
background-position: 26px; | ||
background-repeat: no-repeat; | ||
padding-left: 62px; | ||
box-shadow: 0 1px 8px 0 #3d4e611a; | ||
font-size: inherit; | ||
font-family: inherit; | ||
font-weight: inherit; | ||
} | ||
|
||
.form__input:hover { | ||
box-shadow: 0 4px 4px 0 #00000040; | ||
} | ||
|
||
.form__input:focus { | ||
background-image: url('/src/images/Search.svg'), | ||
linear-gradient(180deg, #fff 0%, #f6f6f7 100%); | ||
background-size: | ||
19px 19px, | ||
100% 100%; | ||
background-position: | ||
26px, | ||
0 0; | ||
background-repeat: no-repeat; | ||
outline: none; | ||
font-family: inherit; | ||
font-weight: 900; | ||
font-size: inherit; | ||
} | ||
|
||
.form__input--big { | ||
height: 70px; | ||
} | ||
|
||
.form__input--small { | ||
height: 42px; | ||
background-size: 11px 11px; | ||
padding-left: 33px; | ||
background-position: 13px; | ||
font-family: inherit; | ||
font-weight: 400; | ||
font-size: 14px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Be consistent with your margins. The checklist advises adding only top or bottom margins, but not both, to avoid potential margin collapse. Here, you have a bottom margin set for .form__input. |
||
} | ||
|
||
.form__input--small:focus { | ||
background-size: | ||
11px 11px, | ||
auto; | ||
background-position: | ||
13px, | ||
0 0; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider using a more semantic tag like