Skip to content

Commit 16be6af

Browse files
AhmedAlhusainiAhmedAlhusaini
committed
Repo Navigator Files Logo , ..etc
1 parent bade80b commit 16be6af

1 file changed

Lines changed: 201 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
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" />
6+
<title>AWS CCP Practice Hub Live Demo (Khaled Elhannat)</title>
7+
<meta
8+
name="description"
9+
content="Live demo of the amazing AWS Certified Cloud Practitioner Practice Hub created by Khaled Elhannat."
10+
/>
11+
<link rel="icon" type="image/png" href="https://content.cloudthat.com/resources/wp-content/uploads/2023/12/dgt.png" />
12+
<style>
13+
/* BASE STYLES AND VARIABLES (Copied from SAA Index) */
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
:root {
21+
--aws-orange: #ff9900;
22+
--aws-dark-blue: #232f3e;
23+
--aws-light-blue: #4b9cd3;
24+
--aws-squid-ink: #161e2d;
25+
--text-primary: #ffffff;
26+
--text-secondary: #b0bec5;
27+
--card-bg: #2a3441;
28+
--card-hover: #3a4451;
29+
--gradient-primary: linear-gradient(135deg, #232f3e 0%, #161e2d 100%);
30+
--gradient-accent: linear-gradient(135deg, #ff9900 0%, #ffb84d 100%);
31+
--shadow-glow: 0 0 30px rgba(255, 153, 0, 0.1);
32+
}
33+
34+
body {
35+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
36+
background: var(--gradient-primary);
37+
color: var(--text-primary);
38+
line-height: 1.6;
39+
overflow-x: hidden;
40+
min-height: 100vh;
41+
}
42+
43+
/* Animated background (Simplified for this page) */
44+
.background-animation {
45+
position: fixed;
46+
top: 0;
47+
left: 0;
48+
width: 100%;
49+
height: 100%;
50+
z-index: -1;
51+
opacity: 0.05;
52+
background: linear-gradient(135deg, #232f3e 10%, #161e2d 90%);
53+
}
54+
55+
/* Header */
56+
header {
57+
padding: 1.5rem 2rem;
58+
background: rgba(35, 47, 62, 0.9);
59+
backdrop-filter: blur(10px);
60+
border-bottom: 1px solid rgba(255, 153, 0, 0.2);
61+
text-align: center;
62+
}
63+
64+
h1 {
65+
font-size: clamp(1.5rem, 3vw, 2.5rem);
66+
font-weight: 700;
67+
color: var(--aws-orange);
68+
margin-bottom: 0.5rem;
69+
}
70+
71+
.subtitle {
72+
color: var(--text-secondary);
73+
margin-bottom: 1.5rem;
74+
max-width: 800px;
75+
margin: 0.5rem auto 1.5rem;
76+
font-size: 1rem;
77+
}
78+
79+
.attribution-link {
80+
color: var(--aws-light-blue);
81+
text-decoration: none;
82+
font-weight: 600;
83+
transition: color 0.3s;
84+
}
85+
.attribution-link:hover {
86+
color: var(--aws-orange);
87+
}
88+
89+
.cta-button {
90+
display: inline-block;
91+
padding: 0.8rem 1.5rem;
92+
background: var(--gradient-accent);
93+
color: var(--aws-dark-blue);
94+
text-decoration: none;
95+
border-radius: 50px;
96+
font-weight: bold;
97+
font-size: 1rem;
98+
transition: all 0.3s ease;
99+
box-shadow: 0 5px 10px rgba(255, 153, 0, 0.3);
100+
}
101+
102+
.cta-button:hover {
103+
transform: translateY(-2px);
104+
box-shadow: 0 7px 15px rgba(255, 153, 0, 0.4);
105+
}
106+
107+
/* Main Content & Iframe */
108+
.content-wrapper {
109+
display: flex;
110+
flex-direction: column;
111+
align-items: center;
112+
padding: 0;
113+
/* We rely on the large height of the iframe below to create scrollable space */
114+
height: auto;
115+
max-width: 100%;
116+
margin: 0 auto;
117+
}
118+
119+
.demo-container {
120+
flex-grow: 1;
121+
width: 100%;
122+
background: transparent;
123+
border: none;
124+
box-shadow: none;
125+
overflow: hidden;
126+
margin-top: 0;
127+
border-radius: 0;
128+
}
129+
130+
/* KEY CHANGE: Set a large, fixed height for the iframe content to force parent scrolling */
131+
iframe {
132+
width: 100%;
133+
/* A large, arbitrary height to contain the CCP hub content. This should eliminate the inner scrollbar. */
134+
height: 2800px;
135+
border: none;
136+
display: block;
137+
}
138+
139+
/* Footer (Minimal) */
140+
footer {
141+
padding: 1rem 0;
142+
text-align: center;
143+
color: var(--text-secondary);
144+
font-size: 0.9rem;
145+
}
146+
147+
@media (max-width: 600px) {
148+
.content-wrapper {
149+
padding: 0;
150+
}
151+
h1 {
152+
font-size: 1.8rem;
153+
}
154+
.subtitle {
155+
font-size: 0.9rem;
156+
}
157+
/* Ensure iframe is tall enough on mobile too */
158+
iframe {
159+
height: 3500px;
160+
}
161+
}
162+
</style>
163+
</head>
164+
165+
<body>
166+
<div class="background-animation"></div>
167+
168+
<header>
169+
<p class="subtitle">
170+
This is a live demo of the amazing **FREE** practice exams resource created by
171+
<a href="https://khaledelhannat.github.io" target="_blank" rel="noopener noreferrer" class="attribution-link">Khaled Elhannat</a>.
172+
Feel free to interact with the original hub below!
173+
</p>
174+
175+
<a
176+
href="https://github.com/khaledelhannat/aws-certification-practice-hub"
177+
target="_blank"
178+
rel="noopener noreferrer"
179+
class="cta-button"
180+
>
181+
View Full GitHub Repository
182+
</a>
183+
</header>
184+
185+
<div class="content-wrapper">
186+
<div class="demo-container">
187+
<!-- Live Demo in an iframe -->
188+
<iframe
189+
src="https://khaledelhannat.github.io/aws-certification-practice-hub/"
190+
title="Khaled Elhannat's AWS CCP Practice Hub Live Demo"
191+
scrolling="no"
192+
></iframe>
193+
</div>
194+
</div>
195+
196+
<footer>
197+
<p>Disclaimer: Content above is provided by a third-party repository and is not hosted on this page.</p>
198+
</footer>
199+
200+
</body>
201+
</html>

0 commit comments

Comments
 (0)