From e2960b802a87f2443fde4ae6ff49c35d74a17ee0 Mon Sep 17 00:00:00 2001 From: yourname Date: Fri, 3 Jul 2026 18:01:32 +0300 Subject: [PATCH] Update travel website submodule --- .DS_Store | Bin 6148 -> 6148 bytes egypt/Explore.css | 20 +- egypt/History.css | 14 +- egypt/index.html | 945 ++++++++++++++++++++++++++++++++++++++++++++-- egypt/script.js | 13 +- egypt/start.html | 53 +++ egypt/style.css | 330 ++++++++++++---- index.html | 711 ++++++++++++++++++++++++++++++++++ 8 files changed, 1951 insertions(+), 135 deletions(-) create mode 100644 egypt/start.html create mode 100644 index.html diff --git a/.DS_Store b/.DS_Store index 5008ddfcf53c02e82d7eee2e57c38e5672ef89f6..471112eaf413adff427c49c55ef3d5ce247ef491 100644 GIT binary patch literal 6148 zcmeHKPfrs;6n_JSc0pt*1yR&&(kn_uLNFd&3&x-(CA4BIf9h^KtsAyGb$3faB=?X~ib+wj zUFEt^bVv&YAZ_l7u!K$up4FgQ+FTb-4bP2humm|MLIYmGTX+ZW;Uj#4FYq0Hl0lLp zSI8_`BzMUJ@`yYp+oVh^QX_TJ6eaq)ulZ_sK7r)L$*~%po&ia1V)*o_Dnl`#7&zk$ z@cqHS#?h465g2V9*zw;7?vHWgf;zuTa5N;E5<3FXgF-|qqDUq3ia|s=+6@_JO6&*} z=|G~Hv5uUX$QufYW=Fdbg#$4Ks$Mam7&ys5zZmNL{J;12`~S%#HBt;H2F?@%B(|Ji z&f=2f+1j%>e%2b;o?+v{<2nMP6zt@294Y)Lp28Lh`V6ihni4w#(So9W1R@$#rx^IB G4EzE-@5#OZ delta 66 zcmZoMXfc=|#>AjHu~2NHo+1YW5HK<@2y7PQ5M$Y_z%h$?Gdl-A2T%b}u84%9H(hI5x+KtY8KJ$3PAT diff --git a/egypt/Explore.css b/egypt/Explore.css index 7f08672..33448ae 100644 --- a/egypt/Explore.css +++ b/egypt/Explore.css @@ -5,7 +5,7 @@ } html{ -background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; +background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(background.jpg) no-repeat center center fixed; } .container{ @@ -78,7 +78,7 @@ padding-bottom: 75px; padding-right: 75px; } .wrapper .box .front-face{ -background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); +background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(background.jpg); background-size: cover; height: 220px; width: 100%; @@ -147,35 +147,35 @@ transform: translateY(-110px) rotateX(90deg); /*Boxes Backgrounds*/ .box .front-face.face1{ - background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Egypt-Valley-of-the-kings.jpg); + background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(Egypt-Valley-of-the-kings.jpg); } .box .front-face.face2{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-mosque-cairo.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(egypt-mosque-cairo.jpg); } .box .front-face.face3{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-temples.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(egypt-temples.jpg); } .box .front-face.face4{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(gouna.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(gouna.jpg); } .box .front-face.face5{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(sharm.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(sharm.jpg); } .box .front-face.face6{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(saint-catherines-monastery.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(saint-catherines-monastery.jpg); } .box .front-face.face7{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(alexandria-egypt-library.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(alexandria-egypt-library.jpg); } .box .front-face.face{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(flag.jpg); } .box .back-face button{ diff --git a/egypt/History.css b/egypt/History.css index 5c7a641..ee1d237 100644 --- a/egypt/History.css +++ b/egypt/History.css @@ -5,7 +5,7 @@ } html{ - background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed; + background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(background.jpg) no-repeat center center fixed; } .container{ @@ -78,7 +78,7 @@ nav ul li{ padding-right: 75px; } .wrapper .box .front-face{ - background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(background.jpg); background-size: cover; height: 220px; width: 100%; @@ -146,21 +146,21 @@ nav ul li{ /*Boxes Backgrounds*/ .box .front-face.face1{ - background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(info-box1.jpg); + background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(info-box1.jpg); } .box .front-face.face2{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box2.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(info-box2.jpg); } .box .front-face.face3{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box3.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(info-box3.jpg); } .box .front-face.face4{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box4.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(info-box4.jpg); } .box .front-face.face5{ - background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg); + background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(flag.jpg); } \ No newline at end of file diff --git a/egypt/index.html b/egypt/index.html index 73c7f39..db07c81 100644 --- a/egypt/index.html +++ b/egypt/index.html @@ -2,52 +2,917 @@ - - Document - - - + Index - egypt + + + + + + +
+
-
- - - -
-
-
-

Egypt

-

The Mother of the world & the start Civilization

- -
-
-
-
Abu Simbel
-

Abu Simbel is an archaeological site comprising two massive rock-cut temples in southern Egypt on the western bank of Lake Nasser. The twin temples were originally carved out of the mountainside during the reign of Pharaoh Ramesses The Great in the 13th century BC

-
-
-
Siwa Oasis
-

Siwa Oasis is one of Egypt’s isolated settlements,Located on an old date trade route, Siwa was an oasis vital to the trade route, as the natural springs and shade giving palm trees gave travelers respite from the desert.

-
-
-
Giza Necropolis
-

The Pyramids of Giza, situated in the immediate vicinity of the southwestern suburbs of Cairo are the undisputable top attractions in Egypt. The pyramids at Giza were built over the span of three generations by Khufu, his second reigning son Khafre, and Menkaure

-
-
-
Red Sea Reef
-

The Red Sea, off the coast of Egypt, is one of the most beautiful places in the world to go diving. The waters of the Red Sea are renowned for their spectacular visibility and features some of the most exotic seascapes. With its wide expanse of coral formation on the reefs, it is home to thousands of different sea creatures.

-
+
+
+

Files

+
+
- + + + + + + + diff --git a/egypt/script.js b/egypt/script.js index aa459ec..a82eaf0 100644 --- a/egypt/script.js +++ b/egypt/script.js @@ -2,7 +2,7 @@ var button = document.getElementById("li1"); button.addEventListener("click", function(){ - document.location.href = 'index.html'; + document.location.href = 'start.html'; }); var button = document.getElementById("li2"); @@ -17,12 +17,21 @@ button.addEventListener("click", function(){ document.location.href = 'Explore.html'; }); +// Logo - Home button +var logoButton = document.getElementById("logo-home"); + +if (logoButton) { + logoButton.addEventListener("click", function(){ + document.location.href = 'start.html'; + }); +} + //btns var button = document.getElementById("btn1"); button.addEventListener("click", function(){ - document.location.href = '/Explore.html'; + document.location.href = 'Explore.html'; }); var button = document.getElementById("btn2"); diff --git a/egypt/start.html b/egypt/start.html new file mode 100644 index 0000000..63a0da1 --- /dev/null +++ b/egypt/start.html @@ -0,0 +1,53 @@ + + + + + + + Document + + + + + +
+
+ + + +
+
+
+

Egypt

+

The Mother of the world & the start Civilization

+ +
+
+
+
Abu Simbel
+

Abu Simbel is an archaeological site comprising two massive rock-cut temples in southern Egypt on the western bank of Lake Nasser. The twin temples were originally carved out of the mountainside during the reign of Pharaoh Ramesses The Great in the 13th century BC

+
+
+
Siwa Oasis
+

Siwa Oasis is one of Egypt’s isolated settlements,Located on an old date trade route, Siwa was an oasis vital to the trade route, as the natural springs and shade giving palm trees gave travelers respite from the desert.

+
+
+
Giza Necropolis
+

The Pyramids of Giza, situated in the immediate vicinity of the southwestern suburbs of Cairo are the undisputable top attractions in Egypt. The pyramids at Giza were built over the span of three generations by Khufu, his second reigning son Khafre, and Menkaure

+
+
+
Red Sea Reef
+

The Red Sea, off the coast of Egypt, is one of the most beautiful places in the world to go diving. The waters of the Red Sea are renowned for their spectacular visibility and features some of the most exotic seascapes. With its wide expanse of coral formation on the reefs, it is home to thousands of different sea creatures.

+
+
+
+
+ + + diff --git a/egypt/style.css b/egypt/style.css index bc6dd62..55cfac5 100644 --- a/egypt/style.css +++ b/egypt/style.css @@ -1,122 +1,300 @@ -*{ +/* Modern, impactful styling for Egypt travel website */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); + +* { margin: 0; padding: 0; - font-family: 'Roboto', sans-serif; + font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } -.container{ +.container { width: 100%; - height: 100vh; - background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg); + min-height: 100vh; + background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url(background.jpg); background-position: center; background-size: cover; - padding-left: 8%; - padding-right: 8%; + background-attachment: fixed; + padding: 0 8%; box-sizing: border-box; + position: relative; + overflow-x: hidden; } -.navbar{ +/* Enhanced navbar with modern styling */ +.navbar { height: 12%; display: flex; align-items: center; + justify-content: space-between; + padding: 20px 0; } -.logo{ - width: 50px; +.logo { + font-family: 'Playfair Display', serif; + font-weight: 700; + font-size: 2.5rem; + color: #FFD700; /* Gold color for luxury feel */ + text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); + letter-spacing: 1px; cursor: pointer; - color: white; - font-size: 20px; + transition: all 0.3s ease; } -.navbar i{ - width: 30px; +.logo:hover { + transform: scale(1.05); + text-shadow: 0 4px 12px rgba(255, 215, 0, 0.5); +} + +.navbar i { + width: 40px; + height: 40px; cursor: pointer; - margin-left: 40px; -} - -nav{ - flex: 1; - text-align: right; -} - -nav ul li{ - list-style: none; - display: inline-block; - margin-left: 60px; + margin-left: 20px; color: white; - font-size: 13px; -} - -.row{ + font-size: 1.5rem; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; display: flex; - height: 88%; align-items: center; + justify-content: center; + transition: all 0.3s ease; } -.col { - flex-basis: 50%; +.navbar i:hover { + background: rgba(255, 255, 255, 0.2); + transform: rotate(90deg); } -h1{ +nav ul { + display: flex; + list-style: none; +} + +nav ul li { + margin-left: 40px; color: white; - font-size: 100px; + font-size: 1.1rem; + font-weight: 500; + cursor: pointer; + position: relative; + padding: 8px 16px; + border-radius: 25px; + transition: all 0.3s ease; } -p{ +nav ul li:hover { + background: rgba(255, 255, 255, 0.15); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +/* Modern hero section */ +.row { + display: flex; + align-items: center; + min-height: 80vh; + gap: 40px; +} + +.col:first-child { + flex: 1; color: white; - font-size: 11px; - line-height: 15px; + animation: fadeInUp 1s ease; } -button{ - width: 180px; - color: #000; - font-size: 12px; - padding: 12px 0; - background: whitesmoke; - border: 0; - border-radius: 20px; - -webkit-border-radius: 20px; - -moz-border-radius: 20px; - -ms-border-radius: 20px; - -o-border-radius: 20px; - outline: none; - margin-top: 30px; +.col:last-child { + flex: 1; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + animation: fadeIn 1.2s ease; } +h1 { + font-family: 'Playfair Display', serif; + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 20px; + line-height: 1.2; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); +} + +p { + font-size: 1.2rem; + line-height: 1.6; + margin-bottom: 30px; + opacity: 0.9; +} + +/* Modern explore button */ +.explore { + background: linear-gradient(135deg, #FF8C00 0%, #FF6B35 100%); + color: white; + border: none; + padding: 16px 40px; + font-size: 1.1rem; + font-weight: 600; + border-radius: 30px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4); + letter-spacing: 1px; + text-transform: uppercase; +} + +.explore:hover { + transform: translateY(-3px); + box-shadow: 0 10px 25px rgba(255, 107, 53, 0.6); + background: linear-gradient(135deg, #FF6B35 0%, #FF8C00 100%); +} + +/* Modern card design */ .card { - width: 200px; - height: 230px; - display: inline-block; - border-radius: 10px; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - -ms-border-radius: 10px; - -o-border-radius: 10px; - padding: 15px 25px; - box-sizing: border-box; - margin: 10px 15px; - background-position: center; - background-size: cover; + background: rgba(255, 255, 255, 0.95); + border-radius: 20px; + padding: 25px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); } -.card h5{ - color: white; - text-decoration: bold; +.card:hover { + transform: translateY(-10px) scale(1.02); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); + background: white; } -.card1{ - background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card1.jpg); +.card h5 { + font-family: 'Playfair Display', serif; + font-size: 1.4rem; + font-weight: 600; + color: #2c3e50; + margin-bottom: 15px; + position: relative; } -.card2{ - background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card2.jpg); +.card h5::after { + content: ''; + position: absolute; + bottom: -8px; + left: 0; + width: 40px; + height: 3px; + background: linear-gradient(135deg, #FF8C00, #FF6B35); + border-radius: 2px; } -.card3{ - background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card3.jpg); +.card p { + color: #555; + font-size: 0.95rem; + line-height: 1.6; + margin-bottom: 0; } -.card4{ - background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card4.jpg); +/* Responsive design */ +@media (max-width: 1200px) { + h1 { + font-size: 2.8rem; + } + + .row { + gap: 30px; + } +} + +@media (max-width: 992px) { + .row { + flex-direction: column; + text-align: center; + min-height: auto; + padding: 40px 0; + } + + .col:last-child { + grid-template-columns: 1fr; + max-width: 600px; + margin: 0 auto; + } + + nav ul li { + margin: 0 15px; + font-size: 1rem; + } + + .logo { + font-size: 2rem; + } +} + +@media (max-width: 768px) { + .container { + padding: 0 5%; + } + + h1 { + font-size: 2.2rem; + } + + p { + font-size: 1rem; + } + + .explore { + padding: 14px 30px; + font-size: 1rem; + } + + .navbar { + flex-direction: column; + gap: 15px; + } + + nav ul { + flex-wrap: wrap; + justify-content: center; + } + + nav ul li { + margin: 5px; + } +} + +/* Animations */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(50px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Additional modern touches */ +body { + scroll-behavior: smooth; +} + +.container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%); + pointer-events: none; } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..92bf3d1 --- /dev/null +++ b/index.html @@ -0,0 +1,711 @@ + + + + + + Index - travel-website + + + + + + + + +
+ +
+
+
+

Folders

+ +
+ +
+
+ + + + + + + + +