<footer>
<section class="form" id="contact">
<h3>Got questions? Get in touch</h3>
<p class="formIntro">Connect with us via our social media.</p>
</section>
<section class="social">
<article>
<h3>Let's be social - connect with us!</h3>
<div class="socialIcons">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
</div>
</article>
</section>
<section class="contactInfo">
<article>
<h4>Contact Information</h4>
<ul>
<li>Phone: 123-456-7890</li>
<li>Email: info@marineconservation.com</li>
<li>Address: 1234 Ocean Ave. Courtenay, BC</li>
</ul>
<p class="copy">MARINECONSERVATION ©2023</p>
</article>
</section>
</footer>
footer {
margin-top: 1rem;
}
.form {
background-color: #223055;
color: #fff;
padding: 1rem 1rem 2rem;
}
.form p {
font-weight: 300;
padding-bottom: 1rem;
}
.social,
.contactInfo {
background-color: #13b1e7;
color: #fff;
padding: 1rem 1rem 0;
text-align: center;
}
.social h3 {
border-bottom: solid 1px #b6e8ff;
font-weight: 400;
padding-bottom: 0.25rem;
}
.socialIcons {
font-size: 200%;
padding: 1rem 0;
}
.socialIcons a {
color: #223055;
padding: 0 0.5rem;
}
.socialIcons a:hover {
color: #ffc107;
}
.contactInfo {
padding-top: 0;
}
.contactInfo article {
border-top: solid 1px #b6e8ff;
padding: 1rem 0;
}
.contactInfo h4 {
font-weight: 400;
}
.contactInfo li {
font-weight: 300;
list-style-type: none;
}
.copy {
font-size: 70%;
font-weight: 300;
padding-top: 1rem;
}
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
<form class="form-inline">
<label for<"email">Email:</label>
<input type="email" id="email"
placeholder="Enter email" name="email">
<button class="button" type="submit">Submit
</button>
</form>
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.form-inline label {
margin: 5px 10px 5px 0;
}
.form-inline input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
.button {
background-color: #6dcff6;
border: none;
border-radius: 28px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
@media (max-width: 700px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}