css
// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Font-awesome
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

// Toastr
@import '~ngx-toastr/toastr-bs4-alert';

// Google fonts
@import url('https://fonts.googleapis.com/css?family=Karla|Quicksand:700&display=swap');

/* Global variables */
$bgColor: rgb(245, 246, 250);
$textColor: rgb(84, 92, 112);
$ligherBlueColor: rgb(80, 178, 246);
$mainFont: 'Quicksand', sans-serif;
$prizeFont: 'Karla', sans-serif;

/* Use the variables */
body {
  background-color: $bgColor;
  color: $textColor;
  margin: 0;
  font-family: $mainFont;
}

// SortableHeader directive
th[sortable] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

th[sortable].desc:before, th[sortable].asc:before {
  content: '';
  display: block;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC') no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  float: left;
  margin-left: -22px;
}

th[sortable].desc:before {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}
html, body { height: 100%; }
//body { margin: 0; }

.navbar {
  margin-bottom: 20px;
}

.navbar-light .navbar-nav .nav-link {
  color: $ligherBlueColor;
}

.prize {
  font-family: $prizeFont;
  font-size: 20px;
  text-transform: uppercase;
}

.eventDate {
  color: $ligherBlueColor;
}

#main-container {
  background-color: white;
  padding: 30px;
  margin: 10px;
  border-radius: 21px;
 // @include box_shadow(2);
 box-shadow: 0px 2px 5px #e4e4e4;
}

/* Shadow mixin */
@mixin box_shadow ($level) {
  @if $level == 1 {
      box-shadow: 0 1px 3px #000000, 0 1px 2px #000000;
  } @else if $level == 2 {
      box-shadow: 1 5px 5px black, 1 5px 5px black;
  }
}

/* blue button */
$mynewcolor:rgb(57, 168, 245);

.btn-primary {
  font-family: $prizeFont;
  padding: 10px;
  border-radius: 30px;
  text-transform: uppercase;
  box-shadow: 0px 2px 5px #e4e4e4;
  width: 100px;
  border: 0px;
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}


===

home html
<div class="container">

<p class="prize">Win a prize</p>

<h1> AWS Load Balancing and Global Delivery Options </h1>
<p class="eventDate"> June 27, 2019</p>

    <div class="row">
        <div id="main-container" class="col-sm text-center">
            <img src="https://d2908q01vomqb2.cloudfront.net/ca3512f4dfa95a03169c5a670a4c91a19b3077b4/2019/01/10/open-source-logo-800x400.jpg"
                class="img-fluid img-responsive">
            Cool TV with cool design example
        </div>
        <div id="main-container" class="col-sm text-center">
            <img src="https://d2908q01vomqb2.cloudfront.net/ca3512f4dfa95a03169c5a670a4c91a19b3077b4/2019/01/10/open-source-logo-800x400.jpg"
                class="img-fluid img-responsive">
            $50 AWS Cards
        </div>
    </div>
    <div class="row">
        <div id="main-container" class="col-sm text-center">
            <img src="https://d2908q01vomqb2.cloudfront.net/ca3512f4dfa95a03169c5a670a4c91a19b3077b4/2019/01/10/open-source-logo-800x400.jpg"
                class="img-fluid img-responsive">
            MM T-Shirt with cool design example
        </div>
        <div id="main-container" class="col-sm text-center">
            <img src="https://d2908q01vomqb2.cloudfront.net/ca3512f4dfa95a03169c5a670a4c91a19b3077b4/2019/01/10/open-source-logo-800x400.jpg"
                class="img-fluid img-responsive">
            $50 AWS Credits
        </div>
    </div>
</div>

<div id="main-container">
    hey
</div>