index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>وبلاگ نقطه صفر</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
        <!-- <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet"
            type="text/css" /> -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="icons/bootstrap-icons.css">
        <link rel="stylesheet" href="css/reboot.css">

    </head>

    <body class="bg-dark" id="top">

        <!--message-->

        <div class="bg-warning">
            <div class="alert alert-warning alert-dismissible fade show text-center mb-0" role="alert">
                <strong>20 درصد تخفیف</strong> برای عضویت بخش ویژه
                <a href="#" class="text-decoration-none text-white btn btn-primary">عضویت</a>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>

        <div class="container g-4">
            <div class="row">
                <div class="py-2 bg-dark text-white mb-2">
                    <ul class="nav">
                        <li class="nav-item pe-2 py-2"><span class="text-warning">تلفن: </span>09147509730</li>
                        <li class="nav-item pe-2 py-2"><span class="text-warning">ایمیل: </span> info@test.com</li>
                        <li class="nav-item px-2 py-2"><a href="#"><i class="bi bi-instagram text-warning"></i></a></li>
                        <li class="nav-item px-2 py-2"><a href="#"><i class="bi bi-telegram text-warning"></i></a></li>
                        <li class="nav-item px-2 py-2"><a href="#"><i class="bi bi-facebook text-warning"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--nav-->
        <div class="bg-dark py-2 shadow sticky-top">
            <div class="container bg-dark">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <div class="container-fluid">
                        <a class="navbar-brand text-warning" href="index.html">
                            <h1>وبلاگ نقطه صفر</h1>
                        </a>
                        <button class="navbar-toggler bg-danger text-dark" type="button" data-bs-toggle="offcanvas"
                            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="offcanvas offcanvas-start bg-dark ps-5" id="navbarSupportedContent">
                            <div class="offcanvas-header">
                                <h5 class="offcanvas-title" id="offcanvasNavbarLabel">منو</h5>
                                <button type="button" class="btn-close  bg-danger" data-bs-dismiss="offcanvas"
                                    aria-label="Close"></button>
                            </div>
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link active  text-white" aria-current="page"
                                        href="index.html">خانه</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown"
                                        role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        بلاگ
                                    </a>
                                    <ul class="dropdown-menu text-white bg-dark text-center"
                                        aria-labelledby="navbarDropdown">
                                        <li><a class="dropdown-item text-white" href="blog-single.html">جزئیات بلاگ</a>
                                        </li>
                                        <li><a class="dropdown-item text-white" href="blog-list.html">لیست بلاگ ها</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link  text-white" aria-current="page" href="contact.html">تماس با
                                        ما</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link  text-white" aria-current="page" href="about.html">درباره ما</a>
                                </li>
                                <div class="ps-5 d-flex">
                                    <a href="cart.html" class="btn btn-dark ms-1 shadow text-warning"
                                        data-bs-toggle="tooltip" data-bs-placement="top" title="سبد خرید"><i
                                            class="bi bi-cart"></i></a>
                                    <a href="wishlist.html" class="btn btn-dark ms-1 shadow text-danger"
                                        data-bs-toggle="tooltip" data-bs-placement="top" title="لیست علاقه مندی ها"><i
                                            class="bi bi-heart-fill"></i></a><br>
                                    <a href="login.html" class="btn btn-dark ms-1 shadow login">ورود</a>
                                    <a href="register.html" class="btn btn-dark ms-1 shadow register">ثبت نام</a>
                                </div>
                            </ul>
                            <div class="pt-4 d-lg-none">
                                <h2 class="text-info text-center pb-2">وبلاگ نقطه صفر</h2>
                                <p class="lead text-white text-center px-5">جدید ترین اخبار در وبلاگ
                                    تیم ما در تلاش است تا جدید ترین اخبار موجود در دنیا را ، در اختیار شما عزیزان قرار
                                    دهد .
                                </p>
                            </div>
                        </div>
                    </div>
                </nav>
                <div class="py-3">
                    <form class="d-flex">
                        <input class="form-control me-2 rounded-0" type="search" placeholder="جستوجو کن ..."
                            aria-label="Search">
                        <button class="btn btn-outline-success rounded-0" type="submit">جستوجو</button>
                    </form>
                </div>
            </div>
        </div>
        <!--slider-->
        <div class="py-2 g-4">
            <div class="container">
                <div class="row">
                    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-indicators">
                            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
                                class="active" aria-current="true" aria-label="Slide 1"></button>
                            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                                aria-label="Slide 2"></button>
                            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                                aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="img/2.svg" class="d-block w-100" width="100" height="500" alt="...">
                                <div class="carousel-caption bg-dark opacity-75 d-none d-md-block">
                                    <a href="#" class="text-decoration-none text-warning">
                                        <h5 class="text-warnings">اولین اسلاید</h5>
                                    </a>
                                    <p class="text-white">همه چیز در باره اسلاید اول.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img src="img/4.svg" class="d-block w-100" width="100" height="500" alt="...">
                                <div class="carousel-caption bg-dark opacity-75 d-none d-md-block">
                                    <a href="#" class="text-decoration-none text-warning">
                                        <h5 class="text-warning">اسلاید دوم</h5>
                                    </a>
                                    <p class="text-white">همه چیز در باره اسلاید دوم.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img src="img/5.svg" class="d-block w-100" width="100" height="500" alt="...">
                                <div class="carousel-caption bg-dark opacity-75 d-none d-md-block">
                                    <a href="#" class="text-decoration-none text-warning">
                                        <h5 class="text-warning">اسلاید سوم</h5>
                                    </a>
                                    <p class="text-white">همه چیز در باره اسلاید اول.</p>
                                </div>
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                            data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                            data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!--last posts-->
        <div class="py-2 g-5 bg-dark">
            <div class="container">
                <a href="#" class="text-decoration-none">
                    <h2 class="text-white py-3">آخرین پست ها<i class="bi bi-arrow-up-left-square pe-2"></i></h2>
                </a>
                <div class="row">
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card post-section shadow border-0" style="width: 18rem;">
                            <a href="#"><img src="img/1.svg" class="card-img-top" alt="..."></a>
                            <div class="card-body bg-dark text-white">
                                <a href="#" class="text-decoration-none">
                                    <h5 class="card-title text-warning">عنوان پست</h5>
                                </a>
                                <p class="card-text">در این پست قرار هست درباره عنوان پست صحبت کنیم</p>
                                <a href="#" class="btn btn-success"><i class="bi bi-arrow-left ps-2"></i>بیشتر !</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card post-section shadow border-0" style="width: 18rem;">
                            <a href="#"><img src="img/1.svg" class="card-img-top" alt="..."></a>
                            <div class="card-body bg-dark text-white">
                                <a href="#" class="text-decoration-none">
                                    <h5 class="card-title text-warning">عنوان پست</h5>
                                </a>
                                <p class="card-text">در این پست قرار هست درباره عنوان پست صحبت کنیم</p>
                                <a href="#" class="btn btn-success"><i class="bi bi-arrow-left ps-2"></i>بیشتر !</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card post-section shadow border-0" style="width: 18rem;">
                            <a href="#"><img src="img/1.svg" class="card-img-top" alt="..."></a>
                            <div class="card-body bg-dark text-white">
                                <a href="#" class="text-decoration-none">
                                    <h5 class="card-title text-warning">عنوان پست</h5>
                                </a>
                                <p class="card-text">در این پست قرار هست درباره عنوان پست صحبت کنیم</p>
                                <a href="#" class="btn btn-success"><i class="bi bi-arrow-left ps-2"></i>بیشتر !</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card post-section shadow border-0" style="width: 18rem;">
                            <a href="#"><img src="img/1.svg" class="card-img-top" alt="..."></a>
                            <div class="card-body bg-dark text-white">
                                <a href="#" class="text-decoration-none">
                                    <h5 class="card-title text-warning">عنوان پست</h5>
                                </a>
                                <p class="card-text">در این پست قرار هست درباره عنوان پست صحبت کنیم</p>
                                <a href="#" class="btn btn-success"><i class="bi bi-arrow-left ps-2"></i>بیشتر !</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--offer-->
        <div class="py-4 g-4 bg-success">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6 py-2">
                        <h2 class="text-white py-2 px-4">20% تخفیف ویژه عضویت در بخش ویژه</h2>
                        <p class="text-white px-4">
                            با عضویت در بخش ویژه ، از ویژگی های جذاب ما، بهرمند شوید.</p>
                        <button class="btn btn-warning py-2 px-4 ms-4">بیشتر بخوانید !<i
                                class="bi bi-arrow-left pe-2"></i></button>
                    </div>
                    <div class="col-md-6">
                        <img src="img/1.svg" alt="alt">
                    </div>
                </div>
            </div>
        </div>

        <!--popular posts-->
        <div class="py-2 g-5 bg-dark">
            <div class="container">
                <a href="#" class="text-decoration-none">
                    <h2 class="text-white py-3">پست های محبوب<i class="bi bi-arrow-up-left-square pe-2"></i></h2>
                </a>
                <div class="row">
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card post-section shadow border-0" style="width: 18rem;">
                            <a href="#"><img src="img/4.svg" class="card-img-top" alt="..."></a>
                            <div class="card-body bg-dark text-white">
                                <a href="#" class="text-decoration-none">
                                    <h5 class="card-title text-warning">عنوان پست</h5>
                                </a>
                                <p class="card-text">در این پست قرار هست درباره عنوان پست صحبت کنیم</p>
                                <a href="#" class="btn btn-primary"><i class="bi bi-arrow-left ps-2"></i>بیشتر !</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card post-section shadow border-0" style="width: 18rem;">
                            <a href="#"><img src="img/4.svg" class="card-img-top" alt="..."></a>
                            <div class="card-body bg-dark text-white">
                                <a href="#" class="text-decoration-none">
                                    <h5 class="card-title text-warning">عنوان پست</h5>
                                </a>
                                <p class="card-text">در این پست قرار هست درباره عنوان پست صحبت کنیم</p>
                                <a href="#" class="btn btn-primary"><i class="bi bi-arrow-left ps-2"></i>بیشتر !</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card post-section shadow border-0" style="width: 18rem;">
                            <a href="#"><img src="img/4.svg" class="card-img-top" alt="..."></a>
                            <div class="card-body bg-dark text-white">
                                <a href="#" class="text-decoration-none">
                                    <h5 class="card-title text-warning">عنوان پست</h5>
                                </a>
                                <p class="card-text">در این پست قرار هست درباره عنوان پست صحبت کنیم</p>
                                <a href="#" class="btn btn-primary"><i class="bi bi-arrow-left ps-2"></i>بیشتر !</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card post-section shadow border-0" style="width: 18rem;">
                            <a href="#"><img src="img/4.svg" class="card-img-top" alt="..."></a>
                            <div class="card-body bg-dark text-white">
                                <a href="#" class="text-decoration-none">
                                    <h5 class="card-title text-warning">عنوان پست</h5>
                                </a>
                                <p class="card-text">در این پست قرار هست درباره عنوان پست صحبت کنیم</p>
                                <a href="#" class="btn btn-primary"><i class="bi bi-arrow-left ps-2"></i>بیشتر !</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--offer-->
        <div class="py-4 g-4 bg-primary">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6 py-2">
                        <h2 class="text-white py-2 px-4">50% درصد تخفیف ویژه برای اولین خرید کتاب " من او را دوست دارم "
                        </h2>
                        <p class="text-white px-4">
                            کتاب "من او را دوست دارم نوشته ویلیام هامیر است"، این کتاب وجود خارجی ندارد .</p>
                        <button class="btn btn-warning py-2 px-4 ms-4">بیشتر بخوانید !<i
                                class="bi bi-arrow-left pe-2"></i></button>
                    </div>
                    <div class="col-md-6">
                        <img src="img/4.svg" alt="alt">
                    </div>
                </div>
            </div>
        </div>

        <!--user comments-->
        <div class="py-2 g-5 bg-dark">
            <div class="container">
                <h2 class="text-white py-3">نظرات کاربران</h2>
                <div class="row">
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card shadow border-0" style="width: 18rem;">
                            <img src="img/2.svg" class="card-img-top img-fluid rounded-circle" alt="...">
                            <div class="card-body bg-dark text-white text-center">
                                <p class="card-text">دم همه اعضای نقطه ی صفر گرم ، واقعا مطالب روز دنیا رو قرار میدند .
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card shadow border-0" style="width: 18rem;">
                            <img src="img/2.svg" class="card-img-top img-fluid rounded-circle" alt="...">
                            <div class="card-body bg-dark text-white text-center">
                                <p class="card-text">دم همه اعضای نقطه ی صفر گرم ، واقعا مطالب روز دنیا رو قرار میدند .
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card shadow border-0" style="width: 18rem;">
                            <img src="img/2.svg" class="card-img-top img-fluid rounded-circle" alt="...">
                            <div class="card-body bg-dark text-white text-center">
                                <p class="card-text">دم همه اعضای نقطه ی صفر گرم ، واقعا مطالب روز دنیا رو قرار میدند .
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card shadow border-0" style="width: 18rem;">
                            <img src="img/2.svg" class="card-img-top img-fluid rounded-circle" alt="...">
                            <div class="card-body bg-dark text-white text-center">
                                <p class="card-text">دم همه اعضای نقطه ی صفر گرم ، واقعا مطالب روز دنیا رو قرار میدند .
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--area content-->
        <div class="py-2 g-5 bg-dark">
            <div class="container">
                <h2 class="text-white pt-3">ویژگی های خاص ما</h2>
                <div class="row">
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card shadow border-0" style="width: 18rem;">
                            <i class="card-img-top bi bi-cart-check display-1 text-center bg-dark text-white"></i>
                            <div class="card-body bg-dark text-white text-center">
                                <h5 class="card-title text-warning">خرید آسان</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card shadow border-0" style="width: 18rem;">
                            <i class="card-img-top bi bi-shield-check display-1 text-center bg-dark text-white"></i>
                            <div class="card-body bg-dark text-white text-center">
                                <h5 class="card-title text-warning">خرید امن</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card shadow border-0" style="width: 18rem;">
                            <i class="card-img-top bi bi-truck display-1 text-center bg-dark text-white"></i>
                            <div class="card-body bg-dark text-white text-center">
                                <h5 class="card-title text-warning">ارسال رایگان</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-3 col-lg-4 col-xl-3">
                        <div class="card shadow border-0" style="width: 18rem;">
                            <i class="card-img-top bi bi-currency-dollar display-1 text-center bg-dark text-white"></i>
                            <div class="card-body bg-dark text-white text-center">
                                <h5 class="card-title text-warning">تخفیفات ویژه</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--footer-->
        <footer class="py-4 g-4 bg-gradient shadow">
            <div class="container">
                <div class="row p-3">
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <h2 class="text-warning py-3 display-6">وبلاگ نقطه صفر</h2>
                        <p class="text-white pe-5">
                            وبلاگ ما تشکیل شده از دو تیم 4 نفره، ما در این سایت در تلاش هستیم تا اخبار روز دنیا را در
                            اختیار کاربران عزیزمان قرار دهیم .
                        </p>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <h2 class="text-white py-3 display-6 border-5 border-primary border-end pe-3">
                            صفحات اصلی</h2>
                        <ul class="text-white list-unstyled">
                            <li class="nav-item"><a href="index.html" style="opacity: 0.70"
                                    class="text-decoration-none text-white">خانه</a></li>
                            <li class="nav-item"><a href="blog-list.html" style="opacity: 0.70"
                                    class="text-decoration-none text-white">بلاگ</a></li>
                            <li class="nav-item"><a href="#" style="opacity: 0.70"
                                    class="text-decoration-none text-white">تماس با ما</a></li>
                            <li class="nav-item"><a href="#" style="opacity: 0.70"
                                    class="text-decoration-none text-white">درباره ما</a></li>
                        </ul>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <h2 class="text-white py-3 border-5 border-primary border-end pe-3">لینک های
                            مشترک</h2>
                        <ul class="text-white list-unstyled">
                            <li class="nav-item"><a href="index.html" style="opacity: 0.70"
                                    class="text-decoration-none text-white">خانه</a></li>
                            <li class="nav-item"><a href="about.html" style="opacity: 0.70"
                                    class="text-decoration-none text-white">درباره ما</a></li>
                            <li class="nav-item"><a href="contact.html" style="opacity: 0.70"
                                    class="text-decoration-none text-white">تماس با ما</a></li>
                        </ul>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <h2 class="text-white py-3 display-6 border-5 border-primary border-end pe-3">
                            جامعه ما</h2>
                        <ul class="text-white list-unstyled">
                            <li class="nav-item"><a href="#" style="opacity: 0.70"
                                    class="text-decoration-none text-white">خبرنگاران جوان</a></li>
                            <li class="nav-item"><a href="#" style="opacity: 0.70"
                                    class="text-decoration-none text-white">خبرنگاران محلی</a></li>
                            <li class="nav-item"><a href="#" style="opacity: 0.70"
                                    class="text-decoration-none text-white">خبرنگاران جهانی</a></li>
                        </ul>
                    </div>
                </div>
                <hr class="text-white">
                <div class="text-center text-white">
                    ساخته شده توسط <a href="https://instagram.com/py.d.d" target="_blank"
                        class="text-warning pe-2 text-decoration-none">علی
                        بهزاد</a><i class="bi bi-heart-fill text-danger pe-2"></i>
                    <a href="#top" class="text-decoration-none text-info pe-3 fs-3"><i
                            class="bi bi-arrow-up-circle ps-3"></i></a>
                    2021 &copy;
                </div>
            </div>
        </footer>
        <!--scripts-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
            integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
            crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
            integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
            crossorigin="anonymous"></script>
        <script src="js/bootstrap.bundle.js"></script>
        <script src="js/my_js.js"></script>
    </body>

</html>