HOMEPAGE.

HTML

<ion-header>

<ion-toolbar>

<ion-title class="header">

<img src="assets/icon/logo.png" class="logo" />

<span class="header-title">Car Showcase</span>

<img src="assets/icon/inco.png" class="side-image" />

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<div class="car-image-container">

<img src="assets/icon/car2.png" class="car-image" />

<div class="text-overlay">

<div>Timeless Elegance Meets</div>

</div>

</div>

<div class="car-details">

<div class="text-overlay">

Classy car, Mileage, Sporty

</div>

<div class="price">₱69,678</div>

</div>

<div class="info-card">

<h2>The Mercedes-Benz W136</h2>

<div class="price">₱69,678</div>
 <div class="description-text">

The Mercedes-Benz W136 was Mercedes-Benz's main line of inline-four cylinder motorcars from the
mid-1930s into the 1950s. The model 170 V made its public debut as successor to the W15 Typ 170 in
February 1936. Between 1936 and 1939 it was Mercedes' top selling model.

</div>

</div>

<div class="card-section">

<ion-card class="card">

<img src="assets/icon/car3.png" class="card-image" />

<div class="card-caption">Another Car Model</div>

</ion-card>

<ion-card class="card">

<img src="assets/icon/car4.png" class="card-image" />

<div class="card-caption">Yet Another Model</div>

</ion-card>

</div>

</ion-content>

Home.page.scss

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); /*
Import custom fonts */

.content {

--background: #000; /* Black background */

color: #fff; /* White text color for contrast */

}
.car-image-container {

position: relative;

height: 50vh; /* Adjusted height */

width: 100%;

overflow: hidden; /* Ensure no overflow beyond the rounded corners */

.car-image {

width: 100%;

height: 100%;

object-fit: cover; /* Ensure the image covers the entire container */

border-bottom-left-radius: 15px; /* Rounded bottom left corner */

border-bottom-right-radius: 15px; /* Rounded bottom right corner */

.text-overlay {

position: absolute;

bottom: 10px; /* Position text at the bottom */

left: 50%;

transform: translateX(-50%);

color: rgba(255, 255, 255, 0.7); /* Light white color with lower opacity */

font-size: 16px; /* Adjust font size */

font-weight: bold;

.price {

font-size: 28px;

font-weight: bold; /* Bold font for price */

.description {

margin-top: 10px;

.header {

display: flex;

align-items: center;

justify-content: space-between; /* Space between items in the header */

padding: 10px 20px; /* Padding for the header */

background: #000; /* Black background for the header */

.header-title {

font-family: 'Roboto', sans-serif; /* Use custom font for the title */

font-weight: 700; /* Bold weight for the title */

font-size: 24px; /* Font size for the title */

color: #fff; /* White text color */

.logo {

width: 120px; /* Increased width of the logo */

height: 120px; /* Increased height of the logo */

.side-image {

width: 100px; /* Increased width of the side image */

.card-section {

display: flex;

justify-content: space-between; /* Space out the cards evenly */

padding: 16px;

margin-top: 20px; /* Adjust margin-top to move cards up */

.card {

background: linear-gradient(135deg, #1c1c1c 0%, #000000 100%); /* Gradient from dark gray to black
*/

border-radius: 10px;

overflow: hidden;

width: 48%; /* Adjust width to fit two cards side by side */

text-align: center;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optional shadow for a subtle 3D effect */

.card-image {

width: 100%;

height: auto; /* Maintain aspect ratio */

.card-caption {

padding: 8px;

color: #fff; /* White text color */

font-weight: bold;
}

.info-card {

background: linear-gradient(135deg, #000000 0%, #333333 100%); /* Gradient from black to dark gray
*/

border-radius: 10px;

padding: 20px; /* Increased padding for better text fit */

text-align: center;

margin: 16px auto; /* Center card horizontally and add margin */

width: 80%; /* Adjusted width to make it wider */

max-width: 600px; /* Increased maximum width for a more rectangular look */

height: 300px; /* Height remains unchanged */

.info-card h2 {

color: #fff; /* White text color */

font-size: 18px; /* Adjust font size for better fit */

font-weight: 400; /* Thinner font weight for body text */

margin-bottom: 8px; /* Adjusted margin-bottom to move text up */

.info-card .price {

color: #fff; /* White text color */

font-size: 28px; /* Increase font size for prominence */

font-weight: bold;

margin: 10px 0; /* Margin around price */

.description-text {
 color: rgba(255, 255, 255, 0.9); /* Light white color with higher opacity */

font-size: 14px; /* Adjust font size as needed */

line-height: 1.6; /* Improve readability with line height */

font-weight: 400; /* Thinner font weight for description */

margin-top: 0; /* Reduce top margin to move text up */