-
-
Egypt
-
The Mother of the world & the start Civilization
-
Explore
-
-
-
-
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/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
+
+
+ Home
+ History
+ Explore
+
+
+
+
+
+
+
Egypt
+
The Mother of the world & the start Civilization
+
Explore
+
+
+
+
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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
