Skip to content

Commit f588353

Browse files
RealVishyRealVishy
committed
feat: update index.html with K-Pop rivalry article and enhanced styling
1 parent b755d4d commit f588353

File tree

1 file changed

+189
-104
lines changed

1 file changed

+189
-104
lines changed

‎quests/caddy/index.html‎

Lines changed: 189 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,216 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>W3.CSS Template</title>
4+
<title>Breaking News: The Saja Boys vs HUNTR/X K-Pop Showdown</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
8-
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
8+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Merriweather'>
99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
1010
<style>
11-
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
11+
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Merriweather", serif}
12+
body { background-color: #0a0a0a; color: #e0e0e0; }
13+
.article-header {
14+
border-bottom: 3px solid #ff1744;
15+
padding-bottom: 20px;
16+
margin-bottom: 30px;
17+
}
18+
.byline {
19+
color: #b0b0b0;
20+
font-style: italic;
21+
margin: 10px 0;
22+
}
23+
.lead-paragraph {
24+
font-size: 1.2em;
25+
font-weight: bold;
26+
line-height: 1.6;
27+
margin-bottom: 20px;
28+
color: #f5f5f5;
29+
}
30+
.article-body {
31+
line-height: 1.8;
32+
font-size: 1.05em;
33+
color: #d0d0d0;
34+
}
35+
.sidebar-item {
36+
background-color: #1a1a1a;
37+
border-left: 4px solid #ff1744;
38+
padding: 15px;
39+
margin-bottom: 20px;
40+
color: #e0e0e0;
41+
}
42+
.breaking-badge {
43+
background-color: #ff1744;
44+
color: white;
45+
padding: 5px 10px;
46+
font-weight: bold;
47+
display: inline-block;
48+
margin-bottom: 10px;
49+
}
50+
a { color: #ff1744; }
51+
a:hover { color: #ff5177; }
1252
</style>
1353
</head>
14-
<body class="w3-light-grey">
54+
<body>
55+
56+
<!-- Header -->
57+
<div class="w3-container" style="background-color:#ff1744; color:white; text-align:center; padding:30px 16px">
58+
<h1 style="font-size:48px; margin:0; font-weight:bold;">K-POP INSIDER</h1>
59+
<p style="margin:5px 0;">Your Source for All Things K-Pop Drama</p>
60+
</div>
1561

1662
<!-- Page Container -->
17-
<div class="w3-content w3-margin-top" style="max-width:1400px;">
63+
<div class="w3-content" style="max-width:1200px; margin-top:40px;">
1864

1965
<!-- The Grid -->
2066
<div class="w3-row-padding">
2167

22-
<!-- Left Column -->
23-
<div class="w3-third">
68+
<!-- Main Article Column -->
69+
<div class="w3-col l8 s12">
2470

25-
<div class="w3-white w3-text-grey w3-card-4">
26-
<div class="w3-display-container">
27-
<img src="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png" style="width:100%" alt="Avatar">
28-
<div class="w3-display-bottomleft w3-container w3-text-black">
29-
<h2>Jane Doe</h2>
30-
</div>
71+
<div class="w3-container w3-card-4" style="padding:30px; background-color:#1a1a1a; color:#e0e0e0;">
72+
<div class="article-header">
73+
<span class="breaking-badge">BREAKING</span>
74+
<h1 style="font-size:42px; margin:10px 0; color:#fff;">Rivalry Erupts: Inside the Saja Boys vs HUNTR/X K-Pop Drama</h1>
75+
<p class="byline">By K-Pop Reporter Sarah Kim | October 1, 2025 | 3 hours ago</p>
3176
</div>
32-
<div class="w3-container">
33-
<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Designer</p>
34-
<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>London, UK</p>
35-
<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>ex@mail.com</p>
36-
<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>1224435534</p>
37-
<hr>
38-
39-
<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b></p>
40-
<p>Adobe Photoshop</p>
41-
<div class="w3-light-grey w3-round-xlarge w3-small">
42-
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:90%">90%</div>
43-
</div>
44-
<p>Photography</p>
45-
<div class="w3-light-grey w3-round-xlarge w3-small">
46-
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:80%">
47-
<div class="w3-center w3-text-white">80%</div>
48-
</div>
49-
</div>
50-
<p>Illustrator</p>
51-
<div class="w3-light-grey w3-round-xlarge w3-small">
52-
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:75%">75%</div>
53-
</div>
54-
<p>Media</p>
55-
<div class="w3-light-grey w3-round-xlarge w3-small">
56-
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
57-
</div>
58-
<br>
59-
60-
<p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>
61-
<p>English</p>
62-
<div class="w3-light-grey w3-round-xlarge">
63-
<div class="w3-round-xlarge w3-teal" style="height:24px;width:100%"></div>
64-
</div>
65-
<p>Spanish</p>
66-
<div class="w3-light-grey w3-round-xlarge">
67-
<div class="w3-round-xlarge w3-teal" style="height:24px;width:55%"></div>
68-
</div>
69-
<p>German</p>
70-
<div class="w3-light-grey w3-round-xlarge">
71-
<div class="w3-round-xlarge w3-teal" style="height:24px;width:25%"></div>
72-
</div>
73-
<br>
77+
78+
<div class="article-body">
79+
<p class="lead-paragraph">
80+
In what has become the most explosive K-pop rivalry since the fan wars of 2024, rising boy group Saja Boys
81+
and soloist HUNTR/X have taken their competition to unprecedented levels, leaving the K-pop community stunned and divided.
82+
</p>
83+
84+
<img src="https://www.asianjunkie.com/wp-content/uploads/2025/07/Saja-BoysHUNTRX-768x768.jpg"
85+
alt="Saja Boys and HUNTR/X"
86+
style="width:100%; max-width:600px; display:block; margin:20px auto; border:1px solid #333; box-shadow: 0 4px 8px rgba(255,23,68,0.3);">
87+
<p style="text-align:center; color:#b0b0b0; font-size:0.9em; font-style:italic; margin-bottom:30px;">
88+
The faces behind the rivalry: Saja Boys (top) and HUNTR/X (bottom)
89+
</p>
90+
91+
<p>
92+
The conflict, which began as friendly competition over music show wins, escalated dramatically last week when
93+
HUNTR/X publicly challenged the Saja Boys' latest comeback on social media, claiming their choreography was "recycled
94+
moves from 2015" and their vocals were "heavily auto-tuned."
95+
</p>
96+
97+
<p>
98+
"We've seen K-pop rivalries before," says music critic Ji-Young Park, "but
99+
nothing quite like this. The Saja Boys have built their reputation on synchronized perfection and group chemistry, while HUNTR/X represents
100+
the rising solo artist mentality. It's a clash of philosophies as much as egos."
101+
</p>
102+
103+
<h3 style="margin-top:30px; color:#ff1744;">The Saja Boys Strike Back</h3>
104+
105+
<p>
106+
The Saja Boys, never ones to back down from a challenge, responded with a devastating dance practice video that went viral
107+
across social media. Their flawless 8-minute performance, posted with the caption "This is how it's done," showcased what fans called
108+
"legendary synchronization" and "vocals that don't need fixing."
109+
</p>
110+
111+
<p>
112+
"Look, we respect solo artists," said one Saja Boys member during a V Live stream. "But when you come at us,
113+
you better bring your A-game. And frankly, HUNTR/X showed up unprepared."
114+
</p>
115+
116+
<h3 style="margin-top:30px; color:#ff1744;">HUNTR/X Fires Back</h3>
117+
118+
<p>
119+
HUNTR/X, however, was far from defeated. In a shocking move, they released an impromptu live performance video—
120+
singing and dancing simultaneously without any backing track. The video peaked at over 10 million views in 24 hours
121+
and sparked fierce debates about raw talent versus polished group performances.
122+
</p>
123+
124+
<p>
125+
"The Saja Boys hide behind their numbers," HUNTR/X stated in an Instagram story. "When you're solo, every move matters.
126+
Every note is yours. No relying on others to carry the chorus. Just pure, unfiltered talent."
127+
</p>
128+
129+
<h3 style="margin-top:30px; color:#ff1744;">Fandom Wars Intensify</h3>
130+
131+
<p>
132+
The K-pop community has split into camps, with #TeamSaja and #TeamHUNTRX trending worldwide across multiple platforms.
133+
YouTube comments have devolved into flame wars, and several music shows have had to implement special
134+
security protocols to prevent confrontations between fan groups.
135+
</p>
136+
137+
<p>
138+
"This is getting out of hand," admits fan community moderator Min-Ji Lee. "We've had to ban discussions of the rivalry
139+
on three major K-pop Discord servers. Fans are literally unfollowing friends based on which side they support."
140+
</p>
141+
142+
<h3 style="margin-top:30px; color:#ff1744;">What's Next?</h3>
143+
144+
<p>
145+
Both acts have been confirmed for next month's MAMA Awards 2025, where they'll perform back-to-back in what's being called
146+
the "Battle of the Year." The anticipation has already broken pre-voting records, with both fandoms mobilizing globally
147+
to support their favorites.
148+
</p>
149+
150+
<p>
151+
Whatever the outcome, one thing is certain: the K-pop world will never be the same. As one Twitter user aptly put it,
152+
"Forget BTS vs EXO. This is the real rivalry of our generation."
153+
</p>
154+
155+
<p style="margin-top:40px; padding-top:20px; border-top:1px solid #333; font-style:italic; color:#b0b0b0;">
156+
<strong>Editor's Note:</strong> K-Pop Insider reached out to both the Saja Boys and HUNTR/X's agencies for official comment.
157+
The Saja Boys' agency responded with a formal statement: "Our artists speak through their performances." HUNTR/X's agency sent
158+
a GIF of their artist doing a mic drop, followed by "See you at MAMA."
159+
</p>
74160
</div>
75-
</div><br>
161+
</div>
76162

77-
<!-- End Left Column -->
163+
<!-- End Main Column -->
78164
</div>
79165

80-
<!-- Right Column -->
81-
<div class="w3-twothird">
166+
<!-- Sidebar Column -->
167+
<div class="w3-col l4 s12">
82168

83-
<div class="w3-container w3-card w3-white w3-margin-bottom">
84-
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2>
85-
<div class="w3-container">
86-
<h5 class="w3-opacity"><b>Front End Developer / w3schools.com</b></h5>
87-
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan 2015 - <span class="w3-tag w3-teal w3-round">Current</span></h6>
88-
<p>Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
89-
<hr>
90-
</div>
91-
<div class="w3-container">
92-
<h5 class="w3-opacity"><b>Web Developer / something.com</b></h5>
93-
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Mar 2012 - Dec 2014</h6>
94-
<p>Consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
95-
<hr>
96-
</div>
97-
<div class="w3-container">
98-
<h5 class="w3-opacity"><b>Graphic Designer / designsomething.com</b></h5>
99-
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jun 2010 - Mar 2012</h6>
100-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p><br>
169+
<div class="w3-container">
170+
<div class="sidebar-item">
171+
<h4><i class="fa fa-fire"></i> TRENDING NOW</h4>
172+
<p><strong>Poll Results:</strong> Who will win at MAMA?</p>
173+
<p>Saja Boys: 52%<br>HUNTR/X: 48%</p>
101174
</div>
102-
</div>
103175

104-
<div class="w3-container w3-card w3-white">
105-
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Education</h2>
106-
<div class="w3-container">
107-
<h5 class="w3-opacity"><b>W3Schools.com</b></h5>
108-
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Forever</h6>
109-
<p>Web Development! All I need to know in one place</p>
110-
<hr>
176+
<div class="w3-card" style="padding:20px; margin-bottom:20px; background-color:#1a1a1a; color:#e0e0e0;">
177+
<h4><i class="fa fa-newspaper-o"></i> Related Articles</h4>
178+
<hr style="border-color:#333;">
179+
<p><a href="#" style="text-decoration:none;">
180+
<strong>The Rise of the Saja Boys: From Trainees to Chart Toppers</strong>
181+
</a></p>
182+
<p style="color:#b0b0b0;">2 days ago</p>
183+
<hr style="border-color:#333;">
184+
<p><a href="#" style="text-decoration:none;">
185+
<strong>HUNTR/X: The Soloist Who Defied the Odds</strong>
186+
</a></p>
187+
<p style="color:#b0b0b0;">1 week ago</p>
188+
<hr style="border-color:#333;">
189+
<p><a href="#" style="text-decoration:none;">
190+
<strong>K-Pop Rivalries That Defined Generations</strong>
191+
</a></p>
192+
<p style="color:#b0b0b0;">3 weeks ago</p>
111193
</div>
112-
<div class="w3-container">
113-
<h5 class="w3-opacity"><b>London Business School</b></h5>
114-
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2013 - 2015</h6>
115-
<p>Master Degree</p>
116-
<hr>
194+
195+
<div class="sidebar-item">
196+
<h4><i class="fa fa-quote-left"></i> FAN REACTIONS</h4>
197+
<p style="font-style:italic;">"This is the best K-pop drama since the disbandment rumors of 2023" - @kpopstan247</p>
198+
<hr style="margin:10px 0; border-color:#333;">
199+
<p style="font-style:italic;">"Can we all just enjoy the music?" - @peacefulfan</p>
200+
<hr style="margin:10px 0; border-color:#333;">
201+
<p style="font-style:italic;">"I'm just here for the memes and fancams" - @kpopmemes</p>
117202
</div>
118-
<div class="w3-container">
119-
<h5 class="w3-opacity"><b>School of Coding</b></h5>
120-
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2010 - 2013</h6>
121-
<p>Bachelor Degree</p><br>
203+
204+
<div class="w3-card" style="padding:20px; background-color:#1a1a1a; color:#e0e0e0;">
205+
<h4><i class="fa fa-calendar"></i> UPCOMING EVENT</h4>
206+
<p><strong>MAMA Awards 2025</strong></p>
207+
<p>November 15, 2025</p>
208+
<p>Tokyo Dome, Japan</p>
209+
<p><span class="w3-tag" style="background-color:#ff1744; color:white;">SOLD OUT</span></p>
122210
</div>
123211
</div>
124212

125-
<!-- End Right Column -->
213+
<!-- End Sidebar -->
126214
</div>
127215

128216
<!-- End Grid -->
@@ -131,15 +219,12 @@ <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>201
131219
<!-- End Page Container -->
132220
</div>
133221

134-
<footer class="w3-container w3-teal w3-center w3-margin-top">
135-
<p>Find me on social media.</p>
136-
<i class="fa fa-facebook-official w3-hover-opacity"></i>
137-
<i class="fa fa-instagram w3-hover-opacity"></i>
138-
<i class="fa fa-snapchat w3-hover-opacity"></i>
139-
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
140-
<i class="fa fa-twitter w3-hover-opacity"></i>
141-
<i class="fa fa-linkedin w3-hover-opacity"></i>
142-
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
222+
<footer class="w3-container w3-center" style="background-color:#1a1a1a; color:#e0e0e0; margin-top:50px; padding:32px; border-top:2px solid #ff1744;">
223+
<p style="margin:10px 0;">Follow K-Pop Insider</p>
224+
<i class="fa fa-facebook-official w3-hover-opacity" style="font-size:24px; margin:0 10px; color:#ff1744;"></i>
225+
<i class="fa fa-twitter w3-hover-opacity" style="font-size:24px; margin:0 10px; color:#ff1744;"></i>
226+
<i class="fa fa-instagram w3-hover-opacity" style="font-size:24px; margin:0 10px; color:#ff1744;"></i>
227+
<p style="margin-top:20px; color:#b0b0b0;">© 2025 K-Pop Insider. All rights reserved.</p>
143228
</footer>
144229

145230
</body>

0 commit comments

Comments
 (0)