How to create a contact page using HTML,CSS and Bootstrap

Oleh Admin

Pada September 02, 2020 September 02, 2020

ডিজাইনের জন্য CSS ও Bootstarp ব্যবহার করব। বেশীরভাগ ক্ষেত্রেই আমরা বুটস্ট্রাপ ব্যবহার করে
পেইজের লে-আউট ডিজাইন করব।

আউটপুট

contact page

Source code:

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, 

shrink-to-fit=no">

    <title>Contact Page</title>

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="assets/css/styles.css">

</head>

<body>

    <div class="contact-clean">

        <form method="post">

            <h2 class="text-center">Contact us</h2>

            <div class="form-group"><input class="form-control"  

type="text" name="name" placeholder="Name"></div>

            <div class="form-group"><input class="form-control is-invalid" 

 type="email" name="email" placeholder="Email">

<small class="form-text text-danger">Please enter a correct email address.</small>

</div>

            <div class="form-group"><textarea class="form-control"  

name="message" placeholder="Message" rows="14"></textarea></div>

            <div class="form-group"><button class="btn btn-primary"  

type="submit">send </button></div>

        </form>

    </div>

    <script src="assets/js/jquery.min.js"></script>

    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

styles.css

.contact-clean {

    background: #f1f7fc;

    padding: 80px 0;

  }

  @media (max-width:767px) {

    .contact-clean {

      padding: 20px 0;

    }

  }

  .contact-clean form {

    max-width: 480px;

    width: 90%;

    margin: 0 auto;

    background-color: #ffffff;

    padding: 40px;

    border-radius: 4px;

    color: #505e6c;

    box-shadow: 1px 1px 5px rgba(0,0,0,0.1);

  }

  @media (max-width:767px) {

    .contact-clean form {

      padding: 30px;

    }

  }

  .contact-clean h2 {

    margin-top: 5px;

    font-weight: bold;

    font-size: 28px;

    margin-bottom: 36px;

    color: inherit;

  }

  .contact-clean 

  .form-group:last-child {

    margin-bottom: 5px;

  }

  .contact-clean form 

  .form-control {

    background: #fff;

    border-radius: 2px;

    box-shadow: 1px 1px 1px rgba(0,0,0,0.05);

    outline: none;

    color: inherit;

    padding-left: 12px;

    height: 42px;

  }

  .contact-clean form 

  .form-control:focus {

    border: 1px solid #b2b2b2;

  }

  .contact-clean form textarea

  .form-control {

    min-height: 100px;

    max-height: 260px;

    padding-top: 10px;

    resize: vertical;

  }

  .contact-clean form .btn {

    padding: 16px 32px;

    border: none;

    background: none;

    box-shadow: none;

    text-shadow: none;

    opacity: 0.9;

    text-transform: uppercase;

    font-weight: bold;

    font-size: 13px;

    letter-spacing: 0.4px;

    line-height: 1;

    outline: none !important;

  }

  .contact-clean form 

  .btn:hover {

    opacity: 1;

  }

  .contact-clean form 

  .btn:active {

    transform: translateY(1px);

  }

  .contact-clean form 

  .btn-primary {

    background-color: #050f1d !important;

    margin-top: 15px;

    color: #fff;

  }