| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Ancient Egypt Experience | Journey Through Time</title> |
| <style> |
| |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Quintessential&display=swap'); |
| |
| :root { |
| --gold: #D4AF37; |
| --lapis-blue: #26619C; |
| --papyrus: #E7DBC5; |
| --nile-green: #157A6E; |
| --sand: #E2C391; |
| --stone: #757575; |
| --egypt-red: #C81D25; |
| --shadow: rgba(0, 0, 0, 0.3); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: var(--papyrus); |
| color: #333; |
| overflow-x: hidden; |
| position: relative; |
| } |
| |
| body::before { |
| content: ""; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" opacity="0.05"><path fill="black" d="M50 0 L100 50 L50 100 L0 50 Z"/></svg>'); |
| background-size: 50px 50px; |
| z-index: -1; |
| opacity: 0.1; |
| } |
| |
| |
| header { |
| background: linear-gradient(to right, var(--lapis-blue), var(--nile-green)); |
| color: var(--gold); |
| padding: 1rem 2rem; |
| position: fixed; |
| width: 100%; |
| top: 0; |
| z-index: 1000; |
| box-shadow: 0 4px 12px var(--shadow); |
| border-bottom: 3px solid var(--gold); |
| } |
| |
| .header-container { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .logo { |
| font-family: 'Quintessential', cursive; |
| font-size: 2rem; |
| display: flex; |
| align-items: center; |
| } |
| |
| .logo::before { |
| content: "𓃭"; |
| margin-right: 10px; |
| font-size: 2.2rem; |
| } |
| |
| .logo::after { |
| content: "𓂀"; |
| margin-left: 10px; |
| font-size: 2.2rem; |
| } |
| |
| nav ul { |
| display: flex; |
| list-style: none; |
| } |
| |
| nav ul li { |
| margin-left: 1.5rem; |
| position: relative; |
| } |
| |
| nav ul li a { |
| display: block; |
| padding: 0.5rem 1rem; |
| text-decoration: none; |
| color: white; |
| font-weight: 600; |
| transition: all 0.3s ease; |
| background-color: rgba(0, 0, 0, 0.2); |
| border-radius: 4px; |
| border: 1px solid var(--gold); |
| } |
| |
| nav ul li a:hover { |
| background-color: var(--gold); |
| color: var(--lapis-blue); |
| transform: translateY(-3px); |
| box-shadow: 0 4px 8px var(--shadow); |
| } |
| |
| |
| .mobile-menu-btn { |
| display: none; |
| background: none; |
| border: none; |
| color: white; |
| font-size: 1.5rem; |
| cursor: pointer; |
| } |
| |
| |
| .hero { |
| height: 100vh; |
| background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), |
| url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200"><polygon fill="%23E2C391" points="0,200 100,50 200,100 300,0 400,150 400,200"/></svg>'); |
| background-size: cover; |
| background-position: center; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| margin-top: 70px; |
| } |
| |
| .hero::before { |
| content: ""; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 50px; |
| background: linear-gradient(to right, var(--lapis-blue), var(--nile-green), var(--gold), var(--nile-green), var(--lapis-blue)); |
| background-size: 200% auto; |
| opacity: 0.8; |
| z-index: 1; |
| animation: shine 3s linear infinite; |
| } |
| |
| @keyframes shine { |
| 0% { background-position: 0 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0 50%; } |
| } |
| |
| .hero-content { |
| max-width: 800px; |
| padding: 2rem; |
| z-index: 2; |
| } |
| |
| .hero h1 { |
| font-family: 'Quintessential', cursive; |
| font-size: 4rem; |
| color: var(--gold); |
| margin-bottom: 1rem; |
| text-shadow: 3px 3px 5px var(--shadow); |
| } |
| |
| .hero p { |
| font-size: 1.2rem; |
| color: white; |
| margin-bottom: 2rem; |
| line-height: 1.6; |
| } |
| |
| .cta-btn { |
| display: inline-block; |
| padding: 0.8rem 2rem; |
| background-color: var(--gold); |
| color: var(--lapis-blue); |
| text-decoration: none; |
| font-weight: bold; |
| border-radius: 30px; |
| transition: all 0.3s ease; |
| border: 2px solid var(--gold); |
| margin: 0 0.5rem; |
| } |
| |
| .cta-btn:hover { |
| background-color: transparent; |
| color: var(--gold); |
| transform: scale(1.05); |
| box-shadow: 0 5px 15px var(--shadow); |
| } |
| |
| .sun { |
| position: absolute; |
| top: 20%; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 100px; |
| height: 100px; |
| background: radial-gradient(circle, var(--gold), #FFD700); |
| border-radius: 50%; |
| box-shadow: 0 0 50px var(--gold), 0 0 100px rgba(255, 215, 0, 0.5); |
| animation: sunrise 15s infinite alternate ease-in-out; |
| } |
| |
| @keyframes sunrise { |
| 0% { top: 20%; } |
| 100% { top: 15%; } |
| } |
| |
| |
| .hieroglyph-scroll { |
| position: relative; |
| height: 60px; |
| background-color: var(--papyrus); |
| border-top: 2px solid var(--sand); |
| border-bottom: 2px solid var(--sand); |
| overflow: hidden; |
| margin: 0 auto; |
| padding: 10px 0; |
| } |
| |
| .hieroglyph-track { |
| display: flex; |
| position: absolute; |
| white-space: nowrap; |
| animation: scroll 30s linear infinite; |
| } |
| |
| .hieroglyph { |
| font-size: 2rem; |
| margin: 0 10px; |
| color: var(--stone); |
| transition: all 0.3s ease; |
| } |
| |
| .hieroglyph:hover { |
| color: var(--gold); |
| transform: scale(1.2); |
| cursor: pointer; |
| } |
| |
| .hieroglyph-tooltip { |
| position: absolute; |
| background-color: var(--lapis-blue); |
| color: white; |
| padding: 5px 10px; |
| border-radius: 4px; |
| font-size: 0.8rem; |
| white-space: nowrap; |
| z-index: 100; |
| pointer-events: none; |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| |
| @keyframes scroll { |
| 0% { transform: translateX(0); } |
| 100% { transform: translateX(-50%); } |
| } |
| |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 2rem; |
| } |
| |
| section { |
| padding: 4rem 0; |
| position: relative; |
| } |
| |
| section:nth-child(even) { |
| background-color: rgba(214, 198, 163, 0.2); |
| } |
| |
| .section-title { |
| text-align: center; |
| margin-bottom: 3rem; |
| position: relative; |
| font-family: 'Quintessential', cursive; |
| color: var(--lapis-blue); |
| } |
| |
| .section-title::before, .section-title::after { |
| content: ""; |
| position: absolute; |
| top: 50%; |
| width: 15%; |
| height: 3px; |
| background: linear-gradient(to right, transparent, var(--gold), transparent); |
| } |
| |
| .section-title::before { |
| left: 0; |
| } |
| |
| .section-title::after { |
| right: 0; |
| } |
| |
| |
| .card-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 2rem; |
| margin-top: 2rem; |
| } |
| |
| .card { |
| background: white; |
| border-radius: 8px; |
| overflow: hidden; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
| transition: all 0.3s ease; |
| position: relative; |
| } |
| |
| .card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); |
| } |
| |
| .card-img { |
| height: 200px; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .card-img img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| transition: transform 0.5s ease; |
| } |
| |
| .card:hover .card-img img { |
| transform: scale(1.1); |
| } |
| |
| .card-content { |
| padding: 1.5rem; |
| } |
| |
| .card-title { |
| font-size: 1.3rem; |
| margin-bottom: 0.5rem; |
| color: var(--lapis-blue); |
| display: flex; |
| align-items: center; |
| } |
| |
| .card-title::before { |
| content: "𓃭"; |
| margin-right: 10px; |
| color: var(--gold); |
| } |
| |
| .card-text { |
| margin-bottom: 1rem; |
| color: #555; |
| } |
| |
| .card-date { |
| display: block; |
| color: var(--stone); |
| font-size: 0.9rem; |
| margin-bottom: 1rem; |
| } |
| |
| .card-btn { |
| display: inline-block; |
| padding: 0.5rem 1rem; |
| background-color: var(--nile-green); |
| color: white; |
| text-decoration: none; |
| border-radius: 4px; |
| font-weight: 600; |
| transition: all 0.3s ease; |
| } |
| |
| .card-btn:hover { |
| background-color: var(--gold); |
| color: var(--lapis-blue); |
| } |
| |
| |
| .timeline { |
| position: relative; |
| max-width: 1200px; |
| margin: 3rem auto; |
| } |
| |
| .timeline::after { |
| content: ''; |
| position: absolute; |
| width: 6px; |
| background-color: var(--gold); |
| top: 0; |
| bottom: 0; |
| left: 50%; |
| margin-left: -3px; |
| border-radius: 3px; |
| } |
| |
| .timeline-item { |
| padding: 10px 40px; |
| position: relative; |
| width: 50%; |
| box-sizing: border-box; |
| } |
| |
| .timeline-item::after { |
| content: ''; |
| position: absolute; |
| width: 25px; |
| height: 25px; |
| right: -12px; |
| background-color: white; |
| border: 4px solid var(--lapis-blue); |
| top: 15px; |
| border-radius: 50%; |
| z-index: 1; |
| } |
| |
| .left { |
| left: 0; |
| } |
| |
| .right { |
| left: 50%; |
| } |
| |
| .right::after { |
| left: -12px; |
| } |
| |
| .timeline-content { |
| padding: 20px 30px; |
| background-color: white; |
| position: relative; |
| border-radius: 6px; |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .timeline-content:hover { |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
| transform: translateY(-5px); |
| } |
| |
| .timeline-content h3 { |
| color: var(--lapis-blue); |
| } |
| |
| .timeline-content p { |
| margin: 1rem 0; |
| } |
| |
| |
| .pyramid-container { |
| width: 100%; |
| height: 400px; |
| position: relative; |
| perspective: 1000px; |
| margin: 3rem auto; |
| } |
| |
| .pyramid { |
| position: absolute; |
| width: 300px; |
| height: 300px; |
| top: 50px; |
| left: 50%; |
| transform: translateX(-50%) rotateX(60deg) rotateZ(45deg); |
| transform-style: preserve-3d; |
| animation: rotatePyramid 20s infinite linear; |
| } |
| |
| .pyramid-side { |
| position: absolute; |
| width: 300px; |
| height: 300px; |
| background: linear-gradient(to top, var(--gold), var(--sand)); |
| clip-path: polygon(50% 0%, 0% 100%, 100% 100%); |
| opacity: 0.8; |
| border: 1px solid rgba(0, 0, 0, 0.2); |
| } |
| |
| .side-front { |
| transform: translateZ(100px); |
| } |
| |
| .side-back { |
| transform: rotateY(180deg) translateZ(100px); |
| } |
| |
| .side-left { |
| transform: rotateY(-90deg) translateZ(100px); |
| } |
| |
| .side-right { |
| transform: rotateY(90deg) translateZ(100px); |
| } |
| |
| @keyframes rotatePyramid { |
| 0% { transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); } |
| 100% { transform: translateX(-50%) rotateX(60deg) rotateZ(360deg); } |
| } |
| |
| .pyramid-shadow { |
| position: absolute; |
| width: 300px; |
| height: 100px; |
| background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%); |
| top: 350px; |
| left: 50%; |
| transform: translateX(-50%); |
| animation: shadowPulse 5s infinite alternate; |
| } |
| |
| @keyframes shadowPulse { |
| 0% { background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%); } |
| 100% { background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%); } |
| } |
| |
| |
| .hieroglyph-panel { |
| background-color: white; |
| border-radius: 8px; |
| padding: 2rem; |
| margin: 3rem auto; |
| max-width: 800px; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
| text-align: center; |
| } |
| |
| .hieroglyph-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); |
| gap: 1rem; |
| margin: 2rem 0; |
| } |
| |
| .hieroglyph-selector { |
| font-size: 3rem; |
| padding: 0.5rem; |
| background-color: var(--papyrus); |
| border: 2px solid var(--sand); |
| border-radius: 4px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .hieroglyph-selector:hover { |
| background-color: var(--gold); |
| transform: scale(1.1); |
| } |
| |
| .hieroglyph-display { |
| min-height: 100px; |
| background-color: var(--papyrus); |
| border: 2px solid var(--sand); |
| border-radius: 4px; |
| padding: 1rem; |
| margin: 1rem 0; |
| font-size: 3rem; |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 0.5rem; |
| } |
| |
| .hieroglyph-controls { |
| display: flex; |
| justify-content: center; |
| gap: 1rem; |
| margin-top: 1rem; |
| } |
| |
| .hieroglyph-btn { |
| padding: 0.5rem 1rem; |
| background-color: var(--nile-green); |
| color: white; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| font-weight: bold; |
| transition: all 0.3s ease; |
| } |
| |
| .hieroglyph-btn:hover { |
| background-color: var(--gold); |
| color: var(--lapis-blue); |
| transform: translateY(-3px); |
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
| } |
| |
| |
| .gods-gallery { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| gap: 2rem; |
| margin: 3rem 0; |
| } |
| |
| .god-card { |
| position: relative; |
| height: 350px; |
| border-radius: 8px; |
| overflow: hidden; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
| transition: all 0.3s ease; |
| } |
| |
| .god-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); |
| } |
| |
| .god-image { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| transition: transform 0.5s ease; |
| } |
| |
| .god-card:hover .god-image { |
| transform: scale(1.1); |
| } |
| |
| .god-overlay { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); |
| padding: 1.5rem; |
| color: white; |
| } |
| |
| .god-name { |
| font-size: 1.5rem; |
| margin-bottom: 0.5rem; |
| color: var(--gold); |
| } |
| |
| .god-domain { |
| font-size: 0.9rem; |
| opacity: 0.8; |
| } |
| |
| |
| .map-container { |
| position: relative; |
| width: 100%; |
| height: 500px; |
| margin: 3rem auto; |
| background-color: var(--papyrus); |
| border: 5px solid var(--sand); |
| border-radius: 8px; |
| overflow: hidden; |
| } |
| |
| .map-image { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| |
| .map-pin { |
| position: absolute; |
| width: 20px; |
| height: 20px; |
| background-color: var(--egypt-red); |
| border-radius: 50%; |
| border: 2px solid white; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .map-pin::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 0; |
| border-left: 5px solid transparent; |
| border-right: 5px solid transparent; |
| border-top: 10px solid var(--egypt-red); |
| bottom: -10px; |
| left: 50%; |
| transform: translateX(-50%); |
| } |
| |
| .map-pin:hover { |
| transform: scale(1.5); |
| box-shadow: 0 0 10px rgba(200, 29, 37, 0.7); |
| } |
| |
| .map-tooltip { |
| position: absolute; |
| background-color: var(--lapis-blue); |
| color: white; |
| padding: 0.5rem 1rem; |
| border-radius: 4px; |
| font-size: 0.9rem; |
| pointer-events: none; |
| opacity: 0; |
| transition: opacity 0.3s; |
| z-index: 100; |
| min-width: 150px; |
| } |
| |
| |
| footer { |
| background: linear-gradient(to right, var(--lapis-blue), var(--nile-green)); |
| color: white; |
| padding: 3rem 2rem; |
| text-align: center; |
| } |
| |
| .footer-content { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .footer-logo { |
| font-family: 'Quintessential', cursive; |
| font-size: 2rem; |
| margin-bottom: 1.5rem; |
| display: inline-block; |
| } |
| |
| .footer-links { |
| display: flex; |
| justify-content: center; |
| flex-wrap: wrap; |
| gap: 1.5rem; |
| margin: 1.5rem 0; |
| } |
| |
| .footer-links a { |
| color: white; |
| text-decoration: none; |
| transition: all 0.3s ease; |
| padding: 0.5rem; |
| } |
| |
| .footer-links a:hover { |
| color: var(--gold); |
| transform: translateY(-3px); |
| } |
| |
| .social-icons { |
| display: flex; |
| justify-content: center; |
| gap: 1.5rem; |
| margin: 1.5rem 0; |
| } |
| |
| .social-icon { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background-color: rgba(255, 255, 255, 0.2); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.2rem; |
| transition: all 0.3s ease; |
| } |
| |
| .social-icon:hover { |
| background-color: var(--gold); |
| color: var(--lapis-blue); |
| transform: translateY(-5px); |
| } |
| |
| .copyright { |
| margin-top: 2rem; |
| font-size: 0.9rem; |
| opacity: 0.8; |
| } |
| |
| |
| .back-to-top { |
| position: fixed; |
| bottom: 2rem; |
| right: 2rem; |
| width: 50px; |
| height: 50px; |
| background-color: var(--gold); |
| color: var(--lapis-blue); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| text-decoration: none; |
| font-size: 1.5rem; |
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); |
| opacity: 0; |
| visibility: hidden; |
| transition: all 0.3s ease; |
| z-index: 999; |
| } |
| |
| .back-to-top.active { |
| opacity: 1; |
| visibility: visible; |
| } |
| |
| .back-to-top:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); |
| } |
| |
| |
| @media (max-width: 768px) { |
| .header-container { |
| flex-direction: column; |
| text-align: center; |
| } |
| |
| .logo { |
| margin-bottom: 1rem; |
| } |
| |
| nav ul { |
| flex-direction: column; |
| } |
| |
| nav ul li { |
| margin: 0.5rem 0; |
| margin-left: 0; |
| } |
| |
| .hero h1 { |
| font-size: 2.5rem; |
| } |
| |
| .timeline::after { |
| left: 31px; |
| } |
| |
| .timeline-item { |
| width: 100%; |
| padding-left: 70px; |
| padding-right: 25px; |
| } |
| |
| .timeline-item::after { |
| left: 19px; |
| } |
| |
| .left::after, .right::after { |
| left: 19px; |
| } |
| |
| .right { |
| left: 0%; |
| } |
| |
| .card-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .gods-gallery { |
| grid-template-columns: 1fr; |
| } |
| |
| .pyramid-container { |
| height: 300px; |
| } |
| |
| .pyramid { |
| width: 200px; |
| height: 200px; |
| } |
| |
| .footer-links { |
| flex-direction: column; |
| gap: 0.5rem; |
| } |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-on-scroll { |
| opacity: 0; |
| transform: translateY(20px); |
| transition: all 0.6s ease; |
| } |
| |
| .animate-on-scroll.in-view { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <div class="header-container"> |
| <div class="logo">Ancient Egypt Experience</div> |
| <nav> |
| <ul> |
| <li><a href="#home">Home</a></li> |
| <li><a href="#history">History</a></li> |
| <li><a href="#architecture">Architecture</a></li> |
| <li><a href="#gods">Gods</a></li> |
| <li><a href="#culture">Daily Life</a></li> |
| <li><a href="#hieroglyphs">Hieroglyphs</a></li> |
| </ul> |
| </nav> |
| </div> |
| </header> |
|
|
| <section class="hero" id="home"> |
| <div class="sun"></div> |
| <div class="hero-content"> |
| <h1>Journey Through Ancient Egypt</h1> |
| <p>Explore the wonders of one of the world's greatest civilizations. Discover the secrets of the Pharaohs, marvel at architectural masterpieces, and unlock the mysteries of hieroglyphic writing.</p> |
| <a href="#history" class="cta-btn">Begin Exploration</a> |
| <a href="#hieroglyphs" class="cta-btn" style="background-color: var(--lapis-blue); color: var(--gold);">Try Hieroglyphs</a> |
| </div> |
| </section> |
|
|
| <div class="hieroglyph-scroll"> |
| <div class="hieroglyph-track"> |
| <span class="hieroglyph" data-tooltip="Ankh (Life)">𓋹</span> |
| <span class="hieroglyph" data-tooltip="Eye of Horus (Protection)">𓂀</span> |
| <span class="hieroglyph" data-tooltip="Djet (Stability)">𓊽</span> |
| <span class="hieroglyph" data-tooltip="Scarab (Transformation)">𓆣</span> |
| <span class="hieroglyph" data-tooltip="Was Sceptre (Power)">𓌀</span> |
| <span class="hieroglyph" data-tooltip="Lotus (Rebirth)">𓆸</span> |
| <span class="hieroglyph" data-tooltip="Obelisk (Eternity)">𓉐</span> |
| <span class="hieroglyph" data-tooltip="Falcon (Horus)">𓃭</span> |
| <span class="hieroglyph" data-tooltip="Cobra (Wadjet)">𓆜</span> |
| <span class="hieroglyph" data-tooltip="Vulture (Nekhbet)">𓅐</span> |
| <span class="hieroglyph" data-tooltip="Lion (Strength)">𓃭</span> |
| <span class="hieroglyph" data-tooltip="Bee (Lower Egypt)">𓆤</span> |
| <span class="hieroglyph" data-tooltip="Sedge (Upper Egypt)">𓇓</span> |
| <span class="hieroglyph" data-tooltip="Water (Nile)">𓈗</span> |
| <span class="hieroglyph" data-tooltip="Sun Disk (Ra)">𓇳</span> |
| <span class="hieroglyph" data-tooltip="Moon (Khonsu)">𓇹</span> |
| </div> |
| <div class="hieroglyph-tooltip"></div> |
| </div> |
|
|
| <section id="history" class="container"> |
| <h2 class="section-title animate-on-scroll">Egyptian Timeline</h2> |
| <div class="timeline"> |
| <div class="timeline-item left animate-on-scroll"> |
| <div class="timeline-content"> |
| <h3>Pre-Dynastic Period (6000-3100 BCE)</h3> |
| <p>Early settlements along the Nile develop into complex societies. The unification of Upper and Lower Egypt marks the beginning of Egyptian civilization.</p> |
| </div> |
| </div> |
| <div class="timeline-item right animate-on-scroll"> |
| <div class="timeline-content"> |
| <h3>Old Kingdom (2686-2181 BCE)</h3> |
| <p>The Age of Pyramids. Construction of the Great Pyramid of Giza. Development of hieroglyphic writing and complex bureaucracy.</p> |
| </div> |
| </div> |
| <div class="timeline-item left animate-on-scroll"> |
| <div class="timeline-content"> |
| <h3>Middle Kingdom (2055-1650 BCE)</h3> |
| <p>Egypt reunifies after a period of fragmentation. Expansion into Nubia. The Faiyum region is developed, and literature flourishes.</p> |
| </div> |
| </div> |
| <div class="timeline-item right animate-on-scroll"> |
| <div class="timeline-content"> |
| <h3>New Kingdom (1550-1069 BCE)</h3> |
| <p>Egypt's golden age. Great temples at Luxor and Karnak built. Famous rulers like Hatshepsut, Thutmose III, Akhenaten, and Ramses II.</p> |
| </div> |
| </div> |
| <div class="timeline-item left animate-on-scroll"> |
| <div class="timeline-content"> |
| <h3>Late Period (664-332 BCE)</h3> |
| <p>Period of foreign domination, including Persian rule. Despite challenges, art and architecture continue to thrive.</p> |
| </div> |
| </div> |
| <div class="timeline-item right animate-on-scroll"> |
| <div class="timeline-content"> |
| <h3>Ptolemaic Period (332-30 BCE)</h3> |
| <p>Alexander the Great conquers Egypt. The reign of Cleopatra VII. Construction of the famous Library of Alexandria.</p> |
| </div> |
| </div> |
| <div class="timeline-item left animate-on-scroll"> |
| <div class="timeline-content"> |
| <h3>Roman Period (30 BCE - 641 CE)</h3> |
| <p>Egypt becomes a Roman province. The rise of Coptic Christianity. Gradual decline of hieroglyphic writing.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="architecture" class="container"> |
| <h2 class="section-title animate-on-scroll">Architectural Marvels</h2> |
| <div class="pyramid-container animate-on-scroll"> |
| <div class="pyramid"> |
| <div class="pyramid-side side-front"></div> |
| <div class="pyramid-side side-back"></div> |
| <div class="pyramid-side side-left"></div> |
| <div class="pyramid-side side-right"></div> |
| </div> |
| <div class="pyramid-shadow"></div> |
| </div> |
| <div class="card-grid"> |
| <div class="card animate-on-scroll"> |
| <div class="card-img"> |
| <img src="https://images.unsplash.com/photo-1503177119275-0aa32b3a9368?q=80&w=1000" alt="Great Pyramid of Giza"> |
| </div> |
| <div class="card-content"> |
| <h3 class="card-title">Great Pyramid of Giza</h3> |
| <span class="card-date">Old Kingdom (2580–2560 BCE)</span> |
| <p class="card-text">The sole survivor of the Seven Wonders of the Ancient World, built as a tomb for Pharaoh Khufu.</p> |
| <a href="#" class="card-btn">Explore Pyramid</a> |
| </div> |
| </div> |
| <div class="card animate-on-scroll"> |
| <div class="card-img"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/10730.jpg.webp?v=1680526437" alt="Karnak Temple"> |
| </div> |
| <div class="card-content"> |
| <h3 class="card-title">Karnak Temple Complex</h3> |
| <span class="card-date">Middle Kingdom through Ptolemaic Period</span> |
| <p class="card-text">The largest religious building ever constructed, dedicated to the Theban triad of gods.</p> |
| <a href="#" class="card-btn">Explore Temple</a> |
| </div> |
| </div> |
| <div class="card animate-on-scroll"> |
| <div class="card-img"> |
| <img src="https://images.unsplash.com/photo-1545281734-8a4c8934c8f7?q=80&w=1000" alt="Abu Simbel"> |
| </div> |
| <div class="card-content"> |
| <h3 class="card-title">Abu Simbel</h3> |
| <span class="card-date">New Kingdom (1279–1213 BCE)</span> |
| <p class="card-text">Twin temples carved into a mountainside under Ramses II, featuring colossal statues.</p> |
| <a href="#" class="card-btn">Explore Temple</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="gods" class="container"> |
| <h2 class="section-title animate-on-scroll">Egyptian Pantheon</h2> |
| <div class="gods-gallery"> |
| <div class="god-card animate-on-scroll"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/113.jpg.webp?v=1648381122" alt="Ra" class="god-image"> |
| <div class="god-overlay"> |
| <h3 class="god-name">Ra</h3> |
| <p class="god-domain">God of the Sun</p> |
| </div> |
| </div> |
| <div class="god-card animate-on-scroll"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/2585.jpg.webp?v=1698334887" alt="Osiris" class="god-image"> |
| <div class="god-overlay"> |
| <h3 class="god-name">Osiris</h3> |
| <p class="god-domain">God of the Afterlife</p> |
| </div> |
| </div> |
| <div class="god-card animate-on-scroll"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/2586.jpg.webp?v=1698334921" alt="Isis" class="god-image"> |
| <div class="god-overlay"> |
| <h3 class="god-name">Isis</h3> |
| <p class="god-domain">Goddess of Magic & Motherhood</p> |
| </div> |
| </div> |
| <div class="god-card animate-on-scroll"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/2583.jpg.webp?v=1698334561" alt="Horus" class="god-image"> |
| <div class="god-overlay"> |
| <h3 class="god-name">Horus</h3> |
| <p class="god-domain">God of Kingship</p> |
| </div> |
| </div> |
| <div class="god-card animate-on-scroll"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/2584.jpg.webp?v=1698334820" alt="Anubis" class="god-image"> |
| <div class="god-overlay"> |
| <h3 class="god-name">Anubis</h3> |
| <p class="god-domain">God of Mummification</p> |
| </div> |
| </div> |
| <div class="god-card animate-on-scroll"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/2587.jpg.webp?v=1698334947" alt="Thoth" class="god-image"> |
| <div class="god-overlay"> |
| <h3 class="god-name">Thoth</h3> |
| <p class="god-domain">God of Wisdom & Writing</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="culture" class="container"> |
| <h2 class="section-title animate-on-scroll">Daily Life in Egypt</h2> |
| <div class="map-container animate-on-scroll"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/4353.jpg.webp?v=1657851157" alt="Ancient Egypt Map" class="map-image"> |
| <div class="map-pin" style="top: 30%; left: 40%;" data-title="Memphis" data-description="Capital of the Old Kingdom, center of worship for Ptah"></div> |
| <div class="map-pin" style="top: 45%; left: 50%;" data-title="Thebes" data-description="Capital during New Kingdom, home to Karnak and Luxor temples"></div> |
| <div class="map-pin" style="top: 55%; left: 55%;" data-title="Abu Simbel" data-description="Great temple of Ramses II"></div> |
| <div class="map-pin" style="top: 35%; left: 48%;" data-title="Faiyum" data-description="Agricultural center with extensive irrigation works"></div> |
| <div class="map-pin" style="top: 65%; left: 46%;" data-title="Aswan" data-description="Source of Egypt's granite"></div> |
| <div class="map-tooltip"></div> |
| </div> |
| <div class="card-grid"> |
| <div class="card animate-on-scroll"> |
| <div class="card-img"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/11195.jpg.webp?v=1678381148" alt="Agriculture in Egypt"> |
| </div> |
| <div class="card-content"> |
| <h3 class="card-title">Agriculture & The Nile</h3> |
| <p class="card-text">The annual flooding of the Nile fertilized the land. Egyptians grew wheat, barley, flax, and vegetables. They developed complex irrigation systems.</p> |
| <a href="#" class="card-btn">Learn More</a> |
| </div> |
| </div> |
| <div class="card animate-on-scroll"> |
| <div class="card-img"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/11487.jpg.webp?v=1684927427" alt="Egyptian Trade"> |
| </div> |
| <div class="card-content"> |
| <h3 class="card-title">Trade & Commerce</h3> |
| <p class="card-text">Egypt traded gold, papyrus, linen, and grain for wood, incense, oils, and luxury goods. Merchant ships sailed the Nile and Mediterranean.</p> |
| <a href="#" class="card-btn">Learn More</a> |
| </div> |
| </div> |
| <div class="card animate-on-scroll"> |
| <div class="card-img"> |
| <img src="https://www.worldhistory.org/img/r/p/1000x1200/10421.jpg.webp?v=1668019025" alt="Egyptian Art"> |
| </div> |
| <div class="card-content"> |
| <h3 class="card-title">Art & Crafts</h3> |
| <p class="card-text">Highly skilled artisans created jewelry, pottery, furniture, and statues with symbolic meaning. They followed strict artistic conventions.</p> |
| <a href="#" class="card-btn">Learn More</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="hieroglyphs" class="container"> |
| <h2 class="section-title animate-on-scroll">Decode Hieroglyphs</h2> |
| <div class="hieroglyph-panel animate-on-scroll"> |
| <p>Create your own hieroglyphic message by clicking on the symbols below. Combine them to spell names or words (note: real Egyptian hieroglyphs are more complex than this simple representation).</p> |
| |
| <div class="hieroglyph-display" id="hieroglyphDisplay"></div> |
| |
| <div class="hieroglyph-grid"> |
| <div class="hieroglyph-selector" data-glyph="𓃭">𓃭</div> |
| <div class="hieroglyph-selector" data-glyph="𓃗">𓃗</div> |
| <div class="hieroglyph-selector" data-glyph="𓃻">𓃻</div> |
| <div class="hieroglyph-selector" data-glyph="𓃾">𓃾</div> |
| <div class="hieroglyph-selector" data-glyph="𓄋">𓄋</div> |
| <div class="hieroglyph-selector" data-glyph="𓀿">𓀿</div> |
| <div class="hieroglyph-selector" data-glyph="𓁿">𓁿</div> |
| <div class="hieroglyph-selector" data-glyph="𓂀">𓂀</div> |
| <div class="hieroglyph-selector" data-glyph="𓅓">𓅓</div> |
| <div class="hieroglyph-selector" data-glyph="𓆣">𓆣</div> |
| <div class="hieroglyph-selector" data-glyph="𓋹">𓋹</div> |
| <div class="hieroglyph-selector" data-glyph="𓃯">𓃯</div> |
| </div> |
| |
| <div class="hieroglyph-controls"> |
| <button class="hieroglyph-btn" id="clearBtn">Clear</button> |
| <button class="hieroglyph-btn" id="translateBtn">Translate</button> |
| <button class="hieroglyph-btn" id="randomBtn">Random</button> |
| </div> |
| </div> |
| </section> |
|
|
| <footer> |
| <div class="footer-content"> |
| <div class="footer-logo">𓃭 Ancient Egypt Experience 𓂀</div> |
| <div class="footer-links"> |
| <a href="#home">Home</a> |
| <a href="#history">History</a> |
| <a href="#architecture">Architecture</a> |
| <a href="#gods">Gods</a> |
| <a href="#culture">Daily Life</a> |
| <a href="#hieroglyphs">Hieroglyphs</a> |
| </div> |
| <div class="social-icons"> |
| <a href="#" class="social-icon">𓃭</a> |
| <a href="#" class="social-icon">𓂀</a> |
| <a href="#" class="social-icon">𓆣</a> |
| <a href="#" class="social-icon">𓋹</a> |
| </div> |
| <p class="copyright">© 2023 Ancient Egypt Experience. All rights reserved. This is an educational project.</p> |
| </div> |
| </footer> |
|
|
| <a href="#" class="back-to-top">↑</a> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const animateElements = document.querySelectorAll('.animate-on-scroll'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('in-view'); |
| } |
| }); |
| }, { |
| threshold: 0.1 |
| }); |
| |
| animateElements.forEach(element => { |
| observer.observe(element); |
| }); |
| |
| |
| const hieroglyphs = document.querySelectorAll('.hieroglyph'); |
| const hieroglyphTooltip = document.querySelector('.hieroglyph-tooltip'); |
| |
| hieroglyphs.forEach(hieroglyph => { |
| hieroglyph.addEventListener('mouseover', function(e) { |
| const tooltipText = this.getAttribute('data-tooltip'); |
| hieroglyphTooltip.textContent = tooltipText; |
| hieroglyphTooltip.style.opacity = '1'; |
| |
| const rect = this.getBoundingClientRect(); |
| hieroglyphTooltip.style.left = `${rect.left + rect.width / 2}px`; |
| hieroglyphTooltip.style.top = `${rect.top - 40}px`; |
| }); |
| |
| hieroglyph.addEventListener('mouseout', function() { |
| hieroglyphTooltip.style.opacity = '0'; |
| }); |
| }); |
| |
| |
| const mapPins = document.querySelectorAll('.map-pin'); |
| const mapTooltip = document.querySelector('.map-tooltip'); |
| |
| mapPins.forEach(pin => { |
| pin.addEventListener('mouseover', function(e) { |
| const title = this.getAttribute('data-title'); |
| const description = this.getAttribute('data-description'); |
| |
| mapTooltip.innerHTML = `<h3>${title}</h3><p>${description}</p>`; |
| mapTooltip.style.opacity = '1'; |
| |
| const rect = this.getBoundingClientRect(); |
| mapTooltip.style.left = `${rect.left + rect.width / 2}px`; |
| mapTooltip.style.top = `${rect.top - 120}px`; |
| mapTooltip.style.transform = 'translateX(-50%)'; |
| }); |
| |
| pin.addEventListener('mouseout', function() { |
| mapTooltip.style.opacity = '0'; |
| }); |
| }); |
| |
| |
| const backToTopBtn = document.querySelector('.back-to-top'); |
| |
| window.addEventListener('scroll', function() { |
| if (window.pageYOffset > 300) { |
| backToTopBtn.classList.add('active'); |
| } else { |
| backToTopBtn.classList.remove('active'); |
| } |
| }); |
| |
| backToTopBtn.addEventListener('click', function(e) { |
| e.preventDefault(); |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| const hieroglyphDisplay = document.getElementById('hieroglyphDisplay'); |
| const hieroglyphSelectors = document.querySelectorAll('.hieroglyph-selector'); |
| const clearBtn = document.getElementById('clearBtn'); |
| const translateBtn = document.getElementById('translateBtn'); |
| const randomBtn = document.getElementById('randomBtn'); |
| |
| hieroglyphSelectors.forEach(selector => { |
| selector.addEventListener('click', function() { |
| const glyph = this.getAttribute('data-glyph'); |
| hieroglyphDisplay.textContent += glyph; |
| }); |
| }); |
| |
| clearBtn.addEventListener('click', function() { |
| hieroglyphDisplay.textContent = ''; |
| }); |
| |
| translateBtn.addEventListener('click', function() { |
| const currentContent = hieroglyphDisplay.textContent; |
| if (currentContent) { |
| alert(`Your hieroglyphs: ${currentContent}\n\nWhile not a direct translation (real Egyptian is more complex), this sequence represents ${getRandomResult()}`); |
| } else { |
| alert('Please select some hieroglyphs first!'); |
| } |
| }); |
| |
| randomBtn.addEventListener('click', function() { |
| hieroglyphDisplay.textContent = ''; |
| const count = Math.floor(Math.random() * 5) + 3; |
| for (let i = 0; i < count; i++) { |
| const randomGlyph = hieroglyphSelectors[Math.floor(Math.random() * hieroglyphSelectors.length)]; |
| hieroglyphDisplay.textContent += randomGlyph.getAttribute('data-glyph'); |
| } |
| }); |
| |
| function getRandomResult() { |
| const possibilities = [ |
| "a name of royal significance", |
| "a protective spell", |
| "a prayer to the gods", |
| "a record of a military victory", |
| "an invocation for good harvest", |
| "a dedication to a pharaoh", |
| "the title of a high official", |
| "a blessing for the afterlife" |
| ]; |
| return possibilities[Math.floor(Math.random() * possibilities.length)]; |
| } |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 70, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
| </html> |
