bmamatkadyr · October 27, 2021 15:11
diff --git a/index.html b/index.html
 <head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,700">
  <!-- Code by Angela Delise  
 https://codepen.io/angeladelise/pen/MWeLPmR -->

 </head>

 <body>
  <form action="" class="form">
    <h1 class="form__title">Sign Up</h1>
    <p class="form__description">Get unlimited access to the latest design trends</p>

    <div class="form__group">
      <input type="text" id="email" class="form__input" placeholder=" " autocomplete="off">
      <label for="email" class="form__label">Email</label>
    </div>

    <div class="form__group">
      <input type="password" id="password" class="form__input" placeholder=" ">
      <label for="password" class="form__label">Password</label>
    </div>

    <button class="form__button">Sign Up</button>
  </form>
 </body>
diff --git a/sign-up-form-tutorial.markdown b/sign-up-form-tutorial.markdown
diff --git a/style.scss b/style.scss
 /*   color variables */
 $clr-primary: #9dedff;
 $clr-primary-hover: #8ad6ff;
 $clr-primary-dark: #7bdff6;
 $clr-primary-light: #c7f5ff;
 $clr-gray100: #f0f7f8;
 $clr-gray200: #cfd8dc;
 $clr-gray300: #a7b7be;
 $clr-gray400: #6b7e86;
 $clr-gray500: #425a65;

 /*   border radius */
 $radius: 1rem;

 *,
 *::before,
 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
 }

 body {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  background-color: #79ceff;
  background-image: linear-gradient(
    315deg,
    #79ceff 0%,
    #dcb5ff 67%,
    #ffb8f0 100%
  );
  height: 100vh;
  display: grid;
  justify-content: center;
  align-items: center;
  color: $clr-gray500;
 }

 .form {
  width: 24rem;
  padding: 2rem;
  border-radius: $radius;
  background-color: white;

  &__title {
    margin-bottom: 0.5rem;
  }

  &__description {
    margin-bottom: 2rem;
  }

  &__group {
    position: relative;
    height: 3rem;
    margin-bottom: 1.5rem;
  }

  &__input {
    width: 100%;
    height: 100%;
    border: 2px solid $clr-gray200;
    border-radius: 0.5rem;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    outline: none;
    padding: 1.25rem;
    background: none;

    &:hover {
      border-color: $clr-primary;
    }

    &:focus {
      border-color: $clr-primary-dark;
    }
  }

  &__label {
    position: absolute;
    left: 1rem;
    top: 0.9rem;
    padding: 0 0.5rem;
    background-color: white;
    transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in;
  }

  &__button {
    display: block;
    margin-left: auto;
    padding: 0.75rem 2rem;
    background-color: $clr-primary;
    font-family: inherit;
    font-weight: inherit;
    border-radius: 0.5rem;
    outline: none;
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease-in;

    &:hover {
      background-color: $clr-primary-dark;
    }
  }
 }

 /* 
 1. When the input is in the focus state
 reduce the size of the label and move upwards 

 2. Keep label state when content is in input field 
 */

 .form__input:focus ~ .form__label,
 .form__input:not(:placeholder-shown).form__input:not(:focus) ~ .form__label {
  top: -0.5rem;
  left: 0.8rem;
  font-size: 0.8rem;
 }
	<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,700">
	<!-- Code by Angela Delise
	https://codepen.io/angeladelise/pen/MWeLPmR -->

	</head>

	<body>
	<form action="" class="form">
	<h1 class="form__title">Sign Up</h1>
	<p class="form__description">Get unlimited access to the latest design trends</p>

	<div class="form__group">
	<input type="text" id="email" class="form__input" placeholder=" " autocomplete="off">
	<label for="email" class="form__label">Email</label>
	</div>

	<div class="form__group">
	<input type="password" id="password" class="form__input" placeholder=" ">
	<label for="password" class="form__label">Password</label>
	</div>

	<button class="form__button">Sign Up</button>
	</form>
	</body>
	/* color variables */
	$clr-primary: #9dedff;
	$clr-primary-hover: #8ad6ff;
	$clr-primary-dark: #7bdff6;
	$clr-primary-light: #c7f5ff;
	$clr-gray100: #f0f7f8;
	$clr-gray200: #cfd8dc;
	$clr-gray300: #a7b7be;
	$clr-gray400: #6b7e86;
	$clr-gray500: #425a65;

	/* border radius */
	$radius: 1rem;

	*,
	*::before,
	*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	body {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	background-color: #79ceff;
	background-image: linear-gradient(
	315deg,
	#79ceff 0%,
	#dcb5ff 67%,
	#ffb8f0 100%
	);
	height: 100vh;
	display: grid;
	justify-content: center;
	align-items: center;
	color: $clr-gray500;
	}

	.form {
	width: 24rem;
	padding: 2rem;
	border-radius: $radius;
	background-color: white;

	&__title {
	margin-bottom: 0.5rem;
	}

	&__description {
	margin-bottom: 2rem;
	}

	&__group {
	position: relative;
	height: 3rem;
	margin-bottom: 1.5rem;
	}

	&__input {
	width: 100%;
	height: 100%;
	border: 2px solid $clr-gray200;
	border-radius: 0.5rem;
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	outline: none;
	padding: 1.25rem;
	background: none;

	&:hover {
	border-color: $clr-primary;
	}

	&:focus {
	border-color: $clr-primary-dark;
	}
	}

	&__label {
	position: absolute;
	left: 1rem;
	top: 0.9rem;
	padding: 0 0.5rem;
	background-color: white;
	transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in;
	}

	&__button {
	display: block;
	margin-left: auto;
	padding: 0.75rem 2rem;
	background-color: $clr-primary;
	font-family: inherit;
	font-weight: inherit;
	border-radius: 0.5rem;
	outline: none;
	border: none;
	cursor: pointer;
	transition: background-color 200ms ease-in;

	&:hover {
	background-color: $clr-primary-dark;
	}
	}
	}

	/*
	1. When the input is in the focus state
	reduce the size of the label and move upwards

	2. Keep label state when content is in input field
	*/

	.form__input:focus ~ .form__label,
	.form__input:not(:placeholder-shown).form__input:not(:focus) ~ .form__label {
	top: -0.5rem;
	left: 0.8rem;
	font-size: 0.8rem;
	}