{% extends 'website/base/base.html' %}
{% block title %} Newsletter {% endblock %}
{% block meta_description %}Explore the latest news and events from our newsletter and find out the trending updates. Click to read more.{% endblock %}

{% block stylesheets %}




<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-- Stylesheets -->
<link href="../static/website/assets/css/font-awesome-all.css" rel="stylesheet">
<link href="../static/website/assets/css/flaticon.css" rel="stylesheet">
<link href="../static/website/assets/css/owl.css" rel="stylesheet">
<link href="../static/website/assets/css/bootstrap.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="../static/website/assets/css/animate.css" rel="stylesheet">
<link href="../static/website/assets/css/aos.css" rel="stylesheet">
<link href="../static/website/assets/css/nice-select.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery-ui.css" rel="stylesheet">
<link href="../static/website/assets/css/elpath.css" rel="stylesheet">
<link href="../static/website/assets/css/color.css" id="jssDefault" rel="stylesheet">
<link href="../static/website/assets/css/rtl.css" rel="stylesheet">
<link href="../static/website/assets/css/style.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/page-title.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/news.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/sidebar.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/cta.css" rel="stylesheet">
<link href="../static/website/assets/css/responsive.css" rel="stylesheet">

<style>
    body{
            background-image: url('../static/website/assets/images/entire-body.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .news-block-two .image-box img {
    width: 100%; /* Ensures the image fills the width of the container */
    height: 200px; /* Adjust to your desired height */
    object-fit: cover; /* Ensures the image scales and crops without distortion */
}

.news-block-two h3 a {
    display: block;         /* Ensures the element behaves as a block for width constraints */
    width: 100%;            /* Optional, depending on the layout */
    white-space: nowrap;    /* Prevents text from wrapping to the next line */
    overflow: hidden;       /* Hides any overflowing text */
    text-overflow: ellipsis; /* Adds the ellipsis (...) for overflowing text */
    max-width: 100%;        /* Ensures it adapts to the container */
}
</style>

{% endblock stylesheets %}

{% block content %}







    



        




        <!-- sidebar-page-container -->
        <!-- <section class="sidebar-page-container pt_150 pb_150">
            <div class="auto-container">
                <div class="row clearfix">
                    <div class="col-lg-12 col-md-12 col-sm-12 content-side">
                        <div class="blog-standard-content">
                            {% for newsletter in newsletters %}
                            <div class="news-block-two">
                                <div class="inner-box">
                                    <figure class="image-box"><a href="{% url 'news_details' newsletter.id %}"><img src="{{ newsletter.newsletter_thumbnail.url }}" alt="{{ newsletter.title }}"></a></figure>
                                    <div style="background: linear-gradient(25deg, rgba(214, 91, 129, 0.9) 0%, rgba(107, 145, 199, 0.9) 100%);"  class="lower-content">
                                        <div style="color: #060606;"  class="date-box">{{ newsletter.date|date:"d" }}<span style="color: #060606;" >{{ newsletter.date|date:"M" }}</span></div>
                                        
                                        <h2><a href="{% url 'news_details' newsletter.id %}">{{ newsletter.title }}</a></h2>
                                       
                                        <div class="link mt_25">
                                            <a href="{% url 'news_details' newsletter.id %}">Read More<i class="icon-14"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </section> -->
        <!-- sidebar-page-container end -->



        <section class="news-style-two pt_150 pb_120">
            <div class="auto-container">
                <div class="row clearfix">
                    {% for newsletter in newsletters %}
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        
                        <div class="news-block-two">
                            <div class="inner-box">
                                <figure class="image-box"><a href="{% url 'news_details' newsletter.id %}"><img src="{{ newsletter.newsletter_thumbnail.url }}" alt="{{ newsletter.title }}"></a></figure>
                                <div style="background: linear-gradient(25deg, rgba(214, 91, 129, 0.9) 0%, rgba(107, 145, 199, 0.9) 100%);" class="lower-content">
                                    <div style="color: #060606;" class="date-box">{{ newsletter.date|date:"d" }}<span style="color: #060606;">{{ newsletter.date|date:"M" }}</span></div>
                                   
                                    <h3>
                                        <a href="{% url 'news_details' newsletter.id %}">{{ newsletter.title }}</a>
                                    </h3>
                                    <!-- <p>With our AI your the can makes the is never before seen images fores New Year</p> -->
                                    <div class="link mt_25">
                                        <a href="{% url 'news_details' newsletter.id %}">Read More<i class="icon-14"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>


      


    {% block javascripts %}
    <!-- jequery plugins -->
    <script src="../static/website/assets/js/jquery.js"></script>
    <script src="../static/website/assets/js/bootstrap.min.js"></script>
    <script src="../static/website/assets/js/owl.js"></script>
    <script src="../static/website/assets/js/wow.js"></script>
    <script src="../static/website/assets/js/jquery.fancybox.js"></script>
    <script src="../static/website/assets/js/appear.js"></script>
    <script src="../static/website/assets/js/isotope.js"></script>
    <script src="../static/website/assets/js/jquery.nice-select.min.js"></script>
    <script src="../static/website/assets/js/aos.js"></script>
    <script src="../static/website/assets/js/jquery-ui.js"></script>
    <script src="../static/website/assets/js/product-filter.js"></script>
    <script src="../static/website/assets/js/bxslider.js"></script>
    <script src="../static/website/assets/js/jquery.bootstrap-touchspin.js"></script>

    <!-- main-js -->
    <script src="../static/website/assets/js/script.js"></script>

    {% endblock javascripts %}
    {% endblock content %}