اذهب إلى المحتوى

السؤال

نشر

مرحبا 

اعمل على تطوير صفحة لكن اواجه مشكلة في الصفحة في القسم الاول كما هو مرفق في الصورة عند تصغير حجم الشاشة ليصبح بقياس 1199 ومادون ذلك تظهر مسافة جانبية على يسار الصفحة حاولت ازالتها بعدة طرق لكن لم ينجح ذلك فحجمها يتقلص فقط 

Screenshot11.png

Recommended Posts

  • 0
نشر
بتاريخ 9 دقائق مضت قال Wael Aljamal:

أرجو إرفاق الشيفرة لنستطيع المساعدة، و إرفاقها مع السؤال في المرة القادمة

شيفرة  HTML 

<!DOCTYPE html>

<html lang="ar" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="description" content="موقع لكراء وشراء السيارات " />

    <meta name="viewport" content="width=device-width , initial-scale=1 , shrink-to-fit=no">

    <title>موقع لكراء وشراء السيارات : مازن للسيارات </title>

    <link rel="stylesheet" href="assest/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="assest/fontawesome-free-5.15.4-web/css/all.min.css">

    <link rel="stylesheet" href="CSS/style.css">

</head>

<body>

    <header class="container-fluid">

        <div class="slider">

            <div id="carouselC" class="carousel slide" data-ride="carousel">

                <ol class="carousel-indicators">

                    <li data-bs-target="#carouselC" data-bs-slide-to="0" class="active"></li>

                    <li data-bs-target="#carouselC" data-bs-slide-to="1"></li>

                </ol>

                <div class="carousel-inner ">

                    <div class="carousel-item active">

                        <img src="images/car1.png"   alt="First_slide">

                    </div>

                    <div class="carousel-item">

                        <img src="images/car2.png"  alt="second_slider">

                    </div>

                </div>

                <a class="carousel-control-prev" href="#carouselC" role="button"  data-bs-slide="prev">

                    <i class="fas fa-angle-left fa-2x"></i>

                   </a>

                <a class="carousel-control-next "  href="#carouselC" role="button" data-bs-slide="next">

                    <i class="fas fa-angle-right fa-2x"></i>

                </a>

            </div>

        </div>

        <div class="overlay">

            <nav class="navbar">

                <a class="navbar-brand" href="#">

                    <img src="images/logo.png" alt="logo">

                 </a>

                 <form>

                     <button class="btn btn-outline-light custom-btn" type="submit" >

                         تسجيل الدخول

                     </button>

                     <button  class="btn  btn-outline-light custom-btn" type="submit">

                         حساب جديد

                     </button>

                </form>

            </nav>

            <div class="header-text text-center" >

                <h1>هل ترغب بكراء أو شراء سيارة ؟</h1>

                <p>من خلال موقع مازن للسيارات تستطيع الحصول على أفضل السيارات بأسعار معقولة.</p>

                <div class="button">

                    <a href="#">

                        <button type="button"  name="btn_1" class="btn btn-outline-light custom-btn ">

                            أطلب سيارتك الآن

                        </button>

                    </a>

                </div>  

            </div>      

        </div>

    </header>

 

شيفرة CSS

@font-face {

    font-family: ar-font;

    src: url(../fonts/Cairo-SemiBold.ttf);

}

* {

    padding: 0 ;

    margin: 0 ;

}

body {

    direction: rtl;

    font-family: ar-font;

}

header.container-fluid {

    width: 100vw;

    height: 100vh;

    position: relative;

    padding: 0 ;

    margin: 0 ;

}

header .slider .carousel img{

    width: 100%;

    height: 100vh;

    display:block;  

}



header .overlay {

    background-color: rgba(255, 255, 255, 0.8);

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

  }

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...