src/app/about/about.component.ts
| selector | app-about |
| styleUrls | ./about.component.css |
| templateUrl | ./about.component.html |
import { Component } from '@angular/core';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent {
}
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="https://source.unsplash.com/random/1920x1080/?Food" alt="About Image" class="img-fluid">
</div>
<div class="col-lg-6">
<h2>About HungryHub</h2>
<p>Welcome to HungryHub, where you can experience the best culinary delights in town. Our mission is to provide an exceptional dining experience that satisfies your taste buds and leaves you craving for more.</p>
<p>At HungryHub, we take pride in offering a diverse menu crafted with passion and expertise. From mouthwatering appetizers to delectable main courses and delightful desserts, our talented chefs ensure that each dish is prepared with the finest ingredients and utmost care.</p>
<p>Whether you are a food enthusiast, a connoisseur, or simply looking for a memorable dining experience, HungryHub is the perfect destination. Our cozy ambiance, attentive staff, and commitment to culinary excellence create an atmosphere that will make you feel right at home.</p>
<p>Visit HungryHub today and embark on a culinary journey that will tantalize your taste buds and leave you with unforgettable memories. We look forward to serving you!</p>
</div>
</div>
</div>
</section>
./about.component.css
/* Custom CSS for About Section */
.about {
padding: 80px 0;
}
.about h2 {
font-size: 32px;
font-weight: bold;
color: #333;
margin-bottom: 30px;
}
.about p {
font-size: 18px;
line-height: 1.6;
color: #555;
margin-bottom: 20px;
}
.about img {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 8px;
margin-bottom: 30px;
}
/* Media query for responsive layout */
@media (max-width: 768px) {
.about {
padding: 60px 0;
}
.about h2 {
font-size: 28px;
}
.about p {
font-size: 16px;
}
}