<!
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><نظام حجز طيران/title>
<style>
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
color: #414142;
background-image:
url("[Link]
usfveF_fw658");
background-size:cover;
}
/ * * يبدأ قسم التسجيل والدخول على اليمين/
.top{
width: 100%;
height: 58px;
box-shadow: 2px 5px 6px rgb(239,241,242);
}
.logo{
width: 140px;
height: 58px;
margin: 0 150px;
float: left;
}
.logo img{
float: left;
width: 58px;
height: 58px;
border-radius: 50%;
}
.logo p{
font-size: 19px;
line-height: 58px;
color:black;
font-family: ";"هيئة كاي
}
.top-right{
width: 500px;
position:absolute;
right:0px;
}
.top-right a{
color:black;
}
div[class^=box]{
font-family: ";"هيئة كاي
height: 58px;
float: left;
font-size: 28px;
margin-right: 50px;
line-height: 58px;
border-radius: 8px;
}
div[class^=box]:hover{
background: rgb(239,241,242);
}
/ * * قسم التسجيل والدخول على الطرف األيمن/
.index_center{
text-align: center;
font-family: ""هيئة كاي,";"كايتش الصينية
color: rgb(102,252,255);
font-size: 64px;
margin-top: 80px;
margin-bottom: 53px;
}
.city{
margin-right: 930px;
margin-bottom: 20px;
font-weight:bold;
}
h1,em,#information{
display: block;
font-size: 25px;
font-weight: normal;
margin: 2em auto;
}
a{
font-style: normal;
text-decoration: none;
font-size: 20px;
}
#container{
margin: 0 auto;
width: 1024px;
}
.wrapper{
display: inline-block;
width: 310px;
height: 160px;
vertical-align: top;
margin: 0em 1.5em 2em 0;
cursor: pointer;
position: relative;
font-family: Tahoma,Arial;
-webkit-perspective: 4000px;
-moz-perspective: 4000px;
-ms-perspective: 4000px;
-o-perspective: 4000px;
perspective: 4000px;
}
.item{
width:220px;
height: 160px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .6s;
-moz-transition: -moz-transform .6s;
-ms-transition: -ms-transform .6s;
-o-transition: -o-transform .6s;
transition: transform .6s;
}
.item:hover{
-webkit-transform: translateZ(-80px) rotateX(95deg);
-moz-transform: translateZ(-80px) rotateX(95deg);
-ms-transform: translateZ(-80px) rotateX(95deg);
-o-transform: translateZ(-80px) rotateX(95deg);
transform: translateZ(-80px) rotateX(95deg);
}
.item img {
display: block;
position: absolute;
top: 0;
border-radius: 3px;
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
-webkit-transform: translateZ(80px);
-moz-transform: translateZ(80px);
-ms-transform: translateZ(80px);
-o-transform: translateZ(80px);
transform: translateZ(80px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
width: 220px;
height: 160px;
}
.item .information {
display: block;
position: absolute;
top: 0;
height: 160px;
width: 220px;
text-align: left;
border-radius: 15px;
font-size: 23px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
box-shadow: none;
background: rgba(236,241,244,0.8);
-webkit-transform: rotateX(-90deg) translateZ(80px);
-moz-transform: rotateX(-90deg) translateZ(80px);
-ms-transform: rotateX(-90deg) translateZ(80px);
-o-transform: rotateX(-90deg) translateZ(80px);
transform: rotateX(-90deg) translateZ(80px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
.information strong {
display: block;
margin: .2em 0 .5em 0;
font-size: 20px;
font-family: "Oleo Script";
}
.item:hover img {
box-shadow: none;
border-radius: 15px;
}
.item:hover .information {
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
border-radius: 3px;
}
</style>
</head>
<body>
<div class="top">
<div class="logo">
<a href="[Link] " target="blank">
<img src="style/[Link]">
<p><معلومات شخصية/p>
</a>
</div>
<div class="top-right">
<div class="box1">
<span><a href="[Link]"><تسجيل المستخدم/a></span>
</div>
<div class="box2">
<span><a href="[Link]"><تسجيل دخول المستخدم/a></span>
</div>
<div class="box3">
<span><a href="[Link]"> تسجيل دخول
<المسؤول/a></span>
</div>
</div>
</div>
<div class="index_center"><مرحبا بكم في نظام حجز التذاكر/div>
<div class="city">المدن الشعبية:</div>
<div id="container">
<div class="wrapper">
<a href="[Link]">
<div class="item">
<img src="style/[Link]">
<span class="information">
<strong><بكين/strong> سور، المدينة المحرمة:عوامل الجذب
القصر الصيفي، <بادالينغ العظيمbr> لفة حمار، كعكة زبدة مقلية، بطة بكين:الغذاء
</span>
</div>
</a>
</div>
<div class="wrapper">
<a href="[Link]">
<div class="item">
<img src="style/[Link]">
<span class="information">
<strong><قوانغتشو/strong> عالم تشيميلونج للحياة:عوامل الجذب
<البريةbr> شرائح الدجاج البيضاء، نودلز األرز:الطعام
</span>
</div>
</a>
</div>
<div class="wrapper">
<a href="[Link]">
<div class="item">
<img src="style/[Link]">
<span class="information">
<strong><دبي/strong> برج، برج العرب:عوامل الجذب
<خليفةbr> طبق صغير، سلطة عربية:الذواقة
</span>
</div>
</a>
</div>
<div class="wrapper">
<a href="[Link]">
<div class="item">
<img src="style/[Link]">
<span class="information">
<strong><سانيا/strong> سانيا أتالنتس، خليج يالونغ:عوامل الجذب
<ووتر وورلدbr> هيلي كراب، شوربة محارة البطيخ الشتوية:الذواقة
</span>
</div>
</a>
</div>
<div class="wrapper">
<a href="[Link]">
<div class="item">
<img src="style/[Link]">
<span class="information">
<strong><موسكو/strong> مسرح، الميدان األحمر:عوامل الجذب
<الكرملينbr> موسكو كفاس:الغذاء
</span>
</div>
</a>
</div>
<div class="wrapper">
<a href="[Link]">
<div class="item">
<img src="style/[Link]" >
<span class="information">
<strong><بوكيت/strong> شاطئ، جزيرة الملك:عوامل الجذب
<باتونجbr> شوربة الدجاج التايالندي مع حليب جوز الهند:الغذاء
</span>
</div>
</a>
</div>
</div>
</body>
</html>