index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width-device-width">
    <meta name="description" content="Articles and Blogs">
    <meta name="keywords" content="web design, fitness , meditation , professional, others">
    <meta name="author" content="Saif Ali">
    <title>Blogs| Welcome</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
<header>
  <div class="container" >
    <div id="branding">
      <h1><span class="highlight">Articles</span> and Blogs</h1>
        </div>
      <nav>
        <ul>
          <li class="current"><a href="index.html">Home</a></li>
          <li><a href="About.html">About</a></li>
          <li><a href="Services.html">Services</a></li>
          <li><a href="login.html">Login</a></li>
        </ul>
      </nav>
    </div>
</header>

  <section id="showcase">
    <div class="container">
      <h1>Publish your desired Articles</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique odio ac tortor consectetur, nec luctus ipsum mollis. Aenean id maximus lorem. </p>
    </div>
  </section>

      <section id="newsletter">
        <div class="container">
          <h1>Subscribe to our Blogs</h1>
          <form>
            <input type="email" placeholder="Enter Article Name....">
            <button type="submit" class="button_1">Search</button>
          </form>
        </div>
      </section>

    <section id="boxes">
<div class="container">
  <div class="box">
  <a href="fitness.html"target="_blank"><img src="./Images/fitness_PNG41.png"></a>
    <h3>Fitness Blogs</h3>
    <p>To get started, I want to start with the idea of the all-rounder among the fitness blogs.</p>
  </div>
    <div class="box">

  <a href="meditation.html"target="_blank">
    <img src="./Images/Meditation-PNG-Image.png">
    </a>

      <h3>Meditation</h3>
      <p>If you’re brand new to meditation, this is a great place to start.</p>

      </div>
      <div class="box">
<a href="profession.html"target="_blank">
        <img src="./Images/rb-tlds-profession.png" alt="">
</a>
        <h3>Professions</h3>
        <p>The definition of professionalism is widespread and unique to whomever you may ask about it.</p>
        </div>
  </div>

    </section>

<footer>
  <p>Tech-Science Blog, Copyright &copy; 2019</p>
</footer>


</body>
</html>