[ درس ] كفية إنشاء صفحة تسجيل شبيهة بالفيسبوك
 

:icon30::icon30::icon30::icon30::icon30::icon30::i con30::icon30::icon30:
:smoke1::smoke1::smoke1::smoke1::smoke1::smoke1::s moke1::smoke1:
:shiny01::shiny01::shiny01::shiny01::shiny01::shin y01::shiny01::shiny01:

السلام عليكم و رحمت الله و بركاته

سوف أضع بين أيديكم كيفية إنشاء صفحة تسجيل شبيهة بالفيسبوك

أول خطوة انشء ملف بمتداد html





dorossweb






Dorossweb.com













Keep me logged in

forgot your password?














Welcome to Dorossweb




Connect with friends and the world around you.





























Sign Up for Dorossweb
















by dorossweb.com








----------------------------------------------------




الخطوة الثانية أنشئ ملف بمتداد .css
تحت عنوان style

html, body, div, span,
h1, h2, h3, h4 ,p,
a, b, u, i, center, form, label {
background: transparent;
border: 0;
margin: 0;
padding: 0;
}
body.login {
background: url(bg.jpg);
}
h2 {
font-size: 30px; line-height:38px;
}
.loginbox {
background: #FBFCFD;
padding: 10px;
width: 490px;
margin: 4% auto 0 auto;
position: relative;
}
.loginboxinner {

padding: 5px;
position: relative;
border: 1px solid #FBFCFD;
-moz-box-shadow: inset 0 1px 0 #FBFCFD;
-webkit-box-shadow: inset 0 1px 0 #FBFCFD;
box-shadow: inset 0 1px 0 #FBFCFD;
}
.loginheader {
height: 20px;
}
.loginform {
margin: 4px auto;
text-align:center;
}


.loginbox p {
margin: 7px 0 5px 0;
}
.loginbox label {
display: block;
color: #666;
letter-spacing: 1px;
font-size: 18px;
}
.loginbox input.mini {
width:195px;
}

.loginbox input {
padding: 12px 10px;
color: #ccc;
font-family: Arial, Helvetica, sans-serif;
margin-top: 8px;
font-size: 15px;
border: 1px solid #ccc;
width: 420px;
outline: none;
}
.loginbox button {
background: #5870A8;
padding: 10px 20px;
font-size: 18px;
border: 1px solid #1D3871;
letter-spacing: 1px;
color: #fff;
width: 440px;
line-height:30px;
-moz-box-shadow: 1px 1px 3px #1D3871;
-webkit-box-shadow: 1px 1px 3px #1D3871;
box-shadow: 1px 1px 3px #1D3871;
cursor: pointer;
}

.radius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }
.radius1 {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#8E989E; line-height:28px; font-weight:normal; text-align:center; font-size:16px; }




#facebook-Bar {
background:#45619D;
border-bottom: 1px solid #0053A6;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.52);
min-width: 1000px;
width: 100%;
z-index: 1000;
}
#facebook-Frame {
margin-left:auto;
margin-right:auto;
max-width:1000px;
height:70px;
display:block;
}
/*-------LOGO-----------*/
#logo {
float: left;
height: 70px;
position: relative;
width: 160px;
}
#logo a {
position: absolute;
top: 20px;
font-size:23px; font-weight:bold; color:#FFF;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/*-------Login-----------*/
#header-main-right {
float: right;
height: 68px;
position: relative;
top:5px;
}
#header-main-right-nav {
padding: 4px 6px 4px 4px;
position: absolute;
right: 0;
}
#login_form .inputtext {
background-color: #FFFFFF;
height:16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
margin: 0;
padding: 5px 8px 5px 8px;
width: 166px;
border:1px solid #3A518A;
}



.fbbutton {
border:1px solid #1D3871;
width:94px;
background-image:-webkit-linear-gradient(top, #637BAD, #4F67A4);
font-size:14px;
line-height:25px;
font-weight:normal;
color:#fff;
}

-------------:bigsmile::bigsmile::bigsmile::bigsmile::bigsmile: :bigsmile::bigsmile::bigsmile:[YTBVIDEO]https://www.youtube.com/watch?v=6sstWtYhVJ0[/YTBVIDEO]

في نتظار ردودكمممممم أشكركم