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

السؤال

Recommended Posts

  • 0
نشر

لايمكن حل المشاكل البرمجية بدون إرفاق الأكواد التي كتبتها و لها دخل في المشكلة

كما أنه من الجيد لو تفتح قسم التنسيقات في أدوات المطور و تضع صور بالأصناف و التنسيقات أو تنسخها للتي تؤثر على الفراغ

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

لايمكن خل المشاكل البرمجية بدون إرفاق الأكواد التي كتبتها و لها دخل في المشكلة0

كما أنه من الجيد لو تفتح قسم التنسيقات في أدوات المطور و تضع صور بالأصناف و التنسيقات أو تنسخها للتي تؤثر على الفراغ

يوجد حل في وضع قيمة سالبة ل margin-top و لكن هذا لديه تأثير سالب عند جعل الموقع responsive 

  • 0
نشر
بتاريخ 3 دقائق مضت قال محمود سعداوي:

يوجد حل في وضع قيمة سالبة ل margin-top و لكن هذا لديه تأثير سالب عند جعل الموقع responsive 

تفضل

كود css

.section-2{
    overflow: hidden;
    background-color: #222020;
}

.parag-wrapper{
    margin: 50px auto;
    max-width: 310px;
    height: auto;
    color: #fff;
    position: relative;
}
.parag-wrapper i{
    font-size: 20px;
}
.parag-wrapper .fa-quote-right{
    position: absolute;
    right: 0;
}
.parag-wrapper p{
    margin: 10px auto;
    font-size: 18px;
    text-align: justify;
    font-family: 'Oswald', sans-serif; 
}
.parag-wrapper p::after{
    content: "";
    position: absolute;
    width: 90%;
    height: 2px;
    background-color: #fff;
    top: 5%;
    right: 0;
}
.parag-wrapper p::before{
    content: "";
    position: absolute;
    width: 90%;
    height: 2px;
    background-color: #fff;
    bottom: -9%;
    left: 0;
}
/* end of section-2 */

/* section 3 ==> Pricing  */
/* #222020 */
.section-3{
    background-color: #03070e;
    margin-top:0;
}
.pricing-cards-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

كود html

<section class="section-2">
        <h1 class="section-heading">About Us</h1>
   <div class="parag-wrapper">
            <i class="fa-solid fa-quote-left"></i>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
               Tempora totam nam quasi officia, voluptatum deleniti provident
               natus temporibus molestiae quae ratione fugit placeat voluptatibus, 
               deserunt repellat dicta, optio quo quisquam libero tempore veritatis? 
               Veritatis nam magnam omnis nobis iusto recusandae minus odit eligendi 
               maxime dolorem, eos id! Fugiat, adipisci perspiciatis!</p>
            <i class="fa-solid fa-quote-right"></i>
            
        </div>
    </section>
    <!-- end of section-2 -->

    <!-- section 3 ==> Pricing -->
    <section class="section-3">
        <h1 class="section-heading">Pricing</h1>
        <div class="pricing-cards-wrapper">
            <div class="pricing-card">
                <div class="pricing-card-front">
                    <h2 class="pricing-card-heading">Free</h2>
                    <h3 class="pricing-card-price">$0</h3>
                    <ul class="pricing-card-list free-list">
                        <li>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                        </li>
                    </ul>
                    <button class="pricing-card-btn btn-free" type="button">
                        CHOOSE PLAN
                    </button>
                </div>
                <div class="back-free pricing-card-back">
                    <a href="#">Order Now</a>
                </div>

            </div>

            <div class="pricing-card">
                <div class="pricing-card-front">
                    <h2 class="pricing-card-heading">Basic</h2>
                    <h3 class="pricing-card-price">$299</h3>
                    <ul class="pricing-card-list basic-list">
                        <li>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                        </li>
                    </ul>
                    <button class="pricing-card-btn btn-basic" type="button">
                        CHOOSE PLAN
                    </button>
                </div>
                <div class="back-basic pricing-card-back">
                    <a href="#">Order Now</a>
                </div>

            </div>

            <div class="pricing-card">
                <div class="pricing-card-front">
                    <h2 class="pricing-card-heading">Standard</h2>
                    <h3 class="pricing-card-price">$699</h3>
                    <ul class="pricing-card-list standard-list">
                        <li>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-xmark"></i>
                            <span>Lorem ipsum dolor</span>
                        </li>
                    </ul>
                    <button class="pricing-card-btn btn-standard" type="button">
                        CHOOSE PLAN
                    </button>
                </div>
                <div class="back-standard pricing-card-back">
                    <a href="#">Order Now</a>
                </div>

            </div>

            <div class="pricing-card">
                <div class="pricing-card-front">
                    <h2 class="pricing-card-heading">Premium</h2>
                    <h3 class="pricing-card-price">$999</h3>
                    <ul class="pricing-card-list premium-list">
                        <li>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                            <i class="fa-solid fa-check"></i>
                            <span>Lorem ipsum dolor</span>
                        </li>
                    </ul>
                    <button class="pricing-card-btn btn-premium" type="button">
                        CHOOSE PLAN
                    </button>
                </div>
                <div class="back-premium pricing-card-back">
                    <a href="#">Order Now</a>
                </div>

            </div>
        </div>
    </section>
    <!-- end of section 3 -->

 

  • 0
نشر
*, ::after, ::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    list-style: none;
}
بتاريخ 4 دقائق مضت قال Wael Aljamal:

شكرا لك

يمكنك تحديد التنسيق التالي لجميع العناصر 


        * {
            margin: 0;
            padding: 0;
        }

لتتخلص من مشاكل الهوامش الافتراضية من المتصفح

نعم بالتأكيد.

قبل بداية تنسيق العناصر دائما أكتب الكود النالي

 

بتاريخ الآن قال محمود سعداوي:

*, ::after, ::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    list-style: none;
}

نعم بالتأكيد.

قبل بداية تنسيق العناصر دائما أكتب الكود النالي

 

*, ::after, ::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    list-style: none;
}

 

  • 0
نشر
بتاريخ الآن قال محمود سعداوي:

قبل بداية تنسيق العناصر دائما أكتب الكود النالي

حسب ما أرفقت من شيفرات، وضعتهم في ملف و فتحتهم في المتصفح وظهر الفارق الأبيض بينهما، وعند إلغاء الهوامش احتفت المشكلة.

بتاريخ 27 دقائق مضت قال Wael Aljamal:

كما أنه من الجيد لو تفتح قسم التنسيقات في أدوات المطور و تضع صور بالأصناف و التنسيقات أو تنسخها للتي تؤثر على الفراغ

 

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...