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

add task solution #4511

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add task solution #4511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ ___

❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:

- [DEMO LINK](https://<your_account>.github.io/layout_search-bar-airbnb/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_search-bar-airbnb/report/html_report/)
- [DEMO LINK](https://lucashel-design.github.io/layout_search-bar-airbnb/)
- [TEST REPORT LINK](https://lucashel-design.github.io/layout_search-bar-airbnb/report/html_report/)

❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.

Expand Down
40 changes: 29 additions & 11 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,34 @@
/>
</head>
<body>
<input
type="text"
data-qa="keypress"
placeholder="Try “Los Angeles“"
/>

<input
type="text"
data-qa="hover"
placeholder="Try “Los Angeles“"
/>
<form
action="/submit-your-form-handler"
method="post"
class="search-form"
Comment on lines +20 to +23
Copy link

Choose a reason for hiding this comment

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

The attributes in the <form> tag should start each on a new line with 2-space indentation related to the tag to keep the attributes correctly formatted. The tag’s closing bracket should be on the same level as the opening one.

>
<div class="search-group">
<div
class="search"
data-qa="big"
>
<input
type="text"
class="search__bar search__bar--top"
data-qa="keypress"
placeholder="Try “Los Angeles“"
Comment on lines +30 to +34
Copy link

Choose a reason for hiding this comment

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

The attributes in the <input> tag should start each on a new line with 2-space indentation related to the tag to keep the attributes correctly formatted. The tag’s closing bracket should be on the same level as the opening one.

/>
</div>
<div
class="search"
data-qa="small"
>
<input
type="text"
class="search__bar search__bar--bottom"
placeholder="Try “Los Angeles“"
Comment on lines +41 to +44
Copy link

Choose a reason for hiding this comment

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

The attributes in the <input> tag should start each on a new line with 2-space indentation related to the tag to keep the attributes correctly formatted. The tag’s closing bracket should be on the same level as the opening one.

/>
</div>
</div>
</form>
</body>
</html>
80 changes: 79 additions & 1 deletion src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,79 @@
/* add styles here */
@font-face {
font-family: Avenir;
src: url('./fonts/Avenir-Book.ttf');
font-weight: 300;
}

@font-face {
font-family: Avenir;
src: url('./fonts/Avenir-Heavy.ttf');
font-weight: 900;
}

body {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.search-group {
display: flex;
flex-direction: column;
gap: 20px; /* Espaçamento de 20px entre os elementos filhos */
padding: 20px 8px;
}

.search__bar {
font-size: 16px;
box-sizing: border-box;
border: 1px solid rgba(225, 231, 237, 1);
width: 100%; /* Ajuste para largura total */
box-shadow: 0 1px 8px 0 #3d4e611a;
font-family: Avenir, Arial, sans-serif;
}
Copy link

Choose a reason for hiding this comment

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

Remember to use fallback fonts - alternative font-family in case the main one doesn't work. For example, 'font-family: Avenir, Arial, sans-serif;' is a good practice as you have done, but ensure that 'Arial' is not the only fallback font. Consider adding another generic family such as 'Helvetica' to improve cross-platform compatibility.


.search__bar::placeholder {
color: #3d4e61;
}

.search__bar--top {
height: 70px;
border-radius: 4px 4px 0 0;
border: 1px solid rgba(225, 231, 237, 1);
opacity: 1;
padding: 19px 10px 19px 62px; /* Ajuste o padding esquerdo para 62px */
background-image: url('./images/Search.svg');
background-repeat: no-repeat;
background-position: 26px center;
background-size: 19px 19px;
}

.search__bar--bottom {
height: 42px;
border-radius: 0 0 4px 4px;
border: 1px solid rgba(225, 231, 237, 1);
opacity: 1;
padding: 11px 10px 11px 33px;
background-image: url('./images/Search.svg');
background-repeat: no-repeat;
background-position: 13px center; /* Ícone a 11px da esquerda */
background-size: 11px 11px;
font-size: 14px;
}

.search__bar:focus {
border-color: rgba(0, 0, 0, 0.25);
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
font-family: Avenir-Book, Arial, sans-serif; /* Usar Avenir-Heavy no focus */
font-weight: 900;
text-shadow: 0 4px 4px #00000040;
}
Comment on lines +68 to +70
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 'Avenir-Book' used here does not match the font-family 'Avenir' defined in the @font-face rule. Instead, you should specify the font-weight to ensure the correct font is used. Also, 'font-weight: 900;' is incorrect here because 'Avenir-Book' is a lighter weight (likely 300), not the heaviest weight (900).


.search__bar:hover {
border-color: rgba(0, 0, 0, 0.25);
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
font-family: Avenir-Heavy, Arial, sans-serif;
font-weight: 900;
}
Comment on lines +77 to +78
Copy link

Choose a reason for hiding this comment

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

As with the previous comment, the font-family 'Avenir-Heavy' should not be used directly. Use the 'font-family: Avenir;' with the appropriate 'font-weight' to ensure the correct font is applied. The 'font-weight' should match the one defined in your @font-face rule for 'Avenir-Heavy', which is 900.

Loading