The Codings Land

---------------------------------------------HTML Code----------------------------------------------

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="services">
      <h1>Our Services</h1>
      <div class="cen">
        <div class="service">
          <i class="fas fa-anchor"></i>
          <h2>Service Name</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>

        <div class="service">
          <i class="fab fa-android"></i>
          <h2>Service Name</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>

        <div class="service">
          <i class="fab fa-angellist"></i>
          <h2>Service Name</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>

        <div class="service">
          <i class="fas fa-apple-alt"></i>
          <h2>Service Name</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>

        <div class="service">
          <i class="fas fa-archway"></i>
          <h2>Service Name</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>

        <div class="service">
          <i class="far fa-angry"></i>
          <h2>Service Name</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
      </div>
    </div>
</body>
</html>
---------------------------------------------CSS Code-----------------------------------------------
body{
margin: 0;
padding: 0;
font-family: "montserrat",sans-serif;
}
.services{
background: #f1f1f1;
text-align: center;
}
.services h1{
display: inline-block;
text-transform: uppercase;
border-bottom: 4px solid #3498db;
font-size: 20px;
padding-bottom: 10px;
margin-top: 40px;
}
.cen{
max-width: 1200px;
margin: auto;
overflow: hidden;
padding: 20px;
}
.service{
display: inline-block;
width: calc(100% / 3);
margin: 0 -2px;
padding: 20px;
box-sizing: border-box;
cursor: pointer;
transition: 0.4s;
}
.service:hover{
background: #ddd;
}
.service i{
color: #3498db;
font-size: 34px;
margin-bottom: 30px;
}
.service h2{
font-size: 18px;
text-transform: uppercase;
font-weight: 500;
margin: 0;
}
.service p{
color: gray;
font-size: 15px;
font-weight: 500;
}
@media screen and (max-width: 800px) {
.service{
    width: 50%;
}
}
@media screen and (max-width: 500px) {
.service{
    width: 100%;
}
}

<form class="login-form" action="contact.php" method="post" >
       <div class="form-group">
      <input type="hidden" name="formtype" size="40" class="form-control footer-form-txr" value="Enquiry">
   <input name="utm_medium" size="40" value="" type="hidden">
   <input name="utm_campaign" size="40" value="" type="hidden">
   <input name="utm_source" size="40" value="" type="hidden">
          <input id="name" name="name" class="form-control" required="" type="text" placeholder="Name">
       </div>
       <div class="form-group">
          <input id="email" name="email" class="form-control" required="" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" placeholder="Email Id">
       </div>
       <div class="form-group">
          <input id="phone" name="phone" class="form-control" required="" type="tel" minlength="10" maxlength="10" pattern="[789][0-9]{9}" placeholder="Phone No">
       </div>
       <div class="form-group">
          <input id="city" name="city" class="form-control" required="" placeholder="City" type="text">
       </div>
       <div class="form-group">
                <input type="text" name="pincode" class="form-control input-sm" placeholder="Pin Code" required>
              </div>
       <div class="row">
          <div class="col-md-12">
             <div class="form-group">
                <textarea name="msg" id="msg" cols="0" required="" rows="2" placeholder="Message" class="form-control locked"></textarea>
             </div>
             <input type="submit" name="submit" value="Submit" class="btn wt btn-dark btn--leftBorder btn--rightBorder sidebanenr">
          </div>
       </div>
    </form>
-------------------------------------Contact.phpFile---------------------------------------------------

<?php
$errors = '';
$myemail = from@yourmail.com';

$bcc = '';//<-----Put Your Bcc email address here.

if(empty($_POST['name']) ||
   empty($_POST['email']) ||
   empty($_POST['phone']) ||
   empty($_POST['city']) ||
   empty($_POST['pincode']) ||
   empty($_POST['msg'])
   )
{
    $errors .= "\n Error: all fields are required";
}

$name1 = $_POST['name'];
$mail1 = $_POST['email'];
$phone1 = $_POST['phone'];
$city1 = $_POST['city'];
$pincode1 = $_POST['pincode'];
$remarks1 = $_POST['msg'];

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$mail1))
{
    $errors .= "\n Error: Invalid email address";
}

if( empty($errors))
{
    $to = 'your@yourmail.com';
    $email_subject = "This is You Order : $name";
    $email_body = "Enquiry ".
    "By:\n Name:   $name1 \n Email:   $mail1 \n Phone:   $phone1 \n City:   $city1\n PIN:   $pincode1\n Remarks:   $remarks1\n";

    $headers = "From: $myemail\n";
    $headers .= "Reply-To: $email_address".
    $headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "X-Priority: 3\r\n";
$headers .= "X-Mailer: PHP". phpversion() ."\r\n" ;

    if(mail($to,$email_subject,$email_body,$headers));
    {
    //redirect to the 'thank you' page
    header('Location: thank-you.html');
    }

    echo "error occur";

}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Contact form handler</title>
</head>

<body>

<?php
echo nl2br($errors);
?>

</body>
</html>

The Codings Land

Friday, February 28, 2020

Our Services - HTML CSS Source Codes

Monday, February 17, 2020

Login Form HTML Code with Validation