Skip to content

Commit

Permalink
ShravanMeena#9 new contact form added
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramkrishn123
ramkrishn123 committed Oct 16, 2019
1 parent bf18746 commit 773ee0d
Show file tree
Hide file tree
Showing 2 changed files with 317 additions and 0 deletions.
104 changes: 104 additions & 0 deletions Contact Form Designs/contact-form-with-social media/index.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact Form </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="layer"></div>
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-sm-5">
<div class="contact-form shadow">
<h2 class="heading-sm">Send us your message</h2>
<p class="sub-title-sm mb-4">Fill up the form and instantly send us your queries or feedback</p>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="form-control" name="name" placeholder="Full Name">
<label for="name"><i class="far fa-user"></i></label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="tel" class="form-control" name="phone" placeholder="Phone">
<label for="phone"><i class="fas fa-phone"></i></label>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<textarea type="text" class="form-control" name="message" placeholder="Message"></textarea>
<label for="message"><i class="far fa-envelope"></i></label>
</div>
</div>
<div class="col-sm-8"></div>
<div class="col-sm-4 text-right">
<button type="submit" class="btn-ajax"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
<div class="social mt-5">
<h2 class="heading-sm">
<span><i class="fas fa-share-alt"></i></span>
Be Social
</h2>
<p class="sub-title-sm mb-4">Get notified quickly to our latest updates and events. Subscribe to our social channels</p>
<div class="social-links">
<a href="#" class="link facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="link twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="link linkedin" data-toggle="tooltip" data-placement="bottom" title="LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="link youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="link whatsapp" data-toggle="tooltip" data-placement="bottom" title="WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
213 changes: 213 additions & 0 deletions Contact Form Designs/contact-form-with-social media/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
body{
font-family: 'Montserrat', sans-serif;
background-image: url("pawel-czerwinski--0xCCPIbl3M-unsplash.jpg");
background-size:cover ;
background-position: bottom;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
}

body .layer{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.3);
}


body .heading-sm {
font-size: 1.6rem;
font-weight: 600;
}

.contact-page-wrap {
padding: 50px 0;
}

.contact-form {
padding: 30px;
background-color: #fff;
border-radius: 5px;
}

.contact-form .form-group {
position: relative;
}

.contact-form .form-group .form-control {
height: 52px;
font-size: 1.1rem;
color: gray;
background-color: #e2e2e2;
}

.contact-form .form-group textarea {
height: 110px !important;
}

.contact-form .form-group label {
position: absolute;
right: 12px;
color: #000;
top: 11px;
font-size: 1.2rem;
}

.contact-details .single-item {
padding-left: 50px;
color: #000;
margin-bottom: 25px;
font-size: 1.1rem;
position: relative;
}

.contact-details .single-item .icon {
height: 40px;
width: 40px;
background-color: #FFD800;
border-radius: 50%;
text-align: center;
position: absolute;
left: 0;
top: -5px;
}

.contact-details .single-item .icon i {
color: #000;
line-height: 40px;
font-size: 0.9rem;
}

.social .social-links .link {
height: 35px;
width: 35px;
border-radius: 3px;
text-align: center;
}

body .btn-ajax {
height: 55px;
width: 55px;
background-color: #F63749;
color: #fff;
border-radius: 50%;
border: none;
display: inline-block;
text-align: center;
}


body .social-links .link {
display: inline-block;
margin: 0 2px;
font-size: 1.2rem;
transition: all 350ms;
height: 35px;
width: 35px;
background-color: #abbdc6;
text-align: center;
border-radius: 2px;
vertical-align: middle;
}

body .social-links .link i {
color: #fff;
font-size: 1.5rem;
line-height: 34px;
transition: all 350ms;
}

body .social-links .link.facebook:hover {
background-color: #3b5998;
}

body .social-links .link.facebook:hover i {
color: #fff;
}

body .social-links .link.twitter:hover {
background-color: #55acee;
}

body .social-links .link.twitter:hover i {
color: #fff;
}

body .social-links .link.blogger:hover {
background-color: #f57d00;
}

body .social-links .link.blogger:hover i {
color: #fff;
}

body .social-links .link.youtube:hover {
background-color: #cd201f;
}

body .social-links .link.youtube:hover i {
color: #fff;
}

body .social-links .link.linkedin:hover {
background-color: #0077b5;
}

body .social-links .link.linkedin:hover i {
color: #fff;
}

.social .social-links .link.facebook {
background-color: #3b5998;
}

.social .social-links .link.twitter {
background-color: #55acee;
}

.social .social-links .link.linkedin {
background-color: #0077b5;
}

.social .social-links .link.youtube {
background-color: #cd201f;
}

.social .social-links .link.whatsapp {
background-color: #43d854;
}

.social .social-links .link.blogger {
background-color: #f57d00;
}

.social .social-links .link i {
color: #fff;
font-size: 1.2rem;
line-height: 35px;
}

.contact-map {
border-top: 10px solid #fff;
box-shadow: 0 0 20px #a9a4a4;
position: relative;
margin-top: 40px;
}

.contact-map .get-direction {
position: absolute;
background-color: #fff;
padding: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0px -8px 19px #e0dede;
bottom: 100%;
left: 120px;
}

.contact-map #map {
height: 600px;
}

0 comments on commit 773ee0d

Please sign in to comment.