SHARE
TWEET

Untitled

a guest Oct 18th, 2019 96 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. css
  2. // Bootstrap
  3. @import '~bootstrap/scss/bootstrap';
  4.  
  5. // Font-awesome
  6. $fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
  7. @import '~@fortawesome/fontawesome-free/scss/fontawesome';
  8. @import '~@fortawesome/fontawesome-free/scss/regular';
  9. @import '~@fortawesome/fontawesome-free/scss/solid';
  10. @import '~@fortawesome/fontawesome-free/scss/brands';
  11.  
  12. // Toastr
  13. @import '~ngx-toastr/toastr-bs4-alert';
  14.  
  15. // Google fonts
  16. @import url('https://fonts.googleapis.com/css?family=Karla|Quicksand:700&display=swap');
  17.  
  18. /* Global variables */
  19. $bgColor: rgb(245, 246, 250);
  20. $textColor: rgb(84, 92, 112);
  21. $ligherBlueColor: rgb(80, 178, 246);
  22. $mainFont: 'Quicksand', sans-serif;
  23. $prizeFont: 'Karla', sans-serif;
  24.  
  25. /* Use the variables */
  26. body {
  27.   background-color: $bgColor;
  28.   color: $textColor;
  29.   margin: 0;
  30.   font-family: $mainFont;
  31. }
  32.  
  33. // SortableHeader directive
  34. th[sortable] {
  35.   cursor: pointer;
  36.   user-select: none;
  37.   -webkit-user-select: none;
  38. }
  39.  
  40. th[sortable].desc:before, th[sortable].asc:before {
  41.   content: '';
  42.   display: block;
  43.   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC') no-repeat;
  44.   background-size: 22px;
  45.   width: 22px;
  46.   height: 22px;
  47.   float: left;
  48.   margin-left: -22px;
  49. }
  50.  
  51. th[sortable].desc:before {
  52.   transform: rotate(180deg);
  53.   -ms-transform: rotate(180deg);
  54. }
  55. html, body { height: 100%; }
  56. //body { margin: 0; }
  57.  
  58. .navbar {
  59.   margin-bottom: 20px;
  60. }
  61.  
  62. .navbar-light .navbar-nav .nav-link {
  63.   color: $ligherBlueColor;
  64. }
  65.  
  66. .prize {
  67.   font-family: $prizeFont;
  68.   font-size: 20px;
  69.   text-transform: uppercase;
  70. }
  71.  
  72. .eventDate {
  73.   color: $ligherBlueColor;
  74. }
  75.  
  76. #main-container {
  77.   background-color: white;
  78.   padding: 30px;
  79.   margin: 10px;
  80.   border-radius: 21px;
  81.  // @include box_shadow(2);
  82.  box-shadow: 0px 2px 5px #e4e4e4;
  83. }
  84.  
  85. /* Shadow mixin */
  86. @mixin box_shadow ($level) {
  87.   @if $level == 1 {
  88.       box-shadow: 0 1px 3px #000000, 0 1px 2px #000000;
  89.   } @else if $level == 2 {
  90.       box-shadow: 1 5px 5px black, 1 5px 5px black;
  91.   }
  92. }
  93.  
  94. /* blue button */
  95. $mynewcolor:rgb(57, 168, 245);
  96.  
  97. .btn-primary {
  98.   font-family: $prizeFont;
  99.   padding: 10px;
  100.   border-radius: 30px;
  101.   text-transform: uppercase;
  102.   box-shadow: 0px 2px 5px #e4e4e4;
  103.   width: 100px;
  104.   border: 0px;
  105.     @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
  106. }
  107.  
  108. .btn-outline-primary {
  109.     @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
  110. }
  111.  
  112.  
  113. ===
  114.  
  115. home html
  116. <div class="container">
  117.  
  118. <p class="prize">Win a prize</p>
  119.  
  120. <h1> AWS Load Balancing and Global Delivery Options </h1>
  121. <p class="eventDate"> June 27, 2019</p>
  122.  
  123.     <div class="row">
  124.         <div id="main-container" class="col-sm text-center">
  125.             <img src="https://d2908q01vomqb2.cloudfront.net/ca3512f4dfa95a03169c5a670a4c91a19b3077b4/2019/01/10/open-source-logo-800x400.jpg"
  126.                 class="img-fluid img-responsive">
  127.             Cool TV with cool design example
  128.         </div>
  129.         <div id="main-container" class="col-sm text-center">
  130.             <img src="https://d2908q01vomqb2.cloudfront.net/ca3512f4dfa95a03169c5a670a4c91a19b3077b4/2019/01/10/open-source-logo-800x400.jpg"
  131.                 class="img-fluid img-responsive">
  132.             $50 AWS Cards
  133.         </div>
  134.     </div>
  135.     <div class="row">
  136.         <div id="main-container" class="col-sm text-center">
  137.             <img src="https://d2908q01vomqb2.cloudfront.net/ca3512f4dfa95a03169c5a670a4c91a19b3077b4/2019/01/10/open-source-logo-800x400.jpg"
  138.                 class="img-fluid img-responsive">
  139.             MM T-Shirt with cool design example
  140.         </div>
  141.         <div id="main-container" class="col-sm text-center">
  142.             <img src="https://d2908q01vomqb2.cloudfront.net/ca3512f4dfa95a03169c5a670a4c91a19b3077b4/2019/01/10/open-source-logo-800x400.jpg"
  143.                 class="img-fluid img-responsive">
  144.             $50 AWS Credits
  145.         </div>
  146.     </div>
  147. </div>
  148.  
  149. <div id="main-container">
  150.     hey
  151. </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top