a.md

Vue notes markup and styles

app.css

@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");
* {
  box-sizing: border-box;
}

button {
  cursor: pointer;
}
button:focus {
  outline: none;
}

body {
  font-family: sans-serif;
  font-weight: 300;
  background: #fc00ff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #00dbde, #fc00ff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #00dbde, #fc00ff);
  font-family: "Roboto", sans-serif;
}

.header {
  text-align: center;
}
.header .app-title {
  display: inline-block;
  padding: 15px;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.3);
}

.app {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
}

.contextbox {
  background-color: #fff;
  padding: 15px;
  padding-bottom: 5px;
  border-radius: 5px;
}
.contextbox textarea,
.contextbox input {
  width: 100%;
  resize: none;
  padding: 8px;
  border: none;
  font-size: 16px;
}
.contextbox textarea:focus,
.contextbox input:focus {
  outline: none;
}
.contextbox .controls {
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contextbox .controls button {
  background: #fc00ff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #00dbde, #fc00ff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #00dbde, #fc00ff);
  color: #fff;
  border: none;
  text-transform: uppercase;
  font-size: 16px;
  padding: 4px 18px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.15);
  transition: 300ms;
  cursor: pointer;
}
.contextbox .controls button:focus {
  outline: none;
}
.contextbox .controls button:hover {
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.35);
}
.contextbox .controls .colors {
  display: flex;
}
.contextbox .controls .colors span {
  margin-right: 5px;
  height: 25px;
  width: 25px;
  content: "";
  display: inline-block;
  background: red;
}
.contextbox .controls .colors span.c1 {
  background-color: #d8e2dc;
}
.contextbox .controls .colors span.c2 {
  background-color: #ffe5d9;
}
.contextbox .controls .colors span.c3 {
  background-color: #fbfaf0;
}
.contextbox .controls .colors span.c4 {
  background-color: #ffe9ee;
}
.contextbox .controls .colors span.c5 {
  background-color: #ffdde4;
}
.contextbox .controls .colors span.selected {
  border: 2px solid #000;
}

.filter {
  margin-top: 25px;
  text-align: center;
}
.filter button {
  border: none;
  border: none;
  padding: 5px 10px;
}
.filter button.selected {
  border: 2px solid #000;
}

.notes {
  margin-top: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 15px;
  row-gap: 15px;
}
@media all and (max-width: 600px) {
  .notes {
    grid-template-columns: 1fr;
  }
}
.notes .note {
  border-radius: 5px;
  background-color: #fff;
  padding: 15px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  transition: 300px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
}
.notes .note:hover {
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}
.notes .note h3 {
  margin: 0;
}
.notes .note .time {
  margin-bottom: 0;
  color: #333;
}
.notes .note:hover .buttons {
  opacity: 1;
}
.notes .note .buttons {
  transition: 300ms;
  opacity: 0;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  border: none;
}
.notes .note .buttons button {
  cursor: pointer;
  border: none;
  background-color: transparent;
}
.notes .note .buttons button:focus {
  outline: none;
}
.notes .note .buttons .delete {
  color: red;
  font-size: 20px;
}
.notes .note .buttons .edit {
  padding-top: 5px;
  font-size: 16px;
}

app.scss

@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap');
* {
    box-sizing: border-box;
}

$radius: 20px;

@mixin gradient {
    background: #fc00ff; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #00dbde, #fc00ff); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #00dbde, #fc00ff);
}

button {
    &:focus {
        outline: none;
    }
    cursor: pointer;
}

body {
    font-family: sans-serif;
    font-weight: 300;
    @include gradient;

    font-family: 'Roboto', sans-serif;
}
.header {
    text-align: center;
    .app-title {
        // background-color: #fddb19;
        display: inline-block;
        padding: 15px;
        text-transform: uppercase;
        font-weight: 800;
        color: rgba(#000000, 0.3);
    }
}

.app {
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
}

.contextbox {
    background-color: #fff;
    padding: 15px;
    padding-bottom: 5px;
    border-radius: 5px;
    textarea,
    input {
        width: 100%;
        resize: none;
        padding: 8px;
        border: none;
        font-size: 16px;
        &:focus {
            outline: none;
        }
    }
    .controls {
        height: 35px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        button {
            @include gradient;
            color: #fff;
            border: none;
            text-transform: uppercase;
            font-size: 16px;
            padding: 4px 18px;
            border-radius: $radius;
            box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.15);
            transition: 300ms;
            cursor: pointer;
            &:focus {
                outline: none;
            }
            &:hover {
                box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.35);
            }
        }
        .colors {
            display: flex;
            span {
                margin-right: 5px;
                $s: 25px;
                height: $s;
                width: $s;
                content: '';
                display: inline-block;
                background: red;

                $c1: #d8e2dc;
                $c2: #ffe5d9;
                $c3: #fbfaf0;
                $c4: #ffe9ee;
                $c5: #ffdde4;
                &.c1 {
                    background-color: $c1;
                }
                &.c2 {
                    background-color: $c2;
                }
                &.c3 {
                    background-color: $c3;
                }
                &.c4 {
                    background-color: $c4;
                }
                &.c5 {
                    background-color: $c5;
                }
                &.selected {
                    border: 2px solid #000;
                }
            }
        }
    }
}

.filter {
    margin-top: 25px;
    text-align: center;
    button {
        border: none;
        border: none;
        padding: 5px 10px;

        &.selected {
            border: 2px solid #000;
        }
    }
}

.notes {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    @media all and (max-width: 600px) {
        grid-template-columns: 1fr;
    }
    column-gap: 15px;
    row-gap: 15px;
    .note {
        border-radius: 5px;
        background-color: #fff;
        padding: 15px;
        box-shadow: 0 5px 5px rgba(#000000, 0.3);
        transition: 300px;

        display: flex;
        justify-content: space-between;
        flex-direction: column;

        &:hover {
            box-shadow: 0 5px 25px rgba(#000000, 0.3);
        }
        h3 {
            margin: 0;
        }
        .time {
            margin-bottom: 0;
            color: #333;
        }

        &:hover {
            .buttons {
                opacity: 1;
            }
        }

        position: relative;
        .buttons {
            transition: 300ms;
            opacity: 0;

            display: flex;

            position: absolute;
            top: 0;
            right: 0;
            border: none;
            position: absolute;
            top: 0;
            right: 0;
            border: none;
            button {
                &:focus {
                    outline: none;
                }
                cursor: pointer;
                border: none;
                background-color: transparent;
            }
            .delete {
                color: red;
                font-size: 20px;
            }
            .edit {
                padding-top: 5px;
                font-size: 16px;
            }
        }
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Notes</title>
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <div class="app">
      <div class="header"><h1 class="app-title">Vue Notes</h1></div>
      <div class="contextbox">
        <input type="text" placeholder="Title" />
        <textarea
          rows="8"
          placeholder="Description"
          class=""
          spellcheck="false"
        ></textarea>
        <div class="controls">
          <div class="colors">
            <span class="c1" data-note-color="#D8E2DC"></span>
            <span class="c2" data-note-color="#FFE5D9"></span>
            <span class="c3" data-note-color="#FBFAF0"></span>
            <span class="c4" data-note-color="#FFE9EE"></span>
            <span class="c5" data-note-color="#FFDDE4"></span>
          </div>
          <button>Add</button>
        </div>
      </div>
      <div class="filter">
        <button>All (2)</button>
        <button style="background-color: rgb(216, 226, 220)">1</button>
        <button style="background-color: rgb(255, 229, 217)">0</button>
        <button style="background-color: rgb(251, 250, 240)">0</button>
        <button style="background-color: rgb(255, 233, 238)">0</button>
        <button style="background-color: rgb(255, 221, 228)">1</button>
        <button style="background-color: rgb(255, 255, 255)">0</button>
      </div>
      <div class="notes">
        <div class="note" style="background-color: rgb(216, 226, 220)">
          <div>
            <h3 class="title">very important note</h3>
            <p>heyyy</p>
          </div>
          <p class="time">a few seconds ago</p>
          <div class="buttons"><button class="delete">×</button></div>
        </div>
        <div class="note" style="background-color: rgb(255, 221, 228)">
          <div>
            <h3 class="title">Learn Vue</h3>
            <p>Vue is a easy going library</p>
          </div>
          <p class="time">a few seconds ago</p>
          <div class="buttons"><button class="delete">×</button></div>
        </div>
      </div>
    </div>
  </body>
</html>