Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Retângulo com Foto e Descrição</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		.rectangle {
			width: calc(100% - 20px);
			height: 200px;
			border: 2px solid #000;
			border-radius: 20px;
			overflow: hidden;
			margin: 10px;
			position: relative;
		}

		.rectangle img {
			float: left;
			width: 30%;
			height: 100%;
			object-fit: cover;
		}

		.rectangle .text {
			float: left;
			width: calc(70% - 30px);
			padding: 20px 10px 10px 20px;
			box-sizing: border-box;
		}

		.rectangle h2 {
			margin: 0;
			font-size: 24px;
		}

		.rectangle p {
			margin: 10px 0;
			font-size: 18px;
		}

		.rectangle .fields {
			position: absolute;
			bottom: 0;
			left: 30%;
			width: calc(70% - 30px);
			margin: 0;
			padding: 10px;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #f5f5f5;
			box-sizing: border-box;
		}

		.rectangle .fields span {
			margin-right: 10px;
		}

		.rectangle:after {
			content: "";
			display: table;
			clear: both;
		}
	</style>
</head>
<body>
	<div class="rectangle">
		<img src="https://via.placeholder.com/200x200" alt="Foto">
		<div class="text">
			<h2>Título</h2>
			<p>Breve descrição do conteúdo que será exibido aqui.</p>
		</div>
		<div class="fields">
			<span>23 anos</span>
			<span>|</span>
			<span>Massagista</span>
			<span>|</span>
			<span>Guarulhos</span>
		</div>
	</div>
</body>
</html>
Editor is loading...