Obiecte pe birou

<div class="desktop">
	<div class="desktop-area">
		<div class="desktop-laptop">
			<div class="desktop-laptop-screen">
				<div class="desktop-laptop-screen-content">
					<div class="desktop-laptop-screen-title">-NEWS-</div>
					<div class="desktop-laptop-screen-title-underline"></div>
					<div class="desktop-laptop-screen-article">
						<div class="desktop-laptop-screen-article-box"></div>
						<div class="desktop-laptop-screen-article-text">
							<div class="desktop-laptop-screen-article-text-head"></div>
							<div class="desktop-laptop-screen-article-text-body"></div>
							<div class="desktop-laptop-screen-article-text-body"></div>
							<div class="desktop-laptop-screen-article-text-body"></div>
						</div>
					</div>
					<div class="desktop-laptop-screen-columns">
						<div class="desktop-laptop-screen-column">
							<div class="desktop-laptop-screen-column-head"></div>
							<div class="desktop-laptop-screen-column-body"></div>
							<div class="desktop-laptop-screen-column-body"></div>
							<div class="desktop-laptop-screen-column-body"></div>
							<div class="desktop-laptop-screen-column-body"></div>
						</div>
						<div class="desktop-laptop-screen-column">
							<div class="desktop-laptop-screen-column-head"></div>
							<div class="desktop-laptop-screen-column-body"></div>
							<div class="desktop-laptop-screen-column-body"></div>
							<div class="desktop-laptop-screen-column-body"></div>
							<div class="desktop-laptop-screen-column-body"></div>
						</div>
						<div class="desktop-laptop-screen-column">
							<div class="desktop-laptop-screen-column-head"></div>
							<div class="desktop-laptop-screen-column-body"></div>
							<div class="desktop-laptop-screen-column-body"></div>
							<div class="desktop-laptop-screen-column-body"></div>
							<div class="desktop-laptop-screen-column-body"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="desktop-laptop-body">
				<div class="desktop-laptop-body-head"></div>
				<div class="desktop-laptop-body-kbd">
					<div class="desktop-laptop-body-kbd-column"></div>
					<div class="desktop-laptop-body-kbd-area">
						<div class="desktop-laptop-body-kbd-area-row">
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn"></div>
						</div>
						<div class="desktop-laptop-body-kbd-area-row">
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std desktop-laptop-body-kbd-area-row-btn-back-ent"></div>
						</div>
						<div class="desktop-laptop-body-kbd-area-row">
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std desktop-laptop-body-kbd-area-row-btn-back-ent"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
						</div>
						<div class="desktop-laptop-body-kbd-area-row">
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std desktop-laptop-body-kbd-area-row-btn-caps"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std desktop-laptop-body-kbd-area-row-btn-back-ent"></div>
						</div>
						<div class="desktop-laptop-body-kbd-area-row">
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std desktop-laptop-body-kbd-area-row-btn-shift"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std desktop-laptop-body-kbd-area-row-btn-shift"></div>
						</div>
						<div class="desktop-laptop-body-kbd-area-row">
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std desktop-laptop-body-kbd-area-row-btn-tab"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
							<div class="desktop-laptop-body-kbd-area-row-btn desktop-laptop-body-kbd-area-row-btn-std"></div>
						</div>
					</div>
					<div class="desktop-laptop-body-kbd-column"></div>
				</div>
				<div class="desktop-laptop-body-touchpad">
					<div class="desktop-laptop-body-touchpad-area"></div>
				</div>
			</div>
		</div>
		<div class="desktop-coffee">
			<div class="desktop-coffee-cup"></div>
		</div>
		<div class="desktop-smartphone">
			<div class="desktop-smartphone-title">-NEWS-</div>
			<div class="desktop-smartphone-img"></div>
			<div class="desktop-smartphone-text-head"></div>
			<div class="desktop-smartphone-text-body"></div>
			<div class="desktop-smartphone-text-body"></div>
			<div class="desktop-smartphone-text-body"></div>
			<div class="desktop-smartphone-text-body"></div>
			<div class="desktop-smartphone-text-body"></div>
			<div class="desktop-smartphone-text-head"></div>
			<div class="desktop-smartphone-text-body"></div>
			<div class="desktop-smartphone-text-body"></div>
			<div class="desktop-smartphone-text-body"></div>
			<div class="desktop-smartphone-text-body"></div>
		</div>
	</div>
</div>

	.desktop{
		width: 100%;
		min-width: 100px;
		max-width: 500px;
		padding: 25px;
		box-sizing: border-box;
		background: linear-gradient(120deg, #efedf2, #aebad4);
		margin: auto;
		overflow: auto;
	}
		.desktop-area{
			min-width: 300px;
			position: relative;
		}
			.desktop-laptop{
				width: 220px;
				height: 250px;
			}
				.desktop-laptop-screen{
					width: calc(100% - 20px);
					height: calc(50% - 20px);
					border: 10px solid black;
					background: white;
					border-top-left-radius: 7px;
					border-top-right-radius: 7px;
				}
					.desktop-laptop-screen-content{
						width: 60%;
						margin: auto;
					}
						.desktop-laptop-screen-title{
							font-size: 25px;
							letter-spacing: 3px;
							color: black;
							text-align: center;
						}
						.desktop-laptop-screen-title-underline{
							height: 3px;
							background: #999;
						}
						.desktop-laptop-screen-article{
							display: flex;
							margin-top: 5px;
						}
							.desktop-laptop-screen-article-box,
							.desktop-laptop-screen-article-text{
								height: 30px;
							}
							.desktop-laptop-screen-article-box{
								width: 50%;
								background: #999;
							}
							.desktop-laptop-screen-article-text{
								width: calc(50% - 5px);
								padding-left: 5px;
							}
								.desktop-laptop-screen-article-text-head,
								.desktop-laptop-screen-article-text-body{
									height: 5px;
									margin-bottom: 3px;
								}
								.desktop-laptop-screen-article-text-head{
									background: #999;
								}
								.desktop-laptop-screen-article-text-body{
									background: #bbb;
								}
						.desktop-laptop-screen-columns{
							display: flex;
							justify-content: space-between;
							margin-top: 5px;
						}
							.desktop-laptop-screen-column{
								width: calc(100% / 3 - 3px);
							}
								.desktop-laptop-screen-column-head,
								.desktop-laptop-screen-column-body{
									margin-bottom: 2px;
								}
								.desktop-laptop-screen-column-head{
									height: 4px;
									background: #777;
								}
								.desktop-laptop-screen-column-body{
									height: 2px;
									background: #aaa;
								}
				.desktop-laptop-body{
					height: 121px;
					border-bottom-left-radius: 7px;
					border-bottom-right-radius: 7px;
					border: 2px solid white;
					background: #aebad4;
				}
					.desktop-laptop-body-head{
						height: 13px;
						background: #ebeef5;
					}
					.desktop-laptop-body-kbd{
						height: 67px;
						background: white;
						display: flex;
					}
						.desktop-laptop-body-kbd-column{
							width: 15px;
							height: 100%;
							background: #d7d9e5;
						}
						.desktop-laptop-body-kbd-area{
							width: calc(100% - 30px);
							padding: 2px 0;
						}
							.desktop-laptop-body-kbd-area-row{
								width: calc(100% - 4px);
								padding: 0 2px;
								margin-bottom: 2px;
								display: flex;
								justify-content: space-between;
							}
								.desktop-laptop-body-kbd-area-row-btn{
									width: 13px;
									height: 3px;
									background: #232b2e;
								}
								.desktop-laptop-body-kbd-area-row-btn-std{
									height: 10px;
								}
								.desktop-laptop-body-kbd-area-row-btn-back-ent{
									width: 23px;
								}
								.desktop-laptop-body-kbd-area-row-btn-caps{
									width: 28px;
								}
								.desktop-laptop-body-kbd-area-row-btn-shift{
									width: 30px;
								}
								.desktop-laptop-body-kbd-area-row-btn-tab{
									width: 77px;
								}
					.desktop-laptop-body-touchpad{
						height: 41px;
						background: #eeeef6;
						border-bottom-left-radius: 3px;
						border-bottom-right-radius: 3px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
						.desktop-laptop-body-touchpad-area{
							width: 80px;
							height: 30px;
							background: linear-gradient(#eaedf6, #fcfcfe);
							box-shadow: inset 2px 2px 0 #dadde6, inset -2px -2px 0 #dadde6;
						}
			.desktop-coffee{
				width: 50px;
				height: 50px;
				border-radius: 7px;
				background: #f48045;
				transform: rotate(30deg);
				position: absolute;
				top: 30px;
				right: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
				.desktop-coffee-cup{
					width: 30px;
					height: 30px;
					border: 3px solid white;
					border-radius: 50%;
					background: black;
					position: relative;
				}
				.desktop-coffee-cup:after{
					content: "";
					width: 8px;
					height: 4px;
					background: white;
					position: absolute;
					right: -8px;
					top: 50%;
				}
			.desktop-smartphone{
				width: 32px;
				height: 70px;
				padding: 4px;
				border: 3px solid black;
				background: white;
				border-radius: 5px;
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
				.desktop-smartphone-title{
					font-size: 8px;
					text-align: center;
					color: black;
					padding: 2px 0;
				}
				.desktop-smartphone-img,
				.desktop-smartphone-text-head,
				.desktop-smartphone-text-body{
					margin-bottom: 2px;
				}
				.desktop-smartphone-img{
					height: 20px;
					background: #d7d9e5;
				}
				.desktop-smartphone-text-body:last-of-type{
					margin-bottom: 0;
				}
				.desktop-smartphone-text-head{
					height: 3px;
					background: #777;
				}
				.desktop-smartphone-text-body{
					height: 1px;
					background: #aaa;
				}