- Get link
- X
- Other Apps
Here is a pixel-perfect, screenshot-ready HTML infographic. Save it as infographic.html, open in Chrome, and screenshot the whole page to get a high-quality PNG.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical vs Horizontal Financial Analysis — Infographic</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background: #eef2f7;
padding: 40px 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.infographic {
width: 1200px;
background: #ffffff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
/* ===== HEADER ===== */
.header {
background: linear-gradient(135deg, #1a2a6c 0%, #2a4d9c 50%, #1a73e8 100%);
color: #fff;
padding: 45px 50px;
position: relative;
overflow: hidden;
}
.header::before {
content: "";
position: absolute;
top: -80px; right: -80px;
width: 300px; height: 300px;
background: rgba(255,255,255,0.08);
border-radius: 50%;
}
.header::after {
content: "";
position: absolute;
bottom: -100px; left: -60px;
width: 250px; height: 250px;
background: rgba(255,255,255,0.05);
border-radius: 50%;
}
.header h1 {
font-size: 38px;
font-weight: 800;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.header p {
font-size: 17px;
margin-top: 10px;
opacity: 0.9;
position: relative;
z-index: 1;
}
/* ===== COLUMNS ===== */
.columns {
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 40px 40px 30px;
position: relative;
}
.col-horizontal { background: #f5f9ff; border-right: 3px solid #e3ecf9; }
.col-vertical { background: #fff9f3; }
.col-badge {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
padding: 6px 14px;
border-radius: 20px;
margin-bottom: 14px;
text-transform: uppercase;
}
.col-horizontal .col-badge { background: #d6e6ff; color: #1a4dab; }
.col-vertical .col-badge { background: #ffe2c2; color: #c96a00; }
.col h2 {
font-size: 26px;
font-weight: 800;
margin-bottom: 6px;
}
.col-horizontal h2 { color: #1a4dab; }
.col-vertical h2 { color: #c96a00; }
.col .subtitle {
font-size: 14px;
color: #666;
margin-bottom: 25px;
font-style: italic;
}
/* ===== TIMELINE (Horizontal) ===== */
.timeline {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 14px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 14px rgba(26,77,171,0.08);
}
.year-box {
text-align: center;
flex: 0 0 auto;
}
.year-box .yr {
font-size: 12px;
color: #888;
font-weight: 600;
letter-spacing: 1px;
}
.year-box .amt {
font-size: 22px;
font-weight: 800;
color: #1a2a6c;
margin-top: 4px;
}
.arrow {
flex: 1;
height: 4px;
background: linear-gradient(90deg, #b8cdf0, #1a73e8);
margin: 0 12px;
position: relative;
border-radius: 2px;
}
.arrow::after {
content: "▶";
position: absolute;
right: -8px;
top: -12px;
color: #1a73e8;
font-size: 16px;
}
.growth-pill {
background: #e6f6ec;
color: #0b8043;
font-weight: 800;
font-size: 15px;
padding: 8px 16px;
border-radius: 30px;
display: inline-block;
margin-bottom: 20px;
border: 1.5px dashed #0b8043;
}
/* ===== BAR CHART (Vertical) ===== */
.bar-chart {
background: #fff;
border-radius: 14px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 14px rgba(201,106,0,0.08);
}
.bar-row {
display: flex;
align-items: center;
margin-bottom: 14px;
}
.bar-row:last-child { margin-bottom: 0; }
.bar-label {
width: 100px;
font-size: 13px;
font-weight: 700;
color: #444;
}
.bar-track {
flex: 1;
height: 22px;
background: #f0f0f0;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.bar-fill {
height: 100%;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
font-size: 12px;
font-weight: 800;
color: #fff;
}
.fill-sales { width: 100%; background: linear-gradient(90deg, #f5a623, #e8850a); }
.fill-cogs { width: 65%; background: linear-gradient(90deg, #f7c04a, #e0a020); }
.fill-gp { width: 35%; background: linear-gradient(90deg, #ffd97a, #f0b830); }
/* ===== FORMULA BOX ===== */
.formula {
background: #fff;
border-left: 5px solid #1a73e8;
border-radius: 10px;
padding: 14px 18px;
margin-bottom: 20px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 14px;
color: #1a2a6c;
}
.col-vertical .formula {
border-left-color: #e8850a;
color: #7a3d00;
}
.formula strong {
display: block;
font-family: 'Segoe UI', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #888;
margin-bottom: 6px;
}
/* ===== KEY POINTS ===== */
.keys {
list-style: none;
}
.keys li {
font-size: 14px;
color: #333;
padding: 8px 0 8px 28px;
position: relative;
line-height: 1.5;
}
.keys li::before {
content: "✓";
position: absolute;
left: 0;
top: 8px;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 900;
color: #fff;
}
.col-horizontal .keys li::before { background: #1a73e8; }
.col-vertical .keys li::before { background: #e8850a; }
/* ===== FOOTER ===== */
.footer {
background: linear-gradient(135deg, #0f1e3d 0%, #1a2a6c 100%);
color: #fff;
padding: 28px 50px;
text-align: center;
}
.footer .tagline {
font-size: 20px;
font-weight: 800;
letter-spacing: 0.5px;
}
.footer .tagline span { color: #4da3ff; }
.footer .tagline em { color: #ffb84d; font-style: normal; }
.footer .credit {
font-size: 12px;
opacity: 0.6;
margin-top: 8px;
letter-spacing: 1px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="infographic">
<!-- HEADER -->
<div class="header">
<h1>📊 Vertical vs Horizontal Financial Analysis</h1>
<p>Understanding the numbers behind the statements</p>
</div>
<!-- COLUMNS -->
<div class="columns">
<!-- HORIZONTAL -->
<div class="col col-horizontal">
<span class="col-badge">➡️ Time-Based</span>
<h2>Horizontal Analysis</h2>
<p class="subtitle">Trend analysis across periods</p>
<div class="timeline">
<div class="year-box">
<div class="yr">2023</div>
<div class="amt">$100K</div>
</div>
<div class="arrow"></div>
<div class="year-box">
<div class="yr">2024</div>
<div class="amt">$120K</div>
</div>
</div>
<div class="growth-pill">▲ +20% Growth</div>
<div class="formula">
<strong>Formula</strong>
(New − Old) ÷ Old × 100
</div>
<ul class="keys">
<li>Compares data across years</li>
<li>Spots growth & decline trends</li>
<li>Base = Prior year figures</li>
</ul>
</div>
<!-- VERTICAL -->
<div class="col col-vertical">
<span class="col-badge">⬇️ Common-Size</span>
<h2>Vertical Analysis</h2>
<p class="subtitle">Line items as % of a base</p>
<div class="bar-chart">
<div class="bar-row">
<div class="bar-label">Sales</div>
<div class="bar-track">
<div class="bar-fill fill-sales">100%</div>
</div>
</div>
<div class="bar-row">
<div class="bar-label">COGS</div>
<div class="bar-track">
<div class="bar-fill fill-cogs">65%</div>
</div>
</div>
<div class="bar-row">
<div class="bar-label">Gross Profit</div>
<div class="bar-track">
<div class="bar-fill fill-gp">35%</div>
</div>
</div>
</div>
<div class="formula">
<strong>Formula</strong>
(Line Item ÷ Base) × 100
</div>
<ul class="keys">
<li>Compares items in same period</li>
<li>Reveals cost structure</li>
<li>Base = Sales or Total Assets</li>
</ul>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
<div class="tagline">
Horizontal = <span>CHANGE</span> | Vertical = <em>PROPORTION</em>
</div>
<div class="credit">Financial Statement Analysis · Infographic</div>
</div>
</div>
</body>
</html>
```
---
📸 How to Convert to PNG/JPG
Method 1: Chrome Screenshot (Fastest)
1. Copy the code → save as infographic.html
2. Double-click to open in Chrome
3. Press F12 → Ctrl+Shift+P → type "Capture full size screenshot"
4. PNG auto-downloads ✅
Method 2: Online HTML-to-Image (No Install)
1. Go to htmlcsstoimage.com or bannerbear.com
2. Paste the HTML → click Generate Image
3. Download as PNG/JPG
Method 3: Figma / Canva Import
· Figma: Use plugin "html.to.design" → paste URL
· Canva: Screenshot → upload → resize
---
🎨 Design Features Included
Element Description
Header Blue gradient with circular glow effects
Left Column Blue theme — Horizontal analysis with timeline arrow
Right Column Orange theme — Vertical analysis with bar chart
Formula Boxes Monospace font, color-coded borders
Bar Chart Pure CSS, animated-looking gradient bars
Footer Dark navy banner with the key takeaway
Want me to also create a dark mode version, square (1080×1080 for Instagram), or vertical (1080×1920 for Stories) version? Just say the word.
Here is a pixel-perfect, screenshot-ready HTML infographic. Save it as infographic.html, open in Chrome, and screenshot the whole page to get a high-quality PNG. ```html
📊 Vertical vs Horizontal Financial Analysis
Understanding the numbers behind the statements
➡️ Time-Based
Horizontal Analysis
Trend analysis across periods
2023
$100K
2024
$120K
▲ +20% Growth
Formula
(New − Old) ÷ Old × 100
- Compares data across years
- Spots growth & decline trends
- Base = Prior year figures
⬇️ Common-Size
Vertical Analysis
Line items as % of a base
Formula
(Line Item ÷ Base) × 100
- Compares items in same period
- Reveals cost structure
- Base = Sales or Total Assets
Comments