Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <!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>
            
          
!

CSS

            
              .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;
}
            
          
!

JS

            
              
            
          
!
999px

Console