title: where to put modal login in html5
body: <p>i am entirely new to web development. i have an index page and a login page. i want to incorporate the login in the index page as a modal login page. please how would i do it. </p>
  
  <hr>
  
  <p>here are the codes</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;title&gt;Ascend &amp;mdash; be loved&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;div id="mypage"&gt;
  &lt;header id="myheader" role="banner"&gt;
      &lt;div class="container"&gt;
          &lt;div class="header-inner"&gt;
              &lt;h1&gt;&lt;a href="#"&gt;Ascend&lt;span&gt;.&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;
              &lt;nav role="navigation"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="products.html"&gt;Products&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="pricing.html"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
  
  
                      &lt;!-- i want to inert the modal login button here--&gt;
  
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;div&gt;       
  </code></pre>
  
  <p>
  </p>
  
  <p>Here is the sample form i want to convert to modal form. the button to call the form should be placed on the header eg "login here"
  and this form should be placed within the html5 codes such that when i click the "login here" button the modal form below will appear. </p>
  
  <pre><code>&lt;a href="#openModal"&gt;Open Modal&lt;/a&gt;
  
  &lt;div id="openModal" class="modalDialog"&gt;
  &lt;div&gt;
      &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
      &lt;h2&gt;Modal Box&lt;/h2&gt;
      &lt;p&gt;This is a sample modal box that can be created using the powers of 
  CSS3.&lt;/p&gt;
      &lt;p&gt;You could do a lot of things here like have a pop-up ad that shows 
  when your website loads, or create a login/register form for users.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>thanks</p>