door

door.markdown

door

A Pen by buoyantair on CodePen.

License.

index.pug

.door
	h1.title The Door!
	.sculpt
		.topsculpt
			.seg
				.bevel
			.seg
				.bevel
		.bottomsculpt
			.seg
				.bevel
			.seg
				.bevel

style.sass

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap')

$door-color: #A37B4B
html
	height: 100vh
	width: 100vw
	display: flex
	flex-flow: column
	justify-content: center
	background: #F9EBE0
	font-family: 'Dancing Script', cursive
	overflow: hidden

.door
	margin: 0 auto
	width: 30vw
	height: 60vw
	background: $door-color
	position: relative
	&:after
		content: ''
		display: block
		width: inherit
		height: 20%
		position: absolute
		bottom: -20%
		border-radius: 100%
		transform: scale(1.5)
		background: radial-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 50%)
	.title
		width: 100vw
		text-align: center
		position: absolute
		bottom: -20%
		left: 50%
		transform: translateX(-50%)
		font-size: 20vw
		z-index: 1
		color: white
		text-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.2)
		letter-spacing: -0.9vw

.sculpt
	position: absolute
	top: 50%
	left: 50%
	transform: translate(-50%, -50%)
	height: 92%
	width: 90%
	box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.5)

.topsculpt, .bottomsculpt
	width: 80%
	height: 55%
	position: relative
	top: 10%
	left: 50%
	transform: translate(-50%, -5%)
	display: flex
	flex-flow: row
	justify-content: center
	border-radius: 10px
	box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.5)
	.seg
		width: 40%
		background: $door-color
		margin: 10%
		box-shadow:  0 0 10px 2px rgba(0, 0, 0, 0.5)
		border-radius: 10px
	
.bottomsculpt
	height: 20%
	margin-top: 5vw