-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlinkedin-image.html
More file actions
71 lines (71 loc) · 4.87 KB
/
Copy pathlinkedin-image.html
File metadata and controls
71 lines (71 loc) · 4.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TechFromZero - Day 49 - React Native</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 100vw; height: 100vh; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #f1f5f9; display: flex; overflow: hidden; }
.left { width: 45%; padding: 5% 4%; display: flex; flex-direction: column; justify-content: center; }
.series-badge { display: inline-block; background: linear-gradient(90deg, #4338ca, #6366f1); color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 3px; padding: 10px 24px; border-radius: 30px; margin-bottom: 28px; width: fit-content; }
.day-number { font-size: 120px; font-weight: 900; background: linear-gradient(90deg, #a5b4fc, #6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 12px; }
.tech-name { font-size: 52px; font-weight: 700; color: #f8fafc; margin-bottom: 8px; }
.project-name { font-size: 23px; color: #94a3b8; margin-bottom: 36px; }
.tag-row { display: flex; gap: 12px; flex-wrap: wrap; }
.tag { background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.3); color: #a5b4fc; font-size: 18px; font-weight: 600; padding: 8px 20px; border-radius: 8px; }
.right { flex: 1; padding: 5% 4% 5% 2%; display: flex; flex-direction: column; justify-content: center; }
.arch-title { font-size: 20px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #a5b4fc; margin-bottom: 28px; }
.arch-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-bottom: 44px; }
.arch-box { background: rgba(30, 41, 59, 0.8); border: 1.5px solid rgba(99, 102, 241, 0.3); border-radius: 14px; padding: 12px 12px; text-align: center; min-width: 86px; }
.arch-box small { font-size: 12px; color: #94a3b8; }
.arch-box strong { font-size: 16px; }
.arch-arrow { color: #a5b4fc; font-size: 26px; padding: 0 6px; font-weight: 700; }
.steps-title { font-size: 20px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #a5b4fc; margin-bottom: 20px; }
.step-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.step-list li { font-size: 17px; color: #cbd5e1; display: flex; align-items: center; gap: 12px; }
.step-num { background: linear-gradient(135deg, #4338ca, #6366f1); color: #fff; font-size: 15px; font-weight: 700; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #4338ca, #6366f1, #4338ca); }
.github-url { position: absolute; bottom: 24px; right: 48px; font-size: 18px; color: #64748b; font-weight: 600; }
.beginner-badge { position: absolute; top: 32px; right: 48px; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); color: #a5b4fc; font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 8px 20px; border-radius: 24px; }
</style>
</head>
<body>
<div class="beginner-badge">🎯 Beginner Guide</div>
<div class="left">
<div class="series-badge">🚀 TechFromZero Series</div>
<div class="day-number">DAY 49</div>
<div class="tech-name">React Native</div>
<div class="project-name">WeatherNow — your React skills, one app on iOS + Android</div>
<div class="tag-row">
<span class="tag">React Native</span>
<span class="tag">Expo</span>
<span class="tag">Hooks</span>
<span class="tag">REST API</span>
</div>
</div>
<div class="right">
<div class="arch-title">📐 App Flow</div>
<div class="arch-flow">
<div class="arch-box"><small>Type</small><br><strong>City</strong></div>
<span class="arch-arrow">→</span>
<div class="arch-box"><small>fetch</small><br><strong>Geocode</strong></div>
<span class="arch-arrow">→</span>
<div class="arch-box"><small>fetch</small><br><strong>Forecast</strong></div>
<span class="arch-arrow">→</span>
<div class="arch-box"><small>render</small><br><strong>FlatList</strong></div>
</div>
<div class="steps-title">🧱 Built Step by Step</div>
<ul class="step-list">
<li><span class="step-num">1</span> npx create-expo-app + QR</li>
<li><span class="step-num">2</span> View/Text, not div/span</li>
<li><span class="step-num">3</span> useState + useEffect</li>
<li><span class="step-num">4</span> fetch Open-Meteo (no key)</li>
<li><span class="step-num">5</span> FlatList renders the days</li>
<li><span class="step-num">6</span> EAS Build → iOS + Android</li>
</ul>
</div>
<div class="footer-bar"></div>
<div class="github-url">🧠 dev48v.infy.uk/tech/day49-react-native.html</div>
</body>
</html>