Frontend Forever

Meowatar

About this Code

Hello reader, I am takaneichinose. Nice to meet you again in this free code sharing website. In this post I am going to explain about Meowatar. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="topbar">
	<i class="fa-solid fa-paw"></i>
	<span class="logo-text">MEOWATAR</span>
</div>
<form class="container">
	
	<input type="radio" name="eyes" id="eyes_round" class="hidden" checked />
	<input type="radio" name="eyes" id="eyes_droopy" class="hidden" />
	<input type="radio" name="eyes" id="eyes_border" class="hidden" />
	
	<input type="radio" name="mouth" id="mouth_w" class="hidden" checked />
	<input type="radio" name="mouth" id="mouth_inverted-y" class="hidden" />
	<input type="radio" name="mouth" id="mouth_smile" class="hidden" />
	<input type="radio" name="mouth" id="mouth_triangle" class="hidden" />
	
	<input type="radio" name="hat" id="hat_none" class="hidden" checked />
	<input type="radio" name="hat" id="hat_top-hat" class="hidden" />
	<input type="radio" name="hat" id="hat_ribbon" class="hidden" />
	

	
	<input type="radio" name="fur" id="fur_white" class="hidden" checked />
	<input type="radio" name="fur" id="fur_orange" class="hidden" />
	<input type="radio" name="fur" id="fur_brown" class="hidden" />
	<input type="radio" name="fur" id="fur_gray" class="hidden" />
	<input type="radio" name="fur" id="fur_blue" class="hidden" />
	
	<div class="avatar-container">
		<div class="avatar-frame">
			<div class="avatar">
				<div class="body">
					<div class="arm left"></div>
					<div class="arm right"></div>
				</div>
				<div class="head">
					<div class="ear left"></div>
					<div class="ear right"></div>
					<div class="eye left"></div>
					<div class="eye right"></div>
					<div class="nose"></div>
					<div class="mouth"></div>
					<div class="whisker top left"></div>
					<div class="whisker middle left"></div>
					<div class="whisker bottom left"></div>
					<div class="whisker top right"></div>
					<div class="whisker middle right"></div>
					<div class="whisker bottom right"></div>
					<div class="hat"></div>
				</div>
				<div class="leg left"></div>
				<div class="leg right"></div>
			</div>
		</div>
		<div class="buttons-container">
			<button type="button" id="btn_save" title="Ain't working lol">
				<i class="fa-regular fa-floppy-disk"></i>
				Save changes
			</button>
			<button type="reset" id="btn_discard" title="No JavaScript so, no confirmation">
				<i class="fa-solid fa-xmark"></i>
				Discard changes
			</button>
		</div>
	</div>
	<div class="selection-container">
		<div class="selection-list">
			<a href="#eyes_selection" class="selection-link">
				<i class="fa-regular fa-eye"></i>
				<span class="selection-link-text">Eyes</span>
			</a>
			<a href="#mouth_selection" class="selection-link">
				<i class="fa-regular fa-face-smile"></i>
				<span class="selection-link-text">Mouth</span>
			</a>
			<a href="#hat_selection" class="selection-link">
				<i class="fa-solid fa-hat-cowboy"></i>
				<span class="selection-link-text">Hat</span>
			</a>

			<a href="#fur_selection" class="selection-link">
				<i class="fa-solid fa-circle"></i>
				<span class="selection-link-text">Fur</span>
			</a>
		</div>
		<div class="selections">
			<div id="eyes_selection" class="selection">
				<label for="eyes_round" class="selection-item">
					<span class="eyes round"></span>
				</label>
				<label for="eyes_droopy" class="selection-item">
					<span class="eyes droopy"></span>
				</label>
				<label for="eyes_border" class="selection-item">
					<span class="eyes border"></span>
				</label>
			</div>
			<div id="mouth_selection" class="selection">
				<label for="mouth_w" class="selection-item">
					<span class="selection-mouth w"></span>
				</label>
				<label for="mouth_inverted-y" class="selection-item">
					<span class="selection-mouth inverted-y"></span>
				</label>
				<label for="mouth_smile" class="selection-item">
					<span class="selection-mouth smile"></span>
				</label>
				<label for="mouth_triangle" class="selection-item">
					<span class="selection-mouth triangle"></span>
				</label>
			</div>
			<div id="hat_selection" class="selection">
				<label for="hat_none" class="selection-item">
					<span class="selection-hat none"></span>
				</label>
				<label for="hat_top-hat" class="selection-item">
					<span class="selection-hat top-hat"></span>
				</label>
				<label for="hat_ribbon" class="selection-item">
					<span class="selection-hat ribbon"></span>
				</label>
			</div>

			<div id="fur_selection" class="selection">
				<label for="fur_white" class="selection-item">
					<span class="fur white"></span>
				</label>
				<label for="fur_orange" class="selection-item">
					<span class="fur orange"></span>
				</label>
				<label for="fur_brown" class="selection-item">
					<span class="fur brown"></span>
				</label>
				<label for="fur_gray" class="selection-item">
					<span class="fur gray"></span>
				</label>
				<label for="fur_blue" class="selection-item">
					<span class="fur blue"></span>
				</label>
			</div>
		</div>
	</div>
</form>
  
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,700');

$selections: ['eyes', 'mouth', 'hat', 'dress', 'fur'];

$eyes: ['round', 'droopy', 'border'];
$mouths: ['w', 'inverted-y', 'smile', 'triangle'];
$hats: ['none', 'top-hat', 'ribbon'];
$dresses: ['none', 'tie', 'skirt'];
$furs: [
	('white', #ededed),
	('orange', #e8813c),
	('brown', #8a5846),
	('gray', #c2c2c2),
	('blue', #3c4259),
];

$sm: 512px;
$md: 768px;
$lg: 960px;
$xl: 1024px;

$bg-color: #2f2f2f;
$main-color: #fed235;
$sub-color: #fafafa;
$selection-color: #272727;

$spacing-ss: 0.5rem;
$spacing-xs: 0.75rem;
$spacing-sm: 1rem;
$spacing-md: 1.25rem;
$spacing-lg: 2rem;

$transition-72: 72ms;

$avatar-frame-width: 24rem;
$avatar-frame-width-sm: 16rem;

$avatar-frame-shadow: 0 1.5rem 3.75rem rgba(#000000, 0.75) inset;
$avatar-frame-shadow-sm: 0 1rem 3rem rgba(#000000, 0.3) inset;

$head-size: 10rem;

$body-width: 4rem;
$body-height: 5rem;

$selection-item-height: 7.5rem;

$eyes-round-size: 0.5rem;

$eyes-droopy-width: 2rem;
$eyes-droopy-height: 1rem;
$eyes-droopy-pupil-width: 1.1rem;
$eyes-droopy-pupil-height: 0.6rem;

$eyes-border-size: 1rem;
$eyes-border-border-width: 0.15rem;

$ear-width: 4.5rem;
$ear-height: 4.5rem;
$ear-x: -0.9rem;
$ear-y: -2rem;
$ear-angle: 26deg;

$eye-x: 2.5rem;
$eye-y: 4.25rem;

$nose-width: 1.25rem;
$nose-height: 0.75rem;
$nose-y: 5.5rem;

$mouth-border-width: 0.2rem;
$mouth-y: 7rem;

$mouth-w-width: 2.5rem;
$mouth-w-height: 0.5rem;
$mouth-w-skew: 10deg;

$mouth-inverted-y-height: 1rem;
$mouth-inverted-y-sin-45: 0.70710678118;
$mouth-inverted-y-cos-45: 0.70710678118;

$mouth-smile-width: 2.5rem;
$mouth-smile-height: 0.75rem;

$whisker-width: 3.5rem;
$whisker-height: 0.2rem;
$whisker-x: -1.5rem;
$whisker-top-y: 5.25rem;
$whisker-middle-y: 6.5rem;
$whisker-bottom-y: 7.75rem;
$whisker-top-angle: 10deg;
$whisker-middle-angle: 3deg;
$whisker-bottom-angle: -5deg;

$mouth-triangle-width: 1.75rem;
$mouth-triangle-height: 1.25rem;

$arm-width: 1.5rem;
$arm-height: 2.25rem;
$arm-x: 0.2rem;
$arm-y: 1.1rem;
$arm-angle: 65deg;
$arm-idle-angle: 75deg;

$leg-width: 2.15rem;
$leg-height: 1.25rem;
$leg-x: 2.25rem;
$leg-y: calc(100% + 0.05rem);

$idle-y: 0.2rem;
$idle-animation: idle 512ms ease-out infinite;
$arm-left-idle-animation: arm-left-idle 512ms ease-out infinite;
$arm-right-idle-animation: arm-right-idle 512ms ease-out infinite;

$hat-top-hat-color: #000000;
$hat-top-hat-width: 8rem;
$hat-top-hat-height: 8rem;
$hat-top-hat-y: -4.25rem;

$hat-top-hat-base-width: 12rem;
$hat-top-hat-base-height: 1rem;

$hat-top-hat-ribbon-color: #c92424;
$hat-top-hat-ribbon-height: 1rem;

$selection-none-size: 4rem;
$selection-none-color: #ffffff;
$selection-none-width: 0.5rem;

$hat-ribbon-color: #de6291;
$hat-ribbon-width: 1.75rem;
$hat-ribbon-height: 1.75rem;
$hat-ribbon-depth: 0.75rem;
$hat-ribbon-x: 8.5rem;
$hat-ribbon-y: 0.75rem;
$hat-ribbon-angle: 25deg;

@mixin eye-round() {
	background-color: #000000;
	width: $eyes-round-size;
	height: $eyes-round-size;
	border-radius: 99999px;
}

@mixin eye-droopy() {
	background-color: #ffffff;
	width: $eyes-droopy-width;
	height: $eyes-droopy-height;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	border-radius: 0 0 99999px 99999px;

&::before {
		content: '';
		background-color: #000000;
		width: $eyes-droopy-pupil-width;
		height: $eyes-droopy-pupil-height;
		display: block;
		border-radius: 0 0 99999px 99999px;
	}
}

@mixin eye-border() {
	background-color: #ffffff;
	width: $eyes-border-size;
	height: $eyes-border-size;
	border: solid $eyes-border-border-width #000000;
	border-radius: 99999px;
}

@mixin mouth-w() {
	display: flex;

&::before, &::after {
		content: '';
		width: $mouth-w-width / 2;
		height: $mouth-w-height;
		border: solid $mouth-border-width #000000;
		border-top: none;
		display: block;
		border-radius: 0% 0% 50% 50% / 0% 0% 100% 100%;
	}
	
	&::before {
		transform: translateX($mouth-border-width / 2) skewY(-$mouth-w-skew);
	}
	
	&::after {
		transform: translateX($mouth-border-width / -2) skewY($mouth-w-skew);
	}
}

@mixin mouth-inverted-y() {
	background-color: #000000;
	width: $mouth-border-width;
	height: $mouth-inverted-y-height;
	position: relative;
	
	&::before {
		// HACK: 1rem * cos(45) or 1rem * sin(45) causes invalid operation
		$width: $mouth-inverted-y-height * $mouth-inverted-y-cos-45;
		$height: $mouth-inverted-y-height * $mouth-inverted-y-sin-45;

content: '';
		width: $width;
		height: $height;
		border: solid $mouth-border-width #000000;
		border-bottom: none;
		border-right: none;
		display: block;
		position: absolute;
		top: calc(100% - #{$mouth-border-width});
		left: calc(50% - #{$width / 2});
		transform-origin: $mouth-border-width / 2;
		transform: rotate(45deg);
	}
}

@mixin mouth-smile() {
	width: $mouth-smile-width;
	height: $mouth-smile-height;
	border: solid $mouth-border-width #000000;
	border-top: none;
	border-radius: 0% 0% 50% 50% / 0% 0% 100% 100%;
}

@mixin mouth-triangle() {
	width: 0;
	height: 0;
	border-bottom: solid $mouth-triangle-height #000000;
	border-left: solid $mouth-triangle-width / 2 transparent;
	border-right: solid $mouth-triangle-width / 2 transparent;
}

@mixin hat-top-hat($set-position) {
	background-color: $hat-top-hat-color;
	width: $hat-top-hat-width;
	height: $hat-top-hat-height;
	
	@if $set-position {
		top: $hat-top-hat-y;
		left: 50%;
		transform: translateX(-50%);
	}
	
	&::before, &::after {
		content: '';
		display: block;
		position: absolute;
	}
	
	&::before {
		background-color: $hat-top-hat-ribbon-color;
		width: 100%;
		height: $hat-top-hat-ribbon-height;
		position: absolute;
		left: 0;
		bottom: $hat-top-hat-base-height;
	}
	
	&::after {
		background-color: $hat-top-hat-color;
		width: $hat-top-hat-base-width;
		height: $hat-top-hat-base-height;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

@mixin hat-ribbon($set-position) {
	transform: rotate($hat-ribbon-angle);
	
	@if $set-position {
		top: $hat-ribbon-y;
		left: $hat-ribbon-x;
	}
	
	&::before, &::after {
		content: '';
		width: 0;
		height: $hat-ribbon-depth;
		position: absolute;
	}
	
	&::before {
		border-top: solid ($hat-ribbon-height / 2) transparent;
		border-bottom: solid ($hat-ribbon-height / 2) transparent;
		border-left: solid $hat-ribbon-width $hat-ribbon-color;
		right: 0;
	}
	
	&::after {
		border-top: solid ($hat-ribbon-height / 2) transparent;
		border-bottom: solid ($hat-ribbon-height / 2) transparent;
		border-right: solid $hat-ribbon-width $hat-ribbon-color;
		left: 0;
	}
}

@mixin selection-none() {
	width: $selection-none-size;
	height: $selection-none-size;
	border: solid $selection-none-width $selection-none-color;
	display: flex;
	justify-content: center;
	border-radius: 99999px;
	
	&::before {
		content: '';
		background-color: $selection-none-color;
		width: $selection-none-width;
		height: 100%;
		display: block;
		transform: rotate(45deg);
	}
}

:root, button {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
}

* {
	box-sizing: border-box;
}

body {
	background-color: $bg-color;
}

.topbar {
	color: #ffffff;
	font-size: 2rem;
	font-weight: bold;
	background-color: #0a0a0a;
	padding: $spacing-sm;
	margin-bottom: $spacing-sm;
}

.logo-text {
	display: none;
}

.container {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.avatar-container {
	display: flex;
	flex-direction: column;
}

.avatar-frame {
	background-color: $bg-color;
	width: 100%;
	height: $avatar-frame-width;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	box-shadow: $avatar-frame-shadow;
}

.avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.head {
	width: $head-size;
	height: $head-size;
	order: 1;
	position: relative;
	border-radius: 99999px;
	animation: $idle-animation;
}

.ear {
	width: 0;
	height: 0;
	border-bottom: solid $ear-width;
	border-left: solid ($ear-height / 2) transparent;
	border-right: solid ($ear-height / 2) transparent;
	position: absolute;
	top: $ear-y;
	
	&.left {
		left: $ear-x;
		transform: rotate(-$ear-angle);
	}
	
	&.right {
		right: $ear-x;
		transform: rotate($ear-angle);
	}
}

.eye {
	position: absolute;
	top: $eye-y;
	
	&.left {
		left: $eye-x;
		transform: translateX(-50%);
	}
	
	&.right {
		right: $eye-x;
		transform: translateX(50%);
	}
}

.nose {
	background-color: #000000;
	width: $nose-width;
	height: $nose-height;
	position: absolute;
	top: $nose-y;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;
}

.mouth {
	position: absolute;
	top: $mouth-y;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.whisker {
	background-color: #000000;
	width: $whisker-width;
	height: $whisker-height;
	position: absolute;
	
	&.top {
		top: $whisker-top-y;
		
		&.left {
			transform: rotate($whisker-top-angle);
		}
		
		&.right {
			transform: rotate(-$whisker-top-angle);
		}
	}
	
	&.middle {
		top: $whisker-middle-y;
		
		&.left {
			transform: rotate($whisker-middle-angle);
		}
		
		&.right {
			transform: rotate(-$whisker-middle-angle);
		}
	}
	
	&.bottom {
		top: $whisker-bottom-y;
		
		&.left {
			transform: rotate($whisker-bottom-angle);
		}
		
		&.right {
			transform: rotate(-$whisker-bottom-angle);
		}
	}
	
	&.left {
		left: $whisker-x;
	}
	
	&.right {
		right: $whisker-x;
	}
}

.hat {
	position: absolute;
}

.body {
	width: $body-width;
	height: $body-height;
	margin-top: -1rem;
	order: 2;
	position: relative;
	border-radius: 99999px;
	animation: $idle-animation;
}

.arm {
	width: $arm-width;
	height: $arm-height;
	position: absolute;
	top: $arm-y;
	border-radius: 0 0 99999px 99999px;
	
	&.left {
		left: $arm-x;
		transform-origin: top left;
		transform: rotate($arm-angle);
		animation: $arm-left-idle-animation;
	}
	
	&.right {
		right: $arm-x;
		transform-origin: top right;
		transform: rotate(-$arm-angle);
		animation: $arm-right-idle-animation;
	}
}

.leg {
	width: $leg-width;
	height: $leg-height;
	position: absolute;
	top: $leg-y;
	border-radius: 99999px 99999px 0 0;
	
	&.left {
		left: $leg-x;
	}
	
	&.right {
		right: $leg-x;
	}
}

.buttons-container {
	width: 100%;
	padding: $spacing-md;
	display: flex;
	flex-direction: column;
	
	& > button {
		padding: $spacing-sm $spacing-lg;
		border: 0;
		margin-bottom: $spacing-md;
		cursor: pointer;
		border-radius: $spacing-ss;
		transition: background-color $transition-72 ease-out;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
}

#btn_save {
	background-color: $main-color;
	
	&:hover {
		background-color: darken($main-color, 10%);
	}
	
	&:active {
		background-color: darken($main-color, 20%);
	}
}

#btn_discard {
	background-color: $sub-color;
	
	&:hover {
		background-color: darken($sub-color, 10%);
	}
	
	&:active {
		background-color: darken($sub-color, 20%);
	}
}

.selection-container {
	width: 100%;
}

.selection-list {
	display: flex;
}

.selection-link {
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	width: 100%;
	padding: $spacing-sm $spacing-md;
	transition:
		color $transition-72 ease-out,
		background-color $transition-72 ease-out;
	cursor: pointer;
	
	&:hover {
		background-color: rgba(#000000, 0.15);
	}
}

.selection-link-text {
	display: none;
	margin-top: $spacing-ss;
}

.selections {
	position: relative;
}

.selection {
	width: 100%;
	padding: $spacing-md;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: $spacing-xs;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;

&:target {
		opacity: 1;
		pointer-events: auto;
	}
}

.selection-item {
	background-color: $selection-color;
	height: $selection-item-height;
	border-radius: $spacing-xs;
	display: grid;
	justify-content: center;
	align-items: center;
	transition: background-color $transition-72 ease-out;
	cursor: pointer;
	
	&:hover {
		background-color: darken($selection-color, 5%);
	}
	
	&:active {
		background-color: darken($selection-color, 10%);
	}
}

.eyes {
	&.round {
		@include eye-round();
	}

&.droopy {
		@include eye-droopy();
	}

&.border {
		@include eye-border();
	}
}

.selection-mouth {
	&.w {
		@include mouth-w();
	}

&.inverted-y {
		@include mouth-inverted-y();
	}

&.smile {
		@include mouth-smile();
	}

&.triangle {
		@include mouth-triangle();
	}
}

.selection-hat {
	&.none {
		@include selection-none();
	}
	
	&.top-hat {
		@include hat-top-hat(false);
		position: relative;
		transform: scale(0.5);
	}
	
	&.ribbon {
		@include hat-ribbon(false);
		position: relative;
	}
}

.fur {
	display: block;
	width: $spacing-lg;
	height: $spacing-lg;
	border-radius: 99999px;
}

@each $selection in $selections {
	.container:has(##{$selection}_selection:target) {
		a[href="##{$selection}_selection"] {
			color: #000000;
			background-color: $main-color;
		}
	}
}

@each $eye in $eyes {
	.container:has(#eyes_#{$eye}:checked) {
		label[for="eyes_#{$eye}"] {
			background-color: $main-color;
		}

.eye {
			// HACK: meta.get-mixin and meta.apply doesn't work
			@if $eye == 'round' {
				@include eye-round();
			} @else if $eye == 'droopy' {
				@include eye-droopy();
			} @else if $eye == 'border' {
				@include eye-border();
			}
		}
	}
}

@each $mouth in $mouths {
	.container:has(#mouth_#{$mouth}:checked) {
		label[for="mouth_#{$mouth}"] {
			background-color: $main-color;
		}
		
		.avatar > .head > .mouth {
			@if $mouth == 'w' {
				@include mouth-w();
			} @else if $mouth == 'inverted-y' {
				@include mouth-inverted-y();
			} @else if $mouth == 'smile' {
				@include mouth-smile();
			} @else if $mouth == 'triangle' {
				@include mouth-triangle();
			}
		}
	}
}

@each $hat in $hats {
	.container:has(#hat_#{$hat}:checked) {
		label[for="hat_#{$hat}"] {
			background-color: $main-color;
		}

.hat {
			@if $hat == 'top-hat' {
				@include hat-top-hat(true);
			} @else if $hat == 'ribbon' {
				@include hat-ribbon(true);
			}
		}
	}
}

@each $fur, $color in $furs {
	.container:has(#fur_#{$fur}:checked) {
		label[for="fur_#{$fur}"] {
			background-color: $main-color;
		}
		
		.avatar {
			& > div:is(.head, .body, .leg) {
				background-color: $color;
				
				& > div:is(.arm) {
					background-color: $color;
				}
			}
			
			& > .head > .ear {
				border-bottom-color: $color;
			}
		}
	}
	
	.fur.#{$fur} {
		background-color: $color;
	}
}

.hidden {
	display: none;
}

@keyframes idle {
	0% {
		transform: translateY(0rem);
	}
	
	50% {
		transform: translateY($idle-y);
	}
	
	0% {
		transform: translateY(0rem);
	}
}

@keyframes arm-left-idle {
	0% {
		transform: rotate($arm-angle);
	}
	
	50% {
		transform: rotate($arm-idle-angle);
	}
	
	0% {
		transform: rotate($arm-angle);
	}
}

@keyframes arm-right-idle {
	0% {
		transform: rotate(-$arm-angle);
	}
	
	50% {
		transform: rotate(-$arm-idle-angle);
	}
	
	0% {
		transform: rotate(-$arm-angle);
	}
}

@media screen and (width >= $sm) {
	.logo-text {
		display: inline-block;
	}
	
	.avatar-frame {
		width: $avatar-frame-width-sm;
	}
	
	.avatar-container {
		flex-direction: row;
	}
	
	.avatar-frame {
		box-shadow: $avatar-frame-shadow-sm;
	}
	
	.buttons-container {
		padding-top: 0;
	}
	
	.selection-container {
		margin-top: $spacing-md;
	}
	
	.selection-link-text {
		display: block;
	}
}

@media screen and (width >= $md) {
	.container {
		max-width: $lg;
		margin: auto;
		flex-direction: row;
		align-items: flex-start;
	}
	
	.avatar-container {
		flex-direction: column;
	}
	
	.buttons-container {
		padding-top: $spacing-md;
	}
	
	.selection-container {
		margin-top: 0;
	}
	
	.selection-list {
		padding-left: $spacing-md;
		padding-right: $spacing-md;
	}
	
	.selection {
		min-width: $sm;
	}
}

@media screen and (width >= $lg) {
	.buttons-container {
		padding-left: 0;
		padding-right: 0;
	}
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Meowatar

About this Code

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever