Close button notification Bar HELP

[Nicolas Patrouillaul]

hi, 

I need your help ! I created a notification bar to collect emails on my website, but i don't know how to add a close button and make it work. CAN SOMEONE HELP ME?Please

 

This is my code : 

 

{if $page_name == index}

 

<div class="bar" style=" position: absolute;  top: 0; width: 100%; background: #f5f3f3; text-align: center; padding: 5px;">

  <div class="signup" style="font-family: Helvetica; text-transform: uppercase; letter-spacing: 1px; line-height: 200% !important; text-align: center;

"><span style="font-weight: bold;">Sign Up! </span><br> <span style="font-size:8px;">FOR OUR NEWSLETTER AND GET 10% OFF YOUR FIRST PURCHASE.</span></div>

  <form action="//Name.us4.list-manage.com/subscribe/post?u=205933f37fded02354f296fb4&id=5cef940122" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address I Votre email" required="" style="width:25%;background-color:#000;text-align:center;text-transform:uppercase;font-size:11px;height:35px;border-radius:0px;border:0px;color:#ffffff;font-family:'Gotham A','Gotham B',sans-serif;}

}">

  <input type="submit" class="input btn" value="OK" style="

  border: 0;

  padding: 10px;">

 

</div>

</form>

{/if}

Sorry i'm not the best in html or Java, i try my best ^^. 

 

Thanks, 

 

Nicolas

Edited January 3, 2017 by Nicolas Patrouillaul (see edit history)