* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
line-height: 1.6;
background: #f4f4f4;
color: #333;
}
header {
background: #0d6efd;
color: white;
padding: 20px 0;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
.hero {
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(‘https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1400&auto=format&fit=crop’);
background-size: cover;
background-position: center;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
.hero h1 {
font-size: 50px;
margin-bottom: 15px;
}
.hero p {
font-size: 20px;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background: #0d6efd;
color: white;
padding: 12px 25px;
text-decoration: none;
border-radius: 5px;
transition: 0.3s;
}
.btn:hover {
background: #084298;
}
section {
padding: 60px 0;
}
.section-title {
text-align: center;
margin-bottom: 40px;
font-size: 35px;
color: #0d6efd;
}
.services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.card {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card h3 {
margin-bottom: 15px;
color: #0d6efd;
}
.about {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
align-items: center;
}
.about img {
width: 100%;
border-radius: 10px;
}
.contact-form {
background: white;
padding: 30px;
border-radius: 10px;
max-width: 700px;
margin: auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
footer {
background: #111;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 30px;
}
@media(max-width: 768px) {
nav {
flex-direction: column;
gap: 15px;
}
.hero h1 {
font-size: 35px;
}
}
Build Your Dream Website
Professional Website Design Using HTML, CSS & JavaScript
Our Services
Web Design
Modern and responsive website designs for your business.
WordPress Development
Custom WordPress websites with Elementor and coding support.
SEO Optimization
Improve your Google ranking and website traffic.
About Us
We Create Beautiful Websites
This is a sample full website template made using HTML and CSS.
You can use this code inside WordPress Custom HTML section or upload it to your hosting.
Edit the text, images, colors and links based on your business needs.
Contact Us