How to give good appearance to the form on my website?

Question

How to give good appearance to the form on my website?

Navigation

#1 by (2 votes)

0

I am trying to create a contact form which shares the screen with my personal data: name, address, etc. Osea my data on the left and the form on the right, leaving margin between them and left and right of both. Once they showed me (Alvaro Montoro) how to do it with columns, class="column col-md-8". But I can not find the way to do it with this form that I took out of a template. In my code you can see that my data is left below, I do not know if I should create them in the form of a list (

). I leave my code in case you can help me. @Flowen also helped me with the social media bar. Thank you.

$(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>

javascript html css bootstrap

asked by Miguel Espeso 12.12.2017 в 01:08

source

1 answer

Else if statement, why it does not work (Number (! numberUser) Using timestamp?

score 2 · Accepted Answer

To solve your problem with the contact session it is necessary to use the Bootstrap classes that you mentioned at the time @ AlvaroMontoro and a few lines of styles for vertical alignment!

<!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>