0

Estoy tratando de crear un formulario de contacto el cual comparta la pantalla con mis datos personales: nombre, dirección, etc. Osea mis datos a la izquierda y el formulario a la derecha, dejando margen entre ellos y a izquierda y derecha de ambos. Una vez me mostraron ( Alvaro Montoro) como hacerlo con columnas, class="column col-md-8". Pero no encuentro ni se la forma de hacerlo con este formulario que saque de una plantilla. En mi código se ve que mis datos quedan abajo a la izquierda, no se si debo crearlos en forma de lista (

). Dejo mi codigo por si pueden ayudarme. @Flowen también me ayudo con la barra de redes sociales. Gracias.

$(function()
{
    function after_form_submitted(data) 
    {
        if(data.result == 'success')
        {
            $('form#reused_form').hide();
            $('#success_message').show();
            $('#error_message').hide();
        }
        else
        {
            $('#error_message').append('<ul></ul>');

            jQuery.each(data.errors,function(key,val)
            {
                $('#error_message ul').append('<li>'+key+':'+val+'</li>');
            });
            $('#success_message').hide();
            $('#error_message').show();

            //reverse the response on the button
            $('button[type="button"]', $form).each(function()
            {
                $btn = $(this);
                label = $btn.prop('orig_label');
                if(label)
                {
                    $btn.prop('type','submit' ); 
                    $btn.text(label);
                    $btn.prop('orig_label','');
                }
            });
            
        }//else
    }

	$('#reused_form').submit(function(e)
      {
        e.preventDefault();

        $form = $(this);
        //show some response on the button
        $('button[type="submit"]', $form).each(function()
        {
            $btn = $(this);
            $btn.prop('type','button' ); 
            $btn.prop('orig_label',$btn.text());
            $btn.text('Enviando...');
        });
        

                    $.ajax({
                type: "POST",
                url: 'handler.php',
                data: $form.serialize(),
                success: after_form_submitted,
                dataType: 'json' 
            });        
        
      });	
});



$(function()
{
	$('#captcha_reload').on('click',function(e)
	{
	  e.preventDefault();
	  d = new Date();
	  var src = $("img#captcha_image").attr("src");
	  src = src.split(/[?#]/)[0];
	  
	  $("img#captcha_image").attr("src", src+'?'+d.getTime());
	});
});
/*css de formulario*/


#form_container
{
	padding:15px 15px;
	margin-top:15px;
	background: #F4EAD5/*(255,255,255,0.75);	*/
}
body
{
	background-color: #F4EAD5;
	/*background-image: url("images/window-484596_1280.jpg");*/
	background-size: cover;
}


/*stilos de la pagina*/
html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}

a {
    color: yellowgreen;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

a:hover,
a:focus {
    color: forestgreen;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff;
    background-image: url('http://i64.tinypic.com/11j9dad.png');
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px 70px;
    text-align: center;
}

header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 50px;
    font-weight: 300;
}

header .header-content .header-content-inner p {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.7);
}

@media(min-width:768px) {
    header {
        min-height: 100%;
    }

    header .header-content {
        position: absolute;
        top: 50%;
        padding: 0 50px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    header .header-content .header-content-inner {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px;
    }

	header .header-content .header-content-inner h1 {
    	font-size: 100px;
		}

    header .header-content .header-content-inner p {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
        font-size: 18px;
    }
}

.section-heading {
    margin-top: 0;
    margin-bottom: 20px;
}

.intro {
	color: #fff;
    background-color: yellowgreen;
    padding: 70px 0;
    text-align: center;
}

.content-2 {
	color: #fff;
    background-color: #222;
}

.promo,
.promo h3,
.promo a:link,
.promo a:visited,
.promo a:hover,
.promo a:active {
    color: white;
	text-shadow: 0px 0px 40px black;
    text-decoration: none;
}

.promo-item {
    height: 200px;
    line-height: 180px;
    text-align: center;
}

.promo-item:hover {
    background-size: 110%; 
    border: 10px solid rgba(255,255,255,0.3);
    line-height: 160px;
}
.page-footer {
	text-align: center;
	}

.page-footer .contact {
	padding: 100px 0;
	background-color: yellowgreen;
	color: #fff;
	}

.page-footer .contact p {
	font-size: 22px;
	font-weight: 300;
	}
	
.content-3 .glyphicon,	
.page-footer .contact .glyphicon {
	font-size: 32px;
	font-weight: 700;
	}
		
.page-footer .small-print {
	padding: 50px 0 40px;
	font-weight: 300;
	}

.text-light {
    color: rgba(255,255,255,.7);
}

.navbar-default {
    border-color: rgba(34,34,34,.05);
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.navbar-default .navbar-header .navbar-brand {
    color: yellowgreen;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
    color: #eb3812;
}

.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
    color: #222;
}

.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
    color: yellowgreen;
}

.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
    color: yellowgreen!important;
    background-color: transparent;
}

.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
    background-color: transparent;
}

@media(min-width:768px) {
    .navbar-default {
        border-color: rgba(255,255,255,.3);
        background-color: transparent;
    }

    .navbar-default .navbar-header .navbar-brand {
        color: rgba(255,255,255,.7);
        letter-spacing: 0.5em;
    }

    .navbar-default .navbar-header .navbar-brand:hover,
    .navbar-default .navbar-header .navbar-brand:focus {
        color: #fff;
    }

    .navbar-default .nav > li>a,
    .navbar-default .nav>li>a:focus {
        color: rgba(255,255,255,.7);
    }

    .navbar-default .nav > li>a:hover,
    .navbar-default .nav>li>a:focus:hover {
        color: #fff;
    }

    .navbar-default.affix {
        border-color: #fff;
        background-color: #fff;
        box-shadow: 0px 7px 20px 0px rgba(0,0,0,0.1);
    }

    .navbar-default.affix .navbar-header .navbar-brand {
        letter-spacing: 0;
        color: yellowgreen;
    }

    .navbar-default.affix .navbar-header .navbar-brand:hover,
    .navbar-default.affix .navbar-header .navbar-brand:focus {
        color: #eb3812;
    }

    .navbar-default.affix .nav > li>a,
    .navbar-default.affix .nav>li>a:focus {
        color: #222;
    }

    .navbar-default.affix .nav > li>a:hover,
    .navbar-default.affix .nav>li>a:focus:hover {
        color: yellowgreen;
    }
}

.btn-default {
    border-color: #fff;
    color: #222;
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    border-color: #eee;
    color: #222;
    background-color: #eee;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
    border-color: #fff;
    background-color: #fff;
}

.btn-default .badge {
    color: #fff;
    background-color: #222;
}

.btn-primary {
    border-color: yellowgreen;
    color: #fff;
    background-color: yellowgreen;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    border-color: limegreen;
    color: #fff;
    background-color: limegreen;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    border-color: yellowgreen;
    background-color: yellowgreen;
}

.btn-primary .badge {
    color: yellowgreen;
    background-color: #fff;
}


.btn {
    border-radius: 300px;
    text-transform: uppercase;
}

.btn-lg {
    padding: 15px 30px;
}

::-moz-selection {
    text-shadow: none;
    color: #fff;
    background: #222;
}

::selection {
    text-shadow: none;
    color: #fff;
    background: #222;
}

img::selection {
    color: #fff;
    background: 0 0;
}

img::-moz-selection {
    color: #fff;
    background: 0 0;
}

.text-primary {
    color: yellowgreen;
}

.bg-primary {
    background-color: yellowgreen;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Social</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
        
     <!-- CSS personalizado: puede usar esta hoja de estilo para anular cualquier estilo de Bootstrap y / o aplicar sus propios estilos -->
    <link href="css/contacto.css" rel="stylesheet">
       <!-- estilos de barra de redes--> 
    <link rel="stylesheet" href="redes.css">
    <link rel="stylesheet" href="redes-fonts.css">
    <!-- javascript de barra de redes-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="redes.js"></script>

    <!-- ESTILOS Y JAVASCRIPT DEL FORMULARIO-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="formulario/form.css" >
    <script src="formulario/form.js"></script>
    
</head>
<body>

   <div class="social">
       <ul>
           <li><a href="https://www.facebook.com/profile.php?id=100009248037432" class="icon-facebook lateral"></a></li>
           <li><a href="https://twitter.com/laparramiguel" class="icon-twitter lateral"></a></li>
           <li><a href="http://www." class="icon-youtube lateral"></a></li>
           <li><a href="https://plus.google.com/u/0/109747958435546403812" class="icon-google lateral"></a></li>
           <li><a href="mailto: [email protected]" class="icon-envelop lateral"></a></li>
           <li><a href="https://paseandoporlanubedelared.blogspot.com.es/" class="icon-blogger2 lateral"></a></li>
           <li><a href="#" class="icon-chevron-thin-left lateral" onclick="ocultar()"></a></li>
           <li><a href="#" class="icon-chevron-thin-right" onclick="mostrar()" id="mostrar"></a></li>

       </ul>
      
   </div>
<!-- Navegación-->
<nav id="siteNav" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Logo and responsive toggle -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon-fire"></span> 
                LOGO
            </a>
        </div>
        <!-- Navbar links -->
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
                <li class="active">
                    <a href="Principal.html">CASA</a>
                </li>
                <li>
                    <a href="#">RECURSOS</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SOBRE MI <span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="about-us">
                        <li><a target="_blank" href="https://www.google.es/maps/place/Calle+del+Olivar,+5,+05400+La+Parra,+%C3%81vila/@40.224582,-5.0602472,17z/data=!3m1!4b1!4m5!3m4!1s0xd40756225aeabbd:0xcc0228cc3c4de2c8!8m2!3d40.2245779!4d-5.0580585?hl=es">UBICACION</a></li>
                        <li><a href="#">PROYECTOS</a></li>
                        <li><a href="#">CURRICULUM</a></li>
                    </ul>
                </li>
                <li>
                    <a href="Contacto.html">CONTACTO</a>
                </li>
            </ul>
            
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
</nav>

<!-- Header -->
<header>
    <div class="header-content">
        <div class="header-content-inner">
            <h1>CONTACTA  CONMIGO</h1>

        </div>
    </div>
</header>

<!-- Intro Section -->



<!--<section class="intro">-->

    <!-- FORMULARIO-->
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3" id="form_container">
                <h2>CONTACTE</h2> 
                <p>Nos traslade sus dudas y sugerencias y nos pondremos en contacto con usted en la mayor brevedad posible. Gracias.</p>
                <form role="form" method="post" id="reused_form">
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <label for="message"> Mensage:</label>
                            <textarea class="form-control" type="textarea" name="message" id="message" maxlength="6000" rows="7"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label for="name"> Nombre:</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="col-sm-6 form-group">
                            <label for="email"> Email:</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom:30px;">
                        <div class="col-sm-5">
                            <img src="captcha.php" id="captcha_image"/>
                            <br/>
                            <a id="captcha_reload" href="#">Recargar</a> 
                        </div>
                        <div class="col-sm-6">
                            <label for="email">Ingrese el código de la imagen aquí:</label>
                            <input type="text" class="form-control" required id="captcha" name="captcha" >
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <button type="submit" class="btn btn-lg btn-default pull-right" >Enviar &rarr;</button>
                        </div>
                    </div>
                </form>
                <div id="success_message" style="width:100%; height:100%; display:none; "> <h3>¡Su mensaje se envió con éxito...! </h3> </div>
                <div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Lo sentimos, hubo un error al enviar tu formulario. </div>
            </div>
        </div>
    </div>

<!--</section>  -->

<!-- FIN DE FORMULARIO-->
<p>Miguel Espeso</p>
<p>C/ Olivar, 5 </p>
<p>05400 La Parra</p>
<p>Tlf: 920 37 12 29</p>
<p>[email protected]</p>



 <section class="content content-2">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h2 class="section-header">Contacto</h2>
                <p class="lead text-light">La mejor aplicación para que sigan su negocio desde el móvil, tablet y toda clase de smartphone.</p>         	
            </div>                    
        </div>
    </div>
</section>    

<!--footer-->
<footer class="page-footer">


    <div class="contact">
        <div class="container">
            <h2 class="section-heading">Contact Us</h2>
            <p><span class="glyphicon glyphicon-earphone"></span><br> +1(23) 456 7890</p>
            <p><span class="glyphicon glyphicon-envelope"></span><br> [email protected]</p>
        </div>
    </div>
        
    <!-- Copyright etc -->
    <div class="small-print">
        <div class="container">
            <p>Copyright &copy; Miguel.com 2017</p>
        </div>
    </div>
    
</footer>

<!-- jQuery -->
<script src="js/jquery-1.11.3.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>

<!-- Custom Javascript -->
<script src="js/custom.js"></script>


</body>
</html>

2
  • 1
    Te faltan estilos en algo? la parte superior se ve sin estilos...o solo te interesa por el momento la parte de contacto ? el 12 dic. 2017 a las 1:01
  • Hola @Camilo Vasquez. Anoche ya me acoste despues de 14 horas frente al ordenador, lo bueno es que aprendi cosas nuevas. Como nien dices, faltan estilos pero ya me parecia mucho codigo y ahora quiero solucionar el formulario. No me salia bien con lo que me dijo en su dia Alvaro Montoro por eso recurri de nuevo a la comunidad. Tambien veras que he cambiado de plantilla, con lo que me ayudaste con la otra...!!!Estoy haciendo pruebas en su momento vere cual publicar.. el 12 dic. 2017 a las 8:29

1 respuesta 1

2

Para resolver tu problema con la sesión de contacto es necesario usar las clases de Bootstrap que te comentó en su momento @AlvaroMontoro y unas cuantas líneas de estilos para la alineación vertical !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Social</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
        
     <!-- CSS personalizado: puede usar esta hoja de estilo para anular cualquier estilo de Bootstrap y / o aplicar sus propios estilos -->
    <link href="css/contacto.css" rel="stylesheet">
       <!-- estilos de barra de redes--> 
    <link rel="stylesheet" href="redes.css">
    <link rel="stylesheet" href="redes-fonts.css">
    <!-- javascript de barra de redes-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="redes.js"></script>

    <!-- ESTILOS Y JAVASCRIPT DEL FORMULARIO-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="formulario/form.css" >
    <script src="formulario/form.js"></script>

    <style>
    	/*css de formulario*/


#form_container
{
	padding:15px 15px;
	margin-top:15px;
	background: #F4EAD5/*(255,255,255,0.75);	*/
}
body
{
	background-color: #F4EAD5;
	/*background-image: url("images/window-484596_1280.jpg");*/
	background-size: cover;
}


/*stilos de la pagina*/
html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}

a {
    color: yellowgreen;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

a:hover,
a:focus {
    color: forestgreen;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff;
    background-image: url('http://i64.tinypic.com/11j9dad.png');
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px 70px;
    text-align: center;
}

header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 50px;
    font-weight: 300;
}

header .header-content .header-content-inner p {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.7);
}

@media(min-width:768px) {
    header {
        min-height: 100%;
    }

    header .header-content {
        position: absolute;
        top: 50%;
        padding: 0 50px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    header .header-content .header-content-inner {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px;
    }

	header .header-content .header-content-inner h1 {
    	font-size: 100px;
		}

    header .header-content .header-content-inner p {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
        font-size: 18px;
    }
}

.section-heading {
    margin-top: 0;
    margin-bottom: 20px;
}

.intro {
	color: #fff;
    background-color: yellowgreen;
    padding: 70px 0;
    text-align: center;
}

.content-2 {
	color: #fff;
    background-color: #222;
}

.promo,
.promo h3,
.promo a:link,
.promo a:visited,
.promo a:hover,
.promo a:active {
    color: white;
	text-shadow: 0px 0px 40px black;
    text-decoration: none;
}

.promo-item {
    height: 200px;
    line-height: 180px;
    text-align: center;
}

.promo-item:hover {
    background-size: 110%; 
    border: 10px solid rgba(255,255,255,0.3);
    line-height: 160px;
}
.page-footer {
	text-align: center;
	}

.page-footer .contact {
	padding: 100px 0;
	background-color: yellowgreen;
	color: #fff;
	}

.page-footer .contact p {
	font-size: 22px;
	font-weight: 300;
	}
	
.content-3 .glyphicon,	
.page-footer .contact .glyphicon {
	font-size: 32px;
	font-weight: 700;
	}
		
.page-footer .small-print {
	padding: 50px 0 40px;
	font-weight: 300;
	}

.text-light {
    color: rgba(255,255,255,.7);
}

.navbar-default {
    border-color: rgba(34,34,34,.05);
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.navbar-default .navbar-header .navbar-brand {
    color: yellowgreen;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
    color: #eb3812;
}

.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
    color: #222;
}

.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
    color: yellowgreen;
}

.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
    color: yellowgreen!important;
    background-color: transparent;
}

.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
    background-color: transparent;
}

@media(min-width:768px) {
    .navbar-default {
        border-color: rgba(255,255,255,.3);
        background-color: transparent;
    }

    .navbar-default .navbar-header .navbar-brand {
        color: rgba(255,255,255,.7);
        letter-spacing: 0.5em;
    }

    .navbar-default .navbar-header .navbar-brand:hover,
    .navbar-default .navbar-header .navbar-brand:focus {
        color: #fff;
    }

    .navbar-default .nav > li>a,
    .navbar-default .nav>li>a:focus {
        color: rgba(255,255,255,.7);
    }

    .navbar-default .nav > li>a:hover,
    .navbar-default .nav>li>a:focus:hover {
        color: #fff;
    }

    .navbar-default.affix {
        border-color: #fff;
        background-color: #fff;
        box-shadow: 0px 7px 20px 0px rgba(0,0,0,0.1);
    }

    .navbar-default.affix .navbar-header .navbar-brand {
        letter-spacing: 0;
        color: yellowgreen;
    }

    .navbar-default.affix .navbar-header .navbar-brand:hover,
    .navbar-default.affix .navbar-header .navbar-brand:focus {
        color: #eb3812;
    }

    .navbar-default.affix .nav > li>a,
    .navbar-default.affix .nav>li>a:focus {
        color: #222;
    }

    .navbar-default.affix .nav > li>a:hover,
    .navbar-default.affix .nav>li>a:focus:hover {
        color: yellowgreen;
    }
}

.btn-default {
    border-color: #fff;
    color: #222;
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    border-color: #eee;
    color: #222;
    background-color: #eee;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
    border-color: #fff;
    background-color: #fff;
}

.btn-default .badge {
    color: #fff;
    background-color: #222;
}

.btn-primary {
    border-color: yellowgreen;
    color: #fff;
    background-color: yellowgreen;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    border-color: limegreen;
    color: #fff;
    background-color: limegreen;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    border-color: yellowgreen;
    background-color: yellowgreen;
}

.btn-primary .badge {
    color: yellowgreen;
    background-color: #fff;
}


.btn {
    border-radius: 300px;
    text-transform: uppercase;
}

.btn-lg {
    padding: 15px 30px;
}

::-moz-selection {
    text-shadow: none;
    color: #fff;
    background: #222;
}

::selection {
    text-shadow: none;
    color: #fff;
    background: #222;
}

img::selection {
    color: #fff;
    background: 0 0;
}

img::-moz-selection {
    color: #fff;
    background: 0 0;
}

.text-primary {
    color: yellowgreen;
}

.bg-primary {
    background-color: yellowgreen;
}

#form_container,
#informacion{
	float: none;
	display: inline-block;
	vertical-align: middle;
	margin-left: -2px;
}
    </style>
    
</head>
<body>

   <div class="social">
       <ul>
           <li><a href="https://www.facebook.com/profile.php?id=100009248037432" class="icon-facebook lateral"></a></li>
           <li><a href="https://twitter.com/laparramiguel" class="icon-twitter lateral"></a></li>
           <li><a href="http://www." class="icon-youtube lateral"></a></li>
           <li><a href="https://plus.google.com/u/0/109747958435546403812" class="icon-google lateral"></a></li>
           <li><a href="mailto: [email protected]" class="icon-envelop lateral"></a></li>
           <li><a href="https://paseandoporlanubedelared.blogspot.com.es/" class="icon-blogger2 lateral"></a></li>
           <li><a href="#" class="icon-chevron-thin-left lateral" onclick="ocultar()"></a></li>
           <li><a href="#" class="icon-chevron-thin-right" onclick="mostrar()" id="mostrar"></a></li>

       </ul>
      
   </div>
<!-- Navegación-->
<nav id="siteNav" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Logo and responsive toggle -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon-fire"></span> 
                LOGO
            </a>
        </div>
        <!-- Navbar links -->
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
                <li class="active">
                    <a href="Principal.html">CASA</a>
                </li>
                <li>
                    <a href="#">RECURSOS</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SOBRE MI <span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="about-us">
                        <li><a target="_blank" href="https://www.google.es/maps/place/Calle+del+Olivar,+5,+05400+La+Parra,+%C3%81vila/@40.224582,-5.0602472,17z/data=!3m1!4b1!4m5!3m4!1s0xd40756225aeabbd:0xcc0228cc3c4de2c8!8m2!3d40.2245779!4d-5.0580585?hl=es">UBICACION</a></li>
                        <li><a href="#">PROYECTOS</a></li>
                        <li><a href="#">CURRICULUM</a></li>
                    </ul>
                </li>
                <li>
                    <a href="Contacto.html">CONTACTO</a>
                </li>
            </ul>
            
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
</nav>

<!-- Header -->
<header>
    <div class="header-content">
        <div class="header-content-inner">
            <h1>CONTACTA  CONMIGO</h1>

        </div>
    </div>
</header>

<!-- Intro Section -->



<!--<section class="intro">-->

    <!-- FORMULARIO-->
    <div class="container">
        <div class="row">
            <div class="col-md-7 col-sm-12 col-xs-12" id="form_container">
                <h2>CONTACTE</h2> 
                <p>Nos traslade sus dudas y sugerencias y nos pondremos en contacto con usted en la mayor brevedad posible. Gracias.</p>
                <form role="form" method="post" id="reused_form">
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <label for="message"> Mensage:</label>
                            <textarea class="form-control" type="textarea" name="message" id="message" maxlength="6000" rows="7"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label for="name"> Nombre:</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="col-sm-6 form-group">
                            <label for="email"> Email:</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom:30px;">
                        <div class="col-sm-5">
                            <img src="captcha.php" id="captcha_image"/>
                            <br/>
                            <a id="captcha_reload" href="#">Recargar</a> 
                        </div>
                        <div class="col-sm-6">
                            <label for="email">Ingrese el código de la imagen aquí:</label>
                            <input type="text" class="form-control" required id="captcha" name="captcha" >
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <button type="submit" class="btn btn-lg btn-default pull-right" >Enviar &rarr;</button>
                        </div>
                    </div>
                </form>
                <div id="success_message" style="width:100%; height:100%; display:none; "> <h3>¡Su mensaje se envió con éxito...! </h3> </div>
                <div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Lo sentimos, hubo un error al enviar tu formulario. </div>
            </div>

            <div class="text-center col-md-5 col-sm-12 col-xs-12" id="informacion">
            	<p>Miguel Espeso</p>
				<p>C/ Olivar, 5 </p>
				<p>05400 La Parra</p>
				<p>Tlf: 920 37 19 47</p>
				<p>[email protected]</p>
            </div>
        </div>
    </div>

<!--</section>  -->

<!-- FIN DE FORMULARIO-->
 <section class="content content-2">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h2 class="section-header">Contacto</h2>
                <p class="lead text-light">La mejor aplicación para que sigan su negocio desde el móvil, tablet y toda clase de smartphone.</p>         	
            </div>                    
        </div>
    </div>
</section>    

<!--footer-->
<footer class="page-footer">


    <div class="contact">
        <div class="container">
            <h2 class="section-heading">Contact Us</h2>
            <p><span class="glyphicon glyphicon-earphone"></span><br> +1(23) 456 7890</p>
            <p><span class="glyphicon glyphicon-envelope"></span><br> [email protected]</p>
        </div>
    </div>
        
    <!-- Copyright etc -->
    <div class="small-print">
        <div class="container">
            <p>Copyright &copy; Miguel.com 2017</p>
        </div>
    </div>
    
</footer>

<!-- jQuery -->
<script src="js/jquery-1.11.3.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>

<!-- Custom Javascript -->
<script src="js/custom.js"></script>


</body>
</html>

5
  • Gracias compañero, ya respondi a tu pregunta. Esto es lo que buscaba, medio dia ayer y no di con ello, espero ahora dar con los cambios que hiciste, para aprenderlo de una vez por todas. Muchas gracias por tu apoyo. el 12 dic. 2017 a las 8:31
  • Puedes explicarme que es el siguiente codigo que venia con la plantilla??, no termino de entender, en la parte de <!-- Logo and responsive toggle --> : <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span> <span class="icon-bar"></span></button> Gracias, esta todo junto por no me coge. Bueno, no se como ponerlo de forma ordenada y entre todo.Gracias de nuevo por el apoyo. el 12 dic. 2017 a las 8:49
  • Ya lo encontre @Camilo Vasquez : #form_container, #informacion{ float: none; display: inline-block; vertical-align: middle; margin-left: -2px; } el 12 dic. 2017 a las 9:13
  • 1
    @MiguelEspeso ese código que me pasas es para generar el botón de menú en las versiones móviles, me alegra que te sirviera, saludos! el 12 dic. 2017 a las 13:01
  • gracias, no dejas de sorprenderme. Un saludo el 12 dic. 2017 a las 13:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.