Blog.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="agancy ">
    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
    <!-- bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">

    <title>blog</title>
    <!-- custom css -->
    <link rel="stylesheet" href="assets/css/blog.css">
</head>

<body>

    <!-- header >> nav  -->
    <header id="navBar">
        <nav id="nav" class=" align-items-center  ">
            <div class="logo">
                <a class="navbar--logo fw-bolder fs-5 mainColor" href="#">Navbar</a>
            </div>
            <div id="LinksList" class="Links--list ">
                <a class="link" href="index.html">Home</a>
                <a class="link" href="about.html">About us</a>
                <a class="link" href="services.html">Services</a>
                <a class="link" href="Blog.html">Blog</a>
                <a class="buttom mainBg text-white shadow-none" href="Contact.html">Contact us</a>

            </div>

            <div id="toggleMenu" class="toggle-menu">
                <span class="rounded-5"></span>
                <span class="rounded-5"></span>
                <span class="rounded-5"></span>
            </div>
        </nav>

    </header>

    <!-- main section  -->
    <section id="main" class="main py-5">
        <div class="container text-center py-5 ">
            <div class=" container-fluid">
                <h4 class="  main--h4"> Latest news</h4>
                <h3 class="main--h3 mainColor"> Updates</h3>
                <p>Lorem Ipsum is simply dummy text of the printing .</p>
                <input class="input-grey-rounded mt-2  " type="text" placeholder="Search">
            </div>

            <div class="mt-2 py-3">
                <ul class=" d-flex  flex-wrap justify-content-center ">
                    <li class="item my-1 mx-4 small"><a href="#">Lorem ipsum </a></li>
                    <li class="item my-1 mx-4 small"><a href="#">Lorem ipsum </a></li>
                    <li class="item my-1 mx-4 small"><a href="#">Lorem ipsum </a></li>
                    <li class="item my-1 mx-4 small"><a href="#">Lorem ipsum </a></li>
                    <li class="item my-1 mx-4 small"><a href="#">Lorem ipsum </a></li>

                </ul>
            </div>
        </div>
    </section>
    <!-- //main section end  -->


    <!-- section 2 -->
    <section class="section2 ">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 ">
                    <img src="assets/imges/blogSection.svg" class="w-100" loading="lazy" alt="blog">
                </div>
                <div class="col-lg-6 ">
                    <h3 class="sec2--h3">Lorem Ipsum is simply dummy text of the printing.</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the .</p>
                    <div class=" d-flex align-items-center mt-3">
                        <div class=" rounded-circle me-3">
                            <img src="assets/imges/smallRonded.svg" class="w-100" loading="lazy" alt="testSeo">
                        </div>
                        <div class="d-flex flex-column">
                            <h6>Name here</h6>
                            <p class="text-muted">20.12.2020</p>
                        </div>
                        <a href="#" class="ms-auto">Read More</a>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!-- //section 2 end -->


    <!-- section 3 -->

    <section class="mt-5">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-lg-4 col-md-6 mt-4 py-4">
                    <img src="assets/imges/blog1.svg" class="sec3--ronded w-100" loading="lazy" alt="testSeo">
                    <h3 class="sec3--h3">Lorem Ipsum is simply dummy text of the printing.</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the .</p>
                    <div class=" d-flex align-items-center mt-3">
                        <div class=" rounded-circle  me-3">
                            <img src="assets/imges/smallRonded.svg" class="w-100 " loading="lazy" alt="testSeo">
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="m-0">Name here</h6>
                            <p class="text-muted">20.12.2020</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 py-4">
                    <img src="assets/imges/blog2.svg" class="sec3--ronded w-100" loading="lazy" alt="testSeo">
                    <h3 class="sec3--h3">Lorem Ipsum is simply dummy text of the printing.</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the .</p>
                    <div class=" d-flex align-items-center mt-3">
                        <div class=" rounded-circle  me-3">
                            <img src="assets/imges/smallRonded.svg" class="w-100 " loading="lazy" alt="testSeo">
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="m-0">Name here</h6>
                            <p class="text-muted">20.12.2020</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 py-4">
                    <img src="assets/imges/blog3.svg" class="sec3--ronded w-100" loading="lazy" alt="testSeo">
                    <h3 class="sec3--h3">Lorem Ipsum is simply dummy text of the printing.</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the .</p>
                    <div class=" d-flex align-items-center mt-3">
                        <div class=" rounded-circle  me-3">
                            <img src="assets/imges/smallRonded.svg" class="w-100 " loading="lazy" alt="testSeo">
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="m-0">Name here</h6>
                            <p class="text-muted">20.12.2020</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 py-4">
                    <img src="assets/imges/blog1.svg" class="sec3--ronded w-100" loading="lazy" alt="testSeo">
                    <h3 class="sec3--h3">Lorem Ipsum is simply dummy text of the printing.</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the .</p>
                    <div class=" d-flex align-items-center mt-3">
                        <div class=" rounded-circle  me-3">
                            <img src="assets/imges/smallRonded.svg" class="w-100 " loading="lazy" alt="testSeo">
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="m-0">Name here</h6>
                            <p class="text-muted">20.12.2020</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 py-4">
                    <img src="assets/imges/blog2.svg" class="sec3--ronded w-100" loading="lazy" alt="testSeo">
                    <h3 class="sec3--h3">Lorem Ipsum is simply dummy text of the printing.</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the .</p>
                    <div class=" d-flex align-items-center mt-3">
                        <div class=" rounded-circle  me-3">
                            <img src="assets/imges/smallRonded.svg" class="w-100 " loading="lazy" alt="testSeo">
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="m-0">Name here</h6>
                            <p class="text-muted">20.12.2020</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mt-4 py-4">
                    <img src="assets/imges/blog3.svg" class="sec3--ronded w-100" loading="lazy" alt="testSeo">
                    <h3 class="sec3--h3">Lorem Ipsum is simply dummy text of the printing.</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the .</p>
                    <div class=" d-flex align-items-center mt-3">
                        <div class=" rounded-circle  me-3">
                            <img src="assets/imges/smallRonded.svg" class="w-100 " loading="lazy" alt="testSeo">
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="m-0">Name here</h6>
                            <p class="text-muted">20.12.2020</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //section 3 end-->


    <!-- footer -->
    <footer>
        <div class="footer py-5">
            <div class="container mt-4 text-center py-5 d-flex flex-column align-items-center">
                <h4 class="footer--tilte" data-aos="zoom-in" data-aos-duration="600">Lorem Ipsum is simply dummy <br>
                    text of the printing. </h4>
                <div class=" subscribe--foot d-flex py-3 justify-content-center align-items-center w-50 ">
                    <input type="text" class="footer--input me-2 py-2 px-2  w-100  rounded-3  "
                        placeholder="Enter your email" data-aos="zoom-in" data-aos-duration="700">
                    <a href=" " class="buttom bg-black text-white py-1 px-2  " data-aos="zoom-in"
                        data-aos-duration="750">subscribe</a>
                </div>
            </div>
        </div>
        <div class="footer--logo">
            <div class="container py-5">
                <div class="row  justify-content-between">
                    <div class="col-md-4">
                        <div class="">
                            <a href="#" class="fw-bold mainColor ">LOGO</a>
                            <p class="footer--p">Lorem Ipsum is simply dummy text of the printing and typesetting
                                industry. </p>
                            <span>@Lorem</span>
                        </div>

                    </div>
                    <div class="col-md-2">
                        <h5 class="About--foot">About us</h5>
                        <ul>
                            <li>Portfolio </li>
                            <li>Careers </li>
                            <li>Contact</li>
                        </ul>

                    </div>
                    <div class="col-md-5">
                        <h5 class="">Contact us</h5>
                        <p class="Contact--p">Lorem Ipsum is simply dummy text <br> of the printing and typesetting
                            industry. </p>
                        <div class="social  d-flex justify-content-between align-items-center mt-1">
                            <p>+908 89097 890</p>
                            <div class="iconsohial">
                                <a href="#"><img src="assets/imges/insta.svg" loading="lazy" alt="intgram"></a>
                                <a href="#"><img src="assets/imges/twitte.svg" loading="lazy" alt="twitteer"></a>
                                <a href="#"><img src="assets/imges/facebook.svg" loading="lazy" alt="facebooke"></a>
                                <a href="#"><img src="assets/imges/linked.svg" loading="lazy" alt="linkedin"></a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="Copyright text-center py-3 ">
            <p class=" small">Copyright ® 2021 Lorem All rights Rcerved</p>
        </div>
    </footer>
    <!-- // footer end-->

    <!-- loding screen  -->
    <div id="loading" class="lodingsscren ">
        <div class="boxes">
            <div class="box ">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
    <!-- scroll btn  -->
    <div id="scrollTopBtn">
        <img src="assets/imges/arrowUp.svg" loading="lazy" alt="arrowUp">
    </div>

    <!-- jquery -->
    <script src="assets/scripts/jquery.js"></script>

    <!-- bootstrap -->
    <script src="assets/scripts/bootstrap.bundle.min.js"></script>
    <!-- custom js -->
    <script src="assets/scripts/script.js"></script>
</body>

</html>