Merhaba,
Bu Konumda Facebook admin panelini klonlamayı denedim biraz benzedi yeni paneli tasarlayamadım js bilgim az kaldı bende eskilerden tasarladım.
Dostlar, ayrıca ben HTML Ve Css Kullanarak Kodladım ama biliyirosunuz ki panel tasarımlarına php daha çok tercih edilir ve veritabanı oluşturmanız lazım Dikkat!
HTML Kodları
CSS Kodları
Bu Konumda Facebook admin panelini klonlamayı denedim biraz benzedi yeni paneli tasarlayamadım js bilgim az kaldı bende eskilerden tasarladım.
Dostlar, ayrıca ben HTML Ve Css Kullanarak Kodladım ama biliyirosunuz ki panel tasarımlarına php daha çok tercih edilir ve veritabanı oluşturmanız lazım Dikkat!
HTML Kodları
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">facebook</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="btn btn-success" id="create-account-btn">Create Account</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<p class="ad">
<span class="icon"></span>
Eagleweb -facebook telefondan indir daha hızlı</p>
<form class="login" method="post" action="">
<div class="form-group">
<label for="email">E-mail veya Telefon</label>
<input type="text" class="form-control" id="email" />
</div>
<div class="form-group">
<label for="password">Şifre</label>
<input type="password" class="form-control" id="password" />
</div>
<input type="button" class="btn btn-default btn-block" value="Log In" />
<div class="text-center">
<a href="#" class="btn btn-success signup">Hesap Oluştur</a>
</div>
<a href="#" class="help-block">Şifrenimi unuttun?</a>
<a href="#" class="help-block">Eagleweb yardım Merkezi</a>
</form>
<footer>
<ul class="nav nav-pills nav-stacked">
<li><strong>English (US)</strong></li>
<li>Designed By Eagleweb</li>
<li>português (Brasil)</li>
<li>العربية</li>
<li>Español</li>
<li id="copyright"><strong>Eagleweb © 2021</strong></li>
</ul>
</footer>
CSS Kodları
CSS:
@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed';
@mixin no-border() {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
border: none;
}
$outside-color: #2C4988;
$inside-color: #516EAE;
body, html {
color: #fff;
height: 100%;
width: 100%;
background: #ccc;
}
.login {
width: 100%;
padding: 10px;
label {
color: #888;
}
.form-control {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
padding-top: 20px;
padding-bottom: 20px;
border-color: #999;
color: #000;
font-weight: bolder;
}
.btn, .btn:focus, .btn:active, .btn:hover {
border-radius: 2px;
border: solid 1px #3B5998;
background: #4867AA;
font-size: 16px;
font-weight: lighter;
padding: 10px;
outline: none;
color: #fff;
}
.help-block {
text-align: left;
color: #4867AA;
display: block;
}
.signup,
.signup:hover,
.signup:focus,
.signup:active {
text-align: center;
margin-top: 10px;
background: #6B8E23 !important;
border: solid 2px #aaa;
}
}
.ad {
background: #FFFAE2;
color: #4682B4;
border: solid #CFAA19;
border-width: 1px 0 1px 0;
position: relative;
top: -21px;
line-height: 50px;
// clear: both;
.icon {
width: 20px;
height: 50px;
background: url('https://lh3.googleusercontent.com/n0wGTCdZ7c1PQGg7tmodIaHa5farEkwo3yGqfytmmAfqWnxZbywXCdepQZsqIFWKaw=h900') -42px -114px transparent;
display: inline-block;
float: left;
margin-left: 10px;
margin-right: 10px;
}
}
.navbar-default {
background: #2C4988;
border: none;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
min-height: 0;
height: 35px !important;
.navbar-brand {
color: #fff;
padding: 0;
line-height: 35px;
padding-left: 5px;
font-weight: bolder;
}
#create-account-btn {
@include no-border;
color: #fff;
font-weight: 100;
border: solid 1px #6495ED;
padding: 4px 15px;
background: #6B8E23;
position: absolute;
top: 0;
right: 0;
}
}
footer {
background: #444;
color: #999;
padding: 10px;
#copyright {
color: #fff;
}
}