diff --git a/index.html b/index.html
index 0abc4a2..b1e5aea 100644
--- a/index.html
+++ b/index.html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
+ <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
+ <main class="uutis-lista">
+ <article class="uutis-kortti">
+ <img src="/static/tupru.png" alt="Tupru-pentu" class="uutis-kuva">
+ <div class="uutis-tiedot">
+ <h2>
+ Pentuliven Tupru-pentu maistaa vettä.
+ </h2>
+ <p>
+ Ylen Pentulive on suora Areena-lähetys, jossa seurataan englanninspringerspanielin pentueen elämää 24/7 syntymästä luovutusikään saakka.
+ </p>
+ </div>
+ </article>
+ <article class="uutis-kortti">
+ <img src="/static/kauneuskilpailu.png" alt="Urho" class="uutis-kuva">
+ <div class="uutis-tiedot">
+ <h2>
+ 10-kuukautinen Urho on maailman kaunein norjalainen metsäkissa - kasvattajanimi olikin enne
+ </h2>
+ <p>
+ Nuoreksi kissaksi Urho on niittänyt runsaasti menestystä. Maailmanvoittajan titteli oli sille jo 17. voitto kissojen kauneuskilpailuissa.
+ </p>
+ </div>
+ </article>
+ </main>
</body>
</html>
\ No newline at end of file
diff --git a/static/kauneuskilpailu.png b/static/kauneuskilpailu.png
new file mode 100644
index 0000000..53f890e
Binary files /dev/null and b/static/kauneuskilpailu.png differ
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..8148dea
--- /dev/null
+++ b/static/styles.css
+* {
+ font-family: sans-serif;
+}
+
+body {
+ max-width: 500px;
+ padding: 20px;
+ margin: auto;
+ background-color: #f8f8f8;
+}
+
+.uutis-lista {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.uutis-kortti {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+}
+
+.uutis-kuva {
+ object-fit: cover;
+}
+
+.uutis-tiedot {
+ padding: 10px;
+}
\ No newline at end of file
diff --git a/static/tupru.png b/static/tupru.png
new file mode 100644
index 0000000..9e687bb
Binary files /dev/null and b/static/tupru.png differ