Blog Contact Page

In this example below you will see how to do a Blog Contact Page with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by captnstarburst, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright captnstarburst ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Blog Contact Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Dosis|Playfair+Display+SC" rel="stylesheet">

<script src='https://www.google.com/recaptcha/api.js'></script>
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- NAVBAR -->
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
  <a class="navbar-brand" href="#">Conor's Blog</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse justify-content-start" id="navbarToggler">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Blog</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section_portfolio">Home</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#section_contact">Contact<span class="sr-only">(current)</span></a>
      </li>
    </ul>

  </div>
  <div class="navbar-collapse justify-content-end">
    <form class="form-inline">
      <input class="form-control search mr-sm-4" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-warning my-2 my-sm-1" type="submit"><span class="navbar-search">Search</span></button>
    </form>
  </div>
</nav>
<!-- NAVBAR -->

<div class="container-fluid">
  <div class="row blog-nav">
    <div class="col-12">
      <p class="blog-nav">
        <a href=""> >Blog Home &nbsp; </a>
         >> Contact Me </p>
    </div>
  </div>
	<div class="row title-row">
		<div class="col-12 text-center">
			<h1 class="header title-txt">Contact Form!</h1>
			<h5>Complete the form to send me an email and I will get back to you as soon as possible!</h5>
		</div>
	</div>
	<div class="row content-row justify-content-center">
		<div class="col-lg-6 col-md-6 col-10">
			<form method="post" autocomplete="off">
					<input class="sendEmail" type="text" placeholder="Name" name="name" id="contact_name" required>
					<input class="sendEmail" type="email" placeholder="Email" name="email" id="contact_email" required>
					<textarea placeholder="Message" name="message" id="contact_message" required></textarea>
					<div class="portfolio-txt text-danger" id="captcha_required"></div>
					<div class="g-recaptcha" data-sitekey="6LdxeSQUAAAAAJBj-R2bcQ8Elh_m9oGp2rdoWF5A" data-theme="dark"></div>

					<button class="btn btn-primary btn-block" type="submit"><span class="header">Submit<span></button>
				</form>
		</div>
	</div>
  <div class="row footer">
    <div class="col-12 text-center">
      <hr class="blog-line" />
      <h5 class="header white-txt">Coded by Conor Hinchee </h5>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/blog-contact-page-JvrvGB */
body {
  background-image: url("https://conorhinchee.com/imgs/blog/paperBG.png");
}

.navbar-brand {
  font-family: "Playfair Display SC", serif;
}

.header {
  font-family: "Playfair Display SC", serif;
}

p {
  font-family: "Dosis", sans-serif;
  font-size: 1.5em;
}

.title-row {
  padding-top: 5%;
}

.title-txt {
  text-decoration: underline;
  text-shadow: 1px 1px 1px blue;
}

.blog-nav {
  padding-top: 1%;
}

.content-row {
  padding-top: 1%;
}
.content-row p {
  text-align: justify;
  hyphens: auto;
}

.thumbnail {
  border: 2px solid black;
}

.article-img {
  width: 20%;
}

.left {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.right {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

.page-nav {
  padding-top: 5%;
}

.sendEmail,
textarea {
  width: 100%;
  margin: 1%;
}

.g-recaptcha {
  width: 100%;
  margin: 1%;
}

@media screen and (min-width: 2560px) {
  .navbar-brand {
    font-size: 3em;
  }

  .nav-link {
    font-size: 2em;
  }

  .navbar-nav > li {
    padding-left: 15px;
    padding-right: 15px;
  }

  h1 {
    font-size: 5em;
  }

  h3 {
    font-size: 3em;
  }

  h5 {
    font-size: 2.5em;
  }

  p {
    font-size: 2.5em;
  }

  .content-row p {
    padding-bottom: 3%;
  }

  .btn-txt {
    font-size: 2em;
  }
}
@media screen and (max-width: 1024px) {
  p {
    font-size: 1.2em;
  }

  h1 {
    font-size: 2em;
  }

  .article-img {
    width: 30%;
  }
}
@media screen and (max-width: 768px) {
  .article-img {
    width: 40%;
  }
}
@media screen and (max-width: 425px) {
  .article-img {
    width: 100%;
  }
}


/*Downloaded from https://www.codeseek.co/captnstarburst/blog-contact-page-JvrvGB */
$(".sendEmail").submit(function(e) {
	e.preventDefault();
	
	alert("Email not sent friend, this page is non functional")
});

Comments