Emmet Coding 1

by Joe Saad

HTML

<!-- div#sessionBox>.header{Expiring Time}+(.content>(h1{Your session is about to expire}+ul>li.items$*5))+.handle>button.left.btn{signout}+button.right.btn{stay logged in} -->

<div id="sessionBox">
    <div class="header">Expiring Time</div>
    <div class="content">
        <h1>Learning Emmet Coding</h1>
        <ul>
            <li class="items1"></li>
            <li class="items2"></li>
            <li class="items3"></li>
            <li class="items4"></li>
            <li class="items5"></li>
        </ul>
    </div>
    <div class="handle"><button class="left btn">signout</button><button class="right btn">stay logged in</button></div>
</div>

CSS

#sessionBox {border:2px solid red; width: 100%; height: 300px; box-shadow:  5px 5px 5px #ccc; position: relative; }
#sessionBox .header {height: 30px; background: red;}
.left {float: left;}
.right {float: right;}
.btn {color: red; background: blue;}
.handle {position: absolute; width: 90%; bottom: 0;}