Admin panel+pagination

In this example below you will see how to do a Admin panel+pagination with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by vovant123, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright vovant123 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Admin panel+pagination</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">
<header class="header">
    <meta charset="UTF-8">
    <link rel="StyleSheet" type="text/css" href="Admin%20panel.css"/>
    <title>Интернет-магазин E-shop</title>
    <div class="header-image-search-login-wrap">
        <div class="header-image">
            <img src="http://savepic.ru/14105881.png" alt="Header-img"/>
        </div>
        <div class="header-search-input">
            <input type="text" name="search" placeholder="Search...">
        </div>
    </div>
    <nav class="header-nav">
        <div class="header-nav-container">
            <ul class="header-nav-list">
                <li><a href="http://www.google.com">Home</a></li>
                <li>
                    <div class="header-nav-sublist">
                        <button>Devices</button>
                        <ul>
                            <div class="header-nav-sublist-content">
                                <li><a href="http://www.google.com">Phones</a></li>
                                <li><a href="http://www.google.com">Household appliances</a></li>
                                <li><a href="http://www.google.com">Laptops & computers</a></li>
                                <li><a href="http://www.google.com">Cameras</a></li>
                                <li><a href="http://www.google.com">Other</a></li>
                            </div>
                        </ul>
                    </div>
                </li>
                <li><a href="http://www.google.com">Warranty</a></li>
                <li><a href="http://www.google.com">Delivery</a></li>
                <li><a href="http://www.google.com">Help</a></li>
                <li><a href="http://www.google.com">Contacts</a></li>
            </ul>
        </div>
    </nav>
</header>
<main class="main">
    <hr>
    <div class="main-location">
        <div class="main-location-links">
            <a href="">Admin</a>
            <span>></span>
            <a href="#New item">Add new item</a>
        </div>
    </div>
    <div class="main-all-items-wrap">
        <div class="main-all-items">
            <h2>All items</h2>
        </div>
        <div class="main-all-items-table">
            <table>
                <tr>
                    <th>№</th>
                    <th>Item name</th>
                    <th>Price</th>
                    <th>Device type</th>
                    <th colspan="2">Options</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Samsung Galaxy Note 7</td>
                    <td>255$</td>
                    <td>Phone</td>
                    <td><a href="#">Edit</a></td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Samsung Galaxy S7</td>
                    <td>400$</td>
                    <td>Phone</td>
                    <td><a href="#">Edit</a></td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>OnePlus 3</td>
                    <td>200$</td>
                    <td>Phone</td>
                    <td><a href="#">Edit</a></td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Moto G Plus</td>
                    <td>135$</td>
                    <td>Phone</td>
                    <td><a href="#">Edit</a></td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Asus Zenfone 2</td>
                    <td>95$</td>
                    <td>Phone</td>
                    <td><a href="#">Edit</a></td>
                    <td><a href="#">Delete</a></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="main-pagination">
        <ul>
            <li><a href=""><<</a></li>
            <li class="main-pagination-selected-page"><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">...</a></li>
            <li><a href="">45</a></li>
            <li><a href="">>></a></li>
        </ul>
        <br>
        <ul>
            <li><a href=""><<</a></li>
            <li><a href="">...</a></li>
            <li class="main-pagination-selected-page"><a href="">28</a></li>
            <li><a href="">29</a></li>
            <li><a href="">30</a></li>
            <li><a href="">...</a></li>
            <li><a href="">45</a></li>
            <li><a href="">>></a></li>
        </ul>
    </div>
    <div class="main-add-new-item">
        <h2 id="New item">Add new item</h2>
    </div>
    <div class="main-form">
        <form>
            <label for="item-type">Choose a type of a device</label>
            <select name="type-of-item" id="item-type" required>
                <option value="phone">Phone</option>
                <option value="household-appliance">Household appliance</option>
                <option value="laptop">Laptop</option>
                <option value="computer">Computer</option>
                <option value="camera">Camera</option>
                <option value="other">Other</option>
            </select>
            <hr>
            <div class="main-form-general-info">
                <h2>General info</h2>
                <div class="form-group">
                    <label for="item-name">Item name</label>
                    <input type="text"
                           id="item-name"
                           placeholder="Item name"
                           required>
                </div>
                <br>
                <div class="form-group">
                    <label for="item-price">Item price</label>
                    <input type="text"
                           id="item-price"
                           placeholder="Item price"
                           required>
                </div>
                <br>
                <div class="form-group">
                    <label for="main-photo">Main photo</label>
                    <input type="file"
                           id="main-photo"
                           accept=".pdf,.png,.jpeg">
                    <br> <br>
                </div>
                <div class="main-form-general-info--other-photos">
                    <div class="form-group">
                        <label for="other-photos">Other photos</label>
                        <input type="file"
                               id="other-photos"
                               accept=".pdf,.png,.jpeg">
                        <br> <br>
                        <input type="file"
                               id="other-photos1"
                               accept=".pdf,.png,.jpeg">
                        <br> <br>
                        <input type="file"
                               id="other-photos2"
                               accept=".pdf,.png,.jpeg">
                        <br> <br>
                    </div>
                </div>
            </div>
            <hr>
            <div class="main-form-technical-details">
                <h2>Technical Details</h2>
                <div class="form-group">
                    <label for="item-os">Choose OS</label>
                    <select name="type-of-item"
                            id="item-os"
                            required>
                        <option value="android">Android</option>
                        <option value="ios">IOs</option>
                        <option value="windows-mobile">Windows mobile</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <br>
                <div class="form-group">
                    <label for="ram">RAM</label>
                    <input type="text"
                           id="ram"
                           placeholder="RAM"
                           required>
                </div>
                <br>
                <div class="form-group">
                    <label for="item-weight">Item Weight</label>
                    <input type="text"
                           id="item-weight"
                           placeholder="Item Weight"
                           required>
                </div>
                <br>
                <div class="form-group">
                    <label for="product-dimensions">Product Dimensions</label>
                    <input type="text"
                           id="product-dimensions"
                           placeholder="Product Dimensions"
                           required>
                </div>
                <br>
                <div class="form-group">
                    <label for="item-model-number">Item model number</label>
                    <input type="text"
                           id="item-model-number"
                           placeholder="Item model number"
                           required>
                </div>
                <br>
                <div class="form-group">
                    <label for="wireless-communication-technologies">Wireless communication technologies</label>
                    <input type="text"
                           id="wireless-communication-technologies"
                           placeholder="Wireless communication technologies">
                </div>
                <br>
                <div class="form-group">
                    <label for="connectivity-technologies">Connectivity technologies</label>
                    <input type="text"
                           id="connectivity-technologies"
                           placeholder="Connectivity technologies"
                           required>
                </div>
                <br>
                <div class="form-group">
                    <label for="special-features">Special features</label>
                    <input type="text"
                           id="special-features"
                           placeholder="Special features">
                </div>
                <br>
                <div class="form-group">
                    <label for="other-camera-features">Other camera features</label>
                    <input type="text"
                           id="other-camera-features"
                           placeholder="Other camera features"
                           required>
                </div>
                <br>
                <div class="form-group">
                    <label for="form-factor">Form factor</label>
                    <input type="text"
                           id="form-factor"
                           placeholder="Form factor">
                </div>
                <br>
                <div class="form-group">
                    <label for="weight">Weight</label>
                    <input type="text"
                           id="weight"
                           placeholder="Weight">
                </div>
                <br>
                <div class="form-group">
                    <label for="colour">Colour</label>
                    <input type="text"
                           id="colour"
                           placeholder="Colour"
                           required>
                </div>
                <br>
                <div class="form-group">
                    <label for="battery-power-rating">Battery Power Rating</label>
                    <input type="text"
                           id="battery-power-rating"
                           placeholder="battery-power-rating"
                           required>
                </div>
                <br>
                <div class="form-group">
                    <label for="whats-in-the-box">Whats in the box</label><br>
                    <textarea name="whats-in-the-box"
                              id="whats-in-the-box"
                              cols="30"
                              rows="10">
                </textarea>
                </div>
                <br/>
                <div class="main-form-technical-details-button">
                    <button type="submit">Submit</button>
                </div>
            </div>
        </form>
    </div>
</main>
<footer class="footer">
    <hr>
    <h2>Phone Number: +38 063 578 32 56</h2>
    <h2>E-Mail: e_shop@html.net</h2>
    <h3>© Online shop «E-Shop™» 2016–2017</h3>
</footer>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/vovant123/admin-panelpagination-owNLOM */
.header-image-search-login-wrap {
    background-color: black;
    min-width: 1000px;
    height: 80px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.header-image {
    float: left;
}

.header-search-input input {
    position: relative;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-image: url("http://savepic.ru/14100739.png");
    background-color: white;
    background-position: 5px;
    background-repeat: no-repeat;
    background-size: 25px;
    padding: 5px 5px 5px 40px;
    width: 200px;
    transition: width 0.4s ease-in-out;
    margin-top: 24px;
    left: 7%;
}

.header-search-input input:focus {
    width: 350px;
}

.header-nav-container {
    clear: left;
    text-align: center;
    background-color: #1e201d;
    padding: 0;
    min-width: 1000px;
}

.header-nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.header-nav-list li {
    display: inline;
}

.header-nav-list a, button {
    color: white;
    font-family: Nyala;
    font-size: 25px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    cursor: pointer;
}

.header-nav-list button {
    background-color: #1e201d;
    border: none;
}

.header-nav-list a:hover {
    background-color: #001362;
}

.header-nav-list button:hover {
    background-color: #001362;
}

.header-nav-sublist {
    position: relative;
    display: inline-block;
}

.header-nav-sublist-content {
    opacity: 0;
    visibility: hidden;
    height: 0%;
    position: absolute;

    /* Without this line position of sublist's content is centered
        with respect to a screen*/
    left: 0px;

    min-width: 300px;
    background-color: #1e201d;
    transition: all .3s ease-in-out;
}

.header-nav-sublist a {
    display: block;
}

.header-nav-sublist:hover .header-nav-sublist-content {
    opacity: 1;
    visibility: visible;
    height: 270px;
}

.main-location {
    text-align: center;
    min-width: 1000px;
    margin-bottom: 10px;
}

.main-location-links {
    width: 964px;
    height: 25px;
    border-radius: 6px;
    display: inline-block;
    background-color: #001362;
}

.main-location-links a, span {
    color: white;
    text-decoration: none;
}

.main-location-links a:hover {
    color: #b3b8b6;
}

.main-all-items-wrap {
    text-align: center;
}

.main-all-items h2 {
    text-align: center;
}

.main-all-items-table {
    width: 964px;
    text-align: center;
    margin-bottom: 10px;
    border: 1px solid #1b491b;
    border-radius: 6px;
    padding: 10px;
    display: inline-block;
}

.main-all-items-table table {
    display: inline-block;
}

.main-all-items-table th, td {
    border: 1px solid black;
    padding: 15px;
}

.main-pagination {
    min-width: 1000px;
    text-align: center;
}

.main-pagination ul {
    width: 964px;
    padding: 10px;
    display: inline-block;
}

.main-pagination li {
    display: inline-block;
}

.main-pagination a {
    text-decoration: none;
    border: 1px solid black;
    padding: 5px;
    background-color: #eff6eb;
}

.main-pagination-selected-page a {
    background-color: #001362;
    color: white;
}

.main-form {
    text-align: center;
    min-width: 1000px;
    margin-bottom: 10px;
}

.main-form form {
    width: 964px;
    text-align: left;
    display: inline-block;
    border: 1px solid #1b491b;
    border-radius: 6px;
    padding: 10px;
}

.main-add-new-item h2, .main-form h2 {
    text-align: center;
}

.main-form-technical-details-button {
    text-align: center;
}

.main-form-technical-details-button button {
    width: 75px;
    height: 20px;
    color: black;
    padding: 0;
    font-size: 16px;
}

main {
    margin: auto 0px;
    width: auto;
    background-color: rgba(0, 19, 98, 0.11);
    min-width: 1000px;
}

footer {
    background-color: rgba(0, 19, 98, 0.11);
    clear: left;
    clear: right;
    min-width: 1000px;
}

.footer h2 {
    text-align: center;
    font-size: 10px;
    font-family: Candara;
}

.footer h3 {
    text-align: center;
    font-family: Verdana;
    font-size: 10px;
}

Comments