help til banner imge
Budget: $10 – $30 USD
my banne imager be cuttet in the top i need so it not be cutr in top , side or button
here is my code : <!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>STRAA – Miljøvenlige sugerør</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-family: 'Arial', sans-serif;
height: 100%;
width: 100%;
background: none;
overflow-x: hidden;
}
.hero {
background-image: url('https://midtfynsfestival.dk/admin/Tonder_shiftplan/images/ChatGPT%20Image%20Jul%2027%2C%202025%2C%2008_17_50%20PM.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
width: 100vw;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
background-color: rgba(0, 0, 0, 0.3);
background-blend-mode: darken;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #fff;
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin-bottom: 2rem;
color: #f0f0f0;
}
.buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.buttons a {
padding: 0.75rem 1.5rem;
background-color: #3f5e3f;
color: white;
border: none;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
}
.top-nav {
position: absolute;
top: 20px;
right: 30px;
display: flex;
gap: 20px;
}
.top-nav a {
color: white;
text-decoration: none;
font-size: 0.9rem;
cursor: pointer;
}
.logo {
position: absolute;
top: 20px;
left: 30px;
font-size: 1.3rem;
font-weight: bold;
color: white;
letter-spacing: 1px;
}
.features {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 3rem;
text-align: center;
padding: 4rem 2rem;
background-color: #f8f8f0;
flex-wrap: wrap;
}
.feature-item img {
width: 50px;
margin-bottom: 1rem;
}
.feature-item h3 {
font-size: 1.1rem;
color: #223322;
margin-bottom: 0.5rem;
}
.feature-item p {
font-size: 0.95rem;
color: #333;
max-width: 200px;
margin: 0 auto;
}
.why-section {
padding: 3rem 2rem;
background-color: #e5f0e5;
text-align: center;
}
.why-section h2 {
font-size: 2rem;
color: #2c4a2c;
margin-bottom: 1rem;
}
.why-section p {
font-size: 1rem;
max-width: 800px;
margin: 0 auto;
color: #333;
}
.form-section, .contact-section {
padding: 4rem 2rem;
text-align: center;
display: none;
}
.form-section.active, .contact-section.active {
display: block;
}
.form-section h2, .contact-section h2 {
color: #2c4a2c;
margin-bottom: 1rem;
}
form {
max-width: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
input, textarea {
padding: 0.75rem;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 0.75rem;
font-size: 1rem;
background-color: #3f5e3f;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.confirmation {
color: green;
font-weight: bold;
margin-top: 1rem;
}
.contact-section p {
font-size: 1rem;
color: #444;
}
</style>
<script>
function visSektion(id) {
document.querySelector('.form-section').classList.remove('active');
document.querySelector('.contact-section').classList.remove('active');
if (id === 'bestil') {
document.querySelector('.form-section').classList.add('active');
} else if (id === 'kontakt') {
document.querySelector('.contact-section').classList.add('active');
}
}
</script>
</head>
<body>
<div class="hero">
<div class="logo">STRAA</div>
<div class="top-nav">
<a onclick="visSektion('bestil')">Bestil prøvepakke</a>
<a href="/admin/Tonder_shiftplan/files/STRAA-certifikat.pdf" download>Se certifikater</a>
<a onclick="visSektion('kontakt')">Kontakt os</a>
</div>
<h1>Sugerør der ikke smager af pap™</h1>
<p>Miljøvenlige sugerør lavet uden plast og uden papsmag.<br>Holdbare, smagsneutrale – og 100 % komposterbare.</p>
<div class="buttons">
<a onclick="visSektion('bestil')">Bestil prøvepakke</a>
<a href="/admin/Tonder_shiftplan/files/STRAA-certifikat.pdf" download>Se certifikater</a>
</div>
</div>
<section class="features">
<div class="feature-item">
<img src="https://midtfynsfestival.dk/admin/Tonder_shiftplan/images/snowflake.png" alt="Holdbart i kolde drikke">
<h3>Holdbart i kolde drikke</h3>
<p>Vores sugerør smelter ikke som pap. De holder formen hele vejen igennem din drink.</p>
</div>
<div class="feature-item">
<img src="https://midtfynsfestival.dk/admin/Tonder_shiftplan/images/leaf.png" alt="100 % komposterbart">
<h3>100 % komposterbart</h3>
<p>Vores bambussugerør er bionedbrydelige og forsvinder naturligt uden at skade naturen.</p>
</div>
<div class="feature-item">
<img src="https://midtfynsfestival.dk/admin/Tonder_shiftplan/images/happiness.png" alt="Smagsneutralt og sikkert">
<h3>Smagsneutralt og sikkert</h3>
<p>Ingen papsmag, ingen kemi. Bare en god oplevelse – hver gang.</p>
</div>
</section>
<section class="why-section">
<h2>Derfor STRAA™</h2>
<p>
Forestil dig det perfekte øjeblik – en kold drink i hånden, solen i ansigtet. Men så… sugerøret begynder at kollapse. Det smager af pap. Det opløser sig i glasset. Øjeblikket er ødelagt.<br><br>
Det var dér, STRAA blev født.<br><br>
Vi var trætte af dårlige sugerør. Trætte af plastik, der forurener, og pap, der ødelægger oplevelsen. Derfor fandt vi en løsning, der både føles og smager rigtigt – og som naturen elsker.<br><br>
STRAA™ er lavet af naturlige bambusfibre. Det holder formen – også i drinks med is. Det smager af ingenting – præcis som det skal. Og det kan komposteres med god samvittighed.<br><br>
Det her er ikke bare et sugerør. Det er en lille forandring, der gør en stor forskel.
</p>
</section>
<section class="form-section" id="bestil">
<h2>Bestil en prøvepakke</h2>
<form action="https://formsubmit.co/xxx method="POST">
<input type="text" name="Navn" placeholder="Dit navn" required>
<input type="email" name="Email" placeholder="Din e-mail" required>
<textarea name="Adresse" rows="3" placeholder="Leveringsadresse" required></textarea>
<button type="submit">Send</button>
</form>
</section>
<section class="contact-section" id="kontakt">
<h2>Kontakt os</h2>
<p>Du er altid velkommen til at kontakte os på <a href="mailto:xxxx">email</a></p>
</section>
</body>
</html>
here is my code : <!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>STRAA – Miljøvenlige sugerør</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-family: 'Arial', sans-serif;
height: 100%;
width: 100%;
background: none;
overflow-x: hidden;
}
.hero {
background-image: url('https://midtfynsfestival.dk/admin/Tonder_shiftplan/images/ChatGPT%20Image%20Jul%2027%2C%202025%2C%2008_17_50%20PM.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
width: 100vw;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
background-color: rgba(0, 0, 0, 0.3);
background-blend-mode: darken;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #fff;
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin-bottom: 2rem;
color: #f0f0f0;
}
.buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.buttons a {
padding: 0.75rem 1.5rem;
background-color: #3f5e3f;
color: white;
border: none;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
}
.top-nav {
position: absolute;
top: 20px;
right: 30px;
display: flex;
gap: 20px;
}
.top-nav a {
color: white;
text-decoration: none;
font-size: 0.9rem;
cursor: pointer;
}
.logo {
position: absolute;
top: 20px;
left: 30px;
font-size: 1.3rem;
font-weight: bold;
color: white;
letter-spacing: 1px;
}
.features {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 3rem;
text-align: center;
padding: 4rem 2rem;
background-color: #f8f8f0;
flex-wrap: wrap;
}
.feature-item img {
width: 50px;
margin-bottom: 1rem;
}
.feature-item h3 {
font-size: 1.1rem;
color: #223322;
margin-bottom: 0.5rem;
}
.feature-item p {
font-size: 0.95rem;
color: #333;
max-width: 200px;
margin: 0 auto;
}
.why-section {
padding: 3rem 2rem;
background-color: #e5f0e5;
text-align: center;
}
.why-section h2 {
font-size: 2rem;
color: #2c4a2c;
margin-bottom: 1rem;
}
.why-section p {
font-size: 1rem;
max-width: 800px;
margin: 0 auto;
color: #333;
}
.form-section, .contact-section {
padding: 4rem 2rem;
text-align: center;
display: none;
}
.form-section.active, .contact-section.active {
display: block;
}
.form-section h2, .contact-section h2 {
color: #2c4a2c;
margin-bottom: 1rem;
}
form {
max-width: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
input, textarea {
padding: 0.75rem;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 0.75rem;
font-size: 1rem;
background-color: #3f5e3f;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.confirmation {
color: green;
font-weight: bold;
margin-top: 1rem;
}
.contact-section p {
font-size: 1rem;
color: #444;
}
</style>
<script>
function visSektion(id) {
document.querySelector('.form-section').classList.remove('active');
document.querySelector('.contact-section').classList.remove('active');
if (id === 'bestil') {
document.querySelector('.form-section').classList.add('active');
} else if (id === 'kontakt') {
document.querySelector('.contact-section').classList.add('active');
}
}
</script>
</head>
<body>
<div class="hero">
<div class="logo">STRAA</div>
<div class="top-nav">
<a onclick="visSektion('bestil')">Bestil prøvepakke</a>
<a href="/admin/Tonder_shiftplan/files/STRAA-certifikat.pdf" download>Se certifikater</a>
<a onclick="visSektion('kontakt')">Kontakt os</a>
</div>
<h1>Sugerør der ikke smager af pap™</h1>
<p>Miljøvenlige sugerør lavet uden plast og uden papsmag.<br>Holdbare, smagsneutrale – og 100 % komposterbare.</p>
<div class="buttons">
<a onclick="visSektion('bestil')">Bestil prøvepakke</a>
<a href="/admin/Tonder_shiftplan/files/STRAA-certifikat.pdf" download>Se certifikater</a>
</div>
</div>
<section class="features">
<div class="feature-item">
<img src="https://midtfynsfestival.dk/admin/Tonder_shiftplan/images/snowflake.png" alt="Holdbart i kolde drikke">
<h3>Holdbart i kolde drikke</h3>
<p>Vores sugerør smelter ikke som pap. De holder formen hele vejen igennem din drink.</p>
</div>
<div class="feature-item">
<img src="https://midtfynsfestival.dk/admin/Tonder_shiftplan/images/leaf.png" alt="100 % komposterbart">
<h3>100 % komposterbart</h3>
<p>Vores bambussugerør er bionedbrydelige og forsvinder naturligt uden at skade naturen.</p>
</div>
<div class="feature-item">
<img src="https://midtfynsfestival.dk/admin/Tonder_shiftplan/images/happiness.png" alt="Smagsneutralt og sikkert">
<h3>Smagsneutralt og sikkert</h3>
<p>Ingen papsmag, ingen kemi. Bare en god oplevelse – hver gang.</p>
</div>
</section>
<section class="why-section">
<h2>Derfor STRAA™</h2>
<p>
Forestil dig det perfekte øjeblik – en kold drink i hånden, solen i ansigtet. Men så… sugerøret begynder at kollapse. Det smager af pap. Det opløser sig i glasset. Øjeblikket er ødelagt.<br><br>
Det var dér, STRAA blev født.<br><br>
Vi var trætte af dårlige sugerør. Trætte af plastik, der forurener, og pap, der ødelægger oplevelsen. Derfor fandt vi en løsning, der både føles og smager rigtigt – og som naturen elsker.<br><br>
STRAA™ er lavet af naturlige bambusfibre. Det holder formen – også i drinks med is. Det smager af ingenting – præcis som det skal. Og det kan komposteres med god samvittighed.<br><br>
Det her er ikke bare et sugerør. Det er en lille forandring, der gør en stor forskel.
</p>
</section>
<section class="form-section" id="bestil">
<h2>Bestil en prøvepakke</h2>
<form action="https://formsubmit.co/xxx method="POST">
<input type="text" name="Navn" placeholder="Dit navn" required>
<input type="email" name="Email" placeholder="Din e-mail" required>
<textarea name="Adresse" rows="3" placeholder="Leveringsadresse" required></textarea>
<button type="submit">Send</button>
</form>
</section>
<section class="contact-section" id="kontakt">
<h2>Kontakt os</h2>
<p>Du er altid velkommen til at kontakte os på <a href="mailto:xxxx">email</a></p>
</section>
</body>
</html>