<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Construcciones MP</title>

<link rel="stylesheet" href="style.css">

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

</head>

<body>

<header>

<div class="logo">

<img src="logo.png" alt="Construcciones MP" />

</div>

<nav>

<ul>

<li><a href="#inicio">Inicio</a></li>

<li><a href="#servicios">Servicios</a></li>

<li><a href="#proyectos">Proyectos</a></li>

<li><a href="#contacto">Contacto</a></li>

</ul>

</nav>

</header>

<!-- Hero Section -->

<section id="inicio" class="hero">

<div class="hero-content">

<h1>Construcciones MP</h1>

<p>Especialistas en yeso, estucos y tabiques para proyectos de calidad.</p>

<a href="#contacto" class="cta-button">Solicita un presupuesto</a>

</div>

</section>

<!-- Servicios -->

<section id="servicios" class="servicios">

<h2>Nuestros Servicios</h2>

<div class="servicios-container">

<div class="servicio">

<img src="yeso.jpg" alt="Yeso" />

<h3>Yeso</h3>

<p>Instalación de yeso para proyectos residenciales y comerciales.</p>

</div>

<div class="servicio">

<img src="estuco.jpg" alt="Estuco" />

<h3>Estucos</h3>

<p>Aplicación de estucos de alta calidad para interiores y exteriores.</p>

</div>

<div class="servicio">

<img src="tabiques.jpg" alt="Tabiques" />

<h3>Tabiques</h3>

<p>Construcción de tabiques para una distribución eficiente de espacios.</p>

</div>

</div>

</section>

<!-- Proyectos -->

<section id="proyectos" class="proyectos">

<h2>Proyectos Realizados</h2>

<div class="proyectos-container">

<div class="proyecto">

<img src="proyecto1.jpg" alt="Proyecto 1" />

<p>Proyecto residencial en Santiago.</p>

</div>

<div class="proyecto">

<img src="proyecto2.jpg" alt="Proyecto 2" />

<p>Proyecto comercial en Valparaíso.</p>

</div>

<div class="proyecto">

<img src="proyecto3.jpg" alt="Proyecto 3" />

<p>Proyecto de remodelación en Concepción.</p>

</div>

</div>

</section>

<!-- Contacto -->

<section id="contacto" class="contacto">

<h2>Contacto</h2>

<form>

<label for="nombre">Nombre</label>

<input type="text" id="nombre" name="nombre" required>

<label for="email">Correo electrónico</label>

<input type="email" id="email" name="email" required>

<textarea name="mensaje" id="mensaje" rows="5" placeholder="Escribe tu mensaje"></textarea>

<button type="submit">Enviar</button>

</form>

</section>

<footer>

<p>&copy; 2025 Construcciones MP. Todos los derechos reservados.</p>

<div class="social-media">

<a href="#">Facebook</a>

<a href="#">Instagram</a>

</div>

</footer>

<script src="scripts.js"></script>

</body>

</html>