-
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 #4544
base: master
Are you sure you want to change the base?
add task solution #4544
Changes from 4 commits
981662b
c2e76ab
edf7308
b11b87f
c44a3fa
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 |
---|---|---|
@@ -1,5 +1,8 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<html | ||
lang="en" | ||
class="page" | ||
> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta | ||
|
@@ -16,17 +19,34 @@ | |
href="style.css" | ||
/> | ||
</head> | ||
<body> | ||
<input | ||
type="text" | ||
data-qa="keypress" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
|
||
<input | ||
type="text" | ||
data-qa="hover" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
<body class="page__body"> | ||
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. There should be no blank line between the head and body tags. Remove the empty line to maintain proper HTML formatting. |
||
<form | ||
class="search-bar search-bar-big" | ||
data-qa="big" | ||
> | ||
Comment on lines
+23
to
+26
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 attributes for the form tag are correctly formatted since there are more than two attributes. However, ensure that the line length does not exceed 80 characters. |
||
<label class="search-bar__label search-bar__label-big"> | ||
<input | ||
data-qa="keypress" | ||
class="search-bar__input search-bar__input-big" | ||
type="text" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
Comment on lines
+28
to
+33
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 attributes for the input tag are correctly formatted since there are more than two attributes. However, ensure that the line length does not exceed 80 characters. |
||
</label> | ||
</form> | ||
|
||
<form | ||
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. There should be an empty line between the sibling form elements to improve readability. |
||
class="search-bar search-bar-small" | ||
data-qa="small" | ||
> | ||
Comment on lines
+37
to
+40
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 attributes for the form tag are correctly formatted since there are more than two attributes. However, ensure that the line length does not exceed 80 characters. |
||
<label class="search-bar__label search-bar__label-small"> | ||
<input | ||
data-qa="hover" | ||
class="search-bar__input search-bar__input-small" | ||
type="text" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
Comment on lines
+42
to
+47
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 attributes for the input tag are correctly formatted since there are more than two attributes. However, ensure that the line length does not exceed 80 characters. |
||
</label> | ||
</form> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,124 @@ | ||
/* add styles here */ | ||
* { | ||
padding: 0; | ||
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. Using the universal selector '*' is not recommended as it impacts performance. Consider applying styles directly to specific elements or classes that require them. |
||
box-sizing: border-box; | ||
} | ||
|
||
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 use of the |
||
@font-face { | ||
font-family: Avenir; | ||
font-weight: 300; | ||
font-style: normal; | ||
src: url(fonts/Avenir-Book.ttf) format('truetype'); | ||
} | ||
|
||
@font-face { | ||
font-family: Avenir; | ||
font-weight: 600; | ||
font-style: normal; | ||
src: url(fonts/Avenir-Heavy.ttf) format('truetype'); | ||
} | ||
|
||
.page__body { | ||
font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; | ||
font-size: 16px; | ||
} | ||
|
||
.search-bar { | ||
display: flex; | ||
justify-content: center; | ||
gap: 20px; | ||
margin-top: 20px; | ||
margin-left: auto; | ||
margin-right: auto; | ||
} | ||
|
||
.search-bar-big { | ||
width: 100%; | ||
min-height: 70px; | ||
} | ||
|
||
.search-bar-small { | ||
width: 100%; | ||
min-height: 42px; | ||
} | ||
|
||
.search-bar__label { | ||
position: relative; | ||
display: block; | ||
width: 100%; | ||
} | ||
|
||
.search-bar__label::after { | ||
position: absolute; | ||
content: ''; | ||
display: block; | ||
} | ||
|
||
.search-bar__label-big::after { | ||
background-image: url(./images/Search.svg); | ||
background-repeat: no-repeat; | ||
background-size: contain; | ||
width: 19px; | ||
height: 19px; | ||
top: 25px; | ||
left: 26px; | ||
} | ||
|
||
.search-bar__label-small::after { | ||
background-image: url(./images/Search.svg); | ||
background-repeat: no-repeat; | ||
background-size: contain; | ||
width: 11px; | ||
height: 11px; | ||
top: 15px; | ||
left: 13px; | ||
} | ||
|
||
.search-bar__input { | ||
width: 100%; | ||
height: 100%; | ||
border: 1px solid #e1e7ed; | ||
font-family: inherit; | ||
border-radius: 4px; | ||
font-weight: 300; | ||
color: #3d4e61; | ||
box-shadow: 0 1px 8px 0 #3d4e6133; | ||
outline: none; | ||
} | ||
|
||
.search-bar__input:hover { | ||
box-shadow: 0 3px 8px 0 #3d4e6133; | ||
} | ||
|
||
.search-bar__input:focus { | ||
border: 1px solid #e1e7ed; | ||
background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); | ||
font-weight: 600; | ||
color: #3d4e61; | ||
} | ||
|
||
.search-bar__input-big { | ||
padding-left: 62px; | ||
font-size: 16px; | ||
line-height: 22; | ||
} | ||
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 'line-height' property should have a unit specified, such as 'px'. Without a unit, it may not render as expected. |
||
|
||
.search-bar__input-small { | ||
padding-left: 33px; | ||
font-size: 14px; | ||
line-height: 19; | ||
} | ||
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 'line-height' property should have a unit specified, such as 'px'. Without a unit, it may not render as expected. |
||
|
||
.search-bar__input::placeholder { | ||
color: inherit; | ||
font-weight: 300; | ||
} | ||
|
||
.search-bar__input-big::placeholder { | ||
font-size: 16px; | ||
line-height: 22px; | ||
} | ||
|
||
.search-bar__input-small::placeholder { | ||
font-size: 14px; | ||
line-height: 22px; | ||
} |
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.
The HTML tag should not have attributes split across multiple lines unless there are more than two attributes or the attributes are long. Consider placing them on a single line.