<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0111)file:///C:/Users/Ahmed_Basem/Documents/My%20Web%20Sites/mysite6/%D8%A7%D9%84%D9%81%D8%B6%D8%A7%D8%A1%20-55.html -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<style>

body {
    margin: 0;
    height: 100vh;
    position: relative;
}

/* الصورة */
.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("images/background.png");
    background-size: cover;
    background-position: center;
    opacity: 0.5;   /* 👈 هنا تتحكم في شفافية الصورة */
    z-index: -1;
}

.content {
    position: relative;
    z-index: 1;
    color: black;
    text-align: center;
    margin-top: 200px;
}

</style>














<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #5452e7;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: rgb(0, 0, 0);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>

<link rel="icon" type="image/x-icon" href="images/favicon.ico">

<title>Hello and welcome to the world of space</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="ar-eg" http-equiv="Content-Language">

<style type="text/css">
.auto-style11 {
	text-align: center;
}
.auto-style13 {
	border-width: 0px;
}
.auto-style14 {
	text-align: center;
	margin-bottom: 0px;
}
.auto-style16 {
	text-decoration: none;
}
.auto-style17 {
	text-align: center;
	font-size: xx-large;
	color: #410701;
	direction: rtl;
}
.auto-style18 {
	text-align: center;
	direction: rtl;
}
.auto-style19 {
	text-align: center;
	font-size: medium;
	color: #410701;
	direction: rtl;
}

footer {
     

      padding: 20px;
      text-align: center;
    }
</style>
</head>

<body dir="ltr">

<div class="bg-image"></div>
<h1 class="auto-style11" style="height: 2px"> 
&nbsp;</h1>
<h1 class="auto-style11" style="height: 25px"> 
&nbsp;<strong>Hello and welcome to the world of space</strong></h1>
<p class="auto-style11" style="height: 13px"> 
&nbsp;</p>

<br />
<br>
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">language</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#">English</a>
    <a href="../index.html">Arabic</a>
    
  </div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  const input = document.getElementById("myInput");
  const filter = input.value.toUpperCase();
  const div = document.getElementById("myDropdown");
  const a = div.getElementsByTagName("a");
  for (let i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>

<p class="auto-style14" style="height: 265px"> 
<a href="Galaxy-2-English.html"> 
<img alt=""  src="images/Galaxy.jpg" width="500" class="auto-style13"  /></a></p>
<p class="auto-style18"> 
<a class="auto-style16" href="Galaxy-2-english.html">Click on the image to enlarge</a></p>
<p class="auto-style17"><a href="Information-about-space.html">Information about the solar system</a></p>
<p class="auto-style19" style="height: 18px"><br />
<a href="Origin-Ahmed-Maher-Muhammad.html"><strong>Programming and design: Ahmed Maher Mohamed</strong></a></p>
<p class="auto-style19" style="height: 18px"></p>
<p class="auto-style19" style="height: 18px">
<a href="Origin-Ahmed-Maher-Muhammad.html"><strong></strong></a></p>

  <!-- الفوتر -->
  <footer>
<p>© 2026 Space World - All rights reserved</p>
  </footer>

</body>

</html>