CSS Modal

CSS Modal

// HTML

<p class="link-button">
	<a href="#subscribe">Подписаться</a>
</p>

<div id="subscribe" class="modal">
						<div class="content">
							<form class="forms">
								<h4>Подписка:</h4>
								<p>Да, судьба Джейн Смит глубоко волнует меня! Я хочу регулярно получать информацию о ее жизни, а также об иммиграционном законодательстве Британии.</p>
								<label>
									<span>Ваше имя:</span>
									<input type="text" name="name" required>
								</label>
								<label>
									<span>Ваш e-mail:</span>
									<input type="text" name="phone" required>
								</label>
								<p class="link-button">
									<a href="#no-move">Подписаться</a>
								</p>
							</form>
							<div class="close">
								<a href="#no-move"></a>
							</div>
						</div>
					</div>
					
	// CSS
	
	.modal
	background: transparent
	bottom: 50%
	height: 0
	left: 50%
	overflow: hidden
	position: absolute
	right: 50%
	top: 50%
	width: 0
	z-index: 2
	&:target
		background: rgba(0,0,0,.75)
		bottom: 0
		height: 100%
		left: 0
		right: 0
		transition: background .5s
		top: 0
		width: 100%
		.content
			background: transparentize($main-color, .3)
			border-radius: .5rem
			box-shadow: $shadow-color 0 0 0 1rem
			left: calc(50% - 13rem)
			padding: 2rem
			position: absolute
			top: 10%
			width: 26rem
			.forms
				margin-bottom: 0
				p
					margin: 2rem 0 !important
					width: 100% !important
			@media #{$mq-small}
				left: calc(50% - 25rem)
				width: 50rem
		.close
			position: absolute
			right: -1rem
			top: -1rem
			z-index: 1
			a
				background: $text-color
				border: .2rem solid #fff
				border-radius: 50%
				display: block
				height: 4rem
				overflow: hidden
				width: 4rem
			&::after
				color: #fff
				content: "X"
				font-size: 3rem
				height: 4rem
				left: 0
				line-height: 4rem
				pointer-events: none
				position: absolute
				text-align: center
				top: 0
				width: 4rem