-
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
first try - search bar #4553
base: master
Are you sure you want to change the base?
first try - search bar #4553
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,34 @@ | |
/> | ||
</head> | ||
<body> | ||
<input | ||
type="text" | ||
data-qa="keypress" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
<label | ||
class="lab-first" | ||
data-qa="big" | ||
> | ||
<img | ||
alt="search-icon" | ||
src="images/Search.svg" | ||
/> | ||
|
||
<input | ||
type="text" | ||
data-qa="hover" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
<input | ||
type="text" | ||
data-qa="keypress" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
</label> | ||
<label | ||
class="lab-second" | ||
data-qa="small" | ||
> | ||
<img | ||
alt="search-icon" | ||
Comment on lines
+39
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 alt attribute should describe the image content. 'search-icon' is not descriptive enough. Consider using a more descriptive alt text, such as 'magnifying glass icon for search'. |
||
src="images/Search.svg" | ||
/> | ||
|
||
<input | ||
type="text" | ||
placeholder="Try “Los Angeles“" | ||
/> | ||
</label> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,73 @@ | ||
/* add styles here */ | ||
@font-face { | ||
font-family: Avenir; | ||
src: url(/src/fonts/Avenir-Book.ttf) format('opentype') tech(color-COLRv1); | ||
} | ||
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 |
||
|
||
body { | ||
margin: 0; | ||
padding: 20px; | ||
font-weight: 300; | ||
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 using only top or bottom padding to avoid potential margin collapse issues. The checklist suggests being consistent with margins and padding. |
||
} | ||
|
||
.lab-first img { | ||
width: 19px; | ||
height: 19px; | ||
margin-left: 26px; | ||
margin-right: 17px; | ||
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 using only margin-left or margin-right to avoid potential margin collapse issues. The checklist suggests being consistent with margins. |
||
} | ||
|
||
.lab-second img { | ||
width: 11px; | ||
height: 11px; | ||
margin-left: 13px; | ||
margin-right: 9px; | ||
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 using only margin-left or margin-right to avoid potential margin collapse issues. The checklist suggests being consistent with margins. |
||
} | ||
|
||
.lab-first { | ||
width: 100%; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
border: 1px solid #4242426e; | ||
height: 70px; | ||
} | ||
|
||
.lab-first:hover { | ||
box-shadow: 12px 2px 10px #a1244a; | ||
} | ||
|
||
.lab-first input { | ||
border: none; | ||
width: 100%; | ||
height: 98%; | ||
} | ||
|
||
.lab-second { | ||
width: 100%; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
border: 1px solid #4242426e; | ||
height: 42px; | ||
margin: 20px auto 0; | ||
} | ||
|
||
.lab-second input { | ||
border: none; | ||
width: 100%; | ||
height: 90%; | ||
} | ||
|
||
.lab-second:hover { | ||
box-shadow: 12px 2px 10px #138392; | ||
} | ||
|
||
.lab-second input:focus { | ||
box-shadow: 12px 2px 10px #138392; | ||
outline: none; | ||
} | ||
|
||
.lab-first input:focus { | ||
box-shadow: 12px 2px 10px #a1244a; | ||
outline: none; | ||
} |
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 alt attribute should describe the image content. 'search-icon' is not descriptive enough. Consider using a more descriptive alt text, such as 'magnifying glass icon for search'.