franklinblanco/realtor-lp-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Search bar & bg

Browse Source
This commit is contained in:
Franklin 2023-05-10 19:03:22 -04:00
parent 503d90eeb1
commit 004564ec0b
5 changed files with 168 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/search-background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

2
css/components/page/agency.css
View File

@ -10,7 +10,7 @@
width: 100%; width: 100%;
padding: 25px 0px; padding-top: 25px;
margin-top: 50px; margin-top: 50px;
} }
.agency-head-1 { .agency-head-1 {

137
css/components/page/search.css Normal file
View File

@ -0,0 +1,137 @@
.search-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 62vw;
background-color: #E3F0FF;
background-size: cover;
object-fit: cover;
}
.search-bar-container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
.search-bar-arrangement-type-picker-container {
display: flex;
flex-direction: row;
justify-content: start;
align-items: end;
width: 100%;
margin-left: 20px;
margin-bottom: -5px;
gap: 2.5px;
font-family: Ubuntu;
font-style: normal;
font-weight: 700;
font-size: 10px;
line-height: 14px;
text-align: center;
}
.search-bar-arrangement-type-picker {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 30px;
color: black;
background-color: white;
border: 0.4px solid #26306B;
border-radius: 5px;
}
.search-bar-arrangement-type-picker-selected {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 30px;
color: white;
background-color: #26306B;
border: 0.4px solid #26306B;
border-radius: 5px;
}
.search-bar-area-container {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
background-color: #FEFEFE;
width: 400px;
height: 55px;
border-radius: 5px;
}
.search-bar-area-location-picker {
width: 150px;
color: black;
opacity: 0.6;
text-align: center;
font-size: 12px;
}
.search-bar-area-separator {
width: 0.7px;
height: 70%;
background-color: black;
opacity: 0.6;
}
.search-bar-area-text-search {
width: 180px;
color: black;
opacity: 0.6;
text-align: center;
font-size: 12px;
}
.search-bar-area-filter-toggle {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
color: #26306B;
font-size: 17px;
}
.search-bar-area-filter-toggle:hover {
cursor: pointer;
}
.search-bar-area-go-button {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 17px;
color: white;
border-radius: 5px;
background-color: #26306B;
}
.search-bar-area-go-button:hover {
cursor: pointer;
}

1
index.html
View File

@ -15,6 +15,7 @@
<link data-trunk type="text/css" href="css/components/navbar.css" rel="css" /> <link data-trunk type="text/css" href="css/components/navbar.css" rel="css" />
<link data-trunk type="text/css" href="css/components/page/hero.css" rel="css" /> <link data-trunk type="text/css" href="css/components/page/hero.css" rel="css" />
<link data-trunk type="text/css" href="css/components/page/agency.css" rel="css" /> <link data-trunk type="text/css" href="css/components/page/agency.css" rel="css" />
<link data-trunk type="text/css" href="css/components/page/search.css" rel="css" />
<link data-trunk href="assets/text/robots.txt" rel="copy-file"/> <link data-trunk href="assets/text/robots.txt" rel="copy-file"/>

30
src/components/page/search.rs
View File

@ -2,5 +2,33 @@ use yew::prelude::*;
#[function_component(SearchSection)] #[function_component(SearchSection)]
pub fn search_section() -> Html { pub fn search_section() -> Html {
html! {} html! {
<div class={"search-container"} style={"background-image: url('images/search-background.png');"}>
<div class={"search-bar-container"}>
<div class={"search-bar-arrangement-type-picker-container"}>
<div class={"search-bar-arrangement-type-picker-selected"}>
{"Buy"}
</div>
<div class={"search-bar-arrangement-type-picker"}>
{"Rent"}
</div>
</div>
<div class={"search-bar-area-container"}>
<div class={"search-bar-area-location-picker"}>
{"Select Location"}
</div>
<div class={"search-bar-area-separator"}/>
<div class={"search-bar-area-text-search"}>
{"Enter keyword..."}
</div>
<div class={"search-bar-area-filter-toggle"}>
<i class="fa-solid fa-sliders"></i>
</div>
<div class={"search-bar-area-go-button"}>
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
</div>
</div>
}
} }