Notes

HTML

<link href="//cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="background">
<form>
<h2>Search your next ride</h2>
<div class="pickup">
<label for="date-string">PickUp</label><br/>
<input [formControl]="dateStringControl" type="date" id="date-string" />

<input type="time" id="appt" name="appt" min="01:00" max="24:00" required>
</div>
<div class="dropoff">
<label for="date-string">DropOff</label><br/>
<input [formControl]="dateStringControl" type="date" id="date-string" />

<input type="time" id="appt" name="appt" min="01:00" max="24:00" required>
</div>
<button type="submit">Search</button>
</form>
</div>
<section class="features">
<div class="features-service-tags">
<img src="https://d36g7qg6pk2cm7.cloudfront.net/assets/redesign/feature_tag_sanitized-a37325c03fb50fd9b2783d574ba67c40cb7b8a90d5951a85f72095904943e1d6.png" data-src="https://d36g7qg6pk2cm7.cloudfront.net/assets/redesign/feature_tag_sanitized-a37325c03fb50fd9b2783d574ba67c40cb7b8a90d5951a85f72095904943e1d6.png" alt="24/7 Roadside Assistance" class="features-service-tags--child-img lozad" data-loaded="true">
<p class="features-service-tags--child-tagline">Sanitized Vehicles</p>
</div>
<div class="features-service-tags">
<img src="https://d36g7qg6pk2cm7.cloudfront.net/assets/redesign/feature_tag_insurance-84ee18a118bee4cfc4f774e0dbdb5d24431af458eb583d5d1c5822801e388764.png" data-src="https://d36g7qg6pk2cm7.cloudfront.net/assets/redesign/feature_tag_insurance-84ee18a118bee4cfc4f774e0dbdb5d24431af458eb583d5d1c5822801e388764.png" alt="Vehicle Insurance" class="features-service-tags--child-img lozad" data-loaded="true">
<p class="features-service-tags--child-tagline">Vehicle Insurance</p>
</div>
<div class="features-service-tags">
<img src="https://d36g7qg6pk2cm7.cloudfront.net/assets/redesign/feature_tag_assistance-ec66ebeeb0ebb01468fc1729165040e172820de83d5037cf47a73f4e19177d68.png" data-src="https://d36g7qg6pk2cm7.cloudfront.net/assets/redesign/feature_tag_assistance-ec66ebeeb0ebb01468fc1729165040e172820de83d5037cf47a73f4e19177d68.png" alt="24/7 Roadside Assistance" class="features-service-tags--child-img lozad" data-loaded="true">
<p class="features-service-tags--child-tagline">24/7 Roadside Assistance</p>
</div>
<div class="features-service-tags">
<img src="https://d36g7qg6pk2cm7.cloudfront.net/assets/redesign/feature_tag_maintainence-4ac25e7eb9ad6f8b78ec52640a7310d8083a21823e1fb54ca9872076c2bc5f34.png" data-src="https://d36g7qg6pk2cm7.cloudfront.net/assets/redesign/feature_tag_maintainence-4ac25e7eb9ad6f8b78ec52640a7310d8083a21823e1fb54ca9872076c2bc5f34.png" alt="Bike Maintenance" class="features-service-tags--child-img lozad" data-loaded="true">
<p class="features-service-tags--child-tagline">Bike Maintenance</p>
</div>
</section>
<h3 class="our">OUR FLEET</h3>
<div class="fleet">
<img class="bikeimg" src="https://static.autox.com/uploads/2018/10/Honda-Activa-5G-Image-Gallery-15--180x132.jpg">
<button class="book">BOOK NOW</button>
</div>
<h3 class="taxes">* Excluding of all taxes</h3>

TS
import { Component, ElementRef, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';


@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
widgetsContent: any;

constructor() { }

ngOnInit(): void {
}
date = new Date();
dateStringControl = new FormControl('Date');
dateObjectControl = new FormControl(new Date());

updateDate(event: any) {
this.date = event.target.valueAsDate;
}
}

DATE-CONVERTER DIRECTIVE
import { Directive, ElementRef, forwardRef, HostListener, Renderer2 } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
selector: '[appDateConverter],input[type=date][ngModel], input[type=date][formControl]',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DateConverterDirective),
multi: true
}]
})
export class DateConverterDirective implements ControlValueAccessor {
@HostListener('blur', []) onTouched: any = () => { };
@HostListener('input', ['$event']) onChange: any = () => { };

private valueType: 'value' | 'valueAsDate' = 'value';

constructor(private renderer: Renderer2, private elementRef: ElementRef) { }

registerOnTouched(fn: () => void) { this.onTouched = fn; }

registerOnChange(fn: (value: any) => void) {
this.onChange = (event: any) => fn(event.target[this.valueType])
}

writeValue(value: Date | string) {
this.valueType = typeof value === 'string' ? 'value' : 'valueAsDate';
this.renderer.setProperty(this.elementRef.nativeElement, this.valueType, value);
}
}

CSS

.background {
background-image: url(https://imgstaticcontent.lbb.in/lbbnew/wp-content/uploads/sites/2/2016/06/Royalbrosfeatured-i2.jpg?w=1200&h=628&fill=blur&fit=fill);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height:100%;
margin-top: 5px;
padding-top: 10%;
padding-bottom: 15%;
}
.background form{
width: 30%;
padding: 20px 30px;
margin-left: 50px;
background-color: #fff;
border-radius: 5px;
}
form input{
margin: 10px;
}
h2{
margin-bottom: 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 23.992px;
}
/* input[type="date"]:before {
content: 'Date';
color: #9d9d9d;
position: absolute;
background: #fff;
height: 18px;
}

input[type="date"]:hover:before {
content: '';
} */
input[type="time"]:before {
content: 'Time';
color: #9d9d9d;
position: absolute;
background: #fff;
height: 18px;
text-align: center;
}

input[type="time"]:hover:before {
content: '';
}
.pickup , .dropoff{
margin-bottom: 20px;
}
.pickup label,.dropoff label{
font-weight: bold;
font-size: 15px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
form button{
text-align: center;
border: none;
width: 90%;
background-color: yellow;
border-radius: 5px;
margin-bottom: 20px;
padding: 5px 0px;
}
.features{
display: flex;
margin-top: 10px;
margin-bottom: 25px;

}
.features .features-service-tags {
margin: 0px 5%;
display: flex;
}
.features .features-service-tags p{
margin-left: 10px;

}
.our{
text-align: center;
/* border-bottom: 2px solid yellow; */
text-decoration: underline;
text-decoration-color: yellow;
text-decoration-thickness: 5px;
margin: 10px 0px 40px;
}
.fleet {
display: flex;
flex-direction: column;
margin-left: 10%;
margin-bottom: 20px;
}
.fleet img{
width: 20%;
border-radius: 5px;
}
.fleet button{
width: 20%;
background-color: yellow;
border: none;
border-radius: 5px;
}
.taxes{
margin: 10px 0px;
text-align: center;
font-size: 16px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}