@extends('front.layouts.app')
@section('content')
<div class="newsletter-wraper">
    <div class="container-fluid newsletter-head">
        <div class="banner mx-sm-5">
            <div class="container">
                <nav class="pt-3" style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                      <li class="breadcrumb-item color-white"><a href="#">Home</a></li>
                      <li class="breadcrumb-item color-white"><a href="#">Publication</a></li>
                      <li class="breadcrumb-item color-white"><a href="#">Newsletter</a></li>
                    </ol>
                </nav>
                <div class="pt-sm-4">
                    <h1 class="mt-5">Newsletter</h1>
                    <p class="text-white">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid newsletter-body mt-5 px-md-5">
        <h1 class="pb-3 fw-bold">NEWS LETTERS</h1>

        <div class="row mb-5">
            <div class="col-xl-8 col-lg-12">
                <div class="row newsletter-card">
                    <div class="col-lg-4 col-md-6 col-sm-6 col-12 p-sm-2">
                        <div class="newsletter-box">
                            <img src="{{asset('front/images/new-giu/newsletter/thumb.jpg')}}" height="500" alt="">
                            <button type="button" class="download-button text-dark rounded-pill btn fs-5 px-4 fw-bold border-black btn-light">Download</button>
                            <p class="fw-bold fs-3 text-white py-3">
                                Headline Text
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-6 col-12 p-sm-2">
                        <div class="newsletter-box">
                            <img src="{{asset('front/images/new-giu/newsletter/thumb.jpg')}}" height="500" alt="">
                            <button type="button" class="download-button text-dark rounded-pill btn fs-5 px-4 fw-bold border-black btn-light">Download</button>
                            <p class="fw-bold fs-3 text-white py-3">
                                Headline Text
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-6 col-12 p-sm-2">
                        <div class="newsletter-box">
                            <img src="{{asset('front/images/new-giu/newsletter/thumb.jpg')}}" height="500" alt="">
                            <button type="button" class="download-button text-dark rounded-pill btn fs-5 px-4 fw-bold border-black btn-light">Download</button>
                            <p class="fw-bold fs-3 text-white py-3">
                                Headline Text
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-6 col-12 p-sm-2">
                        <div class="newsletter-box">
                            <img src="{{asset('front/images/new-giu/newsletter/thumb.jpg')}}" height="500" alt="">
                            <button type="button" class="download-button text-dark rounded-pill btn fs-5 px-4 fw-bold border-black btn-light">Download</button>
                            <p class="fw-bold fs-3 text-white py-3">
                                Headline Text
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-6 col-12 p-sm-2">
                        <div class="newsletter-box">
                            <img src="{{asset('front/images/new-giu/newsletter/thumb.jpg')}}" height="500" alt="">
                            <button type="button" class="download-button text-dark rounded-pill btn fs-5 px-4 fw-bold border-black btn-light">Download</button>
                            <p class="fw-bold fs-3 text-white py-3">
                                Headline Text
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-6 col-12 p-sm-2">
                        <div class="newsletter-box">
                            <img src="{{asset('front/images/new-giu/newsletter/thumb.jpg')}}" height="500" alt="">
                            <button type="button" class="download-button text-dark rounded-pill btn fs-5 px-4 fw-bold border-black btn-light">Download</button>
                            <p class="fw-bold fs-3 text-white py-3">
                                Headline Text
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-12">
                <div class="row newsletter-sec-card py-2 px-lg-3">
                    <div class="col-lg-12 newsletter-sub">
                        <h1 class="text-white fs-2 fw-bold py-2 px-5 mb-4">Email Newsletter</h1>
                        <form action="">
                            <div class="row d-flex justify-content-center mx-1">
                                <div class="col-md-10 my-3">
                                    <input type="text" placeholder="Email Addres" class="form-control email-input">
                                </div>
                                <div class="col-md-10 my-3">
                                    <input type="text" placeholder="First Name" class="form-control name-input">
                                </div>
                                <div class="col-md-10 my-3">
                                    <input type="text" placeholder="Last Name" class="form-control name-input">
                                </div>
                                <div class="col-md-10 my-3">
                                    <button class="btn btn-success btn-sm">Subscribe</button>
                                </div>
                            </div>
                            
                        </form>
                    </div>
                    <div class="col-lg-12 newsletter-link">
                        <div class="row d-flex justify-content-center mx-1">
                            <div class="col-md-10 p-0">
                                <h1 class="fs-1 fw-bold  my-4">Related links</h1>
                                <p class="fs-4"><i class="fas fa-external-link-alt"></i> <span class="ps-2">News and Events</span></p>
                                <p class="fs-4"><i class="fas fa-external-link-alt"></i> <span class="ps-2">Student Societies</span></p>
                                <p class="fs-4"><i class="fas fa-external-link-alt"></i> <span class="ps-2">Co-Curricular Activities</span></p>
                            </div>
                            <div class="col-md-10 mb-5 p-0">
                                <h1 class="fs-1 fw-bold  my-4">Follow Us</h1>
                                <div class="col-md-10 mb-2 d-flex justify-content-between">
                                    <i class="fs-3 fab fa-instagram-square"></i>
                                    <i class="fs-3 text-dark fab fa-twitter"></i>
                                    <i class="fs-3 text-dark fab fa-facebook-f"></i>
                                    <i class="fs-3 text-dark fab fa-youtube"></i>
                                    <i class="fs-3 text-dark fab fa-linkedin-in"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>
@endsection
@push('js')
@endpush