AXB.ro
Grafica si animatii din HTML si CSS. Cafenea.
Cafenea

Cafenea

O mica schita a unei cafenele usor colorate. A fost o mica "distractie" scrierea codului pentru cele doua usi si ferestrele de langa ele, pastrand proportiile. Stalpul a fost o alta aventura in cod. Acesta din urma, trebuie sa ramana pe loc la o rezolutie mai mica de ecran.

Cafenea

Cafenea

T
E
C
H
COFFEE SHOP
CLOSED
CLOSED
✋
HTML

<div class="coffeeshop">
	<div class="coffeeshop-area">
		<div class="coffeeshop-top">
			<div class="coffeeshop-layer">
				<div class="coffeeshop-layer-sun"></div>
			</div>
			<div class="coffeeshop-layer">
				<div class="coffeeshop-layer-buildings">
					<div class="coffeeshop-layer-building-back">
						<div class="coffeeshop-layer-building-back-roof"></div>
						<div class="coffeeshop-layer-building-back-body">
							<div class="coffeeshop-layer-building-back-body-layer">
								<div class="coffeeshop-layer-building-back-body-layer-windows">
									<div class="coffeeshop-layer-building-back-body-layer-window-row">
										<div class="coffeeshop-layer-building-back-body-layer-window">
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
										</div>
										<div class="coffeeshop-layer-building-back-body-layer-window">
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
										</div>
									</div>
									<div class="coffeeshop-layer-building-back-body-layer-window-row">
										<div class="coffeeshop-layer-building-back-body-layer-window"></div>
										<div class="coffeeshop-layer-building-back-body-layer-window">
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
											<div class="coffeeshop-layer-building-back-body-layer-window-glass">
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
												<div class="coffeeshop-layer-building-back-body-layer-window-glass-area"></div>
											</div>
										</div>
									</div>
								</div>
								<div class="coffeeshop-layer-building-back-body-layer-garage">
									<div class="coffeeshop-layer-building-back-body-layer-garage-top"></div>
									<div class="coffeeshop-layer-building-back-body-layer-garage-body">
										<div class="coffeeshop-layer-building-back-body-layer-garage-body-line"></div>
										<div class="coffeeshop-layer-building-back-body-layer-garage-body-line"></div>
										<div class="coffeeshop-layer-building-back-body-layer-garage-body-line"></div>
										<div class="coffeeshop-layer-building-back-body-layer-garage-body-line"></div>
										<div class="coffeeshop-layer-building-back-body-layer-garage-body-line"></div>
										<div class="coffeeshop-layer-building-back-body-layer-garage-body-line"></div>
										<div class="coffeeshop-layer-building-back-body-layer-garage-body-line"></div>
										<div class="coffeeshop-layer-building-back-body-layer-garage-body-line"></div>
										<div class="coffeeshop-layer-building-back-body-layer-garage-body-line"></div>
										<div class="coffeeshop-layer-building-back-body-layer-garage-body-line"></div>
									</div>
								</div>
							</div>
							<div class="coffeeshop-layer-building-back-body-layer">
								<div class="coffeeshop-layer-building-back-body-layer-tech">
									<div class="coffeeshop-layer-building-back-body-layer-tech-letter">T</div>
									<div class="coffeeshop-layer-building-back-body-layer-tech-letter">E</div>
									<div class="coffeeshop-layer-building-back-body-layer-tech-letter">C</div>
									<div class="coffeeshop-layer-building-back-body-layer-tech-letter">H</div>
								</div>
							</div>
						</div>
					</div>
					<div class="coffeeshop-layer-building-front">
						<div class="coffeeshop-layer-building-front-roof"></div>
						<div class="coffeeshop-layer-building-front-body">
							<div class="coffeeshop-layer-building-front-body-up">
								<div class="coffeeshop-layer-building-front-body-up-row">
									<div class="coffeeshop-layer-building-front-body-up-row-window">
										<div class="coffeeshop-layer-building-front-body-up-row-window-top">
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
										</div>
										<div class="coffeeshop-layer-building-front-body-up-row-window-middle">
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
										</div>
									</div>
									<div class="coffeeshop-layer-building-front-body-up-row-window">
										<div class="coffeeshop-layer-building-front-body-up-row-window-top">
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
										</div>
										<div class="coffeeshop-layer-building-front-body-up-row-window-middle">
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
										</div>
									</div>
									<div class="coffeeshop-layer-building-front-body-up-row-window">
										<div class="coffeeshop-layer-building-front-body-up-row-window-top">
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
										</div>
										<div class="coffeeshop-layer-building-front-body-up-row-window-middle">
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
										</div>
									</div>
								</div>
								<div class="coffeeshop-layer-building-front-body-up-row">
									<div class="coffeeshop-layer-building-front-body-up-row-window">
										<div class="coffeeshop-layer-building-front-body-up-row-window-top">
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
										</div>
										<div class="coffeeshop-layer-building-front-body-up-row-window-middle">
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
										</div>
									</div>
									<div class="coffeeshop-layer-building-front-body-up-row-window">
										<div class="coffeeshop-layer-building-front-body-up-row-window-top">
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
										</div>
										<div class="coffeeshop-layer-building-front-body-up-row-window-middle">
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
										</div>
									</div>
									<div class="coffeeshop-layer-building-front-body-up-row-window">
										<div class="coffeeshop-layer-building-front-body-up-row-window-top">
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-top-column"></div>
										</div>
										<div class="coffeeshop-layer-building-front-body-up-row-window-middle">
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
											<div class="coffeeshop-layer-building-front-body-up-row-window-middle-glass"></div>
										</div>
									</div>
								</div>
							</div>
							<div class="coffeeshop-layer-building-front-body-middle">
								<div class="coffeeshop-layer-building-front-body-middle-half">
									<div class="coffeeshop-layer-building-front-body-middle-half-column"></div>
									<div class="coffeeshop-layer-building-front-body-middle-half-column"></div>
									<div class="coffeeshop-layer-building-front-body-middle-half-column"></div>
									<div class="coffeeshop-layer-building-front-body-middle-half-column"></div>
									<div class="coffeeshop-layer-building-front-body-middle-half-column"></div>
								</div>
								<div class="coffeeshop-layer-building-front-body-middle-half">
									<span>COFFEE SHOP</span>
								</div>
							</div>
							<div class="coffeeshop-layer-building-front-body-down">
								<div class="coffeeshop-layer-building-front-body-down-area">
									<div class="coffeeshop-layer-building-front-body-down-area-up"></div>
									<div class="coffeeshop-layer-building-front-body-down-area-down">
										<div class="coffeeshop-layer-building-front-body-down-area-down-door">
											<div class="coffeeshop-layer-building-front-body-down-area-down-door-area">
												<div class="coffeeshop-layer-building-front-body-down-area-down-door-area-glass-top">
													<div class="coffeeshop-layer-building-front-body-down-area-down-close">
														<div class="coffeeshop-layer-building-front-body-down-area-down-close-dot"></div>
														<div class="coffeeshop-layer-building-front-body-down-area-down-close-txt">CLOSED</div>
													</div>
												</div>
												<div class="coffeeshop-layer-building-front-body-down-area-down-door-area-glass-bottom"></div>
											</div>
										</div>
										<div class="coffeeshop-layer-building-front-body-down-area-down-window">
											<div class="coffeeshop-layer-building-front-body-down-area-down-window-area"></div>
										</div>
									</div>
								</div>
								<div class="coffeeshop-layer-building-front-body-down-separator">
									<div class="coffeeshop-layer-building-front-body-down-separator-ui"></div>
								</div>
								<div class="coffeeshop-layer-building-front-body-down-area">
									<div class="coffeeshop-layer-building-front-body-down-area-up"></div>
									<div class="coffeeshop-layer-building-front-body-down-area-down">
										<div class="coffeeshop-layer-building-front-body-down-area-down-door">
											<div class="coffeeshop-layer-building-front-body-down-area-down-door-area">
												<div class="coffeeshop-layer-building-front-body-down-area-down-door-area-glass-top"></div>
											</div>
										</div>
										<div class="coffeeshop-layer-building-front-body-down-area-down-window">
											<div class="coffeeshop-layer-building-front-body-down-area-down-window-area">
												<div class="coffeeshop-layer-building-front-body-down-area-down-close">
													<div class="coffeeshop-layer-building-front-body-down-area-down-close-dot"></div>
														<div class="coffeeshop-layer-building-front-body-down-area-down-close-txt">CLOSED</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="coffeeshop-layer">
				<div class="coffeeshop-layer-pillar">
					<div class="coffeeshop-layer-pillar-top">
						<div class="coffeeshop-layer-pillar-top-column"></div>
						<div class="coffeeshop-layer-pillar-top-semafor">
							<div class="coffeeshop-layer-pillar-top-semafor-inside">
								<div class="coffeeshop-layer-pillar-top-semafor-inside-left">&#9995;</div>
								<div class="coffeeshop-layer-pillar-top-semafor-inside-right"></div>
							</div>
						</div>
						<div class="coffeeshop-layer-pillar-top-leftflag"></div>
						<div class="coffeeshop-layer-pillar-top-rightflag"></div>
					</div>
					<div class="coffeeshop-layer-pillar-bottom">
						<div class="coffeeshop-layer-pillar-bottom-inside"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="coffeeshop-bottom"></div>
	</div>
</div>
CSS

	.coffeeshop{
		width: 100%;
		min-width: 100px;
		max-width: 1000px;
		height: 500px;
		padding: 10px;
		box-sizing: border-box;
		overflow: auto;
		margin: auto;
		background: rgba(0,0,0,0.05);
		user-select: none;
	}
		.coffeeshop-area{
			min-width: 700px;
			font-weight: bold;
			font-family: math;
			color: #1b2d37;
			display: contents;
		}
			.coffeeshop-top{
				height: calc(100% - 20px);
				position: relative;
			}
				.coffeeshop-layer{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: flex-end;
					position: absolute;
					top: 0;
					left: 0;
				}
				.coffeeshop-layer:nth-child(1){
					justify-content: center;
					align-items: flex-start;
				}
					.coffeeshop-layer-sun{
						width: 50px;
						height: 50px;
						background: white;
						border-radius: 50%;
						box-shadow: 0 0 30px white;
						filter: blur(3px);
					}
				.coffeeshop-layer:nth-child(2){
					justify-content: flex-end;
				}
					.coffeeshop-layer-buildings{
						height: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
					}
						.coffeeshop-layer-building-back{
							width: 250px;
							height: calc(100% - 100px);
						}
							.coffeeshop-layer-building-front-roof,
							.coffeeshop-layer-building-back-roof{
								box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
								background: white;
							}
							.coffeeshop-layer-building-back-roof{
								height: 10px;
							}
							.coffeeshop-layer-building-front-body,
							.coffeeshop-layer-building-back-body{
								width: calc(100% - 10px);
								border-top: 2px solid #1b2d37;
								box-shadow: inset 1px 0 0 #1b2d37, inset -1px 0 0 #1b2d37;
								margin: auto;
							}
							.coffeeshop-layer-building-back-body{
								height: calc(100% - 10px - 2px);
								background: white;
								position: relative;
							}
								.coffeeshop-layer-building-back-body-layer{
									width: 100%;
									height: 100%;
									padding: 10px 10px 0 10px;
									box-sizing: border-box;
									position: absolute;
								}
									.coffeeshop-layer-building-back-body-layer-windows{
										height: 50%;
										display: flex;
										justify-content: space-between;
										flex-direction: column;
									}
										.coffeeshop-layer-building-back-body-layer-window-row{
											width: 100%;
											height: calc(50% - 5px);
											display: flex;
											justify-content: space-between;
										}
											.coffeeshop-layer-building-back-body-layer-window{
												width: calc(50% - 5px);
											}
												.coffeeshop-layer-building-back-body-layer-window-glass{
													height: 25%;
													display: flex;
												}
													.coffeeshop-layer-building-back-body-layer-window-glass-area{
														width: 50%;
														box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
													}
									.coffeeshop-layer-building-back-body-layer-garage{
										height: calc(50% - 10px);
										margin-top: 10px;
									}
										.coffeeshop-layer-building-back-body-layer-garage-top{
											height: 30px;
											background: #1b2d37;
										}
										.coffeeshop-layer-building-back-body-layer-garage-body{
											height: calc(100% - 30px);
										}
											.coffeeshop-layer-building-back-body-layer-garage-body-line{
												height: calc(100% / 10);
												background: #d6dad9;
												border-top: 1px solid #1b2d37;
												border-left: 1px solid #1b2d37;
												border-right: 1px solid #1b2d37;
												box-sizing: border-box;
											}
								.coffeeshop-layer-building-back-body-layer:nth-child(2){
									display: flex;
									align-items: center;
								}
									.coffeeshop-layer-building-back-body-layer-tech{
										width: 30px;
										border: 2px solid #1b2d37;
									}
										.coffeeshop-layer-building-back-body-layer-tech-letter{
											height: 40px;
											background: #b0ff02;
											border-top: 2px solid #1b2d37;
											font-size: 25px;
											display: flex;
											justify-content: center;
											align-items: center;
										}
										.coffeeshop-layer-building-back-body-layer-tech-letter:nth-child(1){
											border-top-width: 0;
										}
						.coffeeshop-layer-building-front{
							width: 350px;
							height: 100%;
						}
							.coffeeshop-layer-building-front-roof{
								height: 15px;
							}
							.coffeeshop-layer-building-front-body{
								width: calc(100% - 10px);
								height: calc(100% - 15px - 2px);
								background: #818181;
								position: relative;
							}
								.coffeeshop-layer-building-front-body-up{
									height: calc(100% - 50px - 150px);
									display: flex;
									justify-content: space-evenly;
									flex-direction: column;
								}
									.coffeeshop-layer-building-front-body-up-row{
										height: calc(100% / 2 - 10px);
										display: flex;
										justify-content: space-around;
									}
										.coffeeshop-layer-building-front-body-up-row-window{
											width: calc(100% / 3 - 30px);
											background: #1b2d37;
											padding: 5px;
											box-sizing: border-box;
										}
											.coffeeshop-layer-building-front-body-up-row-window-top{
												display: flex;
												justify-content: space-between;
											}
												.coffeeshop-layer-building-front-body-up-row-window-top-column{
													width: calc(100% / 5 - 5px);
													height: 30px;
													background: white;
												}
											.coffeeshop-layer-building-front-body-up-row-window-middle{
												height: calc(100% - 30px - 5px);
												margin-top: 5px;
												display: flex;
												justify-content: space-between;
											}
												.coffeeshop-layer-building-front-body-up-row-window-middle-glass{
													width: calc(100% / 2 - 5px);
													height: 100%;
													background: white;
												}
								.coffeeshop-layer-building-front-body-middle{
									width: calc(100% + 10px);
									height: 50px;
									background: #b0ff02;
									margin-left: -5px;
									box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
									display: flex;
								}
									.coffeeshop-layer-building-front-body-middle-half{
										width: 50%;
										display: flex;
									}
									.coffeeshop-layer-building-front-body-middle-half:nth-child(1){
										justify-content: space-between;
									}
										.coffeeshop-layer-building-front-body-middle-half-column{
											width: calc(100% / 5 - 10px);
											background: white;
											box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
										}
									.coffeeshop-layer-building-front-body-middle-half:nth-child(2){
										justify-content: center;
										align-items: center;
										font-size: 20px;
										position: relative;
									}
									.coffeeshop-layer-building-front-body-middle-half:nth-child(2):before{
										content: "";
										border: 25px solid transparent;
										border-left-color: #1b2d37;
										border-bottom-color: #1b2d37;
										position: absolute;
										left: 0;
										bottom: 0;
									}
										.coffeeshop-layer-building-front-body-middle-half:nth-child(2) span{
											padding-left: 10px;
										}
								.coffeeshop-layer-building-front-body-down{
									height: 140px;
									border-top: 10px solid #1b2d37;
									display: flex;
								}
									.coffeeshop-layer-building-front-body-down-area{
										width: calc(100% / 2 - (10px / 2));
										padding: 0 5px;
										box-sizing: border-box;
									}
										.coffeeshop-layer-building-front-body-down-area-up{
											height: 10px;
										}
										.coffeeshop-layer-building-front-body-down .coffeeshop-layer-building-front-body-down-area:last-of-type .coffeeshop-layer-building-front-body-down-area-up{
											background: white;
											box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
										}
										.coffeeshop-layer-building-front-body-down-area-down{
											height: calc(100% - 10px - 2px);
											margin-top: 2px;
											display: flex;
											justify-content: space-between;
										}
											.coffeeshop-layer-building-front-body-down-area-down-window,
											.coffeeshop-layer-building-front-body-down-area-down-door{
												width: calc(100% / 2 - 2.5px);
											}
												.coffeeshop-layer-building-front-body-down-area-down-door-area{
													height: 100%;
													padding: 5px;
													box-sizing: border-box;
													background: #1b2d37;
													display: flex;
													justify-content: space-between;
													flex-direction: column;
												}
													.coffeeshop-layer-building-front-body-down-area-down-door-area-glass-top,
													.coffeeshop-layer-building-front-body-down-area-down-door-area-glass-bottom{
														width: 100%;
														background: white;
														box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
													}
													.coffeeshop-layer-building-front-body-down-area-down-door-area-glass-top{
														height: calc(100% - 25px);
														display: flex;
														justify-content: center;
														align-items: center;
													}
													.coffeeshop-layer-building-front-body-down-area-down-door-area-glass-bottom{
														height: 20px;
													}
											.coffeeshop-layer-building-front-body-down-area-down-window{}
												.coffeeshop-layer-building-front-body-down-area-down-window-area{
													height: calc(100% - 30px);
													background: white;
													box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
													display: flex;
													justify-content: center;
													align-items: center;
												}
													.coffeeshop-layer-building-front-body-down-area-down-close{
														width: 40px;
													}
														.coffeeshop-layer-building-front-body-down-area-down-close-dot{
															width: 3px;
															height: 3px;
															background: #1b2d37;
															border-radius: 50%;
															margin: auto;
														}
														.coffeeshop-layer-building-front-body-down-area-down-window-area .coffeeshop-layer-building-front-body-down-area-down-close-txt{
															background: #b0ff02;
														}
														.coffeeshop-layer-building-front-body-down-area-down-close-txt{
															height: 20px;
															font-size: 10px;
															text-align: center;
															margin-top: 10px;
															box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
															display: flex;
															justify-content: center;
															align-items: center;
															position: relative;
														}
														.coffeeshop-layer-building-front-body-down-area-down-close-txt:before,
														.coffeeshop-layer-building-front-body-down-area-down-close-txt:after{
															content: "";
															width: 1px;
															height: 15px;
															background: #1b2d37;
															position: absolute;
															top: -13px;
														}
														.coffeeshop-layer-building-front-body-down-area-down-close-txt:before{
															transform: rotate(45deg);
															left: 13px;
														}
														.coffeeshop-layer-building-front-body-down-area-down-close-txt:after{
															transform: rotate(-45deg);
															right: 13px;
														}
									.coffeeshop-layer-building-front-body-down-separator{
										width: 10px;
									}
										.coffeeshop-layer-building-front-body-down-separator-ui{
											height: 100%;
											background: white;
											margin: auto;
										}
				.coffeeshop-layer-pillar{
					width: 90px;
					height: 300px;
				}
					.coffeeshop-layer-pillar-top{
						height: calc(100% - 30px);
						position: relative;
					}
						.coffeeshop-layer-pillar-top-column{
							width: 10px;
							height: 100%;
							background: #d6d6d8;
							box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
							margin: auto;
						}
						.coffeeshop-layer-pillar-top-semafor{
							width: 40px;
							height: 30px;
							border-top: 3px solid #d6d6d8;
							border-bottom: 3px solid #d6d6d8;
							position: absolute;
							top: 50px;
						}
							.coffeeshop-layer-pillar-top-semafor-inside{
								height: 100%;
								display: flex;
								justify-content: space-between;
							}
								.coffeeshop-layer-pillar-top-semafor-inside-left{
									width: calc(100% - (10px + 5px));
									background: #1b2d37;
									color: white;
									font-size: 20px;
									text-align: center;
								}
								.coffeeshop-layer-pillar-top-semafor-inside-right{
									width: 10px;
									background: #d6d6d8;
								}
						.coffeeshop-layer-pillar-top-leftflag{
							width: 40px;
							height: 20px;
							background: #1b2d37;
							position: absolute;
							top: 90px;
						}
						.coffeeshop-layer-pillar-top-rightflag{
							width: 40px;
							height: 20px;
							background: #1b2d37;
							position: absolute;
							top: 30px;
							right: 0;
						}
					.coffeeshop-layer-pillar-bottom{
						height: 30px;
					}
						.coffeeshop-layer-pillar-bottom-inside{
							width: 30px;
							height: calc(100% + 2px);
							background: #d6d6d8;
							box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
							margin: -1px auto;
							border-top-left-radius: 10px;
							border-top-right-radius: 10px;
						}
			.coffeeshop-bottom{
				width: 100%;
				height: 20px;
				box-shadow: inset 1px 1px 0 #1b2d37, inset -1px -1px 0 #1b2d37;
				background: white;
			}

Grafica si animatii din HTML si CSS. Cafenea.