Hey there, I have a question for you. If you check out my website and scroll all the way down, you will come across an email marketing search box.
What I want is to have this box always visible on the screen, fixed at the bottom so that it stays in view regardless of whether the user scrolls up or down. It's similar to a top nav bar but for the bottom of the screen. The tricky part is that while fixing the position at the top is straightforward with the `nav` element, it's a bit more complicated for the marketing search box as it's not within a navigation structure.
Below, you can find the code for this section. How can I achieve this?
/*--------Marketing Email-------*/
#marketing-email {
padding: 1em;
width: 100%;
text-align: center;
/*background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8));*/
background-color: #5398ff;
color: white;
border: 1px solid #1034A6;
}
#market-email {
padding: 0.5em;
width: 30%;
}
.marketing-btn {
background: #1034A6;
color: white;
padding: 0.5em;
border: 1px solid #fff;
}<section id="marketing-email">
<form class="marketing-email-form" method="post" action="#mailing_list_email_sent">
<div>
<label for="email"><b>Stay updated on our new courses and services by joining our mailing list</b></label><br/>
<input type="email" id="market-email" name="market-email" required placeholder="Email" />
<button type="submit" class="marketing-btn">Send</button>
</div>
</form>
</section>