<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Welcome to GFG</
title
>
<
script
src
=
</
script
>
<
style
>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f7f7f7;
color: #333;
}
nav {
background-color: #333;
color: white;
padding: 10px 0;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: white;
transition: color 0.3s ease-in-out;
font-size: 22px;
}
nav ul li a:hover {
color: #3498db;
}
.loading-overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
/* Initial opacity */
transform: scale(1);
/* Initial scale */
animation: scaleOpacity 1s ease-in-out forwards;
/* Apply animation */
}
@keyframes scaleOpacity {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.8);
opacity: 0;
display: none;
/* Hide overlay after animation */
}
}
.loading-spinner {
border: 9px solid #f3f3f3;
border-top: 6px solid green;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.content {
display: none;
max-width: 1000px;
margin: 0 auto;
padding: 30px;
background-color: white;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
border-radius: 10px;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
h2 {
color: #333;
margin-top: 20px;
}
p {
color: #666;
line-height: 1.6;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"loading-overlay"
>
<
div
class
=
"loading-spinner"
></
div
>
<
div
class
=
"loading-text"
>
Please wait, loading...
</
div
>
</
div
>
<
div
class
=
"content"
>
<
nav
>
<
ul
>
<
li
><
a
href
=
"#"
>Home</
a
></
li
>
<
li
><
a
href
=
"#"
>About</
a
></
li
>
<
li
><
a
href
=
"#"
>Services</
a
></
li
>
<
li
><
a
href
=
"#"
>Contact</
a
></
li
>
</
ul
>
</
nav
>
<
h1
style
=
"color: green;"
>
Welcome to GeeksforGeeks!!
</
h1
>
<
section
>
<
h2
>About Us</
h2
>
<
p
>
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles
</
p
>
</
section
>
<
section
>
<
h2
>Services</
h2
>
<
p
>
The courses provided by GeeksforGeeks
are absolutely free and bring the
best quality content be it
video-based or theoretical.
Each course is track-based, has
assessments and practice sessions (to
implement your learning), and is
also updated. You can go through any
one of these at your own pace. Here,
the quality and quantity are the best
on their own.
</
p
>
</
section
>
<
section
>
<
img
src
=
alt
=
"GeeksforGeeks Logo"
>
<
div
>Quality Content and Learning Resources</
div
>
</
section
>
<
section
>
<
h2
>Contact Us</
h2
>
<
p
>
If you have any questions or would
like to collaborate, feel free to
get in touch with us. We're here
to assist you.
</
p
>
</
section
>
</
div
>
<
script
>
$(document).ready(function () {
setTimeout(function () {
$(".content").fadeIn(2000);
}, 2000);
});
</
script
>
</
body
>
</
html
>