A Pen by Andrey

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Andrey</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css">
  <link rel="icon" type="image/png" href="http://www.http://flukeout.github.io/favicon.png" />
</head>
<body>
    <div class="heading">
        <h1 class="title">CSS Diner Shopping List</h1>
        <p class="text_head">Let's go to the mall!</p>
    </div>
    <div class="middle">
       <div class="checklist">
           <ul>
               <li class="odd"><input type="checkbox"><span class="text_shop pidr">A lot of pickles <span class="bracket_1 pidr">(for the next lessons about CSS)</span></span></input></li>
               <li class="even"><input type="checkbox"><span class="text_shop pidr">10 apples <span class="bracket_1 pidr">(for more CSS manipulations)</span></span></input></li>
                <li class="odd"><input type="checkbox"><span class="text_shop pidr">20 oranges <span class="bracket_1 pidr">( because they are awesome )</span></span></input></li>
                <li class="even"><input type="checkbox"><span class="text_shop pidr">13 plates <span class="bracket_1 pidr">( hm... they always disappear )</span></span></input></li>
                <li class="odd"><input type="checkbox"><span class="text_shop pidr">15 bentos</span></input></li>
               <li class="even"><input type="checkbox"><span class="text_shop pidr">1 bottle of Sake ^_^ <span class="bracket_1 pidr">( for my friends )</span></span></input></li>
           </ul>
       </div>
        <div class="foot">
        <p class="text_foot">Bon appetit :)</p>
        </div>
    </div>

</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/zapadlist/a-pen-by-andrey-YNVpxo */
body {
    font-family: “Trebuchet MS”, Trebuchet, Arial, sans-serif;
}

.heading {
    background: #4a4f56;
    color: #e97f81;
    width: 100%;
    float: left;
}

.title {
    text-align: center;
    position: relative;
    top: 15px;
}

.text_head {
    text-align: center;
    font-size: 1.5em
}
.middle {
    background: #3b3f45;
    width: 100%;
    height: 600px;
    float: left;
    position: relative;
}
/* div with list */

.checklist {
    list-style-type: none;
    position: relative;
    background: #88849d;
    width: 70%;
    left: 15%;
    margin-top: 40px;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

li {
    width: 100%;
    height: 60px;
    position: relative;
}
input {
    position: relative;
    width: 19px;
    height: 19px;
    top: 15px;
    left: 10px;
    
}
.text_shop {
    position: relative;
    top: 15px;
    left: 20px;
    font-size: 1.5em;
    color: #f9f9f9;
}

.odd{
    background: #88849d;
}
.even {
    background: #7a7692;
}

input:checked+.text_shop{
    text-decoration: line-through;
    color: #a3a0b4;
}
input:checked+span>:nth-child(1){
    text-decoration: line-through;
    color: #a3a0b4;
}
.bracket_1 {
    color: #cdc6c6;
    font-size: 0.7em;
}

li:hover {
    background: #625f76;
    border: solid 3px;
    border-color: #f9f9f9;
    border-left: none;
    border-right: none;
}


/*Не могу тут реально придумать как выделить таким образом чтоб brakets класс менял цвет тоже*/

.foot {
    background: #4a4f56;
    color: #e97f81;
    position: relative;
    text-align: center;
    font-size: 1.5em;
    height: 60px;
    width: 70%;
    left: 15%;
    margin-top: 40px;
}
.foot p {
    position: relative;
    top: 15px;
}

Comments