HOMEPAGE.
HTML
<ion-header>
<ion-toolbar>
<ion-title class="header">
<img src="assets/icon/[Link]" class="logo" />
<span class="header-title">Car Showcase</span>
<img src="assets/icon/[Link]" class="side-image" />
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="car-image-container">
<img src="assets/icon/[Link]" 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/[Link]" class="card-image" />
<div class="card-caption">Another Car Model</div>
</ion-card>
<ion-card class="card">
<img src="assets/icon/[Link]" class="card-image" />
<div class="card-caption">Yet Another Model</div>
</ion-card>
</div>
</ion-content>
[Link]
@import url('[Link] /*
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 */
color: #fff; /* White color 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 */
height: 100px; /* Increased height of the side image to maintain proportion */
.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 */
