راهنمایی طراحی هدر با اسلایدر

سلام. من تازه دارم html و css و همچنین بوت استرپ آموزش میبینم در حد معمولی در یک کلاس آنلاینی هستم که آزموت هم میگیرند و برای ادامه کار باید بتونم همچنین صفحه سایت را فقط با css html و بوت استرپ طراحی کنم. ( نیاز به انیمیشن ها و اسلایدر ها و جاوا اسکریپت نیست )

این سایت را باید طراحی کنم.
به غیر از هدر همه جاش را با آزموش و خطا و آموزش و کپی از یکسری از سایت ها جلو رفتم.....

http://paul-themes.com/html/go-arch/...ark/index.html

دو تا مشکل دارم

چطوری هدر و nav منو را با عکس اسلایدر یکی کنم پس زمینه اش را و اون قسمت سمت چپ که برش خورده و آیکن ها شبکه اجتماعی و تاریخ و لوگو راروی تصویر بندازم بصورتیکه ریسپانسو هم باشه.( اسلایدر نباشه.)
من خودر بک گراند هدر را عکس پس زمینه گذاشتم و ارتفاعش را را 600 پیکسل گذاشتم و اینطور منو و هدر اوکیه فقط اون برش را نمیتونم بزنم

یکی هم لاین های های وسط صفحه ها را


کد html

کد HTML:

---

  <div class="bgslide">




        <nav class="navbar navbar-expand-lg navbar-dark zfix ">
            <div class="container">

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mb-2 mb-lg-0">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle  " href="#" id="navbarDropdown" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                خانه
                            </a>
                            <ul class="dropdown-menu bg-dark " aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item text-end  texth" href="#">دارک</a></li>
                                <li><a class="dropdown-item text-end  text-light  text-primary2" href="#">لایت</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link  text-light" aria-current="page" href="#">درباره ما</a>
                        </li>
                        <li class="nav-item dropdown ">
                            <a class="nav-link dropdown-toggle  text-light" href="#" id="navbarDropdown" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                پروژه ها
                            </a>
                            <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item text-end  text-light" href="#">لیست پروژه ها</a></li>
                                <li><a class="dropdown-item text-end  text-light " href="#">جزئیات پروژه ها</a></li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle  text-light" href="#" id="navbarDropdown" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                وبلاگ
                            </a>
                            <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item text-end  text-light" href="#">وبلاگ اول</a></li>
                                <li><a class="dropdown-item text-end  text-light" href="#">وبلاگ دوم</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link  text-light" href="#">تماس با ما</a>
                        </li>


                    </ul>
                    <p class="text-light mt-3 tel">+7 (212) 674-25-10</p>
                </div>

            </div>
        </nav>




        <div class="container">
            <div class="">

                <div class="col-lg-8 slide">

                    <h1 class="titr1 text-light">سالن کنسرت در <br> نیویورک</h1>
                    <p class="paragraf1 ">تالار کنسرت معماری نسل جدید، یک ساختمان است
                        <br>
                        که نه تنها در بعد فضا وجود دارد،<br>
                        بلکه در بعد زمان و ارتباطات.
                    </p>

                    <a class="lookmore" href="#">بیشتر نگاه کن<i class="fas fa-arrow-left"></i></a>
                </div>
    <div class="col-lg-1 align-content-lg-center text-light text-start date">
            <h4>برو<span class="texth">.</span>قوس</h4>
            </a>
            <h6>03 /</h6>
            <h1>03</h1>
        </div>
            </div>

        </div>
   

    </div>

---

این قسمت را همینجوری الکی زدم

کد HTML:

---

  <div class="col-lg-1 align-content-lg-center text-light text-start date">
            <h4>برو<span class="texth">.</span>قوس</h4>
            </a>
            <h6>03 /</h6>
            <h1>03</h1>
        </div>

---