Skip to content

Commit

Permalink
Inital commits
Browse files Browse the repository at this point in the history
  • Loading branch information
@shakti177
shakti177 committed Apr 17, 2023
1 parent 73bd53a commit 0c2c96b
Show file tree
Hide file tree
Showing 2 changed files with 148 additions and 69 deletions.
74 changes: 74 additions & 0 deletions src/Components/Home/Filterbox/Filterbox.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
#filterbox {
display: flex;
width: 100%;
justify-content: center;
}

.inside_box {
display: flex;
flex-direction: column;
/* border: 1px solid #000; */
background-image: url("../../../Assets/filterbg.png");
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 5px;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
gap: 25px;
padding: 60px 30px;
width: 85%;
}

.filterbox_row {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 10px;
}

.filterbox_column {
display: flex;
flex-direction: column;
gap: 10px;
width: 30%;
}

.filterbox_column span {
color: var(--main-color);
}

.filerbox_icons {
color: var(--main-color);
}

.filterbox_column label,
.filterbox_column input {
display: flex;
align-items: center;
gap: 10px;
}

.inside_box h2 {
padding-left: 50px;
}

.filterbox_row select,
.filterbox_row input {
border: 1px solid #ccd7e6;
/* color: #ababab; */
padding: 10px 10px;
}

.filterbox_row label {
font-weight: 500;
}

.filterbox_button {
background-color: var(--main-color);
color: #fff;
font-size: 15px;
font-weight: 500;
justify-content: center;
margin-top: 35px;
}
143 changes: 74 additions & 69 deletions src/Components/Home/Filterbox/Filterbox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,89 +6,94 @@ import "./Filterbox.css";
const Filterbox = () => {
return (
<section id="filterbox">
<div className="box">
<h2>Book a Car</h2>
<form>
<div className="filterbox_row">
<div className="form_label">
<label htmlFor="cartype">
<AiFillCar size={20} className="filerbox_icons"/>
Select you car type<span>*</span>
</label>
<select name="cartype" id="">
<option value="" disabled selected hidden>Select Your Car Type</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="MG">MG</option>
<option value="Tata">Tata</option>
<option value="Suzuki">Suzuki</option>
</select>
</div>
<div className="inside_box">
<h2>Book a car</h2>
<div className="filterbox_row">
<div className="filterbox_column">
<label htmlFor="cartype">
<AiFillCar size={20} className="filerbox_icons"/>
Select Your Car Type<span> *</span>
</label>
<select name="cartype" id="">
<option value="" disabled selected hidden>
Select Your Car Type
</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="MG">MG</option>
<option value="Tata">Tata</option>
<option value="Suzuki">Suzuki</option>
</select>
</div>

{/* option-2 */}
{/* col 2 */}

<div className="form_label">
<label htmlFor="pickup">
<HiLocationMarker size={20} className="filerbox_icons"/>
Pick Up<span>*</span>
</label>
<select name="pickup" id="">
<option value="" disabled selected hidden>Select Pick Up Location</option>
<option value="Bhopal">Bhopal</option>
<option value="Mumbai">Mumbai</option>
<option value="Pune">Pune</option>
<option value="New Delhi">New Delhi</option>
<option value="Indore">Indore</option>
</select>
</div>
<div className="filterbox_column">
<label htmlFor="pickup">
<HiLocationMarker size={20} className="filerbox_icons" />
Pick Up<span>*</span>
</label>
<select name="pickup" id="">
<option value="" disabled selected hidden>
Select Pick Up Location
</option>
<option value="Bhopal">Bhopal</option>
<option value="Mumbai">Mumbai</option>
<option value="Pune">Pune</option>
<option value="New Delhi">New Delhi</option>
<option value="Indore">Indore</option>
</select>
</div>

{/* Option-3 */}
{/* col 3 */}

<div className="form_label">
<label htmlFor="dropof">
<HiLocationMarker size={20} className="filerbox_icons"/>
Drop Off<span>*</span>
</label>
<select name="dropof" id="">
<option value="" disabled selected hidden>Select Drop of Location</option>
<option value="New Delhi">New Delhi</option>
<option value="Bhopal">Bhopal</option>
<option value="Pune">Pune</option>
<option value="Indore">Indore</option>
<option value="Mumbai">Mumbai</option>
</select>
</div>
<div className="filterbox_column">
<label htmlFor="dropof">
<HiLocationMarker size={20} className="filerbox_icons" />
Drop Off<span>*</span>
</label>
<select name="dropof" id="">
<option value="" disabled selected hidden>
Select Drop of Location
</option>
<option value="New Delhi">New Delhi</option>
<option value="Bhopal">Bhopal</option>
<option value="Pune">Pune</option>
<option value="Indore">Indore</option>
<option value="Mumbai">Mumbai</option>
</select>
</div>
</div>
<div className="filterbox_row">
{/* col 4 */}

{/* row-2 */}

<div className="filterbox_row">
<div className="form_label">
<label htmlFor="cardate">
<BsFillCalendarWeekFill size={20} className="filerbox_icons"/>
Pick-up<span>*</span>
</label>
<input type="date" name="cardate" />
</div>
<div className="filterbox_column">
<label htmlFor="cardate">
<BsFillCalendarWeekFill size={20} className="filerbox_icons" />
Pick-up<span>*</span>
</label>
<input type="date" name="cardate" />
</div>

{/* option-2 */}
{/* col 5 */}

<div className="form_label">
<label htmlFor="cardate">
<BsFillCalendarWeekFill size={20} className="filerbox_icons"/>
Drop-off<span>*</span>
</label>
<input type="date" name="cardate" />
</div>
<div className="filterbox_column">
<label htmlFor="cardate">
<BsFillCalendarWeekFill size={20} className="filerbox_icons" />
Pick-up<span>*</span>
</label>
<input type="date" name="cardate" />
</div>

{/* Option-3 */}
{/* col 6 */}

<div className="filterbox_column">
<input type="submit" value="Search" className="filterbox_button" />
</div>
</form>
</div>
</div>
</section>
);
};

export default Filterbox;
export default Filterbox;

0 comments on commit 0c2c96b

Please sign in to comment.