Login page template

by Ricardo Zambon

HTML

<div class="root">
  <div class="scroll-container">

    <div class="container">
			<div class="content">

				<div class="login-content">
					Content here
				</div>
				<div class="copyright-content">
					Copyright
				</div>

      </div>
    </div>

  </div>
</div>

SCSS

$background-color: rgb(255, 255, 255);
$background-alpha: 0.75;
$background-url: "https://images2.alphacoders.com/720/thumb-1920-720843.jpg";

$container-margin: 20px;

$content-width: 450px;
$content-height: 200px;
$content-radius: 10px;
$content-padding: 1rem;

@mixin background($color, $alpha, $blur: 3px, $zIndex: -2, $child: true) {
  position: relative;
  z-index: $zIndex;
	
	@if $child {
		overflow: hidden;
	}

  background: url(#{$background-url}) no-repeat;
  background-attachment: fixed;
  background-size: cover;
	
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px $container-margin 0 rgba(0, 0, 0, 0.19);

  &::before {
  	z-index: $zIndex - 1;
    content: "";
    background: inherit;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 500px 500px rgba($color, $alpha);
    filter: blur($blur);
		
		@if $child {
			position: absolute;
			margin: -$blur;
		}
		@else {
			position: fixed;
		}
  }
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
  @include background($background-color, 0.2, $child: false);
	
  font-family: Segoe UI;
	font-size: 1rem;
	font-weight: 400;
}

.root {
	display: flex;
  justify-content: center;
  align-items: center;
	height: 100%;
	width: 100%;
	
	.scroll-container {
		margin: auto;
		width: 100%;
		max-height: 100%;
		overflow: auto;
	}
}

.container {
	display: flex;
	height: 100%;
	margin: $container-margin;
	align-items: center;
	justify-content: center;
}

.content {
	width: $content-width;
	border-radius: $content-radius;
	
	.login-content {
		min-height: $content-height;
		padding: $content-padding;
		border-radius: $content-radius;

		@include background($background-color, $background-alpha, $blur: 0.75rem);
	}

	.copyright-content {
		margin-top: -10px;
		padding: 0.6rem 0.5rem 0.2rem 0.5rem;
		font-weight: 500;
		font-size: 0.9rem;
		border-bottom-left-radius: $content-radius;
		border-bottom-right-radius: $content-radius;
	}
}