نمایش نتایج 1 تا 1 از 1

نام تاپیک: راهنمایی طراحی هدر با اسلایدر

  1. #1

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

    سلام. من تازه دارم 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>
    عکس های ضمیمه عکس های ضمیمه




تاپیک های مشابه

  1. پاسخ: 3
    آخرین پست: یک شنبه 14 دی 1393, 09:47 صبح
  2. پاسخ: 3
    آخرین پست: شنبه 06 مهر 1392, 22:46 عصر
  3. پاسخ: 0
    آخرین پست: سه شنبه 09 اسفند 1390, 22:11 عصر
  4. پاسخ: 0
    آخرین پست: سه شنبه 07 دی 1389, 16:25 عصر

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •