Welcome to My Project!
This is some content on my page.
Remember to replace the GitHub URL in the HTML.
codi html per posar una banda inclinada a dalt a la dreta
Creating an inclined banner at the top right of an HTML page usually involves a combination of HTML for the structure and CSS for the styling and inclination.
Here's a common approach using a div element for the banner and CSS transform for the rotation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banda Inclinada</title>
<style>
body {
margin: 0;
font-family: sans-serif;
min-height: 100vh; /* Just for demonstration to show the banner clearly */
position: relative; /* Needed if you want to position other elements relative to the body */
}
.banda-inclinada {
position: absolute;
top: 20px; /* Adjust as needed for vertical positioning */
right: -50px; /* Adjust to move it more or less off the right edge */
width: 200px; /* Width of your banner */
background-color: #ff4500; /* Example color (OrangeRed) */
color: white;
text-align: center;
padding: 10px 0;
transform: rotate(45deg); /* Inclination angle */
transform-origin: 100% 0; /* Rotate from the top-right corner */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Optional: add a shadow */
z-index: 1000; /* Ensures it's above other content */
overflow: hidden; /* Important for clean edges when rotating */
}
.banda-inclinada span {
display: block; /* Ensures the text takes the full width of the rotated div */
white-space: nowrap; /* Prevents text from wrapping */
text-transform: uppercase;
font-weight: bold;
font-size: 1.1em;
}
/* Just for demonstrating content below the banner */
.content {
margin: 50px;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="banda-inclinada">
<span>OFERTA ESPECIAL!</span>
</div>
<div class="content">
<h1>Benvingut a la Nostra Pàgina</h1>
<p>Aquest és un exemple de contingut sota la banda inclinada.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
La idea ve de BTDigg
De fet, aquesta pàgina no fa servir eixe codi HTML, jejeje
