The issue arises when the contact form overlaps with the footer. When testing the code on Codepen, the styles are correctly linked and working for everything except the contact form. I have attempted adjusting the padding, bottom position, etc., but nothing seems to resolve the problem.
Does anyone notice any errors in the code? Any suggestions on how to rectify this issue?
<!-- second container-->
<div class="container-fluid" id="jumbotron2">
<div class="row">
<div class="col-lg-12">
<div class="card-deck">
<div class="card text-center mb-3">
<div class="card-body text-dark">
<h1 class="card-title text-warning">Web Services</h1><br>
<p class="card-text"> I make custom websites tailored to your needs for
the following:
<ul class="text-left">
<li>E-commerce</li>
<li>Social media sites</li>
<li>Blog sites</li>
<li>Online business brochures</li>
<li>Self-employed and</li>
<li>Companies</li>
</ul>
<!--
<a href="website.html" role="button"class="btn btn-warning">more information</a
-->
</div>
</div>
<div class="card text-center mb-3">
<div class="card-body text-dark">
<h2 class="card-title text-warning">IT distance support</h2><br>
<p class="card-text">
Virtual machines and servers, active directory, windows server 2012
<ul class="text-left">
<li>Create & manage user accounts</li>
<li>Group policy management</li>
<li>Install and configure</li>
<li>Manager server roles</li>
<li>Manage server shares</li>
</ul>
<br><br>
<!--
<a href="re-design.html" role="button" class="btn btn-warning">more information</a>
-->
</div>
</div>
<div class="card text-center mb-3">
<div class="card-body text-dark">
<h2 class="card-title text-warning">Web Hosting</h2><br>
<p class="card-text">
Hosting your website live on the internet
<br>
<br>
<ul class="text-left">
<li>Reasonably priced hosting packages</li>
<li>guaranteed 99% uptime</li>
<li>fast page loading</li>
<li>unlimited storage</li>
</ul>
<!--
<a href="hosting.html" role="button" class="btn btn-warning">more
information</a>
-->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- contact form -->
<div class="container" id="contact">
<script src='https://www.google.com/recaptcha/api.js'>
</script>
<div class="form-row">
<div class="col-md-6 col-md-offset-3">
<h2>Contact me for a free quote</h2>
<p> Send your message in the form below and i will get back
to you as soon as possible. </p>
<br>
<p>Choose from the following :</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="inlineRadioOptions1" id="inlineRadio1" value="">
<label class="form-check-label"
for="inlineRadio1">New Website</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="inlineRadioOptions1" id="inlineRadio2" value="">
<label class="form-check-label"
for="inlineRadio2">IT Support</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="inlineRadioOptions1" id="inlineRadio3" value="">
<label class="form-check-label"
for="inlineRadio3">Website Hosting</label>
</div>
<form role="form" method="post">
<div class="form-group">
<label for="name"> Name:</label>
<input type="text" class="form-control" id="name"
name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="name"> address:</label>
<input type="text" class="form-control" id="address"
name="address" required maxlength="50">
</div>
<div class="form-group">
<label for="name"> phone:</label>
<input type="text" class="form-control" id="phone"
name="phone" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Email:</label>
<input type="email" class="form-control" id="email"
name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="name"> Message:</label> <!--removed
type="textarea"-->
<textarea class="form-control" name="message"
id="message" placeholder="Your Message Here" maxlength="6000" rows="7">
</textarea>
</div>
<div class="g-recaptcha" data-
sitekey=""></div>
<button type="submit" class="btn btn-lg btn-warning
pull-right" id="btnContactUs">Post It! →</button>
</form>
<div id="success_message" style="width:100%; height:100%;
display:none; "> <h3>Sent your message successfully!</h3> </div>
<div id="error_message" style="width:100%; height:100%;
display:none; "> <h3>Error</h3> Sorry there was an error sending your
form.
</div>
</div>
</div>
</div>
#jumbotron {
padding-top: 50px;
height: 100px;
}
#jumbotron2 {
padding-top: 150px;
height: 300px;
margin-bottom: 250px;
}
#contact {
padding-top: 250px;
height: 500px;
margin-bottom: 250px;
}