Skip to content

Commit 282ee41

Browse files
futurestackintelfuturestackintel
authored
Add files via upload
1 parent 346866f commit 282ee41

1 file changed

Lines changed: 315 additions & 0 deletions

File tree

‎ebooks.html‎

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
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, maximum-scale=1.0">
6+
<title>FutureStack Intelligence — Ebooks</title>
7+
<link rel="stylesheet" href="shared.css">
8+
<style>
9+
.page-hero {
10+
position:relative;z-index:1;
11+
background:linear-gradient(135deg,#06041a 0%,#090620 100%);
12+
padding:64px 40px 48px;
13+
border-bottom:1px solid var(--glass-border);
14+
text-align:center;
15+
}
16+
17+
.ebooks-grid {
18+
display:grid;
19+
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
20+
gap:24px;
21+
}
22+
23+
.ebook-card {
24+
background:var(--glass);
25+
border:1px solid var(--glass-border);
26+
border-radius:8px;
27+
overflow:hidden;
28+
transition:all 0.35s;
29+
}
30+
31+
.ebook-card:hover {
32+
transform:translateY(-6px);
33+
border-color:rgba(123,47,247,0.4);
34+
box-shadow:0 24px 64px rgba(0,0,0,0.6);
35+
}
36+
37+
.ebook-cover {
38+
height:240px;
39+
overflow:hidden;
40+
position:relative;
41+
background:linear-gradient(135deg,#080620,#0d0830);
42+
}
43+
44+
.ebook-cover img {
45+
width:100%;height:100%;
46+
object-fit:cover;
47+
object-position:top;
48+
transition:transform 0.4s;
49+
}
50+
51+
.ebook-card:hover .ebook-cover img { transform:scale(1.04); }
52+
53+
.ebook-placeholder {
54+
height:200px;
55+
background:linear-gradient(135deg,rgba(0,234,255,0.08),rgba(123,47,247,0.15));
56+
display:flex;flex-direction:column;
57+
align-items:center;justify-content:center;
58+
gap:10px;
59+
}
60+
61+
.ebook-placeholder span:first-child { font-size:52px; }
62+
.ebook-placeholder span:last-child { font-family:var(--font-head);font-size:10px;letter-spacing:2px;color:var(--cyan);opacity:0.7; }
63+
64+
.ebook-body { padding:22px; }
65+
.ebook-genre { font-family:var(--font-head);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:8px; }
66+
.ebook-card h3 { font-family:var(--font-head);font-size:13px;color:white;margin-bottom:10px;line-height:1.4; }
67+
.ebook-card p { font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:18px;font-weight:300; }
68+
69+
.platform-label { font-family:var(--font-head);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:10px; }
70+
71+
.platform-btns { display:flex;gap:8px;flex-wrap:wrap; }
72+
73+
.btn-pl {
74+
display:inline-flex;align-items:center;gap:6px;
75+
padding:9px 13px;border-radius:3px;
76+
text-decoration:none;
77+
font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:1px;
78+
border:1px solid transparent;
79+
transition:all 0.3s;
80+
white-space:nowrap;
81+
}
82+
83+
.btn-pl:hover { transform:translateY(-2px); }
84+
85+
.btn-amazon { background:rgba(255,153,0,0.12);border-color:rgba(255,153,0,0.35);color:#ff9900; }
86+
.btn-amazon:hover { background:rgba(255,153,0,0.22);box-shadow:0 0 12px rgba(255,153,0,0.25); }
87+
.btn-gumroad { background:rgba(255,144,104,0.12);border-color:rgba(255,144,104,0.35);color:#ff9068; }
88+
.btn-gumroad:hover { background:rgba(255,144,104,0.22);box-shadow:0 0 12px rgba(255,144,104,0.25); }
89+
.btn-payhip { background:rgba(0,150,255,0.12);border-color:rgba(0,150,255,0.35);color:#3ab0ff; }
90+
.btn-payhip:hover { background:rgba(0,150,255,0.22);box-shadow:0 0 12px rgba(0,150,255,0.25); }
91+
92+
.notify-bar {
93+
text-align:center;
94+
margin-top:48px;
95+
padding:32px;
96+
background:var(--glass);
97+
border:1px solid var(--glass-border);
98+
border-radius:6px;
99+
}
100+
101+
.notify-bar p { color:var(--muted);font-size:14px;margin-bottom:20px;line-height:1.7; }
102+
103+
.notify-form { display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap; }
104+
.notify-form input { flex:1;min-width:200px; }
105+
.notify-form a {
106+
background:linear-gradient(135deg,var(--cyan),var(--blue));
107+
color:var(--dark);padding:13px 20px;border-radius:4px;
108+
text-decoration:none;font-family:var(--font-head);font-size:10px;
109+
font-weight:700;letter-spacing:1px;white-space:nowrap;
110+
display:flex;align-items:center;transition:all 0.3s;
111+
}
112+
.notify-form a:hover { box-shadow:0 0 20px rgba(0,234,255,0.4); }
113+
114+
@media (max-width:768px) {
115+
.page-hero { padding:48px 20px 36px; }
116+
.ebooks-grid { grid-template-columns:1fr;max-width:400px;margin:0 auto; }
117+
.ebook-cover { height:220px; }
118+
.platform-btns { gap:6px; }
119+
.notify-form { flex-direction:column; }
120+
.notify-form input,.notify-form a { width:100%;justify-content:center;text-align:center; }
121+
}
122+
</style>
123+
</head>
124+
<body>
125+
126+
<nav class="navbar">
127+
<a href="index.html" class="nav-logo">
128+
<img src="logo.png" alt="FutureStack">
129+
<div class="nav-brand-text">FutureStack<span>Intelligence</span></div>
130+
</a>
131+
<ul class="nav-links">
132+
<li><a href="index.html">Home</a></li>
133+
<li><a href="services.html">Services</a></li>
134+
<li><a href="ebooks.html" class="active">Ebooks</a></li>
135+
<li><a href="courses.html">Courses</a></li>
136+
<li><a href="contact.html" class="nav-cta">Work With Us</a></li>
137+
</ul>
138+
<div class="hamburger" id="ham"><span></span><span></span><span></span></div>
139+
</nav>
140+
141+
<div class="mobile-menu" id="mobileMenu">
142+
<a href="index.html">Home</a>
143+
<a href="services.html">Services</a>
144+
<a href="ebooks.html" class="active">Ebooks</a>
145+
<a href="courses.html">Courses</a>
146+
<a href="contact.html" class="m-cta">Work With Us</a>
147+
</div>
148+
149+
<div class="page-wrap">
150+
<div class="page-hero">
151+
<div class="section-tag" style="justify-content:center;">Knowledge Products</div>
152+
<h1 class="section-title">Ebooks & <span>Resources</span></h1>
153+
<p style="color:var(--muted);font-size:15px;max-width:500px;margin:0 auto;line-height:1.8;font-weight:300;">Practical, no-fluff tech knowledge — written for people who want to understand and apply, not just read.</p>
154+
</div>
155+
156+
<div class="container">
157+
<div class="ebooks-grid">
158+
159+
<!-- BOOK 1 — AI POWERED ETHICAL HACKING -->
160+
<div class="ebook-card">
161+
<div class="ebook-cover"><img src="book1-cover.jpg" alt="AI-Powered Ethical Hacking" /></div>
162+
<div class="ebook-body">
163+
<div class="ebook-genre">Cybersecurity</div>
164+
<h3>AI-Powered Ethical Hacking Starter Kit</h3>
165+
<p>The complete beginner's guide to learning cybersecurity faster using AI as your personal tutor. From zero to bug bounty ready in 30 days.</p>
166+
<span class="platform-label">Choose your platform:</span>
167+
<div class="platform-btns">
168+
<a href="YOUR_AMAZON_LINK_HERE" target="_blank" class="btn-pl btn-amazon">🛍 Amazon</a>
169+
<a href="https://ghostwriterfti.gumroad.com/l/ijitki" target="_blank" class="btn-pl btn-gumroad">🟠 Gumroad</a>
170+
<a href="https://payhip.com/b/cbBmg" target="_blank" class="btn-pl btn-payhip">💙 Payhip</a>
171+
</div>
172+
</div>
173+
</div>
174+
175+
<!-- BOOK 2 — THE DIGITAL GHOST -->
176+
<div class="ebook-card">
177+
<div class="ebook-cover"><img src="Digital Ghost.png" alt="The Digital Ghost" /></div>
178+
<div class="ebook-body">
179+
<div class="ebook-genre">Privacy & Security</div>
180+
<h3>The Digital Ghost</h3>
181+
<p>How to vanish, reappear, and dominate the modern web. A practical playbook for taking full control of your digital identity.</p>
182+
<span class="platform-label">Choose your platform:</span>
183+
<div class="platform-btns">
184+
<a href="YOUR_AMAZON_LINK_HERE" target="_blank" class="btn-pl btn-amazon">🛍 Amazon</a>
185+
<a href="https://ghostwriterfti.gumroad.com/l/cwxnb" target="_blank" class="btn-pl btn-gumroad">🟠 Gumroad</a>
186+
<a href="https://payhip.com/b/Dix5M" target="_blank" class="btn-pl btn-payhip">💙 Payhip</a>
187+
</div>
188+
</div>
189+
</div>
190+
191+
<!-- BOOK 3 — DARK WEB EXPLAINED -->
192+
<div class="ebook-card">
193+
<div class="ebook-cover"><img src="Dark web.png" alt="Dark Web Explained" /></div>
194+
<div class="ebook-body">
195+
<div class="ebook-genre">Cybersecurity</div>
196+
<h3>Dark Web Explained</h3>
197+
<p>What it is, how it works, and how to stay safe. Strip away the myths and get the honest truth about the internet's most misunderstood layer.</p>
198+
<span class="platform-label">Choose your platform:</span>
199+
<div class="platform-btns">
200+
<a href="YOUR_AMAZON_LINK_HERE" target="_blank" class="btn-pl btn-amazon">🛍 Amazon</a>
201+
<a href="https://ghostwriterfti.gumroad.com/l/depbg" target="_blank" class="btn-pl btn-gumroad">🟠 Gumroad</a>
202+
<a href="https://payhip.com/b/Un7ms" target="_blank" class="btn-pl btn-payhip">💙 Payhip</a>
203+
</div>
204+
</div>
205+
</div>
206+
207+
<!-- BOOK 4 — 10-MINUTE AGENTIC AI AUDIT (FREE) -->
208+
<div class="ebook-card">
209+
<div class="ebook-cover"><img src="Ai audit.png" alt="The 10-Minute Agentic AI Audit" /></div>
210+
<div class="ebook-body">
211+
<div class="ebook-genre">AI Security</div>
212+
<h3>The 10-Minute Agentic AI Audit</h3>
213+
<p>Stop agent hijacking before it starts. A free 5-page guide with a Python script to test your AI agent for prompt injection vulnerabilities.</p>
214+
<span class="platform-label" style="color:var(--cyan);">🎁 Free Download:</span>
215+
<div class="platform-btns">
216+
<a href="https://ghostwriterfti.gumroad.com/l/ypxck" target="_blank" class="btn-pl btn-gumroad">🟠 Gumroad</a>
217+
<a href="https://payhip.com/b/fW0Uz" target="_blank" class="btn-pl btn-payhip">💙 Payhip</a>
218+
</div>
219+
</div>
220+
</div>
221+
222+
<!-- BOOK 5 — THE AGENTIC FORTRESS -->
223+
<div class="ebook-card">
224+
<div class="ebook-cover"><img src="Agentic Fortress.png" alt="The Agentic Fortress" /></div>
225+
<div class="ebook-body">
226+
<div class="ebook-genre">AI Security & Automation</div>
227+
<h3>The Agentic Fortress</h3>
228+
<p>Full security and automation system for AI agents. 10 chapters, 5 production-ready Python scripts, security templates and compliance checklists.</p>
229+
<span class="platform-label">Choose your platform:</span>
230+
<div class="platform-btns">
231+
<a href="YOUR_AMAZON_LINK_HERE" target="_blank" class="btn-pl btn-amazon">🛍 Amazon</a>
232+
<a href="https://ghostwriterfti.gumroad.com/l/pwghz" target="_blank" class="btn-pl btn-gumroad">🟠 Gumroad</a>
233+
<a href="https://payhip.com/b/c62Pa" target="_blank" class="btn-pl btn-payhip">💙 Payhip</a>
234+
</div>
235+
</div>
236+
</div>
237+
238+
<!-- ============================================================
239+
HOW TO ADD A NEW BOOK — COPY THIS BLOCK
240+
============================================================
241+
STEP 1: Copy one of the ebook-card blocks above
242+
STEP 2: Paste it above this comment
243+
STEP 3: Replace cover filename, title, description and links
244+
STEP 4: Upload cover image to GitHub with exact same filename
245+
STEP 5: Commit. Done.
246+
============================================================ -->
247+
248+
</div>
249+
============================================================
250+
STEP 1: Copy from <div class="ebook-card"> to its </div>
251+
STEP 2: Paste it below this comment block
252+
STEP 3: Replace:
253+
- book2-cover.jpg → your new cover filename
254+
- ebook-genre text → topic e.g. AI Automation
255+
- h3 title → your book title
256+
- p text → 2 sentence description
257+
- YOUR_AMAZON_LINK_HERE → real Amazon link
258+
- YOUR_GUMROAD_LINK_HERE → real Gumroad link
259+
- YOUR_PAYHIP_LINK_HERE → real Payhip link
260+
STEP 4: Upload new cover image to GitHub. Commit. Done.
261+
============================================================ -->
262+
<div class="ebook-card">
263+
<div class="ebook-placeholder"><span>📖</span><span>Coming Soon</span></div>
264+
<div class="ebook-body">
265+
<div class="ebook-genre">New Release</div>
266+
<h3>Next Book Coming Soon</h3>
267+
<p>Another practical tech guide from FutureStack Intelligence. Subscribe below to get notified the moment it drops.</p>
268+
<span class="platform-label">Available on:</span>
269+
<div class="platform-btns">
270+
<a class="btn-pl btn-amazon" style="opacity:0.35;pointer-events:none;">🛍 Amazon</a>
271+
<a class="btn-pl btn-gumroad" style="opacity:0.35;pointer-events:none;">🟠 Gumroad</a>
272+
<a class="btn-pl btn-payhip" style="opacity:0.35;pointer-events:none;">💙 Payhip</a>
273+
</div>
274+
</div>
275+
</div>
276+
277+
</div>
278+
279+
<!-- NOTIFY -->
280+
<div class="notify-bar">
281+
<h3 class="section-title" style="font-size:20px;margin-bottom:10px;">More Ebooks <span>Dropping Soon</span></h3>
282+
<p>Subscribe to get notified the moment a new book launches. No spam. Ever.</p>
283+
<div class="notify-form">
284+
<input class="form-input" type="email" placeholder="your@email.com" />
285+
<a href="https://forms.gle/28B1ozhh3nRfvY5P6" target="_blank">Notify Me</a>
286+
</div>
287+
</div>
288+
</div>
289+
</div>
290+
291+
<footer class="footer">
292+
<div class="footer-inner">
293+
<div class="footer-brand"><img src="logo.png" alt="FutureStack"><div class="footer-brand-name">FutureStack Intelligence<span>© 2026 All Rights Reserved</span></div></div>
294+
<div class="footer-links">
295+
<a href="index.html">Home</a><a href="services.html">Services</a><a href="ebooks.html">Ebooks</a>
296+
<a href="courses.html">Courses</a><a href="contact.html">Contact</a>
297+
<a href="https://x.com/FUTURESTACK001" target="_blank">X / Twitter</a>
298+
<a href="https://www.linkedin.com/in/futurestackintelligence" target="_blank">LinkedIn</a>
299+
</div>
300+
<div class="footer-copy">Built with precision. Delivered globally.</div>
301+
</div>
302+
</footer>
303+
304+
<div class="bottom-nav">
305+
<div class="bottom-nav-inner">
306+
<a href="index.html" class="bnav-item"><span class="bnav-icon">🏠</span><span class="bnav-label">Home</span></a>
307+
<a href="services.html" class="bnav-item"><span class="bnav-icon">⚡</span><span class="bnav-label">Services</span></a>
308+
<a href="ebooks.html" class="bnav-item active"><span class="bnav-icon">📚</span><span class="bnav-label">Ebooks</span></a>
309+
<a href="contact.html" class="bnav-item"><span class="bnav-icon">✉️</span><span class="bnav-label">Contact</span></a>
310+
</div>
311+
</div>
312+
313+
<script src="shared.js"></script>
314+
</body>
315+
</html>

0 commit comments

Comments
 (0)