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

هنا صقر

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

  • المساهمات

    1

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

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

إنجازات هنا صقر

عضو مبتدئ

عضو مبتدئ (1/3)

1

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

  1. هنا صقر
    لدي مشكلة في معرض الصور الخاص بالموقع الشخصي، الصور لا تملأ المساحة المحددة والدوائر الخاصة للضغط لتنقل عبر الصور صغيرة جدا. وجزاكم الله خيراً. كود HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="موقع شخصي لهنا صقر"> <meta name="author" content="Hana Sakr"> <title>Hana's personal website</title> <link rel="stylesheet" href="./css/fontawesome-all.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/slider.css"> </head> <body> <header> <div class="container"> <div id="branding"> <h1><i class="fas fa-user-circle"></i> صفحة <span class="highlight"> اسم الطالب </span></h1> </div> <nav> <ul> <li class="current"> <a href="index.html"> الصفحة الرئيسية</a></li> <li><a href="gallery.html"> معرض الاعمال</a> </li> </ul> </nav> </div> </header> <section class="main"> <section id="slider" class="container"> <div id="wrapper"> <div class="content"> <img src="img/clouds.jpeg"> </div> <div class="content"> <img src="img/butterfly.jpeg"> </div> <div class="content"> <img src="img/stars.jpeg"> </div> <div class="content"> <img src="img/wave.jpeg"> </div> </div> <div id ="navLinks"> <ul> <li class="itemLinks" data-pos="0"></li> <li class="itemLinks" data-pos="1"></li> <li class="itemLinks" data-pos="2"></li> <li class="itemLinks" data-pos="3"></li> </ul> </div> </section> </section> <section id="footer"> <p>blablabla &copy; <span id="currentYear"></span></p> </section> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="js/script.js"></script> <script src="js/slider.js"></script> </html> كو CSS: #slider{ position: relative; margin: auto; margin-top: 20px; height: 500px; border: 5px black solid; overflow: hidden; } #wrapper { width: 400%; height: 100%; transition: transform 0.5s ease-in-out; } #wrapper .content { float: right; width: 25%; height: 100%; } #wapper .content img{ width: 100%; } #navLinks{ text-align: center; position: absolute; top: 0; right: 45%; } #navLinks ul{ margin: 0px; padding: 0px; display: inline-block; margin-top: 6px; } #navLins ul li{ float: right; text-align: center; margin: 10px; padding: 5px; cursor: pointer; background-color: blanchedalmond; list-style: none; border: black 5px solid; border-radius: 50%; } #navLinks ul li:hover{ background-color: brown; } #navLinks ul li.active{ background-color: blue; } #navLinks ul li.active:hover{ background-color: rgb(154, 133, 129); } مرفق الملفات: gallery.html slider.css
×
×
  • أضف...