-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
207 lines (186 loc) · 9.73 KB
/
index.html
File metadata and controls
207 lines (186 loc) · 9.73 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IDR | Institute of Digital Risk</title>
<meta name="description" content="Industry-led training & deployment institute for digital, cyber and AI risk professionals.">
<!-- Google Fonts (allowed per assignment) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- HEADER -->
<header>
<div class="container">
<nav>
<!-- LOGO (using your provided idr-logo.svg) -->
<a href="#" class="logo">
<img src="idr-logo.svg" alt="IDR Logo" id="logo-img">
<span class="logo-text">IDR</span>
</a>
<ul class="nav-links" id="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#services">Programs</a></li>
<li><a href="#pipeline">Our Model</a></li>
<li><a href="#community">Community</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#contact" class="cta-button">Register Interest</a>
<!-- Hamburger -->
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>
<!-- HERO -->
<section class="hero" id="hero">
<div class="container">
<div class="hero-content">
<div class="hero-badge">
<span>🚀</span>
INDUSTRY-LED • AI RISK FOCUS
</div>
<h1>Advancing the Future of Digital Risk</h1>
<p>Training and deploying the next generation of digital, cyber and AI risk leaders. We combine UK university partnerships with real-world industry projects in regulated, high-consequence environments.</p>
<div class="hero-buttons">
<a href="#services" class="cta-button">Explore Programs</a>
<a href="#contact" class="cta-button secondary">Hire Talent</a>
</div>
</div>
</div>
</section>
<!-- ABOUT -->
<section id="about">
<div class="container">
<h2 class="section-title">Who We Are</h2>
<p class="section-subtitle">The Institute of Digital Risk (IDR) is an industry-led training and deployment institute dedicated to building world-class professionals in digital, cyber and AI risk management.</p>
<div class="about-grid">
<div class="about-text">
<p>IDR was founded by leading risk practitioners from financial services and critical infrastructure sectors. We bridge the gap between academic theory and mission-critical practice.</p>
<p>Through deep partnerships with UK universities and major industry players, we deliver intensive bootcamps, applied research, and direct talent deployment into regulated environments where failure is not an option.</p>
</div>
<div style="background: rgba(255,98,0,0.08); border-radius: 24px; padding: 2.5rem; text-align: center; font-size: 1.1rem; line-height: 1.7;">
<strong style="color: var(--orange);">Our Promise:</strong><br>
Every graduate leaves with both a certificate <strong>and</strong> a portfolio of real client projects. 92% of our alumni are placed within 90 days.
</div>
</div>
</div>
</section>
<!-- SERVICES / PILLARS -->
<section id="services" style="background: var(--black);">
<div class="container">
<h2 class="section-title">Our Three Pillars</h2>
<p class="section-subtitle">We operate across training, innovation and advisory — creating a complete ecosystem for digital risk excellence.</p>
<div class="services-grid">
<!-- Card 1 -->
<div class="service-card">
<div class="service-icon">🎓</div>
<h3>Academy</h3>
<p>Intensive 12-week bootcamps for students and professionals. Hands-on labs with NIST, ISO 27001, NIS2, DORA and AI governance frameworks. Live projects with real clients.</p>
</div>
<!-- Card 2 -->
<div class="service-card">
<div class="service-icon">🔬</div>
<h3>Innovation & Incubation</h3>
<p>Research lab developing next-gen AI risk models, automated governance tools and resilience frameworks. We turn cutting-edge ideas into deployable IP for the industry.</p>
</div>
<!-- Card 3 -->
<div class="service-card">
<div class="service-icon">🛡️</div>
<h3>Advisory Services</h3>
<p>Expert consulting for banks, insurers and critical infrastructure. Full framework implementation, maturity assessments and regulatory readiness programs.</p>
</div>
</div>
</div>
</section>
<!-- PIPELINE -->
<section id="pipeline" class="pipeline">
<div class="container">
<h2 class="section-title" style="margin-bottom: 3rem;">Train → Hire → Innovate → Deploy</h2>
<div class="pipeline-steps">
<div class="step">
<div class="step-circle">1</div>
<h4 style="font-size: 1.35rem;">Train</h4>
<p style="opacity: 0.8;">Intensive academy programs</p>
</div>
<div class="step">
<div class="step-circle">2</div>
<h4 style="font-size: 1.35rem;">Hire</h4>
<p style="opacity: 0.8;">Direct placement with partners</p>
</div>
<div class="step">
<div class="step-circle">3</div>
<h4 style="font-size: 1.35rem;">Innovate</h4>
<p style="opacity: 0.8;">Joint R&D projects</p>
</div>
<div class="step">
<div class="step-circle">4</div>
<h4 style="font-size: 1.35rem;">Deploy</h4>
<p style="opacity: 0.8;">Ready-to-impact professionals</p>
</div>
</div>
</div>
</section>
<!-- COMMUNITY -->
<section id="community" class="community">
<div class="container">
<h2 class="section-title">Who We Serve</h2>
<p class="section-subtitle">We empower those who protect what matters most.</p>
<div class="community-grid">
<div class="community-card">
<div style="font-size: 3.5rem; margin-bottom: 1rem;">👨🎓</div>
<h4>Students & Graduates</h4>
<p>From UK universities looking to specialise in high-impact risk careers.</p>
</div>
<div class="community-card">
<div style="font-size: 3.5rem; margin-bottom: 1rem;">🧑💼</div>
<h4>Early-Career Professionals</h4>
<p>Engineers, analysts and consultants ready to pivot into digital risk leadership.</p>
</div>
<div class="community-card">
<div style="font-size: 3.5rem; margin-bottom: 1rem;">🏦</div>
<h4>Financial Services & Critical Infrastructure</h4>
<p>Organisations seeking top-tier risk talent and advisory support.</p>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact">
<div class="container">
<h2 class="section-title">Ready to Shape the Future?</h2>
<p class="section-subtitle">Join the movement. Register interest in our next cohort or explore talent partnerships.</p>
<div class="contact-form">
<form id="contact-form">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="message">Message / Interest Area</label>
<textarea id="message" rows="5" placeholder="E.g. Interested in Academy bootcamp or hiring talent..."></textarea>
</div>
<button type="submit" class="submit-btn">Send Message →</button>
</form>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<img src="idr-logo.svg" alt="IDR Logo" class="footer-logo">
<p style="opacity: 0.6; font-size: 0.95rem;">© 2026 Institute of Digital Risk. All rights reserved.</p>
<p style="margin-top: 1rem; font-size: 0.85rem; opacity: 0.4;">Crafted with precision for mission-critical impact</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>