Facebook Admin Panel Klone Çalışmam // Eagleweb

Eagleweb' Alıntı:

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ı

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 &copy; 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;
  }
}

​

Genişletmek için tıkla ...

CAGLARmc' Alıntı:

bu nasıl admin paneli ve php ile neyi tasarlayacaksın ?

Genişletmek için tıkla ...

Eagleweb' Alıntı:

Merhaba,
Dostum, Görünmü oluşturmak aynı resim yapmak gibi düşün kopyalıyorsun bakarak html formatında ve css ile kodluyorsun, php muhabbeti admin panllerinde veri tabanı lazım oluyor, ondan dolayı.

Genişletmek için tıkla ...

'The Wolf' Alıntı:

Elinize Sağlık.

Genişletmek için tıkla ...

Khanctor' Alıntı:

Elinize Sağlık

Genişletmek için tıkla ...

CAGLARmc' Alıntı:

bu nasıl admin paneli ve php ile neyi tasarlayacaksın ?

Genişletmek için tıkla ...

CAGLARmc' Alıntı:

neyin ne olduğunu biliyorum "panel tasarımlarına php daha çok tercih edilir" yazmışsın onu anlayamadım ayrıca admin paneli nerde

Genişletmek için tıkla ...