Skip to content

Commit 04d483a

Browse files
AhmedAlhusainiAhmedAlhusaini
committed
Repo Navigator Files Logo , ..etc
1 parent ec31acb commit 04d483a

1 file changed

Lines changed: 155 additions & 82 deletions

File tree

‎index.html‎

Lines changed: 155 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>AWS CCP Practice Hub Live Demo (Khaled Elhannat)</title>
6+
<title>AWS CCP Study Resources Gateway</title>
77
<meta
88
name="description"
9-
content="Live demo of the amazing AWS Certified Cloud Practitioner Practice Hub created by Khaled Elhannat."
9+
content="Links to the best AWS Certified Cloud Practitioner study resources: Ahmed Alhusainy's guide and Khaled Elhannat's practice hub."
1010
/>
11+
<!-- AWS CCP Icon URL from Khaled's repo -->
1112
<link rel="icon" type="image/png" href="https://content.cloudthat.com/resources/wp-content/uploads/2023/12/dgt.png" />
1213
<style>
13-
/* BASE STYLES AND VARIABLES (Copied from SAA Index) */
14+
/* BASE STYLES AND VARIABLES */
1415
* {
1516
margin: 0;
1617
padding: 0;
@@ -38,6 +39,10 @@
3839
line-height: 1.6;
3940
overflow-x: hidden;
4041
min-height: 100vh;
42+
display: flex;
43+
flex-direction: column;
44+
align-items: center;
45+
justify-content: center; /* Center content vertically */
4146
}
4247

4348
/* Animated background (Simplified for this page) */
@@ -52,28 +57,59 @@
5257
background: linear-gradient(135deg, #232f3e 10%, #161e2d 90%);
5358
}
5459

55-
/* Header */
60+
/* Header - Now acts as the main container for all content */
5661
header {
57-
padding: 1.5rem 2rem;
62+
padding: 4rem 2rem; /* Increased padding for vertical centering */
5863
background: rgba(35, 47, 62, 0.9);
5964
backdrop-filter: blur(10px);
60-
border-bottom: 1px solid rgba(255, 153, 0, 0.2);
65+
border-radius: 15px; /* Added border radius to look like a clean card */
66+
border: 1px solid rgba(255, 153, 0, 0.2);
6167
text-align: center;
68+
max-width: 90%;
69+
width: 650px; /* Constrain width */
70+
/* ENHANCEMENT: Stronger, shinier shadow */
71+
box-shadow: 0 0 50px rgba(255, 153, 0, 0.4), 0 10px 40px rgba(0, 0, 0, 0.5);
72+
}
73+
74+
.main-title {
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
78+
gap: 1rem;
79+
margin-bottom: 0.5rem;
80+
}
81+
82+
/* New container for icon and title to manage mobile stacking */
83+
.logo-and-text {
84+
display: flex;
85+
flex-direction: column; /* Stack vertically by default on mobile */
86+
align-items: center;
87+
margin-bottom: 1.5rem; /* Space between logo/title and content */
88+
}
89+
90+
.main-title img {
91+
width: 50px;
92+
height: 50px;
93+
border-radius: 5px;
94+
/* Updated content URL to Khaled's CCP icon */
95+
content: url("https://content.cloudthat.com/resources/wp-content/uploads/2023/12/dgt.png");
96+
margin-bottom: 0.5rem; /* Space below the icon */
6297
}
6398

6499
h1 {
65-
font-size: clamp(1.5rem, 3vw, 2.5rem);
100+
/* ENHANCEMENT: Adjust font size for relevance */
101+
font-size: 1.8rem;
66102
font-weight: 700;
67103
color: var(--aws-orange);
68-
margin-bottom: 0.5rem;
104+
line-height: 1.2;
69105
}
70106

71107
.subtitle {
72108
color: var(--text-secondary);
73-
margin-bottom: 1.5rem;
74109
max-width: 800px;
75-
margin: 0.5rem auto 1.5rem;
110+
margin: 1rem auto 2rem;
76111
font-size: 1rem;
112+
line-height: 1.5;
77113
}
78114

79115
.attribution-link {
@@ -86,77 +122,101 @@
86122
color: var(--aws-orange);
87123
}
88124

125+
.cta-container {
126+
display: flex;
127+
flex-wrap: wrap;
128+
justify-content: center;
129+
gap: 1.5rem;
130+
margin-top: 1.5rem;
131+
}
132+
89133
.cta-button {
90134
display: inline-block;
91135
padding: 0.8rem 1.5rem;
92-
background: var(--gradient-accent);
93-
color: var(--aws-dark-blue);
94136
text-decoration: none;
95137
border-radius: 50px;
96138
font-weight: bold;
97139
font-size: 1rem;
98140
transition: all 0.3s ease;
99-
box-shadow: 0 5px 10px rgba(255, 153, 0, 0.3);
100141
}
101-
102-
.cta-button:hover {
142+
143+
.cta-button-khaled {
144+
background: var(--card-bg);
145+
color: var(--aws-light-blue);
146+
border: 2px solid var(--aws-light-blue);
147+
box-shadow: 0 5px 10px rgba(75, 156, 211, 0.2);
148+
}
149+
.cta-button-khaled:hover {
150+
background: var(--aws-light-blue);
151+
color: var(--aws-dark-blue);
103152
transform: translateY(-2px);
104-
box-shadow: 0 7px 15px rgba(255, 153, 0, 0.4);
105153
}
106154

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;
155+
.cta-button-mine {
156+
background: var(--gradient-accent);
157+
color: var(--aws-dark-blue);
158+
box-shadow: 0 5px 10px rgba(255, 153, 0, 0.3);
117159
}
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;
160+
.cta-button-mine:hover {
161+
transform: translateY(-2px);
162+
box-shadow: 0 7px 15px rgba(255, 153, 0, 0.4);
128163
}
129164

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;
165+
/* Animated Text Banner */
166+
.animated-banner {
167+
background: rgba(255, 153, 0, 0.1);
168+
color: var(--aws-orange);
169+
padding: 0.8rem 1.5rem;
170+
margin-bottom: 1.5rem;
171+
font-size: 1rem;
172+
font-weight: 600;
173+
border-radius: 10px;
174+
opacity: 0; /* Start hidden */
175+
animation: fadeInSlide 1.5s ease-out 0.5s forwards;
145176
}
146177

178+
@keyframes fadeInSlide {
179+
from {
180+
opacity: 0;
181+
transform: translateY(20px);
182+
}
183+
to {
184+
opacity: 1;
185+
transform: translateY(0);
186+
}
187+
}
188+
147189
@media (max-width: 600px) {
148-
.content-wrapper {
149-
padding: 0;
190+
header {
191+
padding: 3rem 1.5rem;
192+
width: 95%;
193+
}
194+
195+
.main-title {
196+
/* Ensure the logo/title block stacks above the buttons */
197+
flex-direction: column;
198+
}
199+
200+
.logo-and-text {
201+
margin-bottom: 1rem; /* Adjust margin before the buttons */
150202
}
203+
204+
.main-title img {
205+
width: 40px;
206+
height: 40px;
207+
}
208+
151209
h1 {
152-
font-size: 1.8rem;
210+
font-size: 1.4rem; /* Smaller size for mobile header */
153211
}
212+
154213
.subtitle {
155214
font-size: 0.9rem;
156215
}
157-
/* Ensure iframe is tall enough on mobile too */
158-
iframe {
159-
height: 3500px;
216+
217+
.cta-container {
218+
flex-direction: column;
219+
gap: 1rem;
160220
}
161221
}
162222
</style>
@@ -166,36 +226,49 @@
166226
<div class="background-animation"></div>
167227

168228
<header>
229+
<!-- New Logo/Text container to manage stacking order -->
230+
<div class="logo-and-text">
231+
<div class="main-title">
232+
<!-- Icon -->
233+
<img src="https://content.cloudthat.com/resources/wp-content/uploads/2023/12/dgt.png" alt="AWS CCP Badge" />
234+
</div>
235+
<!-- Title -->
236+
<h1>AWS Certification Practice Hub</h1>
237+
</div>
238+
239+
<p class="animated-banner">
240+
💡 You have **TWO** amazing study resources for you! Choose the guide that best fits your learning style.
241+
</p>
242+
169243
<p class="subtitle">
170-
This is a live demo of the amazing **FREE** practice exams resource created by
244+
My Repository (Ahmed Alhusainy): AWS CCP Self Studying Materials & Exam Prep, crafted with ❤️ to support your journey! Includes key concepts, PDFs, cheat sheets, self-studying materials, practice exams & hands-on labs.
245+
</p>
246+
247+
<p class="subtitle" style="margin-top: -1rem;">
248+
Community Hub (Khaled Elhannat): An amazing FREE practice exams resource from
171249
<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!
173250
</p>
174251

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>
252+
<!-- CTA Container (Buttons below Icon and Title) -->
253+
<div class="cta-container">
254+
<a
255+
href="https://github.com/AhmedAlhusaini/AWS-Cloud-Practitioner-SelfStudy-Materials"
256+
target="_blank"
257+
rel="noopener noreferrer"
258+
class="cta-button cta-button-mine"
259+
>
260+
Explore Ahmed's CCP Self-Study Materials
261+
</a>
262+
<a
263+
href="https://github.com/khaledelhannat/aws-certification-practice-hub"
264+
target="_blank"
265+
rel="noopener noreferrer"
266+
class="cta-button cta-button-khaled"
267+
>
268+
Go to Khaled's CCP Repository
269+
</a>
193270
</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>
271+
</header>
199272

200273
</body>
201274
</html>

0 commit comments

Comments
 (0)