-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblog.html
More file actions
150 lines (144 loc) · 11.9 KB
/
Copy pathblog.html
File metadata and controls
150 lines (144 loc) · 11.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="VeloMix Style Dispatch – Fashion editorials, trend guides, and style inspiration from our team.">
<title>Style Dispatch | VeloMix Journal</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="promo-bar">🚚 Free shipping on orders over $79 | Use code <span>VELO15</span> for 15% off</div>
<header class="header" id="mainHeader">
<div class="container header-inner">
<a href="index.html" class="logo">Velo<span>Mix</span></a>
<nav class="nav-links">
<a href="index.html" class="nav-link">Home</a>
<a href="shop.html" class="nav-link">Shop</a>
<a href="blog.html" class="nav-link active">Journal</a>
<a href="contact.html" class="nav-link">Contact</a>
</nav>
<div class="nav-actions">
<a href="shop.html" class="nav-icon-btn" style="position:relative;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
<span class="cart-count">0</span>
</a>
<button class="mobile-menu-btn"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button>
</div>
</div>
</header>
<!-- Blog Hero -->
<section style="background: var(--dark); padding: 80px 0; text-align: center; position: relative; overflow: hidden;">
<div style="position:absolute; inset:0; background: radial-gradient(circle at 60% 50%, rgba(249,115,22,0.12) 0%, transparent 60%);"></div>
<div class="container" style="position:relative; z-index:1;">
<span class="section-label" style="display:block; margin-bottom:14px;">VeloMix</span>
<h1 style="font-size:52px; font-weight:900; color:#fff; margin-bottom:14px;">Style Dispatch</h1>
<p style="color:rgba(255,255,255,0.6); font-size:16px; max-width:520px; margin: 0 auto;">Trend guides, outfit ideas, and fashion intelligence — straight from our editorial team.</p>
</div>
</section>
<!-- Category filter tabs -->
<section style="background: var(--bg); border-bottom: 1px solid var(--border); padding: 20px 0;">
<div class="container" style="display:flex; gap:24px; overflow-x:auto;">
<button style="padding:8px 20px; border-radius:50px; background:var(--primary); color:#fff; border:none; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;">All</button>
<button style="padding:8px 20px; border-radius:50px; background:transparent; color:var(--gray); border:1.5px solid var(--border); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;">Styling Tips</button>
<button style="padding:8px 20px; border-radius:50px; background:transparent; color:var(--gray); border:1.5px solid var(--border); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;">Trend Reports</button>
<button style="padding:8px 20px; border-radius:50px; background:transparent; color:var(--gray); border:1.5px solid var(--border); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;">Body Confidence</button>
<button style="padding:8px 20px; border-radius:50px; background:transparent; color:var(--gray); border:1.5px solid var(--border); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;">Seasonal Guides</button>
</div>
</section>
<!-- Featured Article -->
<section class="section-padding">
<div class="container">
<div style="display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; margin-bottom: 64px; background:var(--bg-light); border-radius:var(--radius-lg); overflow:hidden;">
<div style="height: 440px;">
<!-- AI Prompt: Fashionable woman in layered autumn outfits walking on city street, warm lighting, editorial fashion photography -->
<img src="assets/trend_girl_1.png" alt="Featured Article" style="width:100%; height:100%; object-fit:cover;">
</div>
<div style="padding: 48px 40px 48px 0;">
<div class="blog-meta" style="margin-bottom:16px;">
<span class="blog-tag">Featured</span>
<span class="blog-date">Jun 28, 2026</span>
</div>
<h2 style="font-size:32px; font-weight:800; color:var(--dark); line-height:1.2; margin-bottom:16px;">5 Clever Ways to Layer Your Wardrobe This Autumn</h2>
<p style="font-size:15px; color:var(--gray-2); line-height:1.7; margin-bottom:24px;">Mastering the art of layering unlocks a whole new wardrobe without buying anything new. From lightweight base layers to structured outerwear — our stylists break it down.</p>
<a href="blog-detail.html" class="btn btn-primary btn-sm">Read Full Article</a>
</div>
</div>
<!-- 6 Blog Articles Grid -->
<div class="blog-grid">
<div class="blog-card">
<div class="blog-img-wrap"><!-- AI Prompt: Fashionable woman wearing a stylish cardigan, autumn outdoors, editorial photo --><img src="assets/trend_girl_2.png" alt="Blog"></div>
<div class="blog-info">
<div class="blog-meta"><span class="blog-tag">Trend Report</span><span class="blog-date">Jun 22, 2026</span></div>
<a href="blog-detail.html" class="blog-title">The Cardigan Renaissance: Every Silhouette You Need Right Now</a>
<p class="blog-excerpt">From oversized to structured, cardigans have had a full glow-up. We break down which styles define the moment.</p>
<a href="blog-detail.html" class="blog-readmore">Read Article →</a>
</div>
</div>
<div class="blog-card">
<div class="blog-img-wrap"><!-- AI Prompt: Stylish woman jumping dynamically in bold colourful outfit, urban background, fashion energy --><img src="assets/trend_girl_3.png" alt="Blog"></div>
<div class="blog-info">
<div class="blog-meta"><span class="blog-tag">Body Confidence</span><span class="blog-date">Jun 15, 2026</span></div>
<a href="blog-detail.html" class="blog-title">Dressing for Your Energy, Not Just Your Body Shape</a>
<p class="blog-excerpt">The most flattering outfit is the one that matches your energy. Our guide will help you find that confidence.</p>
<a href="blog-detail.html" class="blog-readmore">Read Article →</a>
</div>
</div>
<div class="blog-card">
<div class="blog-img-wrap"><!-- AI Prompt: Street style photography of couple in matching outfits walking in a city at dusk --><img src="assets/street_style.png" alt="Blog"></div>
<div class="blog-info">
<div class="blog-meta"><span class="blog-tag">Street Style</span><span class="blog-date">Jun 10, 2026</span></div>
<a href="blog-detail.html" class="blog-title">The Street Style Files: Our Favourite Looks From This Month</a>
<p class="blog-excerpt">We hit the streets to capture the best real-world fashion moments. Here's what caught our eye this month.</p>
<a href="blog-detail.html" class="blog-readmore">Read Article →</a>
</div>
</div>
<div class="blog-card">
<div class="blog-img-wrap"><!-- AI Prompt: Stylish woman in premium casual fashion outfit, promotional editorial photo colourful background --><img src="assets/promo_fashion.png" alt="Blog"></div>
<div class="blog-info">
<div class="blog-meta"><span class="blog-tag">Seasonal Guide</span><span class="blog-date">Jun 3, 2026</span></div>
<a href="blog-detail.html" class="blog-title">Building a Capsule Wardrobe for the Transitional Season</a>
<p class="blog-excerpt">Between summer and autumn, dressing right requires a strategic edit. Here are the 10 pieces that bridge the gap.</p>
<a href="blog-detail.html" class="blog-readmore">Read Article →</a>
</div>
</div>
<div class="blog-card">
<div class="blog-img-wrap"><!-- AI Prompt: Fashion accessories flatlay minimalist shoes and bag on marble surface, product editorial --><img src="assets/product_shoes.png" alt="Blog"></div>
<div class="blog-info">
<div class="blog-meta"><span class="blog-tag">Styling Tips</span><span class="blog-date">May 28, 2026</span></div>
<a href="blog-detail.html" class="blog-title">How to Style the Same Shoe Three Different Ways</a>
<p class="blog-excerpt">Versatility is the ultimate luxury. These three approaches to one pair of shoes will transform your wardrobe rotation.</p>
<a href="blog-detail.html" class="blog-readmore">Read Article →</a>
</div>
</div>
<div class="blog-card">
<div class="blog-img-wrap"><!-- AI Prompt: Model wearing denim jacket street photography, editorial, warm evening light --><img src="assets/product_denim_jacket.png" alt="Blog"></div>
<div class="blog-info">
<div class="blog-meta"><span class="blog-tag">Trend Report</span><span class="blog-date">May 20, 2026</span></div>
<a href="blog-detail.html" class="blog-title">Denim Is Back — And It's Bringing New Rules</a>
<p class="blog-excerpt">From washed-out indigo to structured black denim, discover how the fabric is redefining casual dressing this season.</p>
<a href="blog-detail.html" class="blog-readmore">Read Article →</a>
</div>
</div>
</div>
<!-- Pagination -->
<div class="pagination">
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn">›</button>
</div>
</div>
</section>
<footer>
<div class="container footer-top">
<div><div class="footer-brand-logo">Velo<span>Mix</span></div><p class="footer-about">Fashion that moves with you since 2018.</p><div class="footer-socials"><a href="#" aria-label="Instagram">Ig</a><a href="#" aria-label="TikTok">Tk</a><a href="#" aria-label="Pinterest">Pt</a></div></div>
<div class="footer-col"><h4>Quick Links</h4><ul class="footer-links"><li><a href="index.html">Home</a></li><li><a href="shop.html">Shop</a></li><li><a href="blog.html">Journal</a></li><li><a href="contact.html">Contact</a></li></ul></div>
<div class="footer-col"><h4>Categories</h4><ul class="footer-links"><li><a href="shop.html">Tops & Tees</a></li><li><a href="shop.html">Outerwear</a></li><li><a href="shop.html">Footwear</a></li><li><a href="shop.html">Accessories</a></li></ul></div>
<div class="footer-col footer-newsletter"><h4>Newsletter</h4><p>Get style tips in your inbox weekly.</p><form class="newsletter-form" onsubmit="event.preventDefault();"><input type="email" placeholder="Your email"><button type="submit">Join</button></form></div>
</div>
<div class="footer-bottom"><div class="container"><span>© 2026 VeloMix. All rights reserved.</span><div class="footer-bottom-links"><a href="contact.html">Privacy</a><a href="contact.html">Terms</a></div></div></div>
</footer>
<script src="main.js"></script>
</body>
</html>