Targeting only for ios devices

jQuery(document).ready(function($){
 var deviceAgent = navigator.userAgent.toLowerCase();
 var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
 if (agentID) {
    $('#suiteBarTop').addClass('hidesuiteBarTop');
    $('#s4-ribbonrow').after('<div class="mobileBackBtn"><a href="#">← Back to home</a></div>');
 }
});

Load More using Jquery

Live Demo
http://www.bibekshakya.com/demo/jquery/load-more/

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Load More</title>
  <!-- google font -->
  <link href="https://fonts.googleapis.com/css?family=Muli:300,600" rel="stylesheet">
  <!-- custom style -->
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="posts">
    <!-- holder -->
    <div class="holder">
      <!-- title -->
      <div class="title">
        <h2><a href="#">Atqui perpetua intellegam eam</a></h2>
        <div class="meta">
          <time datetime="2018-09-01">Sep 1, 2018</time>
          <span>by</span>
          <a href="#">Admin</a>
        </div>
      </div>
      <!-- content -->
      <div class="content">
        <p>Eu omnis commune erroribus est, sumo nobis vitae pro an. Mel ex modo possit prompta, vim intellegam
          contentiones eu. Amet torquatos vituperatoribus ei est, purto homero cu sed. Quo ex purto movet, assum
          delenit dissentias pro in. Atqui perpetua intellegam eam ex, mea hinc solet audiam id.</p>
      </div>
      <!-- tags -->
      <ul class="tags">
        <li><a href="#">Corporate</a></li>
        <li><a href="#">IT</a></li>
        <li><a href="#">Microsoft</a></li>
      </ul>
    </div>
    <!-- holder -->
    <div class="holder">
      <!-- title -->
      <div class="title">
        <h2><a href="#">Cu his lorem dicta perfecto</a></h2>
        <ul class="meta">
          <time datetime="2018-08-28">Aug 28, 2018</time>
          <span>by</span>
          <a href="#">Microsoft</a>
        </ul>
      </div>
      <!-- content -->
      <div class="content">
        <p>Cu sed sumo latine, pri iuvaret expetenda te. Cu his lorem dicta perfecto, est eu tollit tempor legimus. Ut rebum delenit tractatos vel, tale unum pertinacia ex sea, vel id inermis tractatos. Eum tale illum ne. Est paulo omittantur te, ferri prima verterem eu pri, pri et malis philosophia. Est nihil libris virtute ex.</p>
      </div>
      <!-- tags -->
      <ul class="tags">
        <li><a href="#">Google</a></li>
        <li><a href="#">Microsoft</a></li>
      </ul>
    </div>
    <!-- holder -->
    <div class="holder">
      <!-- title -->
      <div class="title">
        <h2><a href="#">Id vim omnium maluisset</a></h2>
        <ul class="meta">
          <time datetime="2018-08-22">Aug 22, 2018</time>
          <span>by</span>
          <a href="#">Google</a>
        </ul>
      </div>
      <!-- content -->
      <div class="content">
        <p>Nam iusto vivendo tacimates in, te utinam fastidii usu, eos dolorem periculis ut. Per at epicuri scaevola qualisque. Errem recusabo ne nec. Novum fuisset ea vel, sit iusto iracundia te. Ut mei euripidis efficiendi, usu id inermis tacimates. Id vim omnium maluisset. Cum minim luptatum assueverit in, velit volumus pericula at vix.</p>
      </div>
      <!-- tags -->
      <ul class="tags">
        <li><a href="#">Business</a></li>
        <li><a href="#">Sharepoint</a></li>
      </ul>
    </div>
    <!-- holder -->
    <div class="holder">
      <!-- title -->
      <div class="title">
        <h2><a href="#">Admodum maiorum pertinacia</a></h2>
        <ul class="meta">
          <time datetime="2018-08-18">Aug 18, 2018</time>
          <span>by</span>
          <a href="#">Admin</a>
        </ul>
      </div>
      <!-- content -->
      <div class="content">
        <p>Simul dolor diceret ius cu, impedit deleniti ius ne, et minim deseruisse sit. Admodum maiorum pertinacia qui te. Primis fuisset noluisse pro ex. Quo te possit fuisset expetenda.</p>
      </div>
      <!-- tags -->
      <ul class="tags">
        <li><a href="#">Pinterest</a></li>
        <li><a href="#">Linkedin</a></li>
      </ul>
    </div>
    <!-- holder -->
    <div class="holder">
      <!-- title -->
      <div class="title">
        <h2><a href="#">Pri nibh brute simul in</a></h2>
        <ul class="meta">
          <time datetime="2018-08-10">Aug 10, 2018</time>
          <span>by</span>
          <a href="#">Linkedin</a>
        </ul>
      </div>
      <!-- content -->
      <div class="content">
        <p>Ei usu iuvaret scripserit. Duo aliquid delenit ut, ex pro option suscipit. Pri nibh brute simul in, sit ut mollis aeterno fabellas. Qui at cetero philosophia, eam ad diam numquam. Consul nonumes in mei. Zril homero aperiam duo ex, est graecis contentiones ad, ceteros sententiae incorrupte nam ut. An est scripta disputando.</p>
      </div>
      <!-- tags -->
      <ul class="tags">
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Amazon</a></li>
        <li><a href="#">CEO</a></li>
      </ul>
    </div>
    <!-- btn holder -->
    <div class="btnHolder">
      <button id="btnMore" class="btn">Load More</button>
    </div>
  </div>
  <!-- jquery cdn -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <!-- custom script -->
  <script src="js/main.js"></script>
</body>

</html>

CSS Code (css/main.css)
/* 
-------
GENERAL 
-------
*/

* {
  margin: 0;
  padding: 0;
}

body {
  font: 16px/1.6 'Muli', serif;
  background: #f1f1f1;
  color: #333;
}

h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 5px;
}

a {
  color: #f45f42;
  text-decoration: none;
  transition: color 0.3s linear;
}

.btn {
  background: #f45f42;
  border: 0;
  color: #fff;
  padding: 15px;
  width: 100%;
  display: inline-block;
  vertical-align: top;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s linear;
}

.btn:hover,
.btn:focus {
  outline: none;
  box-shadow: none;
  background: #e62e0a;
}

/* 
----
TAGS 
----
*/

.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.tags:before {
  content: 'Tags:';
  margin: 0 10px 0 0;
}

.tags li {
  display: inline-block;
  vertical-align: top;
  margin: 0 5px 0 0;
  position: relative;
}

.tags li:last-child:after {
  display: none;
}

.tags li:after {
  content: ',';
}

/* 
-----
POSTS
-----
*/

.posts {
  max-width: 1024px;
  margin: 30px auto;
  padding: 0 15px;
}

.posts .holder {
  display: none;
  background: #fff;
  padding: 20px;
  margin: 0 0 30px;
}

.posts .content {
  padding: 20px 0;
  margin: 20px 0;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

.posts h2 a {
  color: #333;
}

.posts h2 a:hover {
  color: #f45f42;
}

JS Code (js/main.js)
/*
---------
LOAD MORE
---------
*/


Video Tutorial


Updated Code (js/main.js)
$('.posts .holder').slice(0,2).show();

$('#btnMore').on('click', function() {
  $('.posts .holder:hidden').slice(0,1).slideDown();
  if($('.posts .holder:hidden').length === 0) {
    $('#btnMore').fadeOut();
  }
});


Responsive Table

Live Demo (index.html)
http://bibekshakya.com/demo/css-scss/responsive-table/

HTML Code (index.html)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Responsive Table</title>
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <!-- importing reset and custom css -->
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <!-- responsive table -->
    <div class="holder">
      <h2>Responsive Table</h2>
      <p>Ipsa expedita odio autem mollitia fugiat ad repudiandae, a, tempore voluptatibus eveniet maxime eligendi suscipit! Nemo, veritatis dolore nostrum exercitationem dolor illum.</p>
      <div class="responsiveTbl">
        <table>
          <thead>
            <tr>
              <th>Rank</th>
              <th>Full Name</th>
              <th>Starting Price</th>
              <th>Review</th>
              <th>Hiring</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>John Smith</td>
              <td><span class="price">£40 / hr</span></td>
              <td>9.9</td>
              <td><a href="#" class="btn">Hire me</span></td>
            </tr>
            <tr>
              <td>2</td>
              <td>William Taylor</td>
              <td><span class="price">£38 / hr</span></td>
              <td>9.5</td>
              <td><a href="#" class="btn">Hire me</span></td>
            </tr>
            <tr>
              <td>3</td>
              <td>George Wilson</td>
              <td><span class="price">£35 / hr</span></td>
              <td>9.2</td>
              <td><a href="#" class="btn">Hire me</span></td>
            </tr>
            <tr>
              <td>4</td>
              <td>Ellen Walker</td>
              <td><span class="price">£39 / hr</span></td>
              <td>9.1</td>
              <td><a href="#" class="btn">Hire me</span></td>
            </tr>
            <tr>
              <td>5</td>
              <td>Emma Hall</td>
              <td><span class="price">£35 / hr</span></td>
              <td>9.0</td>
              <td><a href="#" class="btn">Hire me</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

SCSS Code (scss/base/_mixins.scss)
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin hide-text {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

%listreset {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin transform ($value) {
  -moz-transform: $value;
  -ms-transform: $value;
  -webkit-transform: $value;
  transform: $value;
}

@mixin transition ($value) {
  -moz-transition: $value;
  -ms-transition: $value;
  -webkit-transition: $value;
  transition: $value;
}

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }
  &::-moz-placeholder {
    opacity: 1;
    @content
  }
  &:-moz-placeholder {
    @content
  }
  &:-ms-input-placeholder {
    @content
  }
  &.placeholder {
    @content
  }
}

SCSS Code (scss/base/_reset.scss)
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}

body {
  color: $default-text-color;
  background: $default-background-color;
  font: 400 #{$default-font-size}/#{$default-line-height} $default-font-family;
  min-width: $default-min-width;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.gm-style img {
  max-width: none
}

@media only screen and (min-width:1025px) {
  a[href^=tel],
  a[href^=skype],
  a[href^=sms] {
    cursor: default;
    pointer-events: none;
  }
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

SCSS Code (scss/base/_typography.scss)
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $headings-font-family;
  font-weight: 500;
  margin: 0 0 10px;
  color: $headings-color;
}

h1 {
  font-size: $h1-font-size;
}

h2 {
  font-size: $h2-font-size;
}

h3 {
  font-size: $h3-font-size;
}

h4 {
  font-size: $h4-font-size;
}

h5 {
  font-size: $h5-font-size;
}

h6 {
  font-size: $h6-font-size;
}

p {
  margin: 0 0 20px;
}

a {
  color: $default-link-color;
  text-decoration: none;
  transition: color $animation-speed linear;
  &:hover,
  &:focus {
    text-decoration: none;
    color: darken($default-link-color, 15%);
  }
}

SCSS Code (scss/base/_variable.scss)
// colors
$black: #333;
$white: #fff;
$gray: #e5e5e5;
$primary-color: #9b59b6;

// font family
$primary-font: 'Montserrat', sans-serif;

// Body
$default-text-color: $black  !default;
$default-background-color: $gray !default;
$default-font-size: 14px !default;
$default-line-height: 1.7 !default;
$default-font-family: $primary-font !default;
$default-min-width: 320px;

// Links
$default-link-color: $primary-color;

// Headers
$h1-font-size: 26px !default;
$h2-font-size: 24px !default;
$h3-font-size: 22px !default;
$h4-font-size: 18px !default;
$h5-font-size: 17px !default;
$h6-font-size: 15px !default;

$headings-font-family: $primary-font !default;
$headings-color: $black !default;

// animation
$animation-speed: 0.3s; 

SCSS Code (scss/main.scss)
@import 'base/variable';
@import 'base/mixins';
@import 'base/reset';
@import 'base/typography';
.container {
 max-width: 1024px;
 padding: 0 15px;
 margin: 30px auto;
}

/* responsive table */

.responsiveTbl table {
 text-align: center;
 width: 100%;
}

tr {
 background: $white;
 &:nth-child(2n) {
  background: darken($white, 5%);
 }
 &:hover {
  .msg {
   opacity: 1;
   top: 0;
  }
 }
}

th,
td {
 padding: 15px 20px;
 vertical-align: middle;
 &:nth-child(2) {
  text-align: left;
 }
}

th {
 background: $primary-color;
 color: $white;
 font-weight: 500;
 text-transform: uppercase;
 padding: 25px 20px;
}

.price,
.btn {
 border: 1px solid $primary-color;
 border-radius: 25px;
 display: inline-block;
 vertical-align: top;
 padding: 8px;
 min-width: 100px;
 text-align: center;
}

.btn {
 border: none;
 color: $white;
 background: $primary-color;
 transition: box-shadow 0.3s linear;
 &:hover {
  box-shadow: inset 0 0 0 25px darken($primary-color, 25%);
  color: $white;
 }
}

/* responsive using desktop first approach */



Video Tutorial


Updates SCSS Code (scss/main.scss)
@media only screen and (max-width: 767px) {
 thead {
  display: none;
 }

 tr {
  margin: 0 0 15px;
  display: block;
 }

 td {
  display: block;
  text-align: left;
  padding: 10px 20px 10px 160px;
  position: relative;

  &:before {
   content: 'Rank';
   font-weight: 500;
   position: absolute;
   top: 50%;
   left: 20px;
   transform: translateY(-50%);
  }

  &:nth-of-type(2) {
   &:before {
    content: 'Full Name';
   }
  }

  &:nth-of-type(3) {
   &:before {
    content: 'Starting Price';
   }
  }

  &:nth-of-type(4) {
   &:before {
    content: 'Review';
   }
  }

  &:nth-of-type(5) {
   &:before {
    content: 'Hiring';
   }
  }
 }

 .price,
 .btn {
  border: none;
  padding: 0;
  min-width: 0;
  color: $black;
  background: none;
 }
}

Login, Register and Forgot Password Form using HTML and CSS

HTML (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Login Form</title>
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet">
  <!-- using font awesome for icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
  <!-- reset and custom css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <!-- form holder -->
    <div class="formholder">
      <!-- title holder -->
      <div class="titleHolder">
        <i class="far fa-user-circle"></i>
        <h1>Sign in</h1>
        <p>Login using your username and password.</p>
      </div>
      <!-- login form -->
      <form action="#" class="loginForm">
        <div class="row">
          <input type="text" placeholder="Username" required />
          <i class="fas fa-user"></i>
        </div>
        <div class="row">
          <input type="password" placeholder="Password" required>
          <i class="fas fa-key"></i>
        </div>
        <div class="row">
          <input type="checkbox" id="rememberMe">
          <label for="rememberMe">Remember me</label>
        </div>
        <div class="row">
          <button type="submit" class="btn">Login</button>
        </div>
        <div class="row">
          <a href="forgot-password.html">Forgot Password?</a>
          <br>
          <a href="register.html">Not registered? Click to register</a>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

HTML (forgot-password.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Forgot Password Form</title>
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet">
  <!-- using font awesome for icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
  <!-- reset and custom css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <!-- form holder -->
    <div class="formholder">
      <!-- title holder -->
      <div class="titleHolder">
        <i class="far fa-user-circle"></i>
        <h1>Forgot Password?</h1>
        <p>Don't worry! Just fill in your email and we'll help you reset your password.</p>
      </div>
      <!-- forgot password form -->
      <form action="#" class="forgotPwdForm">
        <div class="row">
          <input type="email" placeholder="Enter your email address" required>
          <i class="fas fa-envelope"></i>
        </div>
        <div class="row">
          <button type="submit" class="btn">Send Email</button>
        </div>
        <div class="row">
          <a href="index.html">Back to Login</a>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

HTML Code (register.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Register Form</title>
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet">
  <!-- using font awesome for icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
  <!-- reset and custom css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <!-- form holder -->
    <div class="formholder">
      <!-- title holder -->
      <div class="titleHolder">
        <i class="far fa-user-circle"></i>
        <h1>Sign up</h1>
        <p>It's free and only takes a minute.</p>
      </div>
      <!-- register form -->
      <form action="#" class="registerForm">
        <div class="row">
          <input type="text" placeholder="Name" required>
          <i class="fas fa-user"></i>
        </div>
        <div class="row">
          <input type="email" placeholder="Email" required>
          <i class="fas fa-envelope"></i>
        </div>
        <div class="row">
          <input type="text" placeholder="Username" required>
          <i class="fas fa-user"></i>
        </div>
        <div class="row">
          <input type="password" placeholder="Password" required>
          <i class="fas fa-key"></i>
        </div>
        <div class="row">
          <input type="checkbox" id="signedIn">
          <label for="signedIn">Keep me signed in</label>
        </div>
        <div class="row">
          <button type="submit" class="btn">Register</button>
        </div>
        <div class="row">
          <a href="index.html">Already have an account? Sign in</a>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

CSS (css/reset.css)
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

CSS(css/main.css)
/* 
GENERAL
------------------------------------------------ 
*/
body {
  background: url('../images/bg.jpg') no-repeat;
  background-size: cover;
  font: 400 18px/1.5 'Quicksand', sans-serif;
  color: #333;
}

.container {
  margin: 60px auto;
  max-width: 640px;
  padding: 0 15px;
}

/* 
INPUT BOX 
------------------------------------------------
*/
input[type="text"],
input[type="password"],
input[type="email"] {
  background: none;
  border: none;
  border-bottom: 1px solid #666;
  padding: 15px 15px 15px 35px;
  width: 100%;
  height: 50px;
  color: #333;
  transition: border 0.3s linear, color 0.3s linear;
  font: 400 18px/1.5 'Quicksand', sans-serif;
}

input[type="text"] + .fas,
input[type="password"] + .fas,
input[type="email"] + .fas {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: color 0.3s linear;
  color: #333;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  outline: none;
  border-color: #1E8BC3;
  color: #1E8BC3;
}

input[type="text"]:focus + .fas,
input[type="password"]:focus + .fas,
input[type="email"]:focus + .fas {
  color: #1E8BC3; 
}

/* 
BUTTON 
------------------------------------------------
*/
.btn {
  background: #1E8BC3;
  border: none;
  color: #fff;
  padding: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
  font: 400 18px/1.5 'Quicksand', sans-serif;
  transition: background 0.3s linear;
}

.btn:hover {
  background: #2574A9;
}

.btn:focus,
.forgotPwd:focus {
  outline: 1px dotted #333;
}

/* 
INPUT BOX PLACEHOLDER COLORS 
------------------------------------------------
*/
::placeholder { 
  color: #333;
  opacity: 1; 
}

:-ms-input-placeholder { 
  color: #333;
}

::-ms-input-placeholder {
  color: #333;
}

/* 
CUSTOM CHECKBOX 
------------------------------------------------
*/
input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label {
  position: relative;
  cursor: pointer;
  padding: 0 0 0 30px;
}

input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
  content: '';
  background: #ddd;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
}

input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  color: #1E8BC3;
  position: absolute;
  top: -4px;
  left: 2px;
  opacity: 0;
  transition: opacity 0.3s linear, transform 0.3s linear;
  transform: scale(1.5);
}

input[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

input[type="checkbox"]:checked:focus + label:before,
input[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted #333;
}

/* 
LOGIN FORM 
------------------------------------------------
*/
.formholder {
  background: rgba(255,255,255,0.6);
  padding: 80px 40px;
  text-align: center;
}

.formholder .titleHolder {
  margin: 0 0 50px;
}

.formholder .titleHolder .far {
  font-size: 70px;
  margin: 0 0 20px;
}

.formholder h1 {
  font-size: 40px;
  margin: 0 0 10px;
}

.formholder a {
  color: #333;
  transition: color 0.3s linear;
}

.formholder a:hover {
  color: #2574A9;
}

.formholder .row {
  position: relative;
  margin: 0 0 20px;
}

.formholder form {
  max-width: 360px;
  margin: 0 auto;
}

.formholder form a {
  font-size: 14px;
}

Background Image (images/bg.jpg)

Text Limit using JQuery

Live Demo:
http://bibekshakya.com/demo/jquery/text-limit-using-jquery/

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Text Limit</title>
  <!-- google font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab">
  <!-- custom style -->
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="contentBlock">
    <h2>Text Limit using Jquery</h2>
    <div class="content" data-maxlength="400">
      <p>In sed aeque dictas concludaturque. Ut omnes perfecto qualisque sea, cu invenire conceptam sit, nec viris postea intellegat ea. Veniam alienum omittam pri id. Qui eu ullum dicta pertinax, quo oblique veritus ne. Te autem splendide definitiones mea. In sed aeque dictas concludaturque. Ut omnes perfecto qualisque sea, cu invenire conceptam sit, nec viris postea intellegat ea. Veniam alienum omittam pri id. Qui eu ullum dicta pertinax, quo oblique veritus ne. Te autem splendide definitiones mea.</p>
      <p>In sed aeque dictas concludaturque. Ut omnes perfecto qualisque sea, cu invenire conceptam sit, nec viris postea intellegat ea. Veniam alienum omittam pri id. Qui eu ullum dicta pertinax, quo oblique veritus ne. Te autem splendide definitiones mea. In sed aeque dictas concludaturque. Ut omnes perfecto qualisque sea, cu invenire conceptam sit, nec viris postea intellegat ea. Veniam alienum omittam pri id. Qui eu ullum dicta pertinax, quo oblique veritus ne. Te autem splendide definitiones mea.</p>
    </div>
  </div>
  <!-- jquery cdn -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <!-- custom script -->
  <script src="js/main.js"></script>
</body>

</html>

CSS Code (css/main.css)
/* 
-------
GENERAL 
-------
*/
body {
  font: 16px/1.7 'Roboto Slab', serif;
}

h2 {
  margin: 0 0 20px;
}

p {
  margin: 0 0 15px;
}

.contentBlock {
  max-width: 480px;
  padding: 25px 50px;
  margin: 15px auto 0;
  background: #1abc9c;
  color: #fff;
}

JS Code (main.js)
/*
----------
LIMIT TEXT
----------
*/

Video Tutorial:


Updated Code (js/main.js)
$('.content').html(function(index, currentText) {
  var maxLength = $(this).attr('data-maxlength');

  if(currentText.length >= maxLength) {
    return currentText.substr(0, maxLength) + '...';
  } else {
    return currentText;
  }
});

Default generated app failed ng test

Error Message after running 'ng test' command:
AppComponent should render title in a h1 tag FAILED
Expected ' Welcome to app! ' to contain 'Welcome to my-dream-app!'.
at UserContext. src/app/app.component.spec.ts:25:54)

Solution:
Your html page does not have h1 tag.
comment below line from app.component.spec.ts
// expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');

Scroll Indicator using JQuery

Live Demo:
http://www.bibekshakya.com/demo/jquery/scroll-indicator-jquery/

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Scroll Indicator</title>
 <!-- using google font -->
 <link href="https://fonts.googleapis.com/css?family=Poppins:300,400" rel="stylesheet">
 <!-- using font awesome -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
   crossorigin="anonymous">
 <!-- using custom css -->
 <link rel="stylesheet" href="css/main.css">
</head>

<body>
 <div id="wrapper">
  <!-- header -->
  <header id="header">
   <div class="container">
    <div class="logo">
     <a href="#">Demo</a>
    </div>
    <nav id="nav">
     <ul>
      <li>
       <a href="#">Home</a>
      </li>
      <li>
       <a href="#">About</a>
      </li>
      <li>
       <a href="#">Contact</a>
      </li>
     </ul>
    </nav>
   </div>
  </header>
  <!-- main -->
  <main>
   <!-- hero block -->
   <section class="heroBlock" style="background-image: url('images/img-hero.jpg')">
    <div class="container">
     <div class="content">
      <p>We are awesome</p>
      <h1>About Us</h1>
     </div>
    </div>
   </section>
   <!-- content block -->
   <section class="contentBlock">
    <div class="container">
     <h2>Our input helps make their solutions.</h2>
     <p>Vitae vero harum necessitatibus excepturi iure, odio deleniti at dicta minima delectus laboriosam, in fugit. A repudiandae
      quos minima ex incidunt magni. Deleniti ipsum aliquid voluptates hic sint magni deserunt quo harum consectetur quibusdam.
      Tempora natus numquam magni harum voluptatibus aliquid atque in veniam.</p>
     <a href="#" class="btn">Learn More
      <i class="fas fa-caret-right"></i>
     </a>
    </div>
   </section>
   <!-- service block -->
   <section class="servicesBlock">
    <div class="container">
     <div class="cols">
      <div class="col">
       <div class="icon">
        <i class="fab fa-envira"></i>
       </div>
       <div class="holder">
        <h3>Digital Solutions</h3>
        <p>Ullam neque reprehenderit maiores quod non numquam! Iure vero error ut</p>
       </div>
      </div>
      <div class="col">
       <div class="icon">
        <i class="fas fa-briefcase"></i>
       </div>
       <div class="holder">
        <h3>Explore work</h3>
        <p>Ullam neque reprehenderit maiores quod non numquam! Iure vero error ut</p>
       </div>
      </div>
      <div class="col">
       <div class="icon">
        <i class="fas fa-globe"></i>
       </div>
       <div class="holder">
        <h3>Our Mission</h3>
        <p>Ullam neque reprehenderit maiores quod non numquam! Iure vero error ut</p>
       </div>
      </div>
     </div>
    </div>
   </section>
  </main>
  <!-- footer -->
  <footer id="footer">
   <div class="container">
    <div class="cols">
     <div class="col">
      <div class="social">
       <ul>
        <li>
         <a href="#">
          <i class="fab fa-facebook-f"></i>
         </a>
        </li>
        <li>
         <a href="#">
          <i class="fab fa-twitter"></i>
         </a>
        </li>
        <li>
         <a href="#">
          <i class="fab fa-linkedin-in"></i>
         </a>
        </li>
       </ul>
      </div>
      <address>
       17 Oxford Street
       <br> London, SW10, UK
      </address>
     </div>
     <div class="col">
      <div class="content">
       <p>Eum mollitia quos officiis ipsam quisquam dolor atque, facere aliquam maiores asperiores odit aspernatur expedita
        cumque sequi laborum minima non error pariatur? Ipsum impedit magni, facere labore neque possimus placeat saepe ullam
        nobis! Qui, aspernatur? In, magni dolor! Dolores ipsam nisi laboriosam cupiditate enim.</p>
      </div>
     </div>
    </div>
   </div>
  </footer>
  <!-- horizontal scroll bar -->
  <div class="scrollBarHolder">
   <div id="scrollBar" style="width: 0"></div>
  </div>
 </div>
 <!-- using jquery cdn  -->
 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
   crossorigin="anonymous"></script>
 <!-- using custom js -->
 <script src="js/main.js"></script>
</body>

</html>

SCSS Code (scss/base/_mixins.scss)
// size
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// hide text
@mixin hide-text {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

// list reset
%listreset {
  margin: 0;
  padding: 0;
  list-style: none;
}

// transform
@mixin transform ($value) {
  -moz-transform: $value;
  -ms-transform: $value;
  -webkit-transform: $value;
  transform: $value;
}

// transition
@mixin transition ($value) {
  -moz-transition: $value;
  -ms-transition: $value;
  -webkit-transition: $value;
  transition: $value;
}

// placeholder
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }
  &::-moz-placeholder {
    opacity: 1;
    @content
  }
  &:-moz-placeholder {
    @content
  }
  &:-ms-input-placeholder {
    @content
  }
  &.placeholder {
    @content
  }
}

SCSS Code (scss/base/_reset.scss)
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}

body {
  color: $default-text-color;
  background: $default-background-color;
  font: 300 #{$default-font-size}/#{$default-line-height} $default-font-family;
  min-width: $default-min-width;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.gm-style img {
  max-width: none
}

@media only screen and (min-width:1025px) {
  a[href^=tel],
  a[href^=skype],
  a[href^=sms] {
    cursor: default;
    pointer-events: none;
  }
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

SCSS Code (scss/base/_typography.scss)
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $headings-font-family;
  font-weight: 400;
  margin: 0 0 10px;
  color: $headings-color;
}

h1 {
  font-size: $h1-font-size;
}

h2 {
  font-size: $h2-font-size;
}

h3 {
  font-size: $h3-font-size;
}

h4 {
  font-size: $h4-font-size;
}

h5 {
  font-size: $h5-font-size;
}

h6 {
  font-size: $h6-font-size;
}

p {
  margin: 0 0 20px;
}

a {
  color: $default-link-color;
  text-decoration: none;
  transition: color $animation-speed linear;
  &:hover,
  &:focus {
    text-decoration: none;
    color: darken($default-link-color, 15%);
  }
}

SCSS Code (scss/base/_variable.scss)
// colors
$black: #000;
$white: #fff;
$gray: #333;
$primary-color: #ff214f;

// font family
$primary-font: 'Poppins', sans-serif;

// Body
$default-text-color: $black  !default;
$default-background-color: $white !default;
$default-font-size: 16px !default;
$default-line-height: 1.6 !default;
$default-font-family: $primary-font !default;
$default-min-width: 320px;

// Links
$default-link-color: $primary-color;

// Headers
$h1-font-size: 46px !default;
$h2-font-size: 32px !default;
$h3-font-size: 22px !default;
$h4-font-size: 18px !default;
$h5-font-size: 17px !default;
$h6-font-size: 15px !default;

$headings-font-family: $primary-font !default;
$headings-color: $black !default;

// animation
$animation-speed: 0.3s; 

SCSS Code (scss/base/_main.scss)
@import 'base/variable';
@import 'base/mixins';
@import 'base/reset';
@import 'base/typography';
// general
#wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.container {
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

h1 {
  @media only screen and (max-width: 767px) {
    font-size: 36px;
  }
}

h2 {
  @media only screen and (max-width: 767px) {
    font-size: 24px;
    line-height: 1.4;
  }
}

p {
  margin: 0 0 25px;
}

// social icons
.social {
  li {
    float: left;
    margin: 0 20px 10px 0;
  }
  a {
    color: darken($white, 10%);
    &:hover {
      color: $primary-color;
    }
  }
}

// header
#header {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding: 20px 0;
  text-transform: uppercase;
  @media only screen and (max-width: 767px) {
    padding: 10px 0;
  }
  a {
    color: $black;
    transition: color 0.3s linear;
    &:hover {
      color: $primary-color;
    }
  }
  .logo {
    float: left;
    font-size: 20px;
    font-weight: 400;
  }
  #nav {
    float: right;
    font-size: 14px;
    margin: 5px 0 0;
    letter-spacing: 1px;
    li {
      float: left;
      margin: 0 0 0 20px;
      @media only screen and (max-width: 767px) {
        margin: 0 0 0 10px;
      }
    }
  }
}

// hero block
.heroBlock {
  position: relative;
  color: $white;
  text-align: center;
  padding: 140px 0;
  background-size: cover;
  background-position: 50% 0;
  @media only screen and (max-width: 767px) {
    padding: 80px 0;
  }
  &:before {
    content: '';
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .content {
    position: relative;
    z-index: 1;
  }
  h1 {
    color: #fff;
  }
  p {
    margin: 0;
    color: darken($white, 20%);
  }
}

// content block
.contentBlock {
  text-align: center;
  padding: 60px 0;
  @media only screen and (max-width: 767px) {
    padding: 30px 0;
  }
  .container {
    max-width: 800px;
  }
  .btn {
    background: $primary-color;
    color: $white;
    display: inline-block;
    vertical-align: top;
    padding: 8px 25px;
    border-radius: 25px;
  }
  .fas {
    margin: 0 0 0 5px;
  }
}

// service block
.servicesBlock {
  padding: 60px 0;
  @media only screen and (max-width: 1023px) {
    padding: 60px 0 25px;
  }
  @media only screen and (max-width: 767px) {
    padding: 30px 0 0;
  }
  .cols {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 -25px;
    @media only screen and (max-width: 1023px) {
      margin: 0;
    }
    &:before {
      content: '';
      background: darken($white, 10%);
      position: absolute;
      top: -60px;
      left: 25px;
      right: 25px;
      height: 1px;
      @media only screen and (max-width: 1023px) {
        left: 0;
        right: 0;
      }
      @media only screen and (max-width: 767px) {
        top: -30px;
      }
    }
  }
  .col {
    float: left;
    width: 33.33%;
    padding: 0 25px;
    @media only screen and (max-width: 1023px) {
      width: 100%;
      float: none;
      padding: 0 0 35px;
      text-align: center;
    }
  }
  .icon {
    float: left;
    margin: 0 30px 0 0;
    font-size: 60px;
    line-height: 1;
    color: $primary-color;
    @media only screen and (max-width: 1023px) {
      font-size: 50px;
      margin: 0 0 10px;
      float: none;
    }
    @media only screen and (max-width: 767px) {
      font-size: 40px;
    }
  }
  .holder {
    display: block;
    overflow: hidden;
  }
  h3 {
    @media only screen and (max-width: 1023px) {
      margin: 0;
    }
  }
  p {
    margin: 0;
  }
}

// footer
#footer {
  background: lighten($black, 15%);
  color: darken($white, 10%);
  padding: 50px 0 60px;
  @media only screen and (max-width: 767px) {
    padding: 30px 0 10px;
  }
  .cols {
    margin: 0 -30px;
    overflow: hidden;
    @media only screen and (max-width: 767px) {
      margin: 0;
    }
  }
  .col {
    float: left;
    width: 70%;
    padding: 0 30px;
    @media only screen and (max-width: 767px) {
      width: 100%;
      padding: 0 0 20px;
    }
    &:first-child {
      width: 30%;
      @media only screen and (max-width: 767px) { 
        width: 100%;
      }
    }
  }
  p {
    margin: 0;
  }
  .social {
    display: block;
    overflow: hidden;
    margin: 0 0 10px;
  }
  address {
    font-style: normal;
  }
}

// progress bar
.scrollBarHolder {
  height: 8px;
  background: darken($white, 15%);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  #scrollBar {
    height: 8px;
    background: $primary-color;
  }
}

Video Tutorial


Updated Code (js/main.js)
// create the function
function scrollIndicator() {
 // get the value of scrollbar
 var windowScroll = $(window).scrollTop();
 
 // get actual height
 var height = $(document).height() - $(window).height();

 // calculate scrolled value
 var scrolled = (windowScroll/height) * 100;
 
 // add scrolled value in #scrollBar width in css
 $('#scrollBar').css('width', scrolled + '%');
}

// call the function on scroll
$(window).scroll(function() {
 scrollIndicator();
});

JQuery Lightbox

Live Demo
http://www.bibekshakya.com/demo/jquery/jquery-lightbox/

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>JQuery Lightbox</title>
 <!-- using google font -->
 <link href="https://fonts.googleapis.com/css?family=Poppins:300,400" rel="stylesheet">
 <!-- using font awesome 5 -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
   crossorigin="anonymous">
 <!-- using custom css -->
 <link rel="stylesheet" href="css/main.css">
</head>

<body>
 <!-- hero block -->
 <section class="hero" style="background-image: url('images/img-intro.jpg')">
  <div class="container">
   <div class="content">
    <h1>Our Works</h1>
    <p>Hic adipisci asperiores quasi dolore enim, necessitatibus in!</p>
   </div>
  </div>
 </section>
 <main>
  <div class="container">
   <!-- image gallery -->
   <ul id="workGallery">
    <li>
     <a href="images/img1.jpg">
      <img src="images/img1.jpg" alt="Refferal Machine By Matthew Spiel">
     </a>
    </li>
    <li>
     <a href="images/img2.jpg">
      <img src="images/img2.jpg" alt="Space Juice by Mat Helme">
     </a>
    </li>
    <li>
     <a href="images/img3.jpg">
      <img src="images/img3.jpg" alt="Education by Chris Michel">
     </a>
    </li>
    <li>
     <a href="images/img4.jpg">
      <img src="images/img4.jpg" alt="Wanted: Copy McRepeatsalot by Chris Michel">
     </a>
    </li>
    <li>
     <a href="images/img5.jpg">
      <img src="images/img5.jpg" alt="Sebastian by Mat Helme">
     </a>
    </li>
    <li>
     <a href="images/img6.jpg">
      <img src="images/img6.jpg" alt="Refferal Machine By Matthew Spiel">
     </a>
    </li>
    <li>
     <a href="images/img7.jpg">
      <img src="images/img7.jpg" alt="Space Juice by Mat Helme">
     </a>
    </li>
    <li>
     <a href="images/img8.jpg">
      <img src="images/img8.jpg" alt="Education by Chris Michel">
     </a>
    </li>
   </ul>
   <!-- get in touch -->
   <div class="getInTouch">
    <h2>Get in Touch</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste omnis fugit distinctio consequatur quibusdam voluptatem,
     quisquam at qui ab neque praesentium nostrum, possimus sunt esse assumenda beatae aut asperiores inventore.</p>
    <a href="#" class="btn">Get Free Quote</a>
   </div>
  </div>
 </main>
 <!-- 
 <div id="overlay">
  <div class="wrap">
   <img src="#">
   <p>caption comes here</p>
   <a href="#" class="close">×</a>
  </div>
 </div> 
 -->
 <!-- using jquery cdn -->
 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
   crossorigin="anonymous"></script>
 <!-- using custom js -->
 <script src="js/main.js"></script>
</body>

</html>

SCSS Code (scss/base/_mixins.scss)
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin hide-text {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

%listreset {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin transform ($value) {
  -moz-transform: $value;
  -ms-transform: $value;
  -webkit-transform: $value;
  transform: $value;
}

@mixin transition ($value) {
  -moz-transition: $value;
  -ms-transition: $value;
  -webkit-transition: $value;
  transition: $value;
}

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }
  &::-moz-placeholder {
    opacity: 1;
    @content
  }
  &:-moz-placeholder {
    @content
  }
  &:-ms-input-placeholder {
    @content
  }
  &.placeholder {
    @content
  }
}

SCSS Code (scss/base/_reset.scss)
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}

body {
  color: $default-text-color;
  background: $default-background-color;
  font: 300 #{$default-font-size}/#{$default-line-height} $default-font-family;
  min-width: $default-min-width;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.gm-style img {
  max-width: none
}

@media only screen and (min-width:1025px) {
  a[href^=tel],
  a[href^=skype],
  a[href^=sms] {
    cursor: default;
    pointer-events: none;
  }
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

SCSS Code (scss/base/_typography.scss)
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $headings-font-family;
  font-weight: 400;
  margin: 0 0 10px;
  color: $headings-color;
}

h1 {
  font-size: $h1-font-size;
}

h2 {
  font-size: $h2-font-size;
}

h3 {
  font-size: $h3-font-size;
}

h4 {
  font-size: $h4-font-size;
}

h5 {
  font-size: $h5-font-size;
}

h6 {
  font-size: $h6-font-size;
}

p {
  margin: 0 0 20px;
}

a {
  color: $default-link-color;
  text-decoration: none;
  transition: color $animation-speed linear;
  &:hover,
  &:focus {
    text-decoration: none;
    color: darken($default-link-color, 15%);
  }
}

SCSS Code (scss/base/_variable.scss)
// colors
$black: #000;
$white: #fff;
$gray: #333;
$primary-color: #009432;

// font family
$primary-font: 'Poppins', sans-serif;

// Body
$default-text-color: $black  !default;
$default-background-color: $white !default;
$default-font-size: 18px !default;
$default-line-height: 1.7 !default;
$default-font-family: $primary-font !default;
$default-min-width: 320px;

// Links
$default-link-color: $primary-color;

// Headers
$h1-font-size: 36px !default;
$h2-font-size: 32px !default;
$h3-font-size: 22px !default;
$h4-font-size: 18px !default;
$h5-font-size: 17px !default;
$h6-font-size: 15px !default;

$headings-font-family: $primary-font !default;
$headings-color: $black !default;

// animation
$animation-speed: 0.3s; 

SCSS Code (scss/base/_main.scss)
@import 'base/variable';
@import 'base/mixins';
@import 'base/reset';
@import 'base/typography';

// css3 animation
@-webkit-keyframes lightboxZoom {
 from {transform: translate(-50%, -50%) scale(0);}
 to {transform: translate(-50%, -50%) scale(1);}
}

@keyframes lightboxZoom {
 from {transform: translate(-50%, -50%) scale(0);}
 to {transform: translate(-50%, -50%) scale(1);}
}

// general
.container {
 max-width: 1170px;
 padding: 0 15px;
 margin: 0 auto;
}

// hero block
.hero {
 background-size: cover;
 background-position: 50%;
 min-height: 300px;
 color: $white;
 position: relative;
 margin: 0 0 60px;
 &:after {
  content: '';
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 }
 .content {
  position: absolute;
  bottom: 30px;
  z-index: 1;
 }
 h1 {
  color: $white;
  margin: 0;
 }
}

// work gallery
#workGallery {
 font-size: 0;
 line-height: 0;
 letter-spacing: -4px;
 margin: 0 -10px 40px;
 li {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  padding: 0 10px 20px;
 }
 a {
  display: block;
  position: relative;
  &:before {
   content: '';
   background: rgba(0, 0, 0, 0.5);
   position: absolute;
   height: 100%;
   width: 100%;
   transform: scale(0);
   transition: transform 0.3s cubic-bezier(0.3, 1, 0.8, 1);
  }
  &:after {
   content: '\f00e';
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   font-size: 30px;
   line-height: 1;
   margin: -10px 0 0;
   color: $white;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%) scale(0);
   transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  }
  &:hover {
   &:before {
    transform: scale(1);
   }
   &:after {
    transform: translate(-50%) scale(1);
   }
  }
 }
}

// get in touch
.getInTouch {
 position: relative;
 text-align: center;
 padding: 30px 0 60px;
 max-width: 800px;
 margin: 0 auto;
 &:after {
  content: '';
  background: #eee;
  height: 1px;
  position: absolute;
  top: 0;
  left: 30%;
  right: 30%;
 }
 h2 {
  margin: 0 0 15px;
 }
 p {
  margin: 0 0 30px;
 }
 .btn {
  @include transition(0.3s);
  border: 1px solid;
  padding: 5px 25px;
  display: inline-block;
  vertical-align: top;
  border-radius: 25px;
  &:hover {
   box-shadow: inset 0 50px 0 0 $primary-color;
   color: $white;
  }
 }
}

// overlay
#overlay {
 background: rgba(0, 0, 0, 0.7);
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 2;
 display: none;
 text-align: center;
 .wrap {
  border: 8px solid $white;
  border-radius: 3px;
  background: $white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    animation-name: lightboxZoom;
    animation-duration: 0.3s;
  img {
   margin: 0 0 10px;
  }
  p {
   margin: 0 0 5px;
  }
 }
 .close {
  @include transition(0.3s);
  @include size(30px);
  color: $white;
  cursor: pointer;
  background: $black;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px;
  &:hover {
   transform: rotate(180deg);
  }
 }
}

// responsive
@media screen and (max-width: 1023px) {
 // work gallery
 #workGallery li {
  width: 33.33%;
 }
}

@media screen and (max-width: 767px) {
 // general
 body {
  font-size: 14px;
 }
 // hero block
 .hero {
  min-height: 160px;
  margin: 0 0 20px;
 }
 .hero .content {
  bottom: 0;
 }
 .hero h1 {
  font-size: 26px;
 }
 // work gallery
 #workGallery {
  margin: 0 -10px 10px;
 }
 #workGallery li {
  width: 50%;
 }
 // get in touch
 .getInTouch {
  padding: 10px 0 40px;
 }
 .getInTouch h2 {
  font-size: 22px;
  margin: 0 0 5px;
 }
 .getInTouch p {
  margin: 0 0 20px;
 }
 // overlay
 #overlay .wrap {
  width: 75%;
 }
 #overlay .close {
  @include size(25px);
  font-size: 22px;
 }
}

Images
Note: Use your own images. Make sure you update your images path in index.html

Compiled CSS Code (css/main.css)
Note: Only use this compiled CSS if you don't have idea in SCSS. Otherwise ignore this CSS.
html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0; }

body {
  color: #000;
  background: #fff;
  font: 300 18px/1.7 "Poppins", sans-serif;
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  max-width: 100%;
  height: auto;
  vertical-align: top; }

.gm-style img {
  max-width: none; }

@media only screen and (min-width: 1025px) {
  a[href^=tel],
  a[href^=skype],
  a[href^=sms] {
    cursor: default;
    pointer-events: none; } }
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  margin: 0 0 10px;
  color: #000; }

h1 {
  font-size: 36px; }

h2 {
  font-size: 32px; }

h3 {
  font-size: 22px; }

h4 {
  font-size: 18px; }

h5 {
  font-size: 17px; }

h6 {
  font-size: 15px; }

p {
  margin: 0 0 20px; }

a {
  color: #009432;
  text-decoration: none;
  transition: color 0.3s linear; }
  a:hover, a:focus {
    text-decoration: none;
    color: #004818; }

@-webkit-keyframes lightboxZoom {
  from {
    transform: translate(-50%, -50%) scale(0); }
  to {
    transform: translate(-50%, -50%) scale(1); } }
@keyframes lightboxZoom {
  from {
    transform: translate(-50%, -50%) scale(0); }
  to {
    transform: translate(-50%, -50%) scale(1); } }
.container {
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto; }

.hero {
  background-size: cover;
  background-position: 50%;
  min-height: 300px;
  color: #fff;
  position: relative;
  margin: 0 0 60px; }
  .hero:after {
    content: '';
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
  .hero .content {
    position: absolute;
    bottom: 30px;
    z-index: 1; }
  .hero h1 {
    color: #fff;
    margin: 0; }

#workGallery {
  font-size: 0;
  line-height: 0;
  letter-spacing: -4px;
  margin: 0 -10px 40px; }
  #workGallery li {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    padding: 0 10px 20px; }
  #workGallery a {
    display: block;
    position: relative; }
    #workGallery a:before {
      content: '';
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      height: 100%;
      width: 100%;
      transform: scale(0);
      transition: transform 0.3s cubic-bezier(0.3, 1, 0.8, 1); }
    #workGallery a:after {
      content: '\f00e';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      font-size: 30px;
      line-height: 1;
      margin: -10px 0 0;
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%) scale(0);
      transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); }
    #workGallery a:hover:before {
      transform: scale(1); }
    #workGallery a:hover:after {
      transform: translate(-50%) scale(1); }

.getInTouch {
  position: relative;
  text-align: center;
  padding: 30px 0 60px;
  max-width: 800px;
  margin: 0 auto; }
  .getInTouch:after {
    content: '';
    background: #eee;
    height: 1px;
    position: absolute;
    top: 0;
    left: 30%;
    right: 30%; }
  .getInTouch h2 {
    margin: 0 0 15px; }
  .getInTouch p {
    margin: 0 0 30px; }
  .getInTouch .btn {
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border: 1px solid;
    padding: 5px 25px;
    display: inline-block;
    vertical-align: top;
    border-radius: 25px; }
    .getInTouch .btn:hover {
      box-shadow: inset 0 50px 0 0 #009432;
      color: #fff; }

#overlay {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: none;
  text-align: center; }
  #overlay .wrap {
    border: 8px solid #fff;
    border-radius: 3px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-name: lightboxZoom;
    animation-duration: 0.3s; }
    #overlay .wrap img {
      margin: 0 0 10px; }
    #overlay .wrap p {
      margin: 0 0 5px; }
  #overlay .close {
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    width: 30px;
    height: 30px;
    color: #fff;
    cursor: pointer;
    background: #000;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px; }
    #overlay .close:hover {
      transform: rotate(180deg); }

@media screen and (max-width: 1023px) {
  #workGallery li {
    width: 33.33%; } }
@media screen and (max-width: 767px) {
  body {
    font-size: 14px; }

  .hero {
    min-height: 160px;
    margin: 0 0 20px; }

  .hero .content {
    bottom: 0; }

  .hero h1 {
    font-size: 26px; }

  #workGallery {
    margin: 0 -10px 10px; }

  #workGallery li {
    width: 50%; }

  .getInTouch {
    padding: 10px 0 40px; }

  .getInTouch h2 {
    font-size: 22px;
    margin: 0 0 5px; }

  .getInTouch p {
    margin: 0 0 20px; }

  #overlay .wrap {
    width: 75%; }

  #overlay .close {
    width: 25px;
    height: 25px;
    font-size: 22px; } }


Video Tutorial


Updated JQuery Code (js/main.js)
// create element
var $overlay = $('<div id="overlay"></div>');
var $wrap = $('<div class="wrap"></div>');
var $image = $('<img>');
var $caption = $('<p></p>');
var $close = $('<a href="#" class="close">×</a>');

// append method
$overlay.append($wrap);
$wrap.append($image);
$wrap.append($caption);
$wrap.append($close);
$('body').append($overlay);

// click on each images
$('#workGallery').on('click', 'a', function(event) {
 event.preventDefault();

 var imageSrc = $(this).attr('href');
 $image.attr('src', imageSrc);

 var captionText = $(this).children().attr('alt');
 $caption.text(captionText);

 $overlay.show();
});

// click on close icon
$close.click(function() {
 $overlay.hide();
 return false;
});

CSS Accordion

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Accordion using CSS</title>
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <!-- importing reset and custom css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <!-- accordion -->
    <div class="accordion">
      <h2>Accordion using CSS</h2>
      <!-- 1st holder -->
      <div class="holder">
        <input type="radio" name="accordion" id="accordion1" checked>
        <label for="accordion1">Can I change my holiday?</label>
        <div class="content">
          <p>Eum ne iisque legendos. Cum at mutat nostrud, ad eos porro quando, mea ex meliore reformidans. Ea meliore nusquam has, an eius dicunt feugiat mea. Id vis appetere definitiones, sea aliquid denique assueverit cu. Ei modus nulla eligendi mel.</p>
        </div>
      </div>
      <!-- 2nd holder -->
      <div class="holder">
        <input type="radio" name="accordion" id="accordion2">
        <label for="accordion2">What do I do if my contact details have changed?</label>
        <div class="content">
          <p>Quo no cetero tacimates accommodare, sea ne dicta munere omittam. Wisi inani salutandi ea sed, nec et fugit solet fabulas. In usu aperiri tacimates maiestatis, est te tritani perfecto intellegam, ne diceret deleniti ius. At decore bonorum deseruisse mei, vis et hinc conclusionemque. Sea no quidam copiosae dignissim.</p>
        </div>
      </div>
      <!-- 3rd holder -->
      <div class="holder">
        <input type="radio" name="accordion" id="accordion3">
        <label for="accordion3">What happens if I change my name after booking?</label>
        <div class="content">
          <p>Assueverit neglegentur cum ut, in soleat virtute blandit eum. Erant soleat usu ei, sea modo mundi democritum ne. Tacimates platonem quo cu, te vim ipsum alterum omittantur. Vel probo epicurei recteque ad, eos ea porro lucilius intellegat. Alia integre qualisque sea ea. Per ei nobis possit.</p>
        </div>
      </div>
      <!-- 4th holder -->
      <div class="holder">
        <input type="radio" name="accordion" id="accordion4">
        <label for="accordion4">Do I need to supply Advanced Passenger Information?</label>
        <div class="content">
          <p>Reque facilis sadipscing nam ea, erroribus iracundia ex ius. Eam paulo graeco philosophia in, agam putent philosophia ei pri. Et his liber nemore adolescens, vero partiendo dignissim eu nam. Dissentiet comprehensam ne his, et cetero nostrud civibus sit. Tale conceptam sea et, te per praesent voluptaria.</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS Code (css/reset.css)
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

CSS Code (css/main.css)
/* general */

body {
  font: 400 16px/1.7 'Montserrat', sans-serif;
  color: #333;
}

.container {
  max-width: 640px;
  padding: 0 15px;
  margin: 30px auto;
}

h2 {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 10px;
}

/* accordion */

Video Tutorial


Updated Code (css/main.css)
/* accordion */

.accordion input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.accordion label {
  display: block;
  cursor: pointer;
  background: #3498db;
  color: #fff;
  padding: 20px 55px 20px 25px;
  position: relative;
}

.accordion label:after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
}

.accordion label:hover {
  background: #1373b3;
}

.accordion .content {
  max-height: 0;
  overflow: hidden;
  padding: 0 25px;
}

.accordion input[type="radio"]:checked ~ .content {
  max-height: 1000px;
  border: 1px solid #1373b3;
  padding: 25px;
  transition: padding 0.3s cubic-bezier(0.1, 4.5, 0.8, 1.5);
}

.accordion input[type="radio"]:checked ~ label {
  background: #1373b3;
}

.accordion input[type="radio"]:checked ~ label:after {
  content: '-';
}

Scrollable Responsive Table

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Responsive Table</title>
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <!-- importing reset and custom css -->
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <!-- responsive table -->
    <div class="holder">
      <h2>Scrollable Responsive Table</h2>
      <p>Ipsa expedita odio autem mollitia fugiat ad repudiandae, a, tempore voluptatibus eveniet maxime eligendi suscipit! Nemo, veritatis dolore nostrum exercitationem dolor illum.</p>
      <div class="responsiveTbl">
        <table>
          <thead>
            <tr>
              <th>Rank</th>
              <th>Full Name</th>
              <th>Starting Price</th>
              <th>Review</th>
              <th>Hiring</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>John Smith</td>
              <td><span class="price">£40 / hr</span></td>
              <td>9.9</td>
              <td><a href="#" class="btn">Hire me</span></td>
            </tr>
            <tr>
              <td>2</td>
              <td>William Taylor</td>
              <td><span class="price">£38 / hr</span></td>
              <td>9.5</td>
              <td><a href="#" class="btn">Hire me</span></td>
            </tr>
            <tr>
              <td>3</td>
              <td>George Wilson</td>
              <td><span class="price">£35 / hr</span></td>
              <td>9.2</td>
              <td><a href="#" class="btn">Hire me</span></td>
            </tr>
            <tr>
              <td>4</td>
              <td>Ellen Walker</td>
              <td><span class="price">£39 / hr</span></td>
              <td>9.1</td>
              <td><a href="#" class="btn">Hire me</span></td>
            </tr>
            <tr>
              <td>5</td>
              <td>Emma Hall</td>
              <td><span class="price">£35 / hr</span></td>
              <td>9.0</td>
              <td><a href="#" class="btn">Hire me</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

SCSS Code (scss/base/_reset.scss)
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}

body {
  color: $default-text-color;
  background: $default-background-color;
  font: 400 #{$default-font-size}/#{$default-line-height} $default-font-family;
  min-width: $default-min-width;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.gm-style img {
  max-width: none
}

@media only screen and (min-width:1025px) {
  a[href^=tel],
  a[href^=skype],
  a[href^=sms] {
    cursor: default;
    pointer-events: none;
  }
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

SCSS Code (scss/base/_typography.scss)
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $headings-font-family;
  font-weight: 500;
  margin: 0 0 10px;
  color: $headings-color;
}

h1 {
  font-size: $h1-font-size;
}

h2 {
  font-size: $h2-font-size;
}

h3 {
  font-size: $h3-font-size;
}

h4 {
  font-size: $h4-font-size;
}

h5 {
  font-size: $h5-font-size;
}

h6 {
  font-size: $h6-font-size;
}

p {
  margin: 0 0 20px;
}

a {
  color: $default-link-color;
  text-decoration: none;
  transition: color $animation-speed linear;
  &:hover,
  &:focus {
    text-decoration: none;
    color: darken($default-link-color, 15%);
  }
}

SCSS Code (scss/base/_mixins.scss)
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin hide-text {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

%listreset {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin transform ($value) {
  -moz-transform: $value;
  -ms-transform: $value;
  -webkit-transform: $value;
  transform: $value;
}

@mixin transition ($value) {
  -moz-transition: $value;
  -ms-transition: $value;
  -webkit-transition: $value;
  transition: $value;
}

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }
  &::-moz-placeholder {
    opacity: 1;
    @content
  }
  &:-moz-placeholder {
    @content
  }
  &:-ms-input-placeholder {
    @content
  }
  &.placeholder {
    @content
  }
}

SCSS Code (scss/base/_variables.scss)
// colors
$black: #333;
$white: #fff;
$gray: #e5e5e5;
$primary-color: #9b59b6;

// font family
$primary-font: 'Montserrat', sans-serif;

// Body
$default-text-color: $black  !default;
$default-background-color: $gray !default;
$default-font-size: 14px !default;
$default-line-height: 1.7 !default;
$default-font-family: $primary-font !default;
$default-min-width: 320px;

// Links
$default-link-color: $primary-color;

// Headers
$h1-font-size: 26px !default;
$h2-font-size: 24px !default;
$h3-font-size: 22px !default;
$h4-font-size: 18px !default;
$h5-font-size: 17px !default;
$h6-font-size: 15px !default;

$headings-font-family: $primary-font !default;
$headings-color: $black !default;

// animation
$animation-speed: 0.3s; 

SCSS Code (scss/main.scss)
@import 'base/variable';
@import 'base/mixins';
@import 'base/reset';
@import 'base/typography';

.container {
 max-width: 1024px;
 padding: 0 15px;
 margin: 30px auto;
}

/* responsive table */

.responsiveTbl table {
 text-align: center;
 width: 100%;
}

tr {
 background: $white;
 &:nth-child(2n) {
  background: darken($white, 5%);
 }
 &:hover {
  .msg {
   opacity: 1;
   top: 0;
  }
 }
}

th,
td {
 padding: 15px 20px;
 vertical-align: middle;
 &:nth-child(2) {
  text-align: left;
 }
}

th {
 background: $primary-color;
 color: $white;
 font-weight: 500;
 text-transform: uppercase;
 padding: 25px 20px;
}

.price,
.btn {
 border: 1px solid $primary-color;
 border-radius: 25px;
 display: inline-block;
 vertical-align: top;
 padding: 8px;
 min-width: 100px;
 text-align: center;
}

.btn {
 border: none;
 color: $white;
 background: $primary-color;
 transition: box-shadow 0.3s linear;
 &:hover {
  box-shadow: inset 0 0 0 25px darken($primary-color, 25%);
  color: $white;
 }
}

/* responsive using desktop first approach */

Video Tutorial


Updates SCSS Code (scss/main.scss)
/* responsive using desktop first approach */

@media only screen and (max-width: 767px) {
 .price,
 .btn {
  border: none;
  background: none;
  padding: 0;
 }
 .btn {
  color: $primary-color;
 }
 .responsiveTbl table {
  width: 767px;
 }
 .responsiveTbl {
  overflow: auto;
 }
}

Basic SCSS Folder Structure

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Basic SCSS Folder Structure</title>
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <!-- importing custom css -->
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <h1>Heading 1</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, eum possimus fugiat magnam, delectus libero iusto laudantium quibusdam, totam repudiandae molestias ipsam adipisci facere corporis exercitationem quam voluptatum qui ducimus!</p>
  <div class="box"></div>
</body>

</html>

SCSS Code (scss/base/_reset.scss)
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}

body {
  color: $default-text-color;
  background: $default-background-color;
  font: 400 #{$default-font-size}/#{$default-line-height} $default-font-family;
  min-width: $default-min-width;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.gm-style img {
  max-width: none
}

@media only screen and (min-width:1025px) {
  a[href^=tel],
  a[href^=skype],
  a[href^=sms] {
    cursor: default;
    pointer-events: none;
  }
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

SCSS Code (scss/base/_typography.scss)
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $headings-font-family;
  font-weight: 500;
  margin: 0 0 10px;
  color: $headings-color;
}

h1 {
  font-size: $h1-font-size;
}

h2 {
  font-size: $h2-font-size;
}

h3 {
  font-size: $h3-font-size;
}

h4 {
  font-size: $h4-font-size;
}

h5 {
  font-size: $h5-font-size;
}

h6 {
  font-size: $h6-font-size;
}

p {
  margin: 0 0 20px;
}

a {
  color: $default-link-color;
  text-decoration: none;
  transition: color 0.3s linear;
  &:hover,
  &:focus {
    text-decoration: none;
    color: darken($default-link-color, 15%);
  }
}

SCSS Code (scss/base/_mixins.scss)
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin hide-text {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

%listreset {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin transform ($value) {
  -moz-transform: $value;
  -ms-transform: $value;
  -webkit-transform: $value;
  transform: $value;
}

@mixin transition ($value) {
  -moz-transition: $value;
  -ms-transition: $value;
  -webkit-transition: $value;
  transition: $value;
}

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }
  &::-moz-placeholder {
    opacity: 1;
    @content
  }
  &:-moz-placeholder {
    @content
  }
  &:-ms-input-placeholder {
    @content
  }
  &.placeholder {
    @content
  }
}

SCSS Code (scss/base/_variables.scss)
// colors
$black: #333;
$white: #fff;
$primary-color: #f00;

// font family
$primary-font: 'Montserrat', sans-serif;

// body
$default-text-color: $black;
$default-background-color: $white;
$default-font-size: 20px;
$default-line-height: 1.7;
$default-font-family: $primary-font;
$default-min-width: 320px;

// link
$default-link-color: $primary-color;

// headers
$h1-font-size: 50px;
$h2-font-size: 24px;
$h3-font-size: 22px;
$h4-font-size: 18px;
$h5-font-size: 17px;
$h6-font-size: 15px;

$headings-font-family: $primary-font;
$headings-color: $black;

SCSS Code (scss/main.scss)
@import 'base/variable';
@import 'base/mixins';
@import 'base/reset';
@import 'base/typography';

p {
  color: $primary-color;
}

.box {
  @include size(500px, 300px);
  background: $primary-color;
}