MagayOleg

Первый способ. Самый простой. Через градиенты.
codepen.io/anon/pen/MwQMLG

Второй способ. Через псевдоэлементы. Классика ;)
codepen.io/anon/pen/oXErMr?editors=110

1. Если у тебя уже установлен Gulp и настроен локально в папке проекта, то в консоли переходишь в папку этого своего проекта и вводишь npm install node-normalize-scss --save-dev

2. Потом в основном sass-файле делаешь импорт @import "normalize";

3. В таске по компиляции sass в css в пайп добавляешь строчку кода

includePaths: require('node-normalize-scss').includePaths

Вот полный код и документация

var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  gulp.src('path/to/input.scss')
    .pipe(sass({
      // includePaths: require('node-normalize-scss').with('other/path', 'another/path') 
      // - or - 
      includePaths: require('node-normalize-scss').includePaths
    }))
    .pipe(gulp.dest('path/to/output.css'));
});

https://www.npmjs.com/package/node-normalize-scss

Самое первое что бросается в глаза - не настроен .gitignore, т.к. есть sass и css. Это говорит о большем: нет понимания о какой либо структуре проекта, не различаете прод от дев версии, т.к. не настроен сборщик.

Верстка - ужасно. Такое сегодня выдавать не стоит.

Совет: изучите html/css -> sass/scss -> bem (качественная верстка начинается отсюда) -> js -> gulp

Дополню Дмитрия.
1. Плохое знание нативных методов.

inp.value.indexOf('/')!=-1 // includes

inp.value.slice(-1) 
inp.value.substring(0, inp.value.length - 1) // в честь чего тут субстринг, когда везде слайс используешь?

2. Извращения:

inp.value.slice(index - inp.value.length + 1) // для чего тут inp.value.length?

3. Неумение использовать свитч:

case 'multiply':
            inp.value += item.innerText
          break;
          case 'division':
            inp.value += item.innerText
          break;
          case 'sub':
            inp.value += item.innerText
          break;
          case 'sum':
            inp.value += item.innerText
          break;
          case 'dot':
            inp.value += item.innerText
          break; 

// =

          case 'multiply':
          case 'division':
          case 'sub':
          case 'sum':
          case 'dot':
            inp.value += item.innerText
            break;

4. А тут DRY повесился:

if (inp.value.indexOf('*')!=-1) {
              index = inp.value.indexOf('*')
              inp.value = parseFloat(inp.value.slice(0, index)) * parseFloat(inp.value.slice(index - inp.value.length + 1))
            } else if (inp.value.indexOf('/')!=-1) {
               index = inp.value.indexOf('/')
               inp.value = parseFloat(inp.value.slice(0, index))/parseFloat(inp.value.slice(index-inp.value.length+1))
            } else if (inp.value.indexOf('-')!=-1) {
              index = inp.value.indexOf('-')
              inp.value = parseFloat(inp.value.slice(0, index))-parseFloat(inp.value.slice(index-inp.value.length+1))
            } else if (inp.value.indexOf('+')!=-1) {
              index = inp.value.indexOf('+')
              inp.value = parseFloat(inp.value.slice(0, index))+parseFloat(inp.value.slice(index-inp.value.length+1))
            }

Это что вот прям сильнее всего бросается в глаза, реализовано всё очень... Слабо. Такой простой калькулятор уж точно не является демонстрацией своего скила, он в лучшем случае демонстрирует знание основ, с чем у тебя явные проблемы.
Иными словами, это даже не уровень трейни.

Если бы мне показали такой проект в качестве портфолио, у меня бы сразу возникло несколько вопросов:
1) Зачем препроцессоры (sass и pug) в проекте если Вы не используете их возможности? Только ради другого синтаксиса?
2) Зачем в репозитории лежит вендорный код, особенно сжатый?
3) Почему в проекте нет линтера (например eslint) и как следствие нет единого стиля кода?
4) в git один единственный коммит? Вы правда все это выдали на одном дыхании?
5) Что делает эта регулярка? И почему именно эти символы вводить нельзя, а например 非常糟糕的符号 вполне можно?