Style and design

HTML-CSS
1

/* styles.css */

/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
color: #333;
}

h1, h2, h3 {
color: #2c3e50;
}

/* Header and Navigation */
header {
background-color: #3498db;
padding: 10px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}

nav ul li a:hover {
text-decoration: underline;
}

/* Hero Section */
#hero {
background: url(‘images/hero.jpg’) no-repeat center center;
background-size: cover;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}

.hero-content h1 {
font-size: 48px;
margin: 0;
}

.hero-content p {
font-size: 24px;
}

.cta-btn {
background-color: #e74c3c;
color: white;
padding: 10px 20px;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
margin-top: 20px;
}

.cta-btn:hover {
background-color: #c0392b;
}

/* Tour Section */
#tours {
padding: 50px 0;
background-color: #ecf0f1;
text-align: center;
}

#tours .tour-card {
display: inline-block;
width: 30%;
margin: 20px;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
text-align: center;
}

#tours .tour-card img {
width: 100%;
height: auto;
border-radius: 10px;
}

#tours .tour-card h3 {
font-size: 24px;
margin-top: 10px;
}

/* Contact Section */
#contact {
padding: 50px;
background-color: #fff;
text-align: center;
}

form input, form textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

form button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

form button:hover {
background-color: #2980b9;
}

/* Footer */
footer {
background-color: #34495e;
color: white;
text-align: center;
padding: 20px;
}

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!