Skip to content
Career Lines
  • Home
  • Www.Careerlines.com
  • Call / WhatsApp : +91-9360056327 / +91-9600896874
  • Resources

How to create Contact us in Website

December 10, 2019 by Admin

How to write a code Step by Step Process

Step 1: Create a folder. Folder name Project.

Step 2: Open Sublime text and Type given HTML code.

Step 3: After enter this code, Save file name index.html (inside the Project folder)

Step 4: Open index.html with any browser like Chrome, Internet explorer, etc.

Step 5: Finally get an output.

Note

 <iframe src=””> *Here map can be embedded with this line </iframe>

index.html

<!DOCTYPE html>

<html>

<body>

 <section id=”contact”>

<h3 align=”center” style=”color: black;font-size: 2.5em;font-family:calibri;”>Contact Us</h3><br>

<div class=”container-fluid”>

<div class=”row wow jackInTheBox”>

<div class=”col-lg-6″>

<div class=”map mb-4 mb-lg-0″>

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3886.2088151049666!2d79.66537151435472!3d13.085948515900622!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a52bc6bf3ca3585%3A0xacea0ca71efa5217!2sUltra%20Global%20IT%20Solutions!5e0!3m2!1sen!2sin!4v1572615540939!5m2!1sen!2sin” width=”600″ height=”450″ frameborder=”0″ style=”border:0; width: 100%; height: 372px;” allowfullscreen=””></iframe>

</div>

</div>

<div class=”col-lg-6″>

<div class=”row”>

<div class=”col-md-5 info”>

<p>#39A, YMR Patty, Land Mark-above Ceylon Bakery, Dindigul-624001.</p>

</div>

<div class=”col-md-4 info”>

<i class=”ion-ios-email-outline”></i>

<p>info@careerlines.in </p>

</div>

<div class=”col-md-3 info”>

<i class=”ion-ios-telephone-outline”></i>

<p>+91-9360056327</p>

</div>

</div>

<br>

<div class=”form”>

<div id=”sendmessage”>Your message has been sent. Thank you!</div><br>

<div id=”errormessage”></div>

<form action=”” method=”post” role=”form” class=”contactForm”>

<div class=”form-row”>

<div class=”form-group col-lg-6″>

<input type=”text” name=”name” class=”form-control” id=”name” placeholder=”Your Name” data-rule=”minlen:4″ data-msg=”Please enter at least 4 chars” />

<div class=”validation”></div>

</div>

<div class=”form-group col-lg-6″>

<input type=”email” class=”form-control” name=”email” id=”email” placeholder=”Your Email” data-rule=”email” data-msg=”Please enter a valid email” />

<div class=”validation”></div>

</div>

</div>

<div class=”form-group”>

<input type=”text” class=”form-control” name=”subject” id=”subject” placeholder=”Subject” data-rule=”minlen:4″ data-msg=”Please enter at least 8 chars of subject” />

<div class=”validation”></div>

</div>

<div class=”form-group”>

<textarea class=”form-control” name=”message” rows=”5″ data-rule=”required” data-msg=”Please write something for us” placeholder=”Message”></textarea>

<div class=”validation”></div>

</div>

<div class=”text-left”><button type=”submit” title=”Send Message”>Send Message</button></div>

</form>

</div>

</div>

</div>

</div>

</section><!– #contact –>

<style type=”text/css”>

            ::before, ::after {

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

}

#contact {

            padding: 6em 0;

}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {

            display: block;

}

* {

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

}

html, body {

            font-family: ‘Calibri’, sans-serif;

            font-size: 100%;

}

body {

            font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

            font-size: 14px;

            line-height: 1.42857143;

            color: #333;

}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

            font-family: inherit;

            font-weight: 500;

            line-height: 1.1;

            color: inherit;

}

.clearfix::after, .container::after, .container-fluid::after, .row::after, .form-horizontal .form-group::after, .btn-toolbar::after, .btn-group-vertical > .btn-group::after, .nav::after, .navbar::after, .navbar-header::after, .navbar-collapse::after, .pager::after, .panel-body::after, .modal-footer::after {

            clear: both;

}

.clearfix::before, .clearfix::after, .container::before, .container::after, .container-fluid::before, .container-fluid::after, .row::before, .row::after, .form-horizontal .form-group::before, .form-horizontal .form-group::after, .btn-toolbar::before, .btn-toolbar::after, .btn-group-vertical > .btn-group::before, .btn-group-vertical > .btn-group::after, .nav::before, .nav::after, .navbar::before, .navbar::after, .navbar-header::before, .navbar-header::after, .navbar-collapse::before, .navbar-collapse::after, .pager::before, .pager::after, .panel-body::before, .panel-body::after, .modal-footer::before, .modal-footer::after {

            display: table;

            content: ” “;

}

.container-fluid {

            padding-right: 15px;

            padding-left: 15px;

            margin-right: auto;

            margin-left: auto;

}

.row {

            margin-right: -15px;

            margin-left: -15px;

}

.col-lg-6 {

            width: 50%;

}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {

            float: left;

}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {

            position: relative;

            min-height: 1px;

            padding-right: 15px;

            padding-left: 15px;

}

.col-md-5 {

            width: 41.66666667%;

}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {

            float: left;

}

.form-group {

            margin-bottom: 15px;

}

button::-moz-focus-inner, input::-moz-focus-inner {

            padding: 0;

            border: 0;

}

.form-control::placeholder {

            color: #999;

            opacity: 1;

}

.form-control {

            display: block;

            width: 100%;

            height: 34px;

            padding: 6px 12px;

            font-size: 14px;

            line-height: 1.42857143;

            color: #555;

            background-color: #fff;

            background-image: none;

            border: 1px solid #ccc;

            border-radius: 4px;

            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

            -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

}

input, button, select, textarea {

            font-family: inherit;

            font-size: inherit;

            line-height: inherit;

}

button, input, optgroup, select, textarea {

            margin: 0;

            font: inherit;

            color: inherit;

}

textarea.form-control {

            height: auto;

}

</style>

</body>

</html>

Next Blog – How to create Footer in Website step by step guidance For Detailed Information: Click Here

Post navigation

Previous Post:

How to create Gallery in website

Next Post:

How to create Footer in Website

ENQUIRE NOW!!!

Recent Posts

  • Best Mern Stack Development Training Institute In Aruppukottai
  • Best Mern Stack Development Training Institute In Sivakasi
  • Best Mern Stack Development Training Institute In Srivilliputhur
  • Best Mern Stack Development Training Institute In Rajapalayam
  • Best Mern Stack Development Training Institute In Virudhunagar

Tags

Android Development Courses in Madurai Android Development Training Android Institute in Madurai Android Training Course Android Training Institutes in Madurai Basic HTML Basic HTML Coding digital marketing Free HTML Learning HTML for Beginners sem seo smm Web designing course in madurai Web Design Training Web development Web Development Training
July 2025
MTWTFSS
 123456
78910111213
14151617181920
21222324252627
28293031 
« Jan    
© 2025 Career Lines