Sass Crash Course - Landing Page Header

index.html

<header class="showcase">
			<div class="container">
				<nav>
					<h1 class="logo">My Website</h1>
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Services</a></li>
					</ul>
				</nav>

				<div class="showcase-content">
					<div>
						<h1>Make Your Marketing Real</h1>
						<p class="my-1">
							Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est
							eligendi tempore atque laborum. Quisquam nemo at non. Corrupti,
							vitae dolore.
						</p>
						<a href="#" class="btn-primary">Learn More</a>
						<a href="#" class="btn-secondary">Sign Up</a>
					</div>
					<img
						src="https://themesbrand.com/zooki/layouts/images/home-2-img.png"
					/>
				</div>
			</div>
		</header>

sass-crash-course-landing-page-header.markdown

Sass Crash Course - Landing Page Header

A Pen by Brad Traversy on CodePen.

License.

style.scss

// _config.scss
$font-stack: Arial, Helvetica, sans-serif;
$light-color: #f4f4f4;
$primary-color: #0e6cff;
// $primary-color: #e0ffff;
$secondary-color: #ff8700;

// Set text color based on bg
@function set-text-color($color) {
  @if(lightness($color) > 70) {
    @return #333;
  } @else {
    @return #fff;
  }
}

// Set background & text color
@mixin set-background($color) {
  background-color: $color;
  color: set-text-color($color)
}

// _style.scss
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: $light-color;
  font-family: $font-stack;
  line-height: 1.6;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}

.showcase {
  @include set-background($primary-color);
  height: 600px;

  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    ul {
      display: flex;
      list-style-type: none;
    }

    li {
      padding: 15px;
    }

    a {
      color: set-text-color($primary-color);
    }

    a:hover {
      color: $secondary-color;
    }
  }

  &-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;

    img {
      width: 50%;
    }

    h1 {
      font-size: 50px;
      line-height: 1.2;
    }
  }
}

// _utilities.scss
.container {
  max-width: 1100px;
  padding: 0 30px;
  margin: 0 auto;
  overflow: auto;
}


// Margin & padding classes
$spaceamounts: (1,2,3,4,5);

@each $space in $spaceamounts {
  .m-#{$space} {
    margin: #{$space}rem;
  }
  .my-#{$space} {
    margin: #{$space}rem 0;
  }

  .p-#{$space} {
    padding: #{$space}rem;
  }
  .py-#{$space} {
    padding: #{$space}rem 0;
  }
}

// _buttons.scss
%btn {
  display: inline-block;
  border-radius: 5px;
  padding: 8px 20px;
  margin: 3px;

  &:hover {
    transform: scale(.98);
  }
}

.btn-primary {
  @extend %btn;
  @include set-background(lighten($primary-color, 10%));
}

.btn-secondary {
  @extend %btn;
  @include set-background($secondary-color);
}


// _mobile.scss
@media(max-width: 700px) {
  .showcase {
    height: 400px;

    &-content {
      text-align: center;

      img {
        display: none;
      }
    }
  }
}