Scribd
Upload
5 views4 pages

Styles Css

The document contains CSS styles for a webpage, setting the layout and design elements such as background colors, text colors, font styles, and alignment for various sections including header, description, menu, reservation, and footer. It includes styles for buttons and a slideshow, ensuring a cohesive and visually appealing design. The overall theme utilizes dark backgrounds with contrasting text colors for readability.

Uploaded by

inshah876
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views4 pages

Styles Css

The document contains CSS styles for a webpage, setting the layout and design elements such as background colors, text colors, font styles, and alignment for various sections including header, description, menu, reservation, and footer. It includes styles for buttons and a slideshow, ensuring a cohesive and visually appealing design. The overall theme utilizes dark backgrounds with contrasting text colors for readability.

Uploaded by

inshah876
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

body {

margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #000000; /* Set background color to black */
color: #ffffff; /* Set text color to white */
}

header {
text-align: center; /* Center align header content */
padding: 20px;
}
body {
background-image: url("https://i.ibb.co/6m4KbWb/about-banner.jpg" ); /* Replace
'your-background-image.jpg' with the path to your background image */
background-size: cover; /* Cover the entire viewport with the background image */
background-repeat: no-repeat; /* Do not repeat the background image */
background-position: center; /* Center the background image */
color: #fff; /* Set text color to white */
}

.logo img {
max-width: 200px;
}
.brand-name {
color: #008000; /* Green color */
font-size: 24px; /* Large font size */
text-align: center; /* Center align text */
}

.description {
font-family: 'Poppins', sans-serif; /* Use a stylish font */
text-align: center;
padding: 30px;
background-color: #333333; /* Dark background color */
color: #ffffff; /* White text color */
}

.description h2 {
font-size: 50px; /* Larger font size for heading */
margin-bottom: 20px; /* Add some spacing below the heading */
}

.description .brand-name {
font-weight: bold; /* Make the brand name bold */
color: #ffcc00; /* Custom color for the brand name */
}

.description p {
font-size: 20px; /* Font size for the description */
line-height: 1.5; /* Set line height for better readability */
}
.brand-name {
color: #ff0000; /* Red color */
font-weight: bold; /* Bold text */
font-style: italic; /* Italic text */
/* Add any other styles you want */
}
.slideshow {
max-width: 1000px;
margin: auto; /* Center align slideshow */
overflow: hidden;
}

.slide {
display: none;
}

.slide img {
width: 100%;
}

.description {
background-color: #333333; /* Darker gray background for description section */
padding: 20px;
text-align: center;
}

.description h2 {
margin-bottom: 10px;
}

.description p {
margin-bottom: 0;
}

.menu {
max-width: 800px;
margin: auto; /* Center align menu */
background-color: #333333; /* Dark gray background for menu */
padding: 40px;
text-align: center;
}

.menu h2 {
color: #ffffff; /* Set menu section text color to white */
}

.menu .category {
margin-bottom: 20px;
}

.menu .category img {


width: 100%;
}

.reservation {
max-width: 600px;
margin: auto; /* Center align reservation form */
background-color: #333333; /* Dark gray background for reservation section */
padding: 20px;
text-align: center;
}

.reservation h2 {
color: #ffffff; /* Set reservation section text color to white */
}

.reservation form {
text-align: left; /* Align form elements to the left */
}

.reservation form label {


display: block;
margin-bottom: 5px;
}

.reservation form input[type="text"],


.reservation form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

.reservation form input[type="submit"] {


background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

/* Your existing CSS styles */

/*Home and Contact buttons */


.btn-container {
text-align: center;
margin-top: 20px;
}

.btn-container a {
display: inline-block;
background-color: #4CAF50; /* Green button color */
color: white;
padding: 10px 20px;
text-decoration: none;
margin: 0 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.btn-container a:hover {
background-color: #45a049; /* Darker green on hover */
}
footer {
background-color: #333; /* Set background color for the footer */
color: #fff; /* Set text color to white */
text-align: center; /* Align content to center */
padding: 20px 0; /* Add padding top and bottom */
}
.footer-content {
max-width: 800px; /* Set maximum width for content */
margin: 0 auto; /* Center align content */
}

.address,
.contact {
display: inline-block; /* Display elements side by side */
width: 45%; /* Set width for each section */
vertical-align: top; /* Align content to top */
}

.address {
margin-right: 20px; /* Add margin between sections */
}

You might also like