Having encountered issues when combining two HTML pages, one for a navbar and the other for a contact form in my Django project. The resultant single page appears distorted as shown in the image below. I attempted to use sections but it does not seem to resolve the problem:/
Navbar HTML:
<nav>
<div class="logo">
<a class="h4" href="{% url 'home' %}">Name</a>
</div>
<ul class="nav-links">
<li><a href="{% url 'about' %}">About</a></li>
<li><a href="#">Name 2</a></li>
<li><a href="{% url 'contact' %}">Contact</a></li>
</ul>
</nav>
Contact Page HTML:
<div class="container">
<form class="shake" action="{% url 'contact' %}" role="form" method="post" id="contactForm"
name="contact-form" data-toggle="validator">
{% csrf_token %}
<h2>Let me know what you felt.</h2>
<div class="row100">
// Remaining contact form code here...
</div>
</form>
</div>
Combined HTML Code:
// Combined HTML code will be included here...
CSS of Navbar:
*{
// CSS for Navbar
}
// Rest of the CSS code for Navbar
CSS of Contact Page:
*{
// CSS for Contact Page
}
// Rest of the CSS code for Contact Page