body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
background: #f1f2f6;
}
.app {
max-width: 420px;
margin: auto;
background: white;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
padding: 15px;
font-size: 20px;
font-weight: bold;
background: #111;
color: white;
text-align: center;
}
.search {
padding: 10px;
}
.search input {
width: 100%;
padding: 10px;
border-radius: 10px;
border: none;
background: #f1f2f6;
}
.cars {
padding: 10px;
flex: 1;
}
.car-card {
background: white;
border-radius: 15px;
margin-bottom: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
.car-card img {
width: 100%;
height: 180px;
object-fit: cover;
}
.car-info {
padding: 10px;
}
.car-info h3 {
margin: 5px 0;
}
.price {
color: green;
font-weight: bold;
}
.bottom-nav {
display: flex;
justify-content: space-around;
padding: 10px;
background: white;
border-top: 1px solid #ddd;
position: sticky;
bottom: 0;
}
.nav-item {
text-align: center;
font-size: 12px;
}
.nav-item span {
display: block;
font-size: 20px;
}
AutoWorld<input type="text" placeholder="Search cars...">
<img src="https://images.unsplash.com/photo-1549924231-f129b911e442">
<div class="car-info">
<h3>BMW X5</h3>
<p class="price">₹95,00,000</p>
</div>
<img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d">
<div class="car-info">
<h3>Audi A6</h3>
<p class="price">₹65,00,000</p>
</div>
<img src="https://images.unsplash.com/photo-1502877338535-766e1452684a">
<div class="car-info">
<h3>Ford Mustang</h3>
<p class="price">₹75,00,000</p>
</div>
<div class="nav-item"><span>🏠</span>Home</div>
<div class="nav-item"><span>🔍</span>Search</div>