index.html

{% extends 'base.html' %}

{% block content %} 


        <div class="row">

            <div class="col-2 bg-light">
                <h6 style="margin-top: 10px; text-align: center;">NEWS SOURCES</h6>
                {% for source in sources %}

                <div class="news-sources mt-3 p-2">
                    <a href="/source/{{ source.name }} " style="color: red; font-weight: lighter;" target="_self"> {{ source.name|upper }} </a>
                </div>  
                {% endfor %} 
         
            </div>
    
            <div class="col-10 pt-5" >
                <div class="headline-header">
                    <h3 style="letter-spacing: 3px; text-align: center;">TOP HEADLINES</h3>
                    <hr>
                </div>


    {% for headline in headlines %} 

                <div class="headliners mt-3 bg-light ">
                    <div class="headline-content m-5 p-3">
                        <h5 align="center">{{ headline.title }}</h5>
                        <small>Author: {{headline.author}}.</small>
                        <h6 class="date"><small>Published on: {{ headline.publishedAt }} </small></h6> 
                        <img src=" {{ headline.urlToImage }} " height="400px" width="100%"  alt="image" >
                        <p class="content mt-3">{{ headline.description }}</p>
                        <p>{{ headline.content}} <span></span>    <a href="{{ headline.url }}">Read more</a> </p>
                    </div>
                </div>
                <hr>
    {% endfor %}
            </div>
        </div>

{% endblock %}