Skip to content

Instantly share code, notes, and snippets.

@ymoregola

ymoregola/index.html

Created September 20, 2015 22:36
Show Gist options
  • Save ymoregola/b09ee6fc8692ffda8392 to your computer and use it in GitHub Desktop.
Save ymoregola/b09ee6fc8692ffda8392 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ymoregola created this gist Sep 20, 2015.
    43 changes: 43 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    <!DOCTYPE <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Shopping List</title>

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



    <body>
    <div class="header">
    <img src="img/cart-logo.png" alt="cart-logo" class="cart-logo">
    <p class="shopping-list">Shopping List</p>
    <p class="by-yanick"> By: Yanick Moregola</p>
    </div>

    <div class="container">
    <div class="text-box">
    <textarea class="item-box" placeholder="Enter item" style="resize: none" cols="20" rows="1" id="message"></textarea>


    <button type="submit" class="btn btn-primary" id="add-button">Add</button>
    </div>

    <div class="list_area">

    <p class="item_new">Item 1<span class="mark-checked"> &#x2714</span><span class="delete">&#x2718</span></p>
    <p class="item_new">Item 2<span class="mark-checked"> &#x2714</span><span class="delete">&#x2718</span></p>
    <p class="item_done">Item 3<span class="delete">&#x2718</span></p>
    <p class="item_done">Item 4<span class="delete">&#x2718</span></p>
    <p class="item_new">Item 5<span class="mark-checked"> &#x2714</span><span class="delete">&#x2718</span></p>
    <p class="item_done">Item 6<span class="delete">&#x2718</span></p>

    </div>


    </div>

    </body>

    </html>
    76 changes: 76 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,76 @@

    body {
    margin: 0px;
    padding: 0px;
    }

    .header {
    color: white;
    background-color: gray;
    padding-bottom: 20px;
    padding-top: 25px;
    text-align: center;
    position: fixed;
    width: 100%;
    padding-top: -1em;

    }

    .cart-logo {
    border-radius: 50%;
    width: 100px;
    }


    .container {
    background-image: url("../img/food-background.jpg");
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    padding-top: 60px;
    height: 777px;
    }

    .text-box {
    text-align: center;
    padding-top: 225px;
    position: fixed;
    left: 0;
    right: 0;
    }

    .list_area {
    left: 0;
    right: 0;
    margin-top: 18em;
    position: fixed;
    }

    p {
    background-color: #575757;
    border-radius: 15px;
    color: #fff;
    display: table;
    font-size: 12pt;
    height: 30px;
    line-height: 24pt;
    margin: 15px auto;
    padding: 0 15px;
    padding-left: 10em;
    padding-right: 10em;
    }

    .item_done {
    text-decoration: line-through;
    color: gray;
    }

    .mark-checked {
    color: green;

    }

    .delete {
    color: red;
    }