تصميم فوتر (Footer ) بتصميم أنيق وبسيط

تصميم فوتر (Footer) بتصميم أنيق وبسيط

إذا كنت تبحث عن تصميم متجاوب لقاع موقعك، أو ما يُعرف باسم "الفوتر" (Footer)، فأنت في المكان الصحيح. هنا نقدم لك كودًا جاهزًا لقاع الموقع أو المدونة أو المنتدى، مزودًا بتصميم أنيق وأزرار تفاعلية وخطوط مميزة. يتميز هذا الفوتر ببساطته، حيث يحتوي على أزرار للروابط المهمة وأيقونات الوسائط الاجتماعية، مما يسمح للزوار بمشاركة المحتوى بسهولة.

ما الذي يميز هذا الفوتر عن غيره؟ في الواقع، لا يوجد فرق كبير من حيث الهيكل العام، ولكن هذا الفوتر مصمم ليكون قاعًا حقيقيًا للموقع وليس مجرد مساحة للإعلانات. يتميز هذا التصميم بتدرج لوني في الأسفل، مما يضيف لمسة جمالية عند التمرير أو التعديل. يمكنك أيضًا تعديل حجمه ليكون أكبر أو أصغر حسب احتياجاتك، مما يغير من شكله العام.

أقترح استخدام هذا الفوتر في صفحات محددة تحتوي على الكثير من الوظائف، حيث يمكن أن يكون لكل صفحة فوتر مختلف. ومع ذلك، سيبدو رائعًا أيضًا على الصفحة الرئيسية. اللون الداكن للفوتر يتناسب بشكل ممتاز مع التصميمات ذات الخلفيات الفاتحة. إذا كنت بحاجة إلى تغيير الألوان، فيمكنك بسهولة تعديلها في ملف CSS، حيث يمكنك تغيير الألوان والأشكال حسب رغبتك.

شرح كود الفوتر (Footer) بتصميم بسيط وأنيق

هذا الكود يعرض تصميمًا لقاع الموقع (Footer) بسيطًا وأنيقًا، يحتوي على معلومات عن الموقع، روابط لوسائل التواصل الاجتماعي، وقائمة تنقل إضافية. سنشرح هنا المكونات الرئيسية للكود وكيفية عمله.

المكونات الرئيسية:

• الهيكل العام: تم استخدام عنصر <footer> لإنشاء قاع الموقع.
• المحتوى: يحتوي الفوتر على قسمين رئيسيين:
  • .footer-content: يحتوي على عنوان الموقع، وصف قصير، روابط وسائل التواصل الاجتماعي، وقائمة تنقل.
  • .footer-bottom: يحتوي على حقوق النشر ومعلومات المصمم.
• التصميم: تم استخدام CSS لتنسيق الفوتر وجعله متجاوبًا مع الشاشات المختلفة.

تفاصيل الكود:

• الهيكل الأساسي:
  • تم تعيين الخلفية للفوتر باللون الأسود (background: #111;) والنص باللون الأبيض.
  • تم توسيط المحتوى باستخدام display: flex; وtext-align: center;.
• روابط وسائل التواصل الاجتماعي:
  • تم استخدام قائمة غير مرتبة (<ul>) لعرض أيقونات وسائل التواصل الاجتماعي.
  • تم تصميم الأيقونات باستخدام Font Awesome، مع إضافة تأثيرات عند التمرير (hover).
  • عند التمرير فوق الأيقونات، يتغير لونها إلى الأزرق الفاتح (color: aqua;).
• قائمة التنقل:
  • تم إنشاء قائمة تنقل إضافية تحتوي على روابط مثل "Home" و"About" و"Contact".
  • تم تصميم الروابط بحيث تكون محاطة بإطار دائري (border-radius: 50px;) وتتغير ألوانها عند التمرير.
• حقوق النشر:
  • تم إضافة قسم لحقوق النشر يحتوي على اسم المصمم ورابط لموقعه.
  • تم تنسيق النص باستخدام text-transform: capitalize; لجعل الحروف الأولى كبيرة.
• التصميم المتجاوب:
  • تم استخدام @media لجعل الفوتر متجاوبًا مع الشاشات الصغيرة (أقل من 500px).
  • في الشاشات الصغيرة، يتم عرض قائمة التنقل بشكل عمودي بدلًا من الأفقي.

الخصائص المستخدمة:

• Flexbox: تم استخدام display: flex; لتوسيط المحتوى وتنظيم العناصر.
• Transition: تم استخدام transition لإضافة تأثيرات سلسة عند التمرير فوق الأيقونات والروابط.
• Media Queries: تم استخدام @media لجعل التصميم متجاوبًا مع الشاشات المختلفة.

الكود كاملا

<footer>
        <div class="footer-content">
            <h3>Ground Tutorial</h3>
            <p>Ground Tutorial is a blog website where you will find great tutorials on web design and development. Here each tutorial is beautifully described step by step with the required source code.</p>
            <ul class="socials">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
            </ul>
            <div class="footer-menu">
              <ul class="f-menu">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Articles</a></li>
              </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>Design By - <a href="https://www.aweywashk.xyz/">aweywashk</a>  </p>

        </div>

    </footer>
    

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css/">

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #fcfcfc;
    font-family: sans-serif;
}
footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #111;
    height: auto;
    width: 100vw;

    padding-top: 40px;
    color: #fff;
}
.footer-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.footer-content h3{
    font-size: 2.1rem;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 3rem;
}
.footer-content p{
    max-width: 500px;
    margin: 10px auto;
    line-height: 28px;
    font-size: 14px;
    color: #cacdd2;
}
.socials{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 3rem 0;
}
.socials li{
    margin: 0 10px;
}
.socials a{
    text-decoration: none;
    color: #fff;
    border: 1.1px solid white;
    padding: 5px;

    border-radius: 50%;

}
.socials a i{
    font-size: 1.1rem;
    width: 20px;


    transition: color .4s ease;

}

.socials a:hover i{
    color: aqua;
}

.footer-bottom{
    background: #000;
    width: 100vw;
    padding: 20px;

    text-align: center;
}
.footer-bottom p{
    text-align: center;
    font-size: 14px;
    word-spacing: 2px;
    text-transform: capitalize;
}
.footer-bottom p a{
  color:#44bae8;
  font-size: 16px;
  text-decoration: none;
}
.footer-bottom span{
    text-transform: uppercase;
    opacity: .4;
    font-weight: 200;
}
.footer-menu{
  margin-bottom: 20px;
}
.footer-menu ul{
  display: flex;
}
.footer-menu ul li{
padding-right: 10px;
display: block;
}
.footer-menu ul li a{
  color: #cfd2d6;
  border: 1.3px solid white;
  padding: 6px 15px;
  border-radius: 50px;
  text-decoration: none;
}
.footer-menu ul li a:hover{
  color: #27bcda;
}

@media (max-width:500px) {
.footer-menu ul{
  display: inline;



}
.footer-menu ul li{
  margin-bottom: 20px;
}
}
    

معايــنة

هذا الكود يعتبر مثالًا رائعًا لإنشاء فوتر بسيط وأنيق يمكن استخدامه في أي موقع ويب. يمكن تعديل الألوان والتصميم بسهولة لتتناسب مع احتياجات الموقع.