HUSKELAPP FOR HTML-KODER

På denne siden finner man html-koder som er brukt til denne nettsiden:

HERO-BANNER-TEKST

<h1>#BESTSAMMEN</h1>

<p>BEVISST - ENGASJERT - STOLT - TRYGG</p>

</div>

<style>

.hero-overlay-text {

position: absolute;

top: 70%; /* tydelig lengre ned */

left: 2%;

transform: translateY(-50%);

z-index: 10;

color: white;

max-width: 90%;

font-family: 'Inter', sans-serif;

}

/* Overskrift */

.hero-overlay-text h1 {

margin: 0;

font-weight: 600; /* mindre fet */

line-height: 0.95;

letter-spacing: -0.01em;

text-transform: uppercase;

font-size: clamp(2.2rem, 6vw, 5.5rem);

}

/* Undertekst */

.hero-overlay-text p {

margin: 10px 0 0 0;

font-weight: 400; /* mye lettere */

letter-spacing: 0.06em;

text-transform: uppercase;

font-size: clamp(0.9rem, 1.6vw, 1.8rem);

}

/* Tablet */

@media (max-width: 1024px) {

.hero-overlay-text {

top: 65%;

}

/* Mobil */

@media (max-width: 768px) {

.hero-overlay-text {

top: 58%; /* VIKTIG: høyere opp igjen */

left: 16px;

right: 16px;

transform: translateY(-50%);

}

.hero-overlay-text h1 {

font-size: clamp(1.8rem, 8vw, 3rem);

}

.hero-overlay-text p {

font-size: clamp(0.75rem, 3vw, 1rem);

}

/* Liten mobil */

@media (max-width: 480px) {

.hero-overlay-text {

top: 55%; /* enda litt opp */

}

</style>

Hurtigmeny-knappene

<style>

.tiller-button-strip {

width: 100%;

background: transparent !important;

padding: 20px 0;

}

.tiller-button-grid {

display: grid;

grid-template-columns: repeat(6, 1fr);

gap: 20px;

width: 100%;

margin: 0 auto;

background: transparent !important;

box-sizing: border-box;

}

.tiller-button-card {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-decoration: none;

background: #ffffff !important;

border: none;

color: #000000;

padding: 32px 16px;

min-height: 180px;

width: 100%;

box-sizing: border-box;

transition: all 0.25s ease;

border-radius: 24px;

}

.tiller-button-card:hover {

background: #094889 !important;

transform: translateY(-2px);

}

.tiller-button-icon {

width: 72px;

height: 72px;

margin-bottom: 16px;

color: #094889;

flex-shrink: 0;

transition: color 0.25s ease;

}

.tiller-button-card:hover .tiller-button-icon {

color: #ffffff;

}

.tiller-button-text {

font-size: 16px;

font-weight: 600;

line-height: 1.3;

text-align: center;

color: #000000;

}

@media (max-width: 1024px) {

.tiller-button-strip {

padding: 14px 0;

}

.tiller-button-grid {

grid-template-columns: repeat(3, 1fr);

gap: 8px;

}

.tiller-button-card {

min-height: 118px;

padding: 10px 10px;

border-radius: 18px;

}

.tiller-button-icon {

width: 46px;

height: 46px;

margin-bottom: 8px;

}

.tiller-button-text {

font-size: 14px;

}

@media (max-width: 640px) {

.tiller-button-strip {

padding: 4px 0;

}

.tiller-button-grid {

grid-template-columns: repeat(3, 1fr);

gap: 4px;

}

.tiller-button-card {

min-height: 82px;

padding: 6px 6px;

border-radius: 13px;

}

.tiller-button-icon {

width: 34px;

height: 34px;

margin-bottom: 5px;

}

.tiller-button-text {

font-size: 12px;

line-height: 1.15;

}

</style>

</svg>

<div class="tiller-button-text">Innmelding</div>

</a>

</svg>

<div class="tiller-button-text">Banekalender</div>

</a>

</svg>

<div class="tiller-button-text">For foreldre</div>

</a>

</svg>

<div class="tiller-button-text">For trenere</div>

</a>

</svg>

<div class="tiller-button-text">Sportsplan</div>

</a>

</svg>

</a>

</div>

Tittel til artikkelgrid

Siste nyheter

</h2>

Hovedside - Rubic dagsblikk kl.15-22

<style>

@media (max-width: 768px) {

.tobb-section {

display: none;

}

</style>

TOBB Arena i dag

</h2>

<iframe

src="https://location.rubic.no/public/organization/11649/calendar/mobile?type=day&mode=light&showHeader=false&locationIds=11649%3A5219031e-0ed5-47bd-bc51-13ec97a96d8f&locationIds=11649%3Adc650bee-486d-4cdc-89b7-7a86f2c5e2cb&locationIds=11649%3Ad167c59f-2932-4bf2-b726-80c1781e2314&locationIds=11649%3Af2af47b4-f560-41e6-b0cf-df8065fdd87e&locationIds=11649%3A40c9d667-f783-4f22-bdb0-846660b0821f&locationIds=11649%3A496b8799-5be0-4039-9e2c-12e56b533044&locationIds=11649%3A765e586d-c081-4df0-a40d-fe29474a18b2&enableEmbed=true"

width="100%"

height="1500px"

style="border:none; margin-top:-620px;"

loading="lazy">

</iframe>

</div>

Spotify - sang - preview

<style>

.spotify-player {

width: 100%;

max-width: 100%;

overflow: hidden;

}

.spotify-player iframe {

width: 100%;

height: 152px;

border: 0;

border-radius: 12px;

display: block;

}

@media (max-width: 768px) {

.spotify-player iframe {

height: 80px;

}

</style>

<iframe

src="https://open.spotify.com/embed/track/3dRWqZekIIRaF3GXFpJv33?utm_source=generator"

allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"

loading="lazy">

</iframe>

</div>

Sponsor-footer

<style>

.footer-sponsor-logos {

width: 100%;

max-width: 100%;

}

.footer-sponsor-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 14px;

width: 100%;

align-items: stretch;

}

.footer-sponsor-logo {

display: flex;

align-items: center;

justify-content: center;

height: 90px;

padding: 12px;

box-sizing: border-box;

background: #fff;

border-radius: 8px;

text-decoration: none;

}

.footer-sponsor-logo img {

max-width: 100%;

max-height: 60px;

width: auto;

height: auto;

display: block;

object-fit: contain;

}

@media (max-width: 768px) {

.footer-sponsor-grid {

grid-template-columns: repeat(4, 1fr);

gap: 6px;

}

.footer-sponsor-logo {

height: 54px;

padding: 5px;

border-radius: 6px;

}

.footer-sponsor-logo img {

max-height: 34px;

}

</style>

</a>

</a>

</a>

</a>

</div>

SoMe-ikoner-knapper

Kommende a-lagskamper skrivebord + mobil

<div class="kamp-liste">Laster kamper...</div>

</div>

<style>

.tiller-kamper {

font-family: Arial, sans-serif;

max-width: 520px;

margin: 0 auto;

}

.kamp {

padding: 14px 0;

border-bottom: 1px solid #ddd;

text-align: center;

}

.dato {

font-size: 14px;

color: #555;

margin-bottom: 6px;

}

.lag {

font-size: 20px;

font-weight: bold;

margin-bottom: 6px;

}

.tid,

.bane {

font-size: 14px;

color: #333;

}

</style>

(function () {

var bokser = document.querySelectorAll(".tiller-kamper");

for (var b = 0; b < bokser.length; b++) {

start(bokser[b]);

}

function start(container) {

var liste = container.querySelector(".kamp-liste");

var kilder = [

{ url: "https://www.fotball.no/fotballdata/lag/hjem/?fiksId=124", type: "Herrer" },

{ url: "https://www.fotball.no/fotballdata/lag/hjem/?fiksId=187935", type: "Kvinner" }

];

var alleKamper = [];

var ferdig = 0;

for (var i = 0; i < kilder.length; i++) {

hent(kilder[i]);

}

function hent(kilde) {

var xhr = new XMLHttpRequest();

xhr.open("GET", kilde.url, true);

xhr.onreadystatechange = function () {

if (xhr.readyState === 4) {

ferdig++;

if (xhr.status >= 200 && xhr.status < 300) {

parse(xhr.responseText, kilde.type);

}

if (ferdig === kilder.length) {

vis();

}

};

xhr.send();

}

function parse(html, type) {

var doc = new DOMParser().parseFromString(html, "text/html");

var rader = doc.getElementsByTagName("tr");

for (var i = 0; i < rader.length; i++) {

var td = rader[i].getElementsByTagName("td");

if (td.length < 7) continue;

alleKamper.push({

dato: td[0].textContent.trim(),

tid: td[2].textContent.trim(),

hjem: td[3].textContent.trim(),

resultat: td[4].textContent.trim(),

borte: td[5].textContent.trim(),

bane: td[6].textContent.trim(),

datoObj: lagDato(td[0].textContent, td[2].textContent),

type: type

});

}

function vis() {

var iDag = new Date();

iDag.setHours(0, 0, 0, 0);

var kamper = alleKamper.filter(function (k) {

return k.datoObj && k.datoObj >= iDag && k.resultat === "-";

});

kamper.sort(function (a, b) {

return a.datoObj - b.datoObj;

});

// 🔥 Her bestemmes mobil vs desktop

var antall = window.innerWidth <= 600 ? 2 : 6;

kamper = kamper.slice(0, antall);

if (!kamper.length) {

liste.innerHTML = "Fant ingen kommende kamper.";

return;

}

var html = "";

for (var i = 0; i < kamper.length; i++) {

var k = kamper[i];

html += '<div class="kamp">';

html += '<div class="dato">' + format(k.datoObj) + '</div>';

html += '<div class="lag">' + navn(k.hjem, k.type) + ' vs ' + navn(k.borte, k.type) + '</div>';

html += '<div class="tid">Kl. ' + k.tid + '</div>';

html += '<div class="bane">' + k.bane + '</div>';

html += '</div>';

}

liste.innerHTML = html;

}

function navn(lag, type) {

return lag.toLowerCase().indexOf("tiller") !== -1 ? lag + " " + type : lag;

}

function lagDato(dato, tid) {

var d = dato.split(".");

var t = (tid || "00:00").split(":");

var date = new Date(d[2], d[1] - 1, d[0], t[0], t[1]);

return isNaN(date.getTime()) ? null : date;

}

function format(d) {

return d.toLocaleDateString("nb-NO", {

weekday: "long",

day: "2-digit",

month: "long",

year: "numeric"

});

}

})();

</script>