Contact Form and Footer

contact form and footer bootstrap 3 snippet

Download Files

Download Files contains - HTML,CSS,JS,Images Files

With cover and overlapped profile picture

                                        
                                      /* ------------------------------------------------------------------- */
/* Import Section
---------------------------------------------------------------------- */
@import url("base.css");    /* Default Reset, Typography, Forms, etc. */
@import url("bootstrap.min.css");   /* Bootstrap 3.3.7 */
@import url("font-awesome.min.css");  /* Font-awesome 4.5.0 */
@import url("https://fonts.googleapis.com/css?family=Poppins");
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab:400,700");

h1,
h2,
h3,
h4,
h5,
h6{
 font-family: 'Roboto Slab',serif;
    font-weight:400;
    letter-spacing:0.02em;
    margin:0 0 20px;
}
.btn-meflat {
 border: none;
    font-family: "Poppins", sans-serif;
 font-size: 20px;
 cursor: pointer;
 padding: 10px 30px;
 display: inline-block;
 margin:20px 0;
 text-transform: none;
 text-decoration: none;
 letter-spacing: 1px;
 font-weight: 400;
 line-height:28px;
 height:52px;
 outline: none;
 position: relative;
 background: #36D9C3;
 color: #fff;
 box-shadow: none;
 border-radius: 52px;
 opacity:0.8;
 -webkit-transition: none;
 -moz-transition: none;
 transition: none;
}

.btn-meflat:hover,
.btn-meflat:focus,
.btn-meflat:active {
 color: #fff;
 opacity:1;
 text-decoration: none;
}

/* ------------------------------------------------------------------- */
/* Contact Section
---------------------------------------------------------------------- */
#contact{
 padding-bottom:40px;
}
.dark-bg{
 background:#1D2026;
}
.light-typo {
 color:#fff;
}
.padding-top {
 padding:100px 0 0;
}
.section-header {
 margin-bottom: 76px;
}
.section-header h1 {
 font-size: 48px;
 font-weight: 600;
 letter-spacing: 0.05em;
}
#contact .section-header p {
 font-family: "Poppins", sans-serif;
 opacity:0.6;
 font-size: 18px;
 line-height: 24px;
 font-weight: 300;
 margin-bottom: 20px;
}
.bl_form {
  margin: 0 0 40px;
}
.bl_form input,
.bl_form textarea{
  font-family: "Poppins", sans-serif;
  padding-top: 15px;
  background: rgba(255,255,255,0.10);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border: none;
  color: white;
  height:44px;
  max-height:44px;
  min-height:44px;
  width:207px;
  max-width:207px;
  min-width:207px;
  padding: 10px 15px;
  border-radius: 25px;
  font-size: 16px;
  outline: none;
  vertical-align:middle;
}
#contact .btn {
 margin-left:3px;
}
#contact-form .field-wrap{
 display:inline-block;
 position:relative;
 vertical-align:top;
 margin-bottom:60px;
}
#contact-form .field-wrap .error-message{
 display:block;
 position:absolute;
 top:50px;
 left:0;
 width:100%;
 font-size:16px;
 text-align:center;
 color:#36D9C3;
}
#contact-form .field-wrap .control-label{
 display:none;
 position:absolute;
 top:-30px;
 left:15px;
}
#contact-form.no-placeholder .field-wrap .control-label{
 display:inline-block;
}

/* ------------------------------------------------------------------- */
/* Footer Section
---------------------------------------------------------------------- */   
#main-footer p{
 font-family: "Poppins", sans-serif;
 font-size:16px;
 line-height:40px;
}
#main-footer p a{
 color: #36D9C3;
}
#main-footer hr{
 margin-top:0;
 border-color:#19191d;
}
.social-links {
 list-style:none;
 margin:0;
 padding:0;
 margin-bottom:20px;
}
.social-links li{
 display:inline-block;
 margin:0 5px;
 border-radius:3px;
 box-shadow:0 4px 0 transparent;
 -webkit-transition:all .3s ease-out;
 transition:all .3s ease-out;
}
.social-links li a {
 display:block;
 color:#fff;
 color:rgba(255,255,255,0.3);
 font-size:18px;
 width:40px;
 height:40px;
 line-height:40px;
 text-align:center;
 background:rgba(0,0,0,0.2);
 border-radius:50%;
 -webkit-transition:all .3s ease-out;
 transition:all .3s ease-out;
}
.social-links li a:hover {
 color:#fff !important;
 background:#36D9C3;
}      
                                        
                                    

                                        
                                      Js      
                                        
                                    

More Bootstrap UI Components

Categories with Tiny-Slider JS

129 0 BS5, Categories

Simple Call to Action

166 0 CTA,BS4

Launch Ready Features

155 0 features,BS4

Modern Creative Hero Block

160 0 hero,BS5

Resume Hero

152 0 resume

Subscribe to our Newsletter

146 0 newsletter,BS4

Register Form with Background Image

187 0 register,forms,BS4

Tired of Opening One Strap After Another?

Go to Pricing and start using AJAX Filter Options, no need to open multiple pages.

Get Started