1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Anti-Pattern: Left Border Accent Cards</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 body {
16 font-family: 'Inter', sans-serif;
17 min-height: 100vh;
18 background: #f1f5f9;
19 padding: 40px;
20 }
21
22 .container {
23 max-width: 960px;
24 width: 100%;
25 margin: 0 auto;
26 background: #ffffff;
27 border-radius: 24px;
28 padding: 48px;
29 display: flex;
30 flex-direction: column;
31 position: relative;
32 box-shadow: 0 4px 24px rgba(0,0,0,0.08);
33 }
34
35 /* Header */
36 .header {
37 text-align: center;
38 margin-bottom: 40px;
39 }
40
41 .header h1 {
42 font-size: 32px;
43 font-weight: 700;
44 color: #0f172a;
45 margin-bottom: 12px;
46 }
47
48 .header p {
49 font-size: 16px;
50 color: #64748b;
51 }
52
53 /* Cards grid */
54 .cards {
55 display: grid;
56 grid-template-columns: repeat(2, 1fr);
57 gap: 24px;
58 flex: 1;
59 }
60
61 /* THE PROBLEM: Left border accent on rounded cards */
62 .card {
63 background: #ffffff;
64 border-radius: 16px;
65 padding: 28px;
66 display: flex;
67 flex-direction: column;
68 box-shadow: 0 2px 8px rgba(0,0,0,0.06);
69 /* The weird left border that doesn't match the rounded corners */
70 border-left: 4px solid;
71 }
72
73 .card-blue { border-left-color: #3b82f6; }
74 .card-purple { border-left-color: #a855f7; }
75 .card-green { border-left-color: #22c55e; }
76 .card-orange { border-left-color: #f97316; }
77
78 .card-icon {
79 font-size: 28px;
80 margin-bottom: 16px;
81 }
82
83 .card h3 {
84 font-size: 18px;
85 font-weight: 700;
86 color: #0f172a;
87 margin-bottom: 10px;
88 }
89
90 .card p {
91 font-size: 14px;
92 color: #64748b;
93 line-height: 1.6;
94 margin-bottom: 20px;
95 flex: 1;
96 }
97
98 .card-btn {
99 padding: 10px 18px;
100 border-radius: 8px;
101 font-size: 14px;
102 font-weight: 600;
103 cursor: pointer;
104 border: none;
105 width: fit-content;
106 background: #f1f5f9;
107 color: #475569;
108 }
109
110 /* Stats bar - also with left border accent */
111 .stats-bar {
112 display: flex;
113 gap: 16px;
114 margin-top: 24px;
115 }
116
117 .stat-item {
118 flex: 1;
119 padding: 20px;
120 border-radius: 12px;
121 background: #f8fafc;
122 border-left: 4px solid;
123 }
124
125 .stat-item:nth-child(1) { border-left-color: #06b6d4; }
126 .stat-item:nth-child(2) { border-left-color: #ec4899; }
127 .stat-item:nth-child(3) { border-left-color: #eab308; }
128 .stat-item:nth-child(4) { border-left-color: #6366f1; }
129
130 .stat-value {
131 font-size: 28px;
132 font-weight: 800;
133 color: #0f172a;
134 margin-bottom: 4px;
135 }
136
137 .stat-label {
138 font-size: 12px;
139 color: #64748b;
140 font-weight: 500;
141 }
142
143
144 </style>
145</head>
146<body>
147 <div class="container">
148 <div class="header">
149 <h1>Our Services</h1>
150 <p>Discover what we can do for your business</p>
151 </div>
152
153 <div class="cards">
154 <div class="card card-blue">
155 <div class="card-icon">🚀</div>
156 <h3>Growth Strategy</h3>
157 <p>Accelerate your business growth with our proven strategies and expert guidance.</p>
158 <button class="card-btn">Learn More</button>
159 </div>
160
161 <div class="card card-purple">
162 <div class="card-icon">💡</div>
163 <h3>Innovation Lab</h3>
164 <p>Transform ideas into reality with our cutting-edge innovation services.</p>
165 <button class="card-btn">Explore</button>
166 </div>
167
168 <div class="card card-green">
169 <div class="card-icon">📊</div>
170 <h3>Data Analytics</h3>
171 <p>Make data-driven decisions with our comprehensive analytics solutions.</p>
172 <button class="card-btn">Get Started</button>
173 </div>
174
175 <div class="card card-orange">
176 <div class="card-icon">🎯</div>
177 <h3>Marketing</h3>
178 <p>Reach your target audience effectively with our marketing expertise.</p>
179 <button class="card-btn">Contact Us</button>
180 </div>
181 </div>
182
183 <div class="stats-bar">
184 <div class="stat-item">
185 <div class="stat-value">500+</div>
186 <div class="stat-label">Clients</div>
187 </div>
188 <div class="stat-item">
189 <div class="stat-value">98%</div>
190 <div class="stat-label">Satisfaction</div>
191 </div>
192 <div class="stat-item">
193 <div class="stat-value">24/7</div>
194 <div class="stat-label">Support</div>
195 </div>
196 <div class="stat-item">
197 <div class="stat-value">50+</div>
198 <div class="stat-label">Countries</div>
199 </div>
200 </div>
201
202 </div>
203<script src="/js/detect-antipatterns-browser.js"></script>
204</body>
205</html>