目前把 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>