Neon Food Truck Menu

index.html

<div class="menu">
	<div id="main-menu">
		<h2>🍔 Burgers&nbsp;&nbsp;</h2>
		<p><span>Hamburger</span>
			<span>$3</span>
		</p>
		<p><span>Cheeseburger</span>
			<span>$3.50</span>
		</p>
		<p><span>Double Cheese Burger</span>
			<span>$4.50</span>
		</p>
		<p><span> Veggie Burger</span>
			<span>$3</span>
		</p>
		<h2>🌭 Hot Dogs&nbsp;&nbsp;</h2>
		<p><span> Hot Dog</span> <span>$3</span></p>
		<p><span> Chilli Dog</span> <span>$5</span></p>
		<p><span> Veggie Hot Dog</span> <span>$3</span></p>
		<h2>🌶️ Chili_</h2>
		<p><span> Cup</span> <span>$2</span></p>
		<p><span>Bowl</span> <span>$4</span></p>
	</div>
	<div id="right">
		<div id="sides">
			<h2>🍟 Sides&nbsp;&nbsp;</h2>
			<p><span>Chips</span> <span>$1</span></p>
			<p><span>Fries</span> <span>$2</span></p>
			<p><span>Sweet Potato Fries</span> <span>$3</span></p>
			<p><span>Onion Rings</span> <span>$3</span></p>
		</div>
		<div id="drinks">
			<h2>🥤 Drinks&nbsp;&nbsp;</h2>
			<p><span>Soda</span> <span>$1</span></p>
			<p><span>Iced Tea</span> <span>$1</span></p>
			<p><span>Fresh Squeezed Lemonade</span> <span>$2</span></p>
		</div>
	</div>
</div>

neon-food-truck-menu.markdown

Neon Food Truck Menu

A Pen by Madleen on CodePen.

License.

style.css

@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
	background: black;
	font-family: "Roboto", sans-serif;
	color: white;
	font-weight:300;
}
.menu {
	display: flex;
	flex-direction: row;
	justify-content: center;
	text-align:center;
}

#right {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-content: space-around;
}

#main-menu {
/*	text-shadow: 0 0 2px #f7f700, 0 0 2px #cde400, 0 0 3px #cde400,
		0 0 3px #cde400; */
	box-shadow: 0px 0px 3px 2px #f7f700, 0 0 3px #cde400, inset 0px 0px 9px #f7f700;
	border: 1px solid #fcfc99;
	border-radius: 3px;
	padding: 15px 40px;
	margin-right: 40px;
	animation: flicker 10s infinite;
}

#sides {
	box-shadow: 0px 0px 3px 2px #34f700, 0 0 3px #cde400, inset 0px 0px 9px #34f700;
	border: 1px solid #9afb80;
	border-radius: 3px;
	padding: 15px 40px;
	animation: slowglow 14s infinite;
}

#drinks {
	box-shadow: 0px 0px 3px #f700e1, 0px 0px 6px 2px #f700e1, 0 0 3px #cde400,
		inset 0px 0px 9px #f700e1;
	border: 1px solid #fc99f3;
	border-radius: 3px;
	padding: 15px 40px;
	animation: glow 7s infinite;
}

h2 {
	text-decoration: underline;
}

/* Main Menu! */
@-webkit-keyframes flicker {
	0% {
		text-shadow: 0 0 1px #f7f700, 0 0 3px #cde400, 0 0 2px #cde400;
		box-shadow: 0px 0px 3px 2px #f7f700, 0 0 3px #cde400,
			inset 0px 0px 9px #f7f700;
	}

	30% {
		text-shadow: 0 0 2px #f7f700, 0 0 3px #cde400, 0 0 3px #cde400;
		box-shadow: 0px 0px 3px 2px #f7f700, 0 0 3px #cde400,
			inset 0px 0px 9px #f7f700;
	}

	31% {
		text-shadow: 0 0 2px #f7f700, 0 0 3px #cde400, 0 0 3px #cde400;
			0 0 7px #cde400, 0 0 4px #cde400;
		box-shadow: 0px 0px 7px 3px #f7f700, 0 0 3px #cde400,
			inset 0px 0px 12px #f7f700;
	}

	32% {
		text-shadow: 0 0 1px #f7f700, 0 0 3px #cde400, 0 0 2px #cde400;
		box-shadow: 0px 0px 6px 2px #f7f700, 0 0 4px #cde400,
			inset 0px 0px 9px #f7f700;
	}

	33% {
		text-shadow: 0 0 1px #f7f700, 0 0 3px #cde400, 0 0 2px #cde400;
		box-shadow: 0px 0px 6px 2px #f7f700, 0 0 4px #cde400,
			inset 0px 0px 9px #f7f700;
	}

	100% {
		text-shadow: 0 0 1px #f7f700, 0 0 3px #cde400, 0 0 2px #cde400;
		box-shadow: 0px 0px 3px 2px #f7f700, 0 0 3px #cde400,
			inset 0px 0px 9px #f7f700;
	}
}

/* Drinks! */
@-webkit-keyframes glow {
	0% {
		text-shadow: 0 0 2px #f700e1, 0 0 2px #f700e1, 0 0 3px #cde400, 0 0 3px #cde400;
		box-shadow: 0px 0px 3px #f700e1, 0px 0px 6px 2px #f700e1, 0 0 3px #cde400, 0px 0px 3px 2px #f700e1,
			inset 0px 0px 9px #f700e1;
	}
	50% {
		text-shadow: 0 0 3px #f700e1, 0 0 3.5px #f700e1, 0 0 3.5px #cde400, 0 0 3px #cde400;
		box-shadow: 0px 0px 5px #f700e1, 0px 0px 7px 3px #f700e1, 0 0 3px #cde400, 0px 0px 3px 3px #f700e1,,
			inset 0px 0px 11px #f700e1;
	}
	100% {
		text-shadow: 0 0 2px #f700e1, 0 0 2px #f700e1, 0 0 3px #cde400, 0 0 3px #cde400;
		box-shadow: 0px 0px 3px #f700e1, 0px 0px 6px 2px #f700e1, 0 0 3px #cde400, 0px 0px 3px 2px #f700e1,
			inset 0px 0px 9px #f700e1;
	}
}

/* Sides! */
@-webkit-keyframes slowglow {
	0% {
		text-shadow: 0 0 2px #34f700, 0 0 2px #34f700, 0 0 2px #cde400, 0 0 2px #cde400;
		box-shadow: 0px 0px 4px 3px #34f700, 0 0 3px #cde400,
			inset 0px 0px 9px #34f700;
	}
	50% {
		text-shadow: 0 0 3.5px #34f700, 0 0 3px #34f700, 0 0 2px #cde400, 0 0 3.5px #cde400;
		box-shadow: 0px 0px 6px 3px #34f700, 0 0 4px #cde400,
			inset 0px 0px 13px #34f700;
	}
	100% {
		text-shadow: 0 0 2px #34f700, 0 0 2px #34f700, 0 0 2px #cde400, 0 0 2px #cde400;
		box-shadow: 0px 0px 4px 3px #34f700, 0 0 3px #cde400,
			inset 0px 0px 9px #34f700;
	}
}