{% extends 'base.html' %}

{% block title %}Home{% endblock title %}
{% block homeactive %}active{% endblock homeactive %}
{% block body %} 
<div class="container my-3">
<div class="jumbotron">
  <h1 class="display-4">welcome to coders blog</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="/blog" role="button">go to blog</a>
  </p>
</div></div>

<div class="container">

    <h2>popular blogpost</h2>
      <div class="row no-gutter border rounded overflow-hidden flex-md-row my-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-primary">World</strong>
          <h3 class="mb-0">Featured post</h3>
          <div class="mb-1 text-muted">Nov 12</div>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="stretched-link">Continue reading</a>
        </div>
        <div class="col-auto d-none d-lg-block">
         

        </div>
      </div>
   
</div>


{% endblock body %}