مساعدة تنسيق في CSS

Zen Eddin Allaham · 20 مايو

*{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    box-sizing: border-box;
}
i{
    color: orangered;
}

body{
    background-color: #333;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
   background-color: #222;
   width: 100%;
   height: 10vh;
   border-bottom: 3px solid orangered;
}
.navbar h1{
    color: orangered;
    font-size: 35px;
    padding-left: 30px;
}

.navbar nav a{
    text-decoration: none;
    color: white;
    padding-right: 30px;
    padding: 10px;
    transition: all 0.3s ease;
    margin-right: 10px;
}

.navbar nav a:hover{
    background-color: #ffffff3c;
    color: orangered;
}

.hero{
    background: url(desktop.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

}

.hero h2{
    color: white;
    font-size: 40px;
    text-align: center;
    margin-top: 5%;
}
.hero span{
    color: orangered;
}

.hero  p{
    color: white;
    text-align: center;
    margin-bottom: 10%;
    font-size: 18px;
}

.login{ 
    border-top: 3px solid orangered;
}

.about{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top:50px;
    gap: 1rem;
}

.about h3{
    margin-bottom: 10px;
    color: white;
    margin-right:  40px;

}

.about p{
    margin-top: 10px;
    color: white;
    margin-bottom: 20px;
}

.h1{
    color: white;
    text-align: center;
    margin-top: 20px;
}


.project{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top:50px;
  gap: 1rem;
}

.project h2{
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.card{
    padding: 3rem 4rem;
    background: #222;
    border: 2px solid orangered;
}

.card p{
     flex: 1;
    margin-bottom: 2rem;
    color: white;
}
.card a{
    text-decoration: none;
    color: white;
    background: orangered;
    padding: 1rem 2rem;
}
.card a:hover{
    background-color: #ff4400df;
}

footer{
    background-color: #222;
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

footer h3{
    color: white;
}

footer a{
    padding: 1rem 2rem;
    background-color: #222;
    border: 2px solid orangered;
    margin-left: 20px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
}

footer a:hover{
    background-color: #444;
}

#arrow{
    color: white;
}

.about a{
   color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header class="navbar">
        <h1>ZN99</h1>
        <nav>
            <a href="">Home</a>
            <a href="">Project</a>
            <a href="">Information</a>
            <a href="">Contact</a>

        </nav>
    </header>


    <section class="hero">
        <h2>Welcome to <span>ZN99</span> website</h2>
         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim repellendus maxime sequi, voluptate earum odio dignissimos officia dolores voluptatem? Magnam voluptate quisquam aspernatur at. Quo ad tempore atque eveniet cumque?</p>
    </section>

    <div class="login"></div>


    <section class="about">
        <i class="fa-solid fa-briefcase fa-5x"></i>
        <h3>Project</h3>
        <p>Our projects are amazing. If you are interested, check out the following link <a href="https://verdant-sunburst-444f9e.netlify.app/" target="_blank">View now <i class="fa-solid fa-arrow-right"></i></a></p>

        <i class="fa-solid fa-child-reaching fa-5x"></i>
        <h3>Make the person happy</h3>
        <p>We will be happy if we can make you happy.</p>

       <i class="fa-solid fa-screwdriver-wrench fa-5x"></i>
        <h3>Edit project</h3>
        <p>After creating your first website and you want to modify it, contact us and one of our team members will modify it for free.</p>

        <i class="fa-solid fa-hand-holding-dollar fa-5x"></i>
        <h3>Guarantee your investment</h3>
        <p>Money back guarantee if you don't like the project within 24 hours and we will be happy to hear from you.</p>
    </section>

<br> <br>
<hr>
<h1 class="h1">Project</h1>



    <section class="project">
       
        <div class="card">
            <p>Calculator</p>
            <a href="">View a project <i id="arrow" class="fa-solid fa-arrow-right"></i></a>
        </div>

           <div class="card">
            <p>Identification website</p>
            <a href="">View a project <i id="arrow" class="fa-solid fa-arrow-right"></i></a>
        </div>

           <div class="card">
            <p>Godzilla</p>
            <a href="">View a project <i id="arrow" class="fa-solid fa-arrow-right"></i></a>
        </div>
    </section>



    <footer>
        <h3>Contact for ZN99</h3>
        <a href="">let's started</a>
    </footer>
</body>
</html>

كيف يمكن جعل العناصر بجانب بعضهم

Mustafa Suleiman · 20 مايو

يجب وضع كل أيقونة والنص الخاص بها داخل div حتى تتمكن من تنظيمهم عن طريق Flex، كذلك يجب حذف flex-direction: column; فهي تفرض وضع عمودي للعناصر.

وسيصبح كود HTML لذلك القسم كالتالي:

<section class="about">
    <div class="about-item">
        <i class="fa-solid fa-briefcase fa-5x"></i>
        <h3>Project</h3>
        <p>Our projects are amazing. If you are interested, check out the following link <a href="https://verdant-sunburst-444f9e.netlify.app/" target="_blank">View now <i class="fa-solid fa-arrow-right"></i></a></p>
    </div>

    <div class="about-item">
        <i class="fa-solid fa-child-reaching fa-5x"></i>
        <h3>Make the person happy</h3>
        <p>We will be happy if we can make you happy.</p>
    </div>

    <div class="about-item">
        <i class="fa-solid fa-screwdriver-wrench fa-5x"></i>
        <h3>Edit project</h3>
        <p>After creating your first website and you want to modify it, contact us and one of our team members will modify it for free.</p>
    </div>

    <div class="about-item">
        <i class="fa-solid fa-hand-holding-dollar fa-5x"></i>
        <h3>Guarantee your investment</h3>
        <p>Money back guarantee if you don't like the project within 24 hours and we will be happy to hear from you.</p>
    </div>
</section>

ثم عليك كتابة التنسيق التالي، واحذف أي تنسيقات موجودة حاليًا له في CSS لديك، أي ضع التالي فقط:

.about {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 50px;
    gap: 2rem;
    padding: 0 20px;
}

.about-item {
    background-color: #222;
    border: 1px solid orangered;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 280px;
    max-width: 320px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

محمد_عاطف · 20 مايو

هل تقصد هكذا ؟

أم تريدهم أعمدة ولكن الأيقونات بجوار بعضهم البعض ؟

إذا كان ما تريده كما في الصورة السابقة فأولا لاحظ أنك قمت بوضع جميع العناصر بداخل ال section about مباشرة وهذا ليس صحيحا حيث يجب وضع كل صورة مع النص الخاص بها في عنصر div بشكل منفصل . ليصبح section about بعد التعديل هكذا :

<section class="about">
  <div>

    <i class="fa-solid fa-briefcase fa-5x"></i>
    <h3>Project</h3>
    <p>Our projects are amazing. If you are interested, check out the following link <a
                                                                                        href="https://verdant-sunburst-444f9e.netlify.app/" target="_blank">View now <i
                        class="fa-solid fa-arrow-right"></i></a></p>
  </div>

  <div>
    <i class="fa-solid fa-child-reaching fa-5x"></i>
    <h3>Make the person happy</h3>
    <p>We will be happy if we can make you happy.</p>
  </div>
  <div>
    <i class="fa-solid fa-screwdriver-wrench fa-5x"></i>
    <h3>Edit project</h3>
    <p>After creating your first website and you want to modify it, contact us and one of our team members will
      modify it for free.</p>
  </div>
  <div>
    <i class="fa-solid fa-hand-holding-dollar fa-5x"></i>
    <h3>Guarantee your investment</h3>
    <p>Money back guarantee if you don't like the project within 24 hours and we will be happy to hear from you.
    </p>
  </div>
</section>

الآن سيتوجب علينا إجراء تعديلات في التنسيقات .

بتاريخ 13 دقائق مضت قال Hxfhf Ucicic:

.about{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top:50px;
    gap: 1rem;
}

هنا في هذا الجزء يجب جعل إتجاه ال flex ك row صف وليس عمود ولهذا يرجى حذف هذا التنسيق وحذف جزء flex-wrap أيضا وإضافة padding هكذا :

.about{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:50px;
    gap: 1rem;
    padding: 0 20px;
}

وإضافة عرض لعنصر ال div ليصبح هكذا :

.about div {
    width: 25%;
}

ويمكنك تغير نسبة العرض بناء على عدد العناصر لديك ويمكنك إضافة التنسيقات التي تريدها لهم الآن كما تريد.

Zen Eddin Allaham · 20 مايو

شكرا جزيلاً لكم

مساعدة تنسيق في CSS

السؤال

Zen Eddin Allaham

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

محمد_عاطف

Zen Eddin Allaham

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية