Tul xxx Tul

Viewing: contact.php

<?php 
include("config.php");
$error="";
$msg="";
if(isset($_POST['send']))
{
	$name=$_POST['name'];
	$email=$_POST['email'];
	$phone=$_POST['phone'];
	$subject=$_POST['subject'];
	$message=$_POST['message'];
	
	if(!empty($name) && !empty($email) && !empty($phone) && !empty($subject) && !empty($message))
	{
		
		$sql="INSERT INTO contact (name,email,phone,subject,message) VALUES ('$name','$email','$phone','$subject','$message')";
		   $result=mysqli_query($con, $sql);
		   if($result){
			   $msg = "<p class='alert alert-success'>Mensaje Enviado Exitosamente</p> ";
		   }
		   else{
			   $error = "<p class='alert alert-warning'>Mensaje No Enviado Exitosamente</p> ";
		   }
	}else{
		$error = "<p class='alert alert-warning'>Por favor complete todos los campos</p>";
	}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Meta Tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" type="image/png" href="images/logo/logo.png">

<!--	Fonts
	========================================================-->
<link href="https://fonts.googleapis.com/css?family=Muli:400,400i,500,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa:400,700" rel="stylesheet">
<!-- FOR MORE PROJECTS visit: codeastro.com -->
<!--	Css Link
	========================================================-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-slider.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/layerslider.css">
<link rel="stylesheet" type="text/css" href="css/color.css" id="color-change">
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="fonts/flaticon/flaticon.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<!--	Title
	=========================================================-->
<title>Inmobiliaria PHP</title>
</head>
<body>

<!--	Page Loader
=============================================================
<div class="page-loader position-fixed z-index-9999 w-100 bg-white vh-100">
	<div class="d-flex justify-content-center y-middle position-relative">
	  <div class="spinner-border" role="status">
		<span class="sr-only">Loading...</span>
	  </div>
	</div>
</div>
--> 
<!-- FOR MORE PROJECTS visit: codeastro.com -->
<div id="page-wrapper">
    <div style="width:100%; overflow:visible;"> 
        <!--	Header start  -->
		<?php include("include/header.php");?>
        <!--	Header end  -->
        
        <!--	Banner -->
        <!-- <div class="banner-full-row page-banner" style="background-image:url('images/breadcromb.jpg');">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <h2 class="page-name float-left text-white text-uppercase mt-1 mb-0"><b>Contact</b></h2>
                    </div>
                    <div class="col-md-6">
                        <nav aria-label="breadcrumb" class="float-left float-md-right">
                            <ol class="breadcrumb bg-transparent m-0 p-0">
                                <li class="breadcrumb-item text-white"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active">Contact</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div> -->
        <!--	Banner -->
		<!-- FOR MORE PROJECTS visit: codeastro.com -->
        <!-- CONTACT SECTION 2026 -->
        <style>
            /* Fix page-wrapper overflow cutting content */
            #page-wrapper { overflow: visible !important; }

            .contact-2026 {
                background: #f8fafc;
                padding: 80px 0 0;
                font-family: 'Inter', 'Muli', sans-serif;
                width: 100%;
                position: relative;
            }
            .contact-2026 .section-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: #eef2ff;
                color: #4f46e5;
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                padding: 6px 16px;
                border-radius: 50px;
                margin-bottom: 16px;
            }
            .contact-2026 .section-badge span {
                width: 6px; height: 6px;
                background: #4f46e5;
                border-radius: 50%;
                display: inline-block;
            }
            .contact-2026 .section-title {
                font-size: 38px;
                font-weight: 800;
                color: #0f172a;
                line-height: 1.2;
                margin-bottom: 14px;
            }
            .contact-2026 .section-title span {
                background: linear-gradient(135deg, #4f46e5, #7c3aed);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            .contact-2026 .section-sub {
                color: #64748b;
                font-size: 16px;
                line-height: 1.7;
                max-width: 480px;
                margin-bottom: 40px;
            }

            /* Info cards */
            .contact-info-card {
                display: flex;
                align-items: flex-start;
                gap: 18px;
                background: #fff;
                border: 1px solid #e2e8f0;
                border-radius: 16px;
                padding: 22px 24px;
                margin-bottom: 16px;
                transition: all 0.3s ease;
                box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            }
            .contact-info-card:hover {
                border-color: #c7d2fe;
                box-shadow: 0 8px 24px rgba(79,70,229,0.10);
                transform: translateY(-2px);
            }
            .contact-info-card .icon-wrap {
                width: 48px; height: 48px;
                border-radius: 14px;
                display: flex; align-items: center; justify-content: center;
                font-size: 20px;
                flex-shrink: 0;
            }
            .contact-info-card .icon-wrap.purple { background: #eef2ff; color: #4f46e5; }
            .contact-info-card .icon-wrap.green  { background: #d1fae5; color: #059669; }
            .contact-info-card .icon-wrap.orange { background: #fff7ed; color: #ea580c; }
            .contact-info-card .icon-wrap.blue   { background: #dbeafe; color: #2563eb; }
            .contact-info-card .info-content h6 {
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: #94a3b8;
                margin: 0 0 4px;
            }
            .contact-info-card .info-content p {
                font-size: 15px;
                font-weight: 600;
                color: #0f172a;
                margin: 0;
                line-height: 1.5;
            }
            .contact-info-card .info-content a {
                color: #0f172a;
                text-decoration: none;
            }
            .contact-info-card .info-content a:hover { color: #4f46e5; }

            /* Social links */
            .contact-socials {
                display: flex;
                gap: 10px;
                margin-top: 8px;
            }
            .contact-socials a {
                width: 40px; height: 40px;
                border-radius: 12px;
                background: #f1f5f9;
                border: 1px solid #e2e8f0;
                display: flex; align-items: center; justify-content: center;
                color: #64748b;
                font-size: 15px;
                transition: all 0.3s ease;
                text-decoration: none;
            }
            .contact-socials a:hover {
                background: #4f46e5;
                border-color: #4f46e5;
                color: #fff;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(79,70,229,0.3);
            }

            /* Form card */
            .contact-form-card {
                background: #fff;
                border: 1px solid #e2e8f0;
                border-radius: 24px;
                padding: 40px;
                box-shadow: 0 4px 24px rgba(0,0,0,0.06);
            }
            .contact-form-card h4 {
                font-size: 22px;
                font-weight: 700;
                color: #0f172a;
                margin-bottom: 6px;
            }
            .contact-form-card p {
                color: #64748b;
                font-size: 14px;
                margin-bottom: 28px;
            }
            .contact-form-card .form-label {
                font-size: 13px;
                font-weight: 600;
                color: #374151;
                margin-bottom: 6px;
                display: block;
            }
            .contact-form-card .form-input {
                width: 100%;
                border: 1.5px solid #e2e8f0;
                border-radius: 12px;
                padding: 12px 16px;
                font-size: 14px;
                color: #0f172a;
                background: #f8fafc;
                transition: all 0.25s ease;
                outline: none;
                font-family: inherit;
            }
            .contact-form-card .form-input:focus {
                border-color: #4f46e5;
                background: #fff;
                box-shadow: 0 0 0 4px rgba(79,70,229,0.10);
            }
            .contact-form-card .form-input::placeholder { color: #94a3b8; }
            .contact-form-card textarea.form-input { resize: vertical; min-height: 130px; }
            .contact-form-card .form-row-2 {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
            }
            .contact-form-card .form-group-c { margin-bottom: 18px; }
            .btn-contact-submit {
                width: 100%;
                padding: 14px;
                background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
                color: #fff;
                border: none;
                border-radius: 12px;
                font-size: 15px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                box-shadow: 0 4px 14px rgba(79,70,229,0.35);
                margin-top: 8px;
            }
            .btn-contact-submit:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(79,70,229,0.45);
            }
            .btn-contact-submit i { font-size: 16px; }

            /* Alert styles */
            .alert-modern-success {
                background: #d1fae5; color: #065f46;
                border: 1px solid #a7f3d0;
                border-radius: 12px; padding: 14px 18px;
                font-size: 14px; font-weight: 500;
                margin-bottom: 20px;
                display: flex; align-items: center; gap: 10px;
            }
            .alert-modern-error {
                background: #fee2e2; color: #991b1b;
                border: 1px solid #fca5a5;
                border-radius: 12px; padding: 14px 18px;
                font-size: 14px; font-weight: 500;
                margin-bottom: 20px;
                display: flex; align-items: center; gap: 10px;
            }

            /* Map section */
            .map-section {
                margin-top: 70px;
                position: relative;
                overflow: hidden;
            }
            .map-section iframe {
                width: 100%;
                height: 420px;
                border: 0;
                display: block;
                filter: grayscale(15%);
            }
            .map-overlay-badge {
                position: absolute;
                top: 24px; left: 50%;
                transform: translateX(-50%);
                background: #fff;
                border: 1px solid #e2e8f0;
                border-radius: 50px;
                padding: 10px 22px;
                display: flex; align-items: center; gap: 10px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.12);
                font-size: 14px; font-weight: 600; color: #0f172a;
                white-space: nowrap;
                z-index: 10;
            }
            .map-overlay-badge i { color: #ef4444; font-size: 16px; }

            @media (max-width: 768px) {
                .contact-2026 .section-title { font-size: 28px; }
                .contact-form-card { padding: 24px; }
                .contact-form-card .form-row-2 { grid-template-columns: 1fr; }
            }
        </style>

        <section class="contact-2026" style="overflow:visible; width:100%; max-width:100%;">
            <div class="container" style="max-width:1200px;">

                <!-- Header -->
                <div class="text-center mb-60" style="margin-bottom:56px;">
                    <div class="section-badge"><span></span> Estamos aquí para ayudarte</div>
                    <h2 class="section-title">Hablemos sobre tu <span>próxima propiedad</span></h2>
                    <p class="section-sub mx-auto">Nuestro equipo de expertos está listo para asesorarte. Escríbenos y te responderemos en menos de 24 horas.</p>
                </div>

                <div class="row align-items-start">

                    <!-- Left: Info -->
                    <div class="col-lg-5 mb-5 mb-lg-0">

                        <div class="contact-info-card">
                            <div class="icon-wrap purple"><i class="fas fa-map-marker-alt"></i></div>
                            <div class="info-content">
                                <h6>Oficina Principal</h6>
                                <p>Calle 93 #15-23, Chapinero<br>Bogotá, Colombia</p>
                            </div>
                        </div>

                        <div class="contact-info-card">
                            <div class="icon-wrap green"><i class="fas fa-phone-alt"></i></div>
                            <div class="info-content">
                                <h6>Llámanos</h6>
                                <p><a href="tel:+573505849143">+57 350 584 9143</a></p>
                            </div>
                        </div>

                        <div class="contact-info-card">
                            <div class="icon-wrap orange"><i class="fas fa-envelope"></i></div>
                            <div class="info-content">
                                <h6>Correo Electrónico</h6>
                                <p><a href="mailto:info@inmobiliaria.com.co">info@inmobiliaria.com.co</a></p>
                            </div>
                        </div>

                        <div class="contact-info-card">
                            <div class="icon-wrap blue"><i class="fas fa-clock"></i></div>
                            <div class="info-content">
                                <h6>Horario de Atención</h6>
                                <p>Lun – Vie: 8:00am – 6:00pm<br>Sáb: 9:00am – 1:00pm</p>
                            </div>
                        </div>

                        <div class="contact-socials mt-2">
                            <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                            <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
                            <a href="#" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                            <a href="#" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>

                    <!-- Right: Form -->
                    <div class="col-lg-7">
                        <div class="contact-form-card">
                            <h4>Envíanos un mensaje</h4>
                            <p>Completa el formulario y uno de nuestros asesores te contactará pronto.</p>

                            <?php if(!empty($msg)): ?>
                            <div class="alert-modern-success"><i class="fas fa-check-circle"></i> Mensaje enviado exitosamente. ¡Pronto te contactaremos!</div>
                            <?php endif; ?>
                            <?php if(!empty($error)): ?>
                            <div class="alert-modern-error"><i class="fas fa-exclamation-circle"></i> Por favor completa todos los campos requeridos.</div>
                            <?php endif; ?>

                            <form action="#" method="post">
                                <div class="form-row-2">
                                    <div class="form-group-c">
                                        <label class="form-label">Nombre completo *</label>
                                        <input type="text" name="name" class="form-input" placeholder="Ej: Carlos Rodríguez" required>
                                    </div>
                                    <div class="form-group-c">
                                        <label class="form-label">Correo electrónico *</label>
                                        <input type="email" name="email" class="form-input" placeholder="tu@correo.com" required>
                                    </div>
                                    <div class="form-group-c">
                                        <label class="form-label">Teléfono *</label>
                                        <input type="text" name="phone" class="form-input" placeholder="+57 300 000 0000" maxlength="15" required>
                                    </div>
                                    <div class="form-group-c">
                                        <label class="form-label">Asunto *</label>
                                        <input type="text" name="subject" class="form-input" placeholder="¿En qué podemos ayudarte?" required>
                                    </div>
                                </div>
                                <div class="form-group-c">
                                    <label class="form-label">Mensaje *</label>
                                    <textarea name="message" class="form-input" placeholder="Cuéntanos sobre la propiedad que buscas, tu presupuesto o cualquier consulta..." required></textarea>
                                </div>
                                <button type="submit" name="send" class="btn-contact-submit">
                                    <i class="fas fa-paper-plane"></i> Enviar Mensaje
                                </button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Map -->
            <div class="map-section" style="margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%); width:100vw;">
                <div class="map-overlay-badge">
                    <i class="fas fa-map-marker-alt"></i> Calle 93 #15-23, Bogotá, Colombia
                </div>
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3976.7466677893!2d-74.0521!3d4.6533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e3f9bfd2da6cb29%3A0x239d635520a33914!2sCalle%2093%2C%20Bogot%C3%A1%2C%20Colombia!5e0!3m2!1ses!2sco!4v1700000000000!5m2!1ses!2sco" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </section>
        <!-- /CONTACT SECTION 2026 -->
        
        <!--	Footer   start-->
		<?php include("include/footer.php");?>
		<!--	Footer   start-->
        
        <!-- Scroll to top --> 
        <a href="#" class="bg-secondary text-white hover-text-secondary" id="scroll"><i class="fas fa-angle-up"></i></a> 
        <!-- End Scroll To top --> 
    </div>
</div>
<!-- Wrapper End --> 

<!--	Js Link
============================================================--> 
<script src="js/jquery.min.js"></script> 
<!--jQuery Layer Slider --> 
<script src="js/greensock.js"></script> 
<script src="js/layerslider.transitions.js"></script> 
<script src="js/layerslider.kreaturamedia.jquery.js"></script> 
<!--jQuery Layer Slider --> 
<script src="js/popper.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/owl.carousel.min.js"></script> 
<script src="js/tmpl.js"></script> 
<script src="js/jquery.dependClass-0.1.js"></script> 
<script src="js/draggable-0.1.js"></script> 
<script src="js/jquery.slider.js"></script> 
<script src="js/wow.js"></script> 
<script src="js/jquery.cookie.js"></script> 
<script src="js/custom.js"></script>  

</body>
</html>
User / IP	: 216.73.216.227
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64