VibeTeacher
Utforska samlingen

Upptäck resurser

Sök och filtrera bland pedagogiska resurser skapade av lärare med hjälp av AI-verktyg. Hitta inspiration till ditt klassrum.

Utvalda exempel från SETT 2026

Verkliga resurser skapade av lärare och elever med vibekodning

Se fler exempel och fullständig guide från SETT

Populärast just nu

Mest gillade resurserna av communityn

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory – Ljud och frekvens</title>

<style>
:root {
  --primar: #4a7cff;
  --bakgrund: #f1f4fb;
  --kort: #ffffff;
  --match: #4caf50;
  --skugga: rgba(0,0,0,0.15);
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bakgrund);
  display: flex;
  justify-content: center;
}

.container {
  max-width: 900px;
  width: 100%;
  padding: 20px;
  text-align: center;
}

h1 {
  color: var(--primar);
}

.instructions {
  background: white;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 8px var(--skugga);
  margin-bottom: 15px;
  line-height: 1.5;
}

.stats {
  font-size: 1.1rem;
  margin-bottom: 15px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  perspective: 1000px;
}

.card {
  position: relative;
  width: 100%;
  padding-top: 100%;
  cursor: pointer;
}

.card-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 8px var(--skugga);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.back {
  background: linear-gradient(135deg, var(--primar), #8fb1ff);
  color: white;
  font-size: 2.2rem;
  font-wei
Spel
00

Ljudmemory

Para ihop begreppet med rätt förklaring.

NOMellanstadiet
LN
Leila Nilsson
Copilot

6 resurser tillgängliga

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory – Ljud och frekvens</title>

<style>
:root {
  --primar: #4a7cff;
  --bakgrund: #f1f4fb;
  --kort: #ffffff;
  --match: #4caf50;
  --skugga: rgba(0,0,0,0.15);
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bakgrund);
  display: flex;
  justify-content: center;
}

.container {
  max-width: 900px;
  width: 100%;
  padding: 20px;
  text-align: center;
}

h1 {
  color: var(--primar);
}

.instructions {
  background: white;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 8px var(--skugga);
  margin-bottom: 15px;
  line-height: 1.5;
}

.stats {
  font-size: 1.1rem;
  margin-bottom: 15px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  perspective: 1000px;
}

.card {
  position: relative;
  width: 100%;
  padding-top: 100%;
  cursor: pointer;
}

.card-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 8px var(--skugga);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.back {
  background: linear-gradient(135deg, var(--primar), #8fb1ff);
  color: white;
  font-size: 2.2rem;
  font-wei
Spel
00

Ljudmemory

Para ihop begreppet med rätt förklaring.

NOMellanstadiet
LN
Leila Nilsson
Copilot