newsletter.html

<!DOCTYPE html>
<html lang="en">
<style>
nav {
   text-align: center;
   padding: 10px 0;
}

nav ul{
  list-style: none;
  margin: 0 2px;
  padding: 0;
}

nav li {
   display: inline-block;
   padding: 10px 10px;
}

nav a {
  font-weight: normal;
  padding: 20px 5px;
  font-size: 1.2em;
}

.navbar-text {
    position: left;
    left: 0;
    text-align: center;
    margin: auto;
    font-weight: bold;
    font-color: #765D69;
}
.home-newsletter {
    padding: 80px 0;
    background:#F1828D;
  }

  .home-newsletter .single {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}
  .home-newsletter .single h2 {
    font-size: 22px;
    color: white;
    text-transform: uppercase;
    margin-bottom: 40px;
}
  .home-newsletter .single .form-control {
    height: 50px;
    background: rgba(255, 255, 255, 0.6);
    border-color: transparent;
    border-radius: 20px 0 0 20px;
}
  .home-newsletter .single .form-control:focus {
    box-shadow: none;
    border-color: #243c4f;
}
  .home-newsletter .single .btn {
    min-height: 50px;
    border-radius: 0 20px 20px 0;
    background: #243c4f;
    color: #fff;
  }

.dropdown:hover .dropdown-menu {display: block;}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 55px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

</style>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<!-- google font API -->
	<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Libre+Baskerville&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<title>That's the Tea Home</title>
</head>
<body style="font-family: 'Josefin Sans', sans-serif; font-size: 1.1em">
	<!-- nav bar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
		<a class="navbar-brand" href="homepage.html">
			<img src="website-img/teacup-icon.png" alt="That's The Tea" height="75">
		</a>
		<h1 class="navbar-text" style="font-family: 'Dancing Script', cursive; color:#765D69">That's The Tea</h1>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarText">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link" href="homepage.html">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="AboutUs.html">About Us</a>
				</li>
				<li class="nav-item dropdown">
			    	<a class="nav-link dropdown-toggle" href="social-issues.html">
			          Social Issues
			        </a>
			        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
			          <a class="dropdown-item" href="blm.html">Black Lives Matter</a>
			          <a class="dropdown-item" href="suicide.html">Suicide Prevention</a>
			          <a class="dropdown-item" href="identities.html">LGBTQ+</a>
			          <a class="dropdown-item" href="anti-racism.html">Anti-Racism</a>
			        </div>
			    </li>
				<li class="nav-item">
					<a class="nav-link" href="OrgPage.html">Organizations</a>
				</li>
				<li class="nav-item active">
					<a class="nav-link" href="newsletter.html">Newsletter</a>
				</li>
			</ul>
		</div>
	</nav>
	<!-- body information -->
	<br>
	<br>

  <section class="home-newsletter">
    <div class="container">
    <div class="row">
    <div class="col-sm-12">
    	<div class="single">
    		<h2>Want to get weekly updates on social issues around the world? Subscribe to our Newsletter</h2>
    	<div class="input-group">
             <input type="email" class="form-control" placeholder="Enter your email">
             <span class="input-group-btn">
             <button class="btn btn-theme" type="submit">Subscribe</button>
             </span>
              </div>
    	</div>
    </div>
    </div>
    </div>
  </section>
  <br>
  <br>
  <div class="container">

  <img class="float-right" id="newsletter" src="website-img/newsletter-preview.png" alt="That's the Tea Newsletter Preview">
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h3>
    Follow us on Social Media!
  </h3>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-instagram"></a>
</div>
</body>
</html>