Sessão 5

2026-05-07 01:59:14 +01:00
parent 0a6d8a087a
commit 215403aebc
9 changed files with 235 additions and 1 deletions
--- a/otherstuff.html
+++ b/otherstuff.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Centered Header</title>
+
+		<style>
+			body {
+				margin: 0;
+				font-family: Arial, sans-serif;
+			}
+
+			header {
+				position: relative;
+				background: #333;
+				color: white;
+				padding: 20px 0;
+				text-align: center;
+			}
+
+			/* Icon on the left */
+			.logo {
+				position: absolute;
+				left: 20px;
+				top: 50%;
+				transform: translateY(-50%);
+				font-size: 24px;
+			}
+
+			/* Centered text */
+			.header-text h1 {
+				margin: 0;
+				font-size: 24px;
+			}
+
+			.header-text p {
+				margin: 5px 0 0;
+				font-size: 14px;
+				opacity: 0.8;
+			}
+
+			nav {
+				background: #555;
+				position: sticky;
+				top: 0;
+			}
+
+			nav a {
+				display: inline-block;
+				color: white;
+				padding: 14px 20px;
+				text-decoration: none;
+			}
+
+			nav a:hover {
+				background: #777;
+			}
+
+			.content {
+				padding: 20px;
+			}
+
+			@media (max-width: 600px) {
+				.logo {
+					left: 10px;
+				}
+
+				nav a {
+					display: block;
+					text-align: center;
+				}
+			}
+		</style>
+	</head>
+
+	<body>
+		<header>
+			<div class="logo">📇</div>
+			<div class="header-text">
+				<h1>My Website</h1>
+				<p>Welcome to my page</p>
+			</div>
+		</header>
+
+		<nav>
+			<a href="#">Home</a>
+			<a href="#">About</a>
+			<a href="#">Services</a>
+			<a href="#">Contact</a>
+		</nav>
+
+		<div class="content">
+			<h2>Main Content</h2>
+			<p>The icon stays on the left, while the text is perfectly centered.</p>
+		</div>
+	</body>
+</html>