以 20th Century Boy 為範例

目前把 team LOGO 和 Teammate 都準備好了可放上連結的地方，未來可自行更換

這是以”Team LOGO”為例，已經換置好的instagram網址 https://www.instagram.com/20thcenturybboys/

這是以”Teammate”為例，尚未替換的網址區域。目前皆以 URL HERE!!! 表示

可在這裡先練習、確認找得到需要替換的網址在哪

<div class="team-profile">
    <!-- Header Section -->
    <div class="header">
        <div class="team-name">
            <h1>20<sup class="italic">th</sup> Century B-boys</h1>
        </div>
        <div class="team-logo">
            <a href="<https://www.instagram.com/20thcenturybboys/>" target="_blank">
                <div class="logo" style="background-image: url('<https://custom-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1920,f_auto,q_auto/7842414/769084_416499.png>');">
                    <!-- Updated Image logo as background -->
                </div>
            </a>
        </div>
        <div class="team-info">
            <img src="<https://upload.wikimedia.org/wikipedia/commons/0/09/Flag_of_South_Korea.svg>" alt="South Korea Flag">
            <div class="team-label">
                <div class="color-dot orange"></div>
                <p>Team Korea</p>
            </div>
        </div>
    </div>

    <!-- Description Section -->
    <div class="description">
        <p><strong>20th Century B-boys</strong> is a South Korean breakdancing team, founded on April 17, 2002. We highly value hip-hop culture and often organize various activities centered around B-boys, such as DJing, breakdancing, and rapping. We also have mentors from Korea and the United States, and under their influence, our team has developed a dance style known as <strong>ROCKING & BREAKING</strong>.</p>
    </div>

    <!-- Teammates Introduction Section -->
    <div class="teammates-intro">
        <div class="teammate">
            <a href="URL HERE!!!" target="_blank">
                <img src="<https://custom-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1920,f_auto,q_auto/7842414/406563_914934.jpg>" alt="Teammate 1">
                <p>Captain KNUKL</p>
            </a>
        </div>
        <div class="teammate">
            <a href="URL HERE!!!" target="_blank">
                <img src="<https://custom-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1920,f_auto,q_auto/7842414/629853_586211.jpg>" alt="Teammate 2">
                <p>RUMBLE</p>
            </a>
        </div>
        <div class="teammate">
            <a href="URL HERE!!!" target="_blank">
                <img src="<https://custom-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1920,f_auto,q_auto/7842414/367169_778773.jpg>" alt="Teammate 3">
                <p>MKAY</p>
            </a>
        </div>
        <div class="teammate">
            <a href="URL HERE!!!" target="_blank">
                <img src="<https://custom-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1920,f_auto,q_auto/7842414/241731_559337.jpg>" alt="Teammate 4">
                <p>UKNOW</p>
            </a>
        </div>
        <div class="teammate">
            <a href="URL HERE!!!" target="_blank">
                <img src="<https://custom-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1920,f_auto,q_auto/7842414/254934_569985.jpg>" alt="Teammate 5">
                <p>INMOUNTBOY</p>
            </a>
        </div>
    </div>
</div>

<style>
/* Styling for the team-info section */
.team-info p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.8em;
    margin: 5px 0 0 0;
    padding: 5px 10px;
    border-radius: 5px;
}

/* Styling for the color-dot (circle indicator) */
.color-dot {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #B23F39; /* Default color for Korea team */
    margin-right: 5px;
}

.orange {
    background-color: #e26436;
}

/* Additional CSS for anchor links */
a {
    text-decoration: none;
    color: inherit;
}

/* Styling for teammates hover effect */
.teammate img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    transition: transform 0.3s ease;
}
</style>

若自行操作有任何問題，歡迎與我們聯繫！

https://futurenest.ai/footer.html