Website link -> https://bellavistanil.netlify.app/
## Header Section ##
## Code Section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Bella vista - Authentic Italian restaurant serving traditional Italian cuisine in the heart of the city."></meta>
<title>Bella Vista Resturant - Authentic Italian Cuisine</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
*Explain : *
This is the first section of the HTML code where the HTML foundation has been stored.
-> This line tells that the language is used to build this web page is English and will display on the web server accordingly.
-> This is the meta tag which tells that the width of the webpage will adoptable by the width of the device on which that device is handled. initial scale =1.0 helps to zoom in and out properly.
-> This will helps us to find this web page on the search engine (SEO). This relevant keywords will help to map with browsing search. This is the description of the webpage which will align with the browser user who wants to see an Italian restaurant.
## Code Section:
<header class=""header>
<div class ="container">
<nav class="navbar">
<div class="logo">
<h1>Bella Vista</h1>
<span class="tagline">Authentic Italian Cuisine</span>
</div>
<ul class = "nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>"
</header>
*Explain : *
In this header part of the design I created a header class in that class I created a div container, to containerized the all navigation items in one div. In that container I have created a navbar class and give one div for logo and just add an unordered list. All list items are hyperlinked so that in website when we press that button we can navigate towards that part.
## Code Section:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
*Explain : *
*{} -> for the universal, means it will apply for all the elements.
margin:0 and padding:0 will set clearly because every browser has it's default. This will protect from that. box-sizing: border-box is very useful it includes width and the height in the paddings and the borders.
## Code Section:
body
{
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
}
.container
{
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.header
{
background-color: #2c3e50;
color: white;
padding: 1rem 0;
position: fixed;
top: 0;
width: 100%;
z-index:1000;
}
*Explain : *
This is the design where the container design is set and giving z-index higher value is for the more visibility on the top.
## Code Section:
.navbar
{
display: flex;
justify-content: space-between;
align-items: center;
}
.logo h1
{
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.2rem;
}
.logo tagline
{
font-size: 0.9 rem;
opacity: 0.8;
}
.nav-links
{
display:flex;
list-style: none;
gap: 2rem;
}
.nav-links a
{
color: white;
text-decoration: none;
font-size: 1rem;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.nav-links a:hover
{
color: #f39c12;
background-color: rgba(255, 255, 255, 0.1);
}
*Explain : *
in this section I design the nav bar , nav objects and the hover. When it will be touched by the arrow it will glow for the border-radius: 4px; transition: background-color 0.3s ease; and color: #f39c12; background-color: rgba(255, 255, 255, 0.1);
## Hero Section ##
## Code Section:
Welcome to Bella Vista
Experience the taste of Italy in every bite.
View Menu
Make Reservation
</section>
</main>
*Explain : *
This will be the html portion where the basic hero section blocks will create. Creating the section name home so that #home will easily navigate here. Then creates a hero-buttons class to give the buttons as needed.
## Code Section:
.hero
{
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("1.jpg") center/cover;
margin-top: 80px;
display:flex;
align-items: center;
justify-content: center;
text-align: center;
color:white;
}
.hero content h2
{
font-size: 3.5rem;
margin-bottom: 1rem;
font-weight: 300;
letter-spacing: 2px;
}
.hero content p
{
font-size: 1.2rem;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero buttons
{
display: flex;
gap: 1rem;
justify-content: center;
}
.btn
{
padding: 1rem 2rem;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: all 0.3s ease;
display: inline-block;
}
.btn-primary
{
background-color: #e74c3c;
color: white;
border: none;
}
.btn-primary:hover
{
background-color: #c0392b;
transform: translate(-2px);
}
.btn-secondary
{
background-color: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover
{
background-color: white;
color: #2c3e50;
transform: translate(2px);
}
*Explain : *
1️⃣ .hero {
height: 100vh; /* full screen height /
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("1.jpg") center/cover;
margin-top: 80px; / space below navbar /
display:flex; / centers content vertically */
align-items: center;
justify-content: center;
text-align: center;
color:white;
}
Purpose: Creates a fullscreen hero section with a dark overlay over the background image.
The display:flex and align-items:center center everything vertically and horizontally.
2️⃣ .hero-content h2 and .hero-content p
These style the main headline and description inside your hero.
.hero-content h2 {
font-size: 3.5rem; /* large heading /
margin-bottom: 1rem;
font-weight: 300;
letter-spacing: 2px; / spacing between letters */
}
.hero-content p {
font-size: 1.2rem; /* smaller than heading /
margin-bottom: 2rem;
max-width: 600px; / limit text width /
margin-left: auto;
margin-right: auto; / center text block */
}
3️⃣ .hero-buttons
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
}
Purpose: Aligns both “View Menu” and “Make Reservation” buttons side-by-side with a 1rem gap between them.
4️⃣ .btn, .btn-primary, .btn-secondary
These define the common button design and their color variations.
.btn {
padding: 1rem 2rem;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: all 0.3s ease;
display: inline-block;
}
→ Adds spacing, rounded corners, hover transition.
.btn-primary
.btn-primary {
background-color: #e74c3c;
color: white;
border: none;
}
.btn-primary:hover {
background-color: #c0392b;
transform: translate(-2px);
}
→ Red button with a darker red hover effect and a small movement on hover.
.btn-secondary
.btn-secondary {
background-color: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background-color: white;
color: #2c3e50;
transform: translate(2px);
}
→ White-outlined button that fills with white and dark text when hovered.
## Code Section:
<section id="menu" class="menu">
<div class="container">
<h2 class="section-title">Our Menu</h2>
<p class="section-subtitle">Discover our carefully crafted dishes</p>
</div>
<div class="menu-items">
<div class="menu-item">
<h3>Margherita Pizza</h3>
<p>Classic pizza with fresh tomatoes, mozzarella, and basil.</p>
<span class="price">$12.99</span>
</div>
<div class="menu-item">
<h3>Spaghetti Carbonara</h3>
<p>Traditional pasta with eggs, cheese, pancetta, and pepper.</p>
<span class="price">$14.99</span>
</div>
<div class="menu-item">
<h3>Lasagna</h3>
<p>Layers of pasta, meat sauce, and cheese baked to perfection.</p>
<span class="price">$15.99</span>
</div>
<div class="menu-item">
<h3>Tiramisu</h3>
<p>Classic Italian dessert with layers of coffee-soaked ladyfingers and mascarpone cheese.</p>
<span class="price">$6.99</span>
</div>
</div>
</section>
*Explain : *
I’ve designed the menu section with clear headings and neatly organized items to make it easy to read and visually appealing. However, I realized I missed a few closing tags, like the one for .menu-items, which could cause display or validation issues. I could also improve accessibility by using a <ul> and <li> structure instead of multiple <div>s. To enhance the overall look, I plan to use a CSS grid layout that arranges the menu items evenly, with proper spacing, rounded corners, and soft shadows, so the section looks modern and stays responsive on all devices.
## Code Section:
/* ===== MENU SECTION ===== */
.menu {
background-color: #faf9f6;
color: #333;
padding: 80px 20px;
text-align: center;
font-family: "Poppins", sans-serif;
}
/* Title & Subtitle */
.menu .section-title {
font-size: 2.5rem;
font-weight: 700;
color: #222;
margin-bottom: 10px;
letter-spacing: 1px;
}
.menu .section-subtitle {
font-size: 1.1rem;
color: #777;
margin-bottom: 50px;
}
/* Menu Grid Layout */
.menu-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 25px;
max-width: 1100px;
margin: 0 auto;
}
/* Individual Menu Item */
.menu-item {
background: #fff;
border-radius: 12px;
padding: 25px 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
/* Hover Effect */
.menu-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
/* Dish Name */
.menu-item h3 {
font-size: 1.3rem;
color: #111;
margin-bottom: 10px;
}
/* Description */
.menu-item p {
font-size: 0.95rem;
color: #555;
margin-bottom: 20px;
line-height: 1.5;
}
/* Price */
.menu-item .price {
font-size: 1rem;
font-weight: 600;
color: #fff;
background-color: #2e8b57;
padding: 6px 14px;
border-radius: 20px;
display: inline-block;
}
/* Responsive Adjustment */
@media (max-width: 600px) {
.menu .section-title {
font-size: 2rem;
}
.menu .section-subtitle {
font-size: 1rem;
}
}
*Explain : *
This CSS creates an elegant and clean layout for the menu section. It uses a soft off-white background with dark text for clear readability and centers all content for balance. The menu title and subtitle are styled with modern typography, while the dishes are arranged in a responsive grid that adapts to different screen sizes. Each menu item appears inside a white card with rounded corners, gentle shadows, and a smooth hover effect that lifts the card slightly for a premium feel. The dish name and description are neatly formatted, and the price is highlighted in a soft green badge for visual emphasis.
## Code Section:
<section id="about" class="about">
<div class="container">
<h2 class="section-title">About Us</h2>
<p class="section-subtitle">Our Story</p>
<p>Bella Vista was founded in 1995 with a passion for bringing authentic Italian flavors to our community. Our chefs use traditional recipes and the freshest ingredients to create dishes that transport you to Italy with every bite. Join us for a memorable dining experience.</p>
</div>
<div class="about-image">
<img src="1.jpg" alt="Bella Vista Restaurant">
</div>
</section>
*Explain : *
This HTML code defines the “About Us” section of a restaurant website. The <section> element with the ID about and class about helps identify and style this part of the page. Inside it, there’s a container <div> that holds the section title (“About Us”), a subtitle (“Our Story”), and a paragraph describing the restaurant’s history, values, and culinary philosophy. The text highlights that Bella Vista was founded in 1995 and focuses on authentic Italian flavors made with fresh ingredients. Below the text, there’s another <div> containing an image (1.jpg) that visually represents the restaurant, making the section both informative and visually engaging.
## Code Section:
/* ===== ABOUT SECTION ===== */
.about {
background-color: #fdfaf6;
color: #333;
padding: 80px 20px;
font-family: "Poppins", sans-serif;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 40px;
}
/* Container for text */
.about .container {
max-width: 600px;
text-align: left;
flex: 1; /* allows text to take up space */
}
/* Section Title */
.about .section-title {
font-size: 2.5rem;
font-weight: 700;
color: #222;
margin-bottom: 10px;
letter-spacing: 1px;
}
/* Subtitle */
.about .section-subtitle {
font-size: 1.1rem;
color: #777;
margin-bottom: 20px;
}
/* Paragraph */
.about .container p {
font-size: 1rem;
line-height: 1.7;
color: #555;
}
/* Image on right */
.about-image {
flex: 1; /* allows image to take up space */
text-align: center;
}
.about-image img {
max-width: 100%;
border-radius: 15px;
box-shadow: 0 6px 25px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover effect on image */
.about-image img:hover {
transform: scale(1.05);
box-shadow: 0 10px 35px rgba(0,0,0,0.15);
}
/* Responsive layout */
@media (max-width: 900px) {
.about {
flex-direction: column;
text-align: center;
}
.about .container {
max-width: 90%;
}
.about-image img {
width: 90%;
margin-top: 20px;
}
}
*Explain : *
This CSS styles the “About Us” section to create a clean, elegant, and responsive layout. The main .about container uses Flexbox to place the text on the left and the image on the right, with spacing (gap: 40px) between them. The text container .container is limited in width for readability, with styled titles, subtitles, and paragraphs that use modern typography and soft colors. The image is styled with rounded corners, subtle shadows, and a hover effect that slightly enlarges it for visual interest. On screens smaller than 900px, the layout becomes vertical, stacking the text above the image, ensuring the section remains fully responsive and visually balanced on all devices.
## Code Section:
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Contact Us</h2>
<p class="section-subtitle">We'd love to hear from you!</p>
<form class="contact-form">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</section>
*Explain : *
This HTML code defines a “Contact Us” section for a website. The <section> element has the ID contact and class contact, making it easy to target with CSS or links. Inside, there’s a container <div> that holds a section title (“Contact Us”) and a subtitle (“We’d love to hear from you!”) to invite visitors to get in touch. Below the text, there is a <form> with the class contact-form containing three input fields: one for the user’s name, one for their email, and a <textarea> for their message. Each input is marked as required, ensuring the user fills it before submitting. Finally, there’s a submit button labeled “Send Message” with a class btn btn-primary for styling and easy identification. This section provides a structured and user-friendly way for visitors to contact the website owner.
Top comments (0)