<%@ page errorPage="/WEB-INF/erreur/erreur.jsp" %>
<!DOCTYPE html>
<html>
    <head>
        <title><fmt:message key="PBlog"/></title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="OneTech shop project">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
        <link href="plugins/fontawesome-free-5.0.1/css/fontawesome-all.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
        <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
        <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
        <link rel="stylesheet" type="text/css" href="styles/blog_styles.css">
        <link rel="stylesheet" type="text/css" href="styles/blog_responsive.css">
    </head>
    <body>
        <div class="super_container">
            <jsp:include page="jspf/header2.jsp"/>

            <!-- Home -->

            <div class="home">
                <div class="home_background parallax-window" data-parallax="scroll" data-image-src="images/shop_background.jpg"></div>
                <div class="home_overlay"></div>
                <div class="home_content d-flex flex-column align-items-center justify-content-center">
                    <h2 class="home_title">Technological Blog</h2>
                </div>
            </div>

            <!-- Blog -->

            <div class="blog">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="blog_posts d-flex flex-row align-items-start justify-content-between">

                                <!-- Blog post -->
                                <div class="blog_post">
                                    <div class="blog_image" style="background-image:url(images/blog_1.jpg)"></div>
                                    <div class="blog_text">Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada.</div>
                                    <div class="blog_button"><a href="blog_single.html">Continue Reading</a></div>
                                </div>

                                <!-- Blog post -->
                                <div class="blog_post">
                                    <div class="blog_image" style="background-image:url(images/blog_2.jpg)"></div>
                                    <div class="blog_text">Cras lobortis nisl nec libero pulvinar lacinia. Nunc sed ullamcorper massa.</div>
                                    <div class="blog_button"><a href="blog_single.html">Continue Reading</a></div>
                                </div>

                                <!-- Blog post -->
                                <div class="blog_post">
                                    <div class="blog_image" style="background-image:url(images/blog_3.jpg)"></div>
                                    <div class="blog_text">Fusce tincidunt nulla magna, ac euismod quam viverra id. Fusce eget metus feugiat</div>
                                    <div class="blog_button"><a href="blog_single.html">Continue Reading</a></div>
                                </div>

                                <!-- Blog post -->
                                <div class="blog_post">
                                    <div class="blog_image" style="background-image:url(images/blog_4.jpg)"></div>
                                    <div class="blog_text">Etiam leo nibh, consectetur nec orci et, tempus tempus ex</div>
                                    <div class="blog_button"><a href="blog_single.html">Continue Reading</a></div>
                                </div>

                                <!-- Blog post -->
                                <div class="blog_post">
                                    <div class="blog_image" style="background-image:url(images/blog_5.jpg)"></div>
                                    <div class="blog_text">Sed viverra pellentesque dictum. Aenean ligula justo, viverra in lacus porttitor</div>
                                    <div class="blog_button"><a href="blog_single.html">Continue Reading</a></div>
                                </div>

                                <!-- Blog post -->
                                <div class="blog_post">
                                    <div class="blog_image" style="background-image:url(images/blog_6.jpg)"></div>
                                    <div class="blog_text">In nisl tortor, tempus nec ex vitae, bibendum rutrum mi. Integer tempus nisi</div>
                                    <div class="blog_button"><a href="blog_single.html">Continue Reading</a></div>
                                </div>

                                <!-- Blog post -->
                                <div class="blog_post">
                                    <div class="blog_image" style="background-image:url(images/blog_7.jpg)"></div>
                                    <div class="blog_text">Make Life Easier on Yourself by Accepting ?Good Enough.? Don?t Pursue Perfection.</div>
                                    <div class="blog_button"><a href="blog_single.html">Continue Reading</a></div>
                                </div>

                                <!-- Blog post -->
                                <div class="blog_post">
                                    <div class="blog_image" style="background-image:url(images/blog_8.jpg)"></div>
                                    <div class="blog_text">13 Reasons You Are Failing At Life And Becoming A Bum</div>
                                    <div class="blog_button"><a href="blog_single.html">Continue Reading</a></div>
                                </div>

                                <!-- Blog post -->
                                <div class="blog_post">
                                    <div class="blog_image" style="background-image:url(images/blog_9.jpg)"></div>
                                    <div class="blog_text">4 Steps to Getting Anything You Want In Life</div>
                                    <div class="blog_button"><a href="blog_single.html">Continue Reading</a></div>
                                </div>

                            </div>
                        </div>

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

                <!-- Newsletter -->
                <jsp:include page="jspf/newsletter.jsp"/>
                <!-- Footer -->
                <jsp:include page="jspf/footer.jsp"/>
                <script src="js/jquery-3.3.1.min.js"></script>
                <script src="styles/bootstrap4/popper.js"></script>
                <script src="styles/bootstrap4/bootstrap.min.js"></script>
                <script src="plugins/greensock/TweenMax.min.js"></script>
                <script src="plugins/greensock/TimelineMax.min.js"></script>
                <script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
                <script src="plugins/greensock/animation.gsap.min.js"></script>
                <script src="plugins/greensock/ScrollToPlugin.min.js"></script>
                <script src="plugins/easing/easing.js"></script>
                <script src="js/cart_custom.js"></script>
    </body>

</html>