แจก Footer Social and Header Web By CSS

bykrunid-131515 -
0

Footer Social CSS

คุยกับ Chat GPT

https://chatgpt.com/share/66e937e9-4214-8009-a419-d22a15939f50 


ใส่ใน index

<footer class="footer">

    <div class="social-icons">

        <a href="https://facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>

        <a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>

        <a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>

        <a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a>

        <a href="https://youtube.com" target="_blank"><i class="fab fa-youtube"></i></a>

        <a href="https://pinterest.com" target="_blank"><i class="fab fa-pinterest"></i></a>

    </div>

    <p class="footer-text">© 2024 Your Website | Designed with ♥</p>

</footer>


CSS

.footer {

    background: linear-gradient(to right, #6a11cb, #2575fc);

    padding: 20px;

    text-align: center;

    color: white;

    font-family: 'Arial', sans-serif;

    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);

}


.social-icons {

    margin-bottom: 10px;

}


.social-icons a {

    color: white;

    margin: 0 15px;

    font-size: 24px;

    transition: transform 0.3s ease, color 0.3s ease;

}


.social-icons a:hover {

    transform: scale(1.2);

    color: #ffe700;

}


.footer-text {

    margin-top: 10px;

    font-size: 14px;

}

Font Awesome สำหรับไอคอน:

คุณต้องเพิ่ม Font Awesome CDN ใน <head> ของเอกสาร HTML เพื่อให้ไอคอนแสดง Icon

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">




 <h1 class="rainbow-text">ระบบสุ่มแบบทดสอบ</h1>

ปรับแต่งใส่พื้นหลังเหมือน footer มีเส้นขอบและเพิ่มเงา




HTML:

<div class="center-container">
    <h1 class="rainbow-text">ระบบสุ่มแบบทดสอบ</h1>
</div>

การจัดกึ่งกลางทั้งแนวนอนและแนวตั้ง:
ถ้าคุณต้องการให้อยู่ตรงกลางทั้งแนวนอนและแนวตั้ง คุณสามารถใช้ Flexbox กับคอนเทนเนอร์ที่ครอบ <h1> ได้:
CSS (ทั้งแนวนอนและแนวตั้ง):

.center-container {
    display: flex;
    justify-content: center; /* จัดกึ่งกลางแนวนอน */
    align-items: center; /* จัดกึ่งกลางแนวตั้ง */
    height: 100vh; /* ใช้ความสูง 100% ของหน้าจอ */
}

.rainbow-text {
    background: linear-gradient(to right, #6a11cb, #2575fc);
    color: white;
    font-size: 36px;
    padding: 15px 30px;
    border: 3px solid #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    font-family: 'Arial', sans-serif;
    text-align: center;
    display: inline-block;
}

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า