<body>
	<div class="selector-menu">
		<a href="#"><img src="https://svgshare.com/i/LAF.svg" alt="event" /></a>
		<a href="#"><img src="https://svgshare.com/i/LAG.svg" alt="finance" /></a>
		<a href="#" class="current"><img src="https://svgshare.com/i/L9P.svg" alt="cafe" /></a>
		<a href="#"><img src="https://svgshare.com/i/L9Z.svg" alt="gift" /></a>
		<a href="#"><img src="https://svgshare.com/i/L9s.svg" alt="pets" /></a>
	</div>

	<div class="menu-container">
		<div class="header-img">
			<div class="overlay"></div>
			<div class="food">
				<h1>Food</h1>
				<div>
					<img src="https://svgshare.com/i/L8h.svg" alt="location" />
					<p>Madrid</p>
				</div>
			</div>
		</div>

		<ul class="list">
			<li class="item">
				<a href="#">Pizza</a>
				<p>17</p>
			</li>
			<li class="item">
				<a href="#">Sushi</a>
				<p>9</p>
			</li>
			<li class="item">
				<a href="#">Gourmet</a>
				<p>22</p>
			</li>
			<li class="item">
				<a href="#">Burger</a>
				<p>14</p>
			</li>
		</ul>
	</div>
</body>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root {
	--background-color: #55557e;
}

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

body {
	background: var(--background-color);
	font-family: "Roboto", sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

a {
	text-decoration: none;
	outline: none;
}

ul {
	list-style: none;
}

ul li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}

ul li:hover p {
	transform: scale(1.7);
	opacity: 1;
}

ul li:hover a {
	opacity: 1;
}

.selector-menu {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
}

.selector-menu a {
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 75px;
	height: 60px;
}

.selector-menu a:hover:not(:focus) {
	background: rgba(0, 0, 0, 0.6);
}

.selector-menu a:focus {
	transform: scale(1.2);
	background: rgba(0, 0, 0, 0.9);
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.6);
}

.menu-container {
	width: 300px;
}

.header-img {
	background: url("https://i.ibb.co/5M9Psvv/food.jpg") no-repeat right/cover;
	height: 150px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	position: relative;
}

.overlay {
	background: rgba(0, 0, 0, 0.2);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	position: absolute;
	width: 100%;
	height: 100%;
}

.food {
	color: #fff;
	position: absolute;
	bottom: 20px;
	left: 20px;
}

.food h1 {
	font-size: 1.6rem;
}

.food div {
	display: flex;
	align-items: center;
}

.food p {
	font-size: 0.8rem;
}

.food img {
	width: 15px;
}

.list a,
.list p {
	color: #000;
	opacity: 0.4;
}

.item {
	background: #fff;
	padding: 20px;
}

.item:not(:last-child) {
	border-bottom: 1px solid #dedede;
}

.item:last-child {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

@media (max-height: 500px) {
	body {
		flex-direction: row;
	}

	.selector-menu {
		flex-direction: column;
		margin-right: 25px;
	}
}

document.querySelector(".current").focus();

// The screens for each activity will be uploaded soon.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.