<!doctype html>
<html lang="arabic">
<head>
<meta charset="UTF-8">
<title>الكتيبة</title>
<style>
@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
body {background-image:url(https://www.ramstarab.com/wp-content/uploads/2018/09/%D8%AE%D9%84%D9%81%D9%8A%D8%A7%D8%AA-hd-%D8%B3%D9%88%D8%AF%D8%A7%D8%A1-%D8%B9%D8%A7%D9%84%D9%8A%D8%A9-%D8%A7%D9%84%D8%AC%D9%88%D8%AF%D8%A9-768x542.jpg);
background-repeat:no-repeat;
}
h1 {color: white;
font-family:Palatino;
font-size: 500%;
text-align:center;
}
body
{
background-size:cover;
}
span {
color:#022D18;
}
.input-box {
padding:10px;
border-radius:30px;
width:80%;
border:1px solid #999
margin:10px;
}
.btn {
width:9%;
background:none ;
padding:5px;
border:none;
color: white;
border-bottom:3px solid green;
margin-left:90%;
font-size:20px
}
.sign-btn:hover {
background-color:#00FFBA;
}
.sign-btn:active {
background-color:#B7D2BF;
color:#fff;
}
button {
background:none;
color:white;
border:3px solid green;
padding:5px;
width:27%;
font-weight:bold;
font-size:20px;
margin-left:-2%;
outline:none;
}
button:hover {
background-color:#00FFBA;
box-shadow:-10px 10px 40px 10px #00FFBA;
}
button:active {
background-color:#B7D2BF;
color:#fff;
}
div {
height:90%;
text-align:center;
background:none;
border:none;
padding:0;
margin:0%;
}
marquee {
font-size:30px;
font-weight:bold;
color:white;
}
INPUT{
background:none;
border:none;
border-bottom:1px solid green;
color:white;
outline:none;
margin-left:5px;
font-size:120%;
}
i{
color:white;
}
H3{
font-size:30px;
border-bottom:3px solid green;
width:15%;
color:white;
margin-left:35%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a {color:green;}
a:visited {color:green;}
a:hover {color:#00FFBA;}
a:active {color:#00FFBA;}
</style>
</head>
<body>
<BUTTON CLASS="btn">Sign UP</BUTTON>
<h1>El_Kateba Media</h1>
<marquee>
Welcome To El_kateba Website..!
</marquee>
<div>
<h3>Login</H3>
<i class='fa fa-user'></i>
<input TYPE="text" PLACEHOLDER="Phone Numbre"><BR>
<i class='fa fa-lock'></I>
<input TYPE="password" PLACEHOLDER="Password"><br><BR><button><a href="https://runniestllama.htmlpasta.com">sign in</a></button>
</div>
<br>
<script>
alert("تصميم يوسف السعدني")
</script>
</body>
</html>