MEJORA LOS ESTILOS DE ESTE CÓDIGO :  <!doctype html>
<html lang=“es”>

<head>
<meta charset=“utf-8”>
<title>Abogados XYZ</title>
<meta name=“description” content=“Abogados XYZ - Soluciones para tus problemas legales”>
<link href=“https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap” rel=“stylesheet”>
<style>


/ Estilos globales /
{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ‘Roboto’, sans-serif;
}

body {
background-color: #f5f5f5;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}


header {
background-color: #232323;
color: #fff;
height: 80px;
line-height: 80px;
}

.logo {
float: left;
height: 60px;
padding: 10px;
}

.menu ul {
float: right;
}

.menu li {
display: inline-block;
margin-right: 20px;
}

.menu a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
font-size: 16px;
padding-bottom: 5px;
border-bottom: 2px solid transparent;
transition: border-bottom .3s ease;
}

.menu a:hover {
border-bottom: 2px solid #fff;
}

/ Estilos para la sección hero /
.hero {
height: 400px;
background-image: url(‘hero.jpg’);
background-position: center;
background-size: cover;
}

.hero h1 {
font-size: 48px;
text-align: center;
margin-top: 120px;
margin-bottom: 30px;
text-shadow: 2px 2px 2px #232323;
}

.hero p {
font-size: 24px;
text-align: center;
margin-bottom: 60px;
text-shadow: 1px 1px 1px #232323;
}

.hero a {
display: block;
width: 200px;
margin: 0 auto;
text-align: center;
background-color: #fff;
color: #232323;
text-decoration: none;
font-size: 16px;
font-weight: 500;
padding: 10px 20px;
border-radius: 30px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
transition: box-shadow .3s ease;
}

.hero a:hover {
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}

/ Estilos para la sección servicios /
.servicios {
background-color: #fff;
padding: 60px 0;
}

.servicios h2 {
text-align: center;
font-size: 36px;
margin-bottom: 40px;
}

.card {
background-color: #f5f5f5;
margin: 20px;
padding: 20px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

.card h3 {
font-size: 24px;
margin-bottom: 10px;
}

.card p {
font-size: 18px;
}

/ Estilos para la sección nosotros /
.nosotros {
background-color: #f5f5f5;
padding: 60px 0;
}

.nosotros h2 {
text-align: center;
font-size: 36px;
margin-bottom: 40px;
}

.nosotros h3 {
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}

.nosotros p {
font-size: 18px;
text-align: center;
max-width: 800px;
margin: 0 auto;
}

/ Estilos para la sección contacto /
.contacto {
background-color: #232323;
color: #fff;
padding: 60px 0;
}

.contacto h2 {
text-align: center;
font-size: 36px;
margin-bottom: 40px;
}

.contacto form {
max-width: 600px;
margin: 0 auto;
}

.contacto input[type=text],
.contacto input[type=email],
.contacto textarea {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
background-color: rgba(255,255,255,0.2);
color: #fff;
}

.contacto textarea {
height: 150px;
}

.contacto button[type=submit] {
display: block;
width: 200px;
margin: 0 auto;
text-align: center;
background-color: #fff;
color: #232323;
text-decoration: none;
font-size: 16px;
font-weight: 500;
padding: 10px 20px;
border-radius: 30px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
transition: box-shadow .3s ease;
border: none;
}

.contacto button[type=submit]:hover {
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}

/ Estilos para el pie de página */
footer {
    background-color: #444;
    color: #fff;
    height: 60px;
    line-height: 60px;
    text-align: center;
    }
    
    footer p {
    font-size: 16px;
    }
</style>
</head>

<body>
<header>
<div class=“container”>
<img src=“logo.png” alt=“Abogados XYZ” class=“logo”>
<nav class=“menu”>
<ul>
<li><a href=“#inicio”>Inicio</a></li>
<li><a href=“#servicios”>Servicios</a></li>
<li><a href=“#nosotros”>Nosotros</a></li>
<li><a href=“#contacto”>Contacto</a></li>
</ul>
</nav>
</div>
</header>

<main>
<section class=“hero” id=“inicio”>
<div class=“container”>
<h1>Abogados XYZ</h1>
<p>Soluciones para tus problemas legales</p>
<a href=“#contacto”>Contáctanos</a>
</div>
</section>

<section class=“servicios” id=“servicios”>
<div class=“container”>
<h2>Servicios</h2>
<div class=“card”>
<h3>Derecho de familia</h3>
<p>Nuestros abogados especializados pueden ayudarte en casos de divorcio, custodia de hijos, adopciones y más.</p>
</div>
<div class=“card”>
<h3>Derecho penal</h3>
<p>Si te encuentras en una situación legal complicada, nuestros abogados de defensa penal están para ayudarte.</p>
</div>
<div class=“card”>
<h3>Derecho corporativo</h3>
<p>Desde la creación de una empresa hasta la gestión de conflictos laborales, nuestros abogados pueden ayudarte en cualquier momento del ciclo de vida de tu negocio.</p>
</div>
</div>
</section>

<section class=“nosotros” id=“nosotros”>
<div class=“container”>
<h2>Nosotros</h2>
<h3>Experiencia y calidad</h3>
<p>Somos un bufete de abogados con más de 20 años de experiencia en el mercado. Nuestros clientes nos recomiendan por nuestra atención personalizada y nuestra habilidad para resolver todo tipo de problemas legales.</p>
</div>
</section>

<section class=“contacto” id=“contacto”>
<div class=“container”>
<h2>Contacto</h2>
<form>
<div>
<input type=“text” placeholder=“Nombre”>
<input type=“email” placeholder=“Email”>
</div>
<div>
<textarea placeholder=“Mensaje”></textarea>
</div>
<button type=“submit”>Enviar</button>
</form>
</div>
</section>
</main>

<footer>
<div class=“container”>
<p>© Abogados XYZ 2021. Todos los derechos reservados.</p>
</div>
</footer>

<script src=“scripts.js”></script>
</body>

</html>