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

مريم جمال2

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    12

  • تاريخ الانضمام

  • تاريخ آخر زيارة

آخر الزوار

لوحة آخر الزوار معطلة ولن تظهر للأعضاء

إنجازات مريم جمال2

عضو مساهم

عضو مساهم (2/3)

10

السمعة بالموقع

  1. مريم جمال2
    المشكله لم تحل
  2. مريم جمال2 بدأ بمتابعة كيف يمكن وضع الأيقونات بشكل سطري مع اللوقو في CSS لما لا يتم حقن العنصر الى شجرة DOM؟ مشكلة في كود CSS
  3. مريم جمال2
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <input type="text" id="name"> <button id="adding">submit</button> <button id="removing">delete</button> </div> <h3 id="arr"></h3> </body> <script src="main.js"></script> </html> *{ padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; } .container{ margin-top: 10%; margin-left: 45%; } h3{ margin-top: 5%; margin-left: 50%; } var names = []; var btn = document.getElementById("adding").addEventListener("click", function(){ var first = document.getElementById("name").Value names.push(first) document.getElementById("arr").innerHTML = names }); var btn_2 = document.getElementById("removing").addEventListener("click", function(){ names.reverse() names.shift() names.reverse() document.getElementById("arr").innerHTML = names }); الكود لا يضيف الأسماء المكتوبه في مكان الادخال
  4. مريم جمال2
    <!--setup--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>website</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="css/all.min.css"> </head> <body> <!--nav setup--> <div class="nav"> <!--image setup--> <div class="image"> <img src="profile photo.jpeg" alt="profile"> <h3>Hamza hatem</h3> </div> <!--end image--> <!--upper-nav setup--> <div class="upper-nav"> <ul> <li> <i class="fa-solid fa-briefcase fa-xl" style="color: #458d44;"></i> <p>Designer</p> </li> <br> <li> <i class="fa-solid fa-house fa-xl" style="color: #458d44;"></i> <p>London, UK</p> </li> <br> <li> <i class="fa-solid fa-envelope fa-xl" style="color: #458d44;"></i> <p>ex@mail.com</p> </li> <br> <li> <i class="fa-solid fa-phone fa-xl" style="color: #458d44;"></i> <p>1224435534</p> </li> <br> <hr> </ul> </div> <!--end upper-nav--> <!--middle-nav setup--> <div class="middle-nav"> <ul> <li> <i class="fa-solid fa-gear fa-xl" style="color: #458d44;"></i> <p>skills</p> </li> </ul> <div class="first"> <h3>Adobe photoshop</h3> <div class="first-a"></div> <br> <br> <hr> <h3>photography</h3> <div class="first-b"></div> <br> <br> <hr> <h3>illustrator</h3> <div class="first-c"></div> <br> <br> <hr> <h3>media</h3> <div class="first-d"></div> <br> <br> <hr> </div> </div> <!--end middle-nave--> <div class="lower-nav"> <ul> <li> <i class="fa-solid fa-earth-americas fa-xl" style="color: #458d44;"></i> <p>language</p> </li> </ul> <div class="second"> <h3>English</h3> <div class="second-a"></div> <br> <br> <hr> <h3>Spanish</h3> <div class="second-b"></div> <br> <br> <hr> <h3>German</h3> <div class="second-c"></div> <br> <br> <hr> </div> </div> </div> <div class="container"></div> </body> </html> /*Remove any padding or margin*/ *{ padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; } /*image formatting*/ .image{ margin: 8px; height: 40vh; position: relative; border-radius: 5px; overflow: hidden; } .image img{ position: absolute; height: 100%; width: 32%; } .image h3{ position: absolute; bottom: 0; } .nav{ background: #123; position: relative; width: 35px; overflow: hidden; transition: 0.5s; border-radius: 5px; height: 100vh; } .nav:hover{ width: 32%; } /*upper-nav div formatting*/ .upper-nav{ width: 32%; height: 40vh; margin: 8px; position: relative; } ul li{ display: flex; list-style: none; } ul li:hover{ background: #ffffff55; } .upper-nav ul li img{ height: 60%; width: 100%; position: absolute; z-index: -5; } /*middle-nav formatting*/ .middle-nav{ margin: 8px; } .first-a{ width: 70%; position: absolute; height: 30px; background: green; border-radius: 5px; } .first-b{ width: 70%; position: absolute; height: 30px; background: green; border-radius: 5px; } .first-c{ width: 70%; position: absolute; height: 30px; background: green; border-radius: 5px; } /*lower-nav formatting*/ .lower-nav{ margin: 8px; } .second-a{ width: 70%; position: absolute; height: 30px; background: green; border-radius: 5px; } .second-b{ width: 70%; position: absolute; height: 30px; background: green; border-radius: 5px; } .second-c{ width: 70%; position: absolute; height: 30px; background: green; border-radius: 5px; } كيفية عمل scrollوالنزول للأسفل
  5. مريم جمال2
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Facebook 2</title> <link rel="stylesheet" href="Facebook 2.css"> <link rel="stylesheet" href="css/all.min.css"> </head> <body> <div class="parent"> <div class="head"> <div class="nav"> <div class="nav-left"> <ol> <li><img src="facebook-logo.jpg" alt="logo"></li> <li><i class="fa-regular fa-bell"></i></li> <li><i class="fa-regular fa-inbox"></i></li> <li><i class="fa-solid fa-video"></i></li> </ol> </div> </div> </div> <div class="main-content"><p>main-content</p></div> <div class="foot"><p>foot</p></div> </div> </body> </html> *{ padding: 0; margin: 0; font-family: "poppins", sans-serif; } .parent{ width: 100%; background: #272727; display: grid; gap: 15px; grid-template-columns: repeat(3 ,1fr); grid-template-rows: repeat(6 ,150px); grid-template-areas: "head head head" "main-content main-content main-content" "main-content main-content main-content" "main-content main-content main-content" "main-content main-content main-content" "main-content main-content main-content" "main-content main-content main-content" "foot foot foot"; } .parent div{ background: rgba(241, 241, 241, 0.5); } .head{ grid-area: head; } .main-content{ grid-area: main-content; } .foot{ grid-area: foot; } .nav-left ol li{ display: flex; align-items: center; justify-content: space-between; } .nav-left img{ width: 150px; height: 75px; display: flex; align-items: center; justify-content: space-between; } .nav-left{ display: flex; align-items: center; justify-content: space-between; } كيف يمكن ان تظهر الأيقونات على يمين شعار الفيسبوك وليس بالأسفل:
  6. مريم جمال2
    لو سمحت لو سمحت كيف ممكن يبقى أسماء الكتب تحت الصور وليس بالجانب
  7. مريم جمال2 بدأ بمتابعة شرح css grid كيفية عرض النص أسفل الصورة وليس بجانبها بواسطة CSS
  8. مريم جمال2
    .parent{ width: 100%; display: grid; grid-template-columns: repeat(3 ,1fr); grid-template-rows: repeat(7 ,150px); gap: 10px; background: yellow; grid-template-areas: "head head head" "content content content" "content content content" "content content content" "content content content" "content content content" "content content content" "content content content" "foot foot foot"; } .parent div{ background: violet; } .header{ grid-area: head; background: blue; display: flex; padding-left: 15px; display: inline-flex; gap: 15px; } .main-content{ grid-area: content; background: red; padding-left: 15px; display: flex; flex-wrap: wrap; } .footer{ grid-area: foot; background: green; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Books saling </title> <link rel="stylesheet" href="Book store.css"> <link rel="stylesheet" href="css/all.min.css"> </head> <body> <div class="parent"> <div class="header"> <p><i class="fa-solid fa-phone"></i> call us</p> <p><i class="fa-solid fa-house"></i> home</p> <p><i class="fa-solid fa-magnifying-glass"></i> search</p> </div> <div class="main-content"> <p>hello</p> <P><img src="download.jpeg" alt="العلوم"> العلوم</P> <P><img src="download (2).jpeg" alt="الدراسات">الدراسات</P> <P><img src="download (1).jpeg" alt="اللغه العربيه"> اللغه العربيه</P> </div> <div class="footer"> <p>thank you</p> </div> </div> </body> </html>
  9. مريم جمال2
    <html lang="en"> <head> <meta charset="UTF-8"> <title>Books saling </title> <link rel="stylesheet" href="Books saling.css"> <link rel="stylesheet" href="css/all.min.css"> </head> <body> <div class="parent"> <div class="header"> <p><i class="fa-solid fa-phone"></i> call us</p> <p><i class="fa-solid fa-house"></i> home</p> <p><i class="fa-solid fa-magnifying-glass"></i> search</p> </div> <div class="main-content"> </div> <div class="footer"> </div> </div> </body> </html> width: 100%; cursor: pointer; display: grid; grid-template-columns: repeat(3 ,1fr); grid-template-rows: repeat(7 ,100px); gap: 10px; grid-template-areas: "head head head" "content content content" "content content content" "content content content" "content content content" "content content content" "content content content" "content content content" "foot foot foot"; } .parent div{ } .header{ grid-area: head; background: blue; } .main-content{ grid-area: content; background: red; } .footer{ grid-area: footer; background: green; } اريد ان اعرف ما المشكلة بهذا الكود كلما طبقته على الصفحة لا يظهر footer بالصفحة فقط يظهر الheader , content parent{ width: 100%; cursor: pointer; display: grid; grid-template-columns: repeat(3 ,1fr); grid-template-rows: repeat(7 ,100px); gap: 10px; grid-template-areas: "head head head" "content content content" "content content content" "content content content" "content content content" "content content content" "content content content" "content content content" "foot foot foot"; } .parent div{ } .header{ grid-area: head; background: blue; } .main-content{ grid-area: content; background: red; } .footer{ grid-area: footer; background: green; } اعدت ارسال كود css مرة اخرى لان اول مرة كان به خطأ
  10. مريم جمال2
    لا يوجد درس للجريد لكي اضع تحته سؤالي هل يمكنني وضع السؤال هنا
  11. مريم جمال2
    انا لسة مشتركة اليوم وسبب اشتراكي انني كنت ابحث عن شخص يساعدني كلما وقف امامي شيء وكنت اعمل تخطيط css grid ولكن مشكلة ما قابلتني فاشتركت بالاكاديمية حتى اجد من يساعدني الا انني فوحئت ان الدرس غير موجود على الاكاديمية اصلا ماذا أفعل بالنسبة للflex انا لا احبه واحب استعمال css grid
  12. مريم جمال2
    بحثت عن شرح css grid فلم أجده وهو شيء مهم
×
×
  • أضف...