Ayman Alrawy نشر 11 مارس 2023 أرسل تقرير مشاركة نشر 11 مارس 2023 هذا يومي السابع او الثامن في css هل كودي جيد وهل استخدامي للgrid جيد او اي نصائح شكرا 1 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 11 مارس 2023 أرسل تقرير مشاركة نشر 11 مارس 2023 يبدو انك لم تقم بمشاركة الكود الخاص بك 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 Ayman Alrawy نشر 11 مارس 2023 الكاتب أرسل تقرير مشاركة نشر 11 مارس 2023 بتاريخ 9 دقائق مضت قال عمر قره محمد: يبدو انك لم تقم بمشاركة الكود الخاص بك style.cssindex.html 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 عمر قره محمد نشر 11 مارس 2023 أرسل تقرير مشاركة نشر 11 مارس 2023 بتاريخ 11 دقائق مضت قال Ayman Alrawy: style.css 1.11 kB · 0 تنزيلات index.html 7.57 kB · 0 تنزيلات الكود جيد جداً، واستخدام الـ grid جيد كذلك، جرب اضافة التنسيق التالي : * { box-sizing: border-box; } وتعديل التنسيقات التي تعطيها للـ div كالتالي : div { width: 100%; height: 200vh; background-color: #eee; padding: 50px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 2fr) 1.5fr; grid-template-areas: "osama osama ahmed shady" "moh-i moh-moh moh-moh shady" "moh-i ezz ezz shady" "moh-s ibra gamal eman"; gap: 5px; } لجعل ال grid على مقاس الشاشة. سيكون من الجميل ان تقوم بعمل dynamic grid بحيث يقوم بإنشاء صفوف بشكل تلقائي وذلك إن اردت التدرب بشكل اعمق على الـ grid. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 محمد Fahmy نشر 11 مارس 2023 أرسل تقرير مشاركة نشر 11 مارس 2023 الكود الخاص بك جيبد ولكن ليس منظم بشكل جيد, غير أنك لا تحتاج إلى استخدام الخاصية grid-template-areas. أنظر إلي هذا الكود وقارن بينه وبين الكود الخاص بك وسوف تتعلم الكثير. HTML <!DOCTYPE html> <html lang="en" style="font-family: Arial, Helvetica, sans-serif"> <head> <meta charset="UTF-8" /> <title>CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="layout"> <div class="grid"> <div class="item-a"> <p class="name">Osama Mohamed</p> <p class="job">Full-Stack Developer</p> <p class="about"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu sed erat cursus, eu rutrum nisl rhoncus. Morbi semper purus in justo tempus volutpat. Pellentesque dui eros, vulputate eget dui eget, imperdiet mollis justo. Cras dignissim libero sed velit efficitur porta. </p> <p> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum, ut maximus sem congue. Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem, et ultrices risus pharetra eu. Nullam sit amet lorem ac libero commodo dapibus eu vel velit. </p> <span>″</span> </div> <div class="item-b"> <p class="name">Ahemd Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Duis ullamcorper rutrum posuere. Mauris a dolor sed tortor consequat laoreet. Sed condimentum, erat porta sagittis blandit. </p> <p> Suspendisse consequat a justo quis vulputate. Quisque pharetra neque tempus augue consectetur pharetra. Curabitur lobortis aliquet turpis eget blandit. Fusce vel vulputate libero. </p> <span>″</span> </div> <div class="item-c"> <p class="name">Shady Nabil</p> <p class="job">Full-Stack Developer</p> <p class="about"> Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt suscipit tortor ac suscipit. Suspendisse vehicula accumsan libero, ac lobortis risus vehicula a. Nam eget orci nunc. Aliquam facilisis, urna vitae molestie dapibus, ante nisl efficitur quam, et efficitur sem elit vitae sem. Cras egestas malesuada metus sit amet sollicitudin. </p> <p> Sed ut viverra augue, vel tincidunt metus. Phasellus ac suscipit odio. Aliquam vehicula augue sed euismod vehicula. Curabitur luctus neque a enim commodo, ut posuere orci viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque id elementum mi. Fusce metus lectus, iaculis et est quis, condimentum ornare urna. </p> <span>″</span> </div> <div class="item-d"> <p class="name">Mohamed Ibrahim</p> <p class="job">.Net Developer</p> <p class="about"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu sed erat cursus, eu rutrum nisl rhoncus. Morbi semper purus in justo tempus volutpat. </p> <p> Pellentesque dui eros, vulputate eget dui eget, imperdiet mollis justo. Cras dignissim libero sed velit efficitur porta sit amet a urna. Sed ex sapien, finibus sed erat a, sodales tristique mauris. Phasellus vel finibus ligula. Nunc at magna non sem finibus accumsan eget eu dui. Nam ac enim quis elit dignissim dictum. In et laoreet diam, at dignissim mi. Ut iaculis nisi libero, tempor tincidunt libero rhoncus ac. </p> <span>″</span> </div> <div class="item-e"> <p class="name">Mahmoud Mohamed</p> <p class="job">Full-Stack Developer</p> <p class="about"> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum, ut maximus sem congue. </p> <p> Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem, et ultrices risus pharetra eu. Nullam sit amet lorem ac libero commodo dapibus eu vel velit. Cras in arcu orci. Ut vitae dolor non dolor volutpat eleifend. Maecenas lacinia, velit eu iaculis iaculis, sem nisi mollis ex, a imperdiet lorem dolor nec augue. </p> <span>″</span> </div> <div class="item-f"> <p class="name">Ezz Eldin</p> <p class="job">Front-End Developer</p> <p class="about"> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum, ut maximus sem congue. </p> <p> Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem, et ultrices risus pharetra eu. Nullam sit amet lorem ac libero commodo dapibus eu vel velit. Cras in arcu orci. Ut vitae dolor non dolor volutpat eleifend. Maecenas lacinia, velit eu iaculis iaculis, sem nisi mollis ex, a imperdiet lorem dolor nec augue. </p> <span>″</span> </div> <div class="item-g"> <p class="name">Mohamed Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Ut porttitor tincidunt erat, id facilisis purus hendrerit eget. Duis id dolor sit amet enim dapibus ornare. </p> <p> Nulla ut magna a nibh congue pulvinar. Morbi id augue arcu. Integer eu bibendum tortor. </p> <span>″</span> </div> <div class="item-h"> <p class="name">Ibrahim Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt suscipit tortor ac suscipit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu. </p> <span>″</span> </div> <div class="item-i"> <p class="name">Gamal Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim. </p> <p> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. </p> <span>″</span> </div> <div class="item-J"> <p class="name">Eman Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt suscipit tortor ac suscipit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu. </p> <span>″</span> </div> </div> </div> </body> </html> CSS * { box-sizing: border-box; padding: 0; margin: 0; } .layout { background-color: #eeeeee; padding: 40px; font-family: Arial, Helvetica, sans-serif; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, auto); gap: 10px; } .grid div { background-color: #ffffff; padding: 30px 20px; border-bottom: 3px solid #f54e1f; position: relative; } .grid div span { font-size: 60px; position: absolute; bottom: -25px; right: 10px; color: gray; } div p { line-height: 1.5; } .name { font-weight: bold; margin-bottom: 2px; font-size: 20px; } .job { color: gray; font-weight: bold; margin-bottom: 15px; } .about { font-weight: bold; margin-bottom: 15px; font-size: 18px; } .item-c, .item-e, .item-h { background-color: black !important; color: #ffffff !important; } .item-a { grid-column: 1 / span 2; grid-row: 1 / 2; } .item-e { grid-column: 2 / span 2; grid-row: 2 / 3; } .item-f { grid-column: 2 / span 2; grid-row: 3 / 4; } .item-d { grid-column: 1 / 2; grid-row: 2 / span 2; } .item-c { grid-column: 4 / 5; grid-row: 1 / span 3; } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 Mostafa Ggr نشر 11 مارس 2023 أرسل تقرير مشاركة نشر 11 مارس 2023 (معدل) جميل جدا تم التعديل في 11 مارس 2023 بواسطة Mostafa Ggr خطاء اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Ayman Alrawy
هذا يومي السابع او الثامن في css هل كودي جيد
وهل استخدامي للgrid جيد
او اي نصائح
شكرا
رابط هذا التعليق
شارك على الشبكات الإجتماعية
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.