Milenrama/Mockup (Album) admin/create.php

In this example below you will see how to do a Milenrama/Mockup (Album) admin/create.php with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by fmorisan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright fmorisan ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Milenrama/Mockup (Album) admin/create.php</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://bootswatch.com/darkly/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid">
 <div class="navbar navbar-default header center-block text-center">
    <div id="slide-progress" class="hidden-sm hidden-xs"></div>
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-target="#navbar" data-toggle="collapse">
          <span class="glyphicon glyphicon-menu-hamburger"></span>
        </button>
        <div class="navbar-brand">
            Milenrama PH /ADMIN/
        </div>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav nav-pills text-center navbar-nav pull-right">
        <li>
          <a href="#">Crear album</a>
        </li>
        <li class="active">
          <a href="#">Borrar album</a>
        </li>
        <li>
          <a href="#">Editar portfolio</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-xs-10 col-xs-offset-1">
        <form action=".">
          <div class="form-group">
            <input name="title" type="text" class="form-control" placeholder="Titulo del album"/>
          </div>
          <div class="form-group">
            <input name="description" type="textarea" class="form-control" placeholder="Descripcion breve"/>
          </div>
          
          <div class="dropzone dropzone-previews" id="dropzone"></div>
          <input type="submit" value="Cargar album" class="btn btn-success"/>
        </form>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 text-center">
        <i class="glyphicon glyphicon-envelope"></i>
        <i class="glyphicon glyphicon-heart-empty"></i>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://raw.github.com/enyo/dropzone/master/dist/dropzone.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/fmorisan/milenramamockup-album-admincreatephp-vyNJrG */
.header {
  background-color: #222;
}

.brand {
  /* cambiar por la fuente de Milenrama, Celtic Garamond the 2nd. */
  font-family: sans-serif;
  font-size: 3em;
}

.footer {
  background-color: #678;
  font-size: 2em;
}

.panel-header {
  text-align: center;
  font-weight: bold;
}

.panel{
  text-decoration: none;
  box-shadow: 0 0 15px black;
}

.row.inner .[^="col*"] {
  display: flex;
  flex-flow: row-reverse wrap;
}

Comments