index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="description" content="This is where your description goes" />
    <meta name="keywords" content="one, two, three" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>pic of the day by nasa api</title>

    <!-- external CSS link -->
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
  <!-- header starts -->
      <header id="header">
      <h1>NASA Pic the Day API</h1>
        </header>
        <!-- header ends -->
    <!-- hero sections starts -->
    <section class="hero-content">
      <section class="half-hero">
        <img src="http://placekitten.com/300/200" alt="" />
        <!-- if video was available  -->
        <iframe src="" frameborder="0"></iframe>
      </section>
      <!-- text content -->
      <section class="half-hero">
        <h3 style="text-align: center">Explaination</h3>
      </section>
    </section>
<!-- hero content completed-->
	  
    <!-- getting input from user -->
    <section class="input-data">
      <h2>Pick a date  for Pic of the day</h2>
      <input type="date" name="input-date">
      <button type="button" name="button">Get Me a pic</button>
    </section>

 
	  <script type="text/javascript" src="js/main.js"></script>
	
	</body>
</html>