Email Confirmation Home

In this example below you will see how to do a Email Confirmation Home 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
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Email Confirmation Home</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">

  
  <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-lg">
	<a class="navbar-brand" href="#">Conor Hinchee</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-end" id="navbarToggler">
		<ul class="navbar-nav">
			<li class="nav-item ">
				<a class="nav-link" href="#">Home</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#section_portfolio">Portfolio</a>
			</li>
			<li class="nav-item active">
				<a class="nav-link" href="#section_contact">Contact <span class="sr-only">(current)</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Blog</a>
			</li>
		</ul>
	</div>
</nav>
<!-- NAVBAR -->

<div class="container-fluid">
	<div class="row top-row">
		<div class="col-12 text-center">
			<hr class="main-line"/>
			<h1 class="header thanks">Thanks for contacting me! I will be in touch!</h1>
		</div>
	</div>
	<div class="row btn-row">
		<div class="col-12 text-center">
			<button class="btn btn-txt bg-dark"><span class="white-txt">Click To Go Back Home <i class="fa fa-home" aria-hidden="true"></i></span></button>
		</div>
	</div>
	<div class="row footer justify-content-center">
		<div class="col-12 ">
			<hr />
			<h5 class="header text-center 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>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/email-confirmation-home-wjrXKq */
@charset "UTF-8";
body {
  background-color: #999999;
}

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

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

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

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

.white-txt {
  color: white;
  text-shadow: 1px 1px 0 black;
}

.top-row {
  padding-top: 1%;
}

.thanks {
  padding-top: 5%;
}

.btn-row {
  padding-top: 2%;
}

.footer {
  bottom: 0;
  position: fixed;
  right: 43%;
}

.active {
  text-decoration: underline;
}

.main-line {
  border-top: 5px solid black;
  text-align: center;
}

.main-line:after {
  content: "┬ž";
  display: inline-block;
  position: relative;
  top: -14px;
  padding: 0 10px;
  background: black;
  color: #8c8b8b;
  font-size: 18px;
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
}

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

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

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

  h1 {
    font-size: 5em;
  }

  h2 {
    font-size: 4em;
  }

  h5 {
    font-size: 2.5em;
  }

  .btn-txt {
    font-size: 2.5em;
  }

  .main-line:after {
    font-size: 2em;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  h5 {
    font-size: 1em;
  }
}
@media screen and (max-width: 425px) {
  h1 {
    font-size: 1.2em;
  }

  h2 {
    font-size: 1.1em;
  }

  h5 {
    font-size: 0.7em;
  }

  .btn-txt {
    font-size: 0.8em;
  }
}
@media screen and (max-width: 375px) {
  h1 {
    font-size: 1em;
  }

  h2 {
    font-size: 0.99em;
  }
}
@media screen and (max-width: 320px) {
  h1 {
    font-size: 0.98em;
  }

  h2 {
    font-size: 0.8em;
  }

  .btn-txt {
    font-size: 0.7em;
  }
}

Comments