Diff between 5ad3740bb8fe62b8fe69247c3eb77888f7043d86 and a3fb6d61d07f6abaa76f99ba4d69dfddaf43305f

Changed Files

File Additions Deletions Status
index.html +27 -23 modified
static/styles.css +11 -1 modified

Full Patch

diff --git a/index.html b/index.html
index b1e5aea..ea266fe 100644
--- a/index.html
+++ b/index.html
@@ -7,29 +7,33 @@
 </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>
+        <a href="#">
+            <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>
+        </a>
+        
+        <a href="#">
+            <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>
+        </a>
     </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/static/styles.css b/static/styles.css
index 8148dea..3f8d056 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -9,6 +9,11 @@ body {
     background-color: #f8f8f8;
 }
 
+a {
+    color: black;
+    text-decoration: none;
+}
+
 .uutis-lista {
     display: flex;
     flex-direction: column;
@@ -19,6 +24,11 @@ body {
     display: flex;
     flex-direction: column;
     background-color: white;
+    transition: 0.2s;
+}
+
+.uutis-kortti:hover {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 2px 20px 0 rgba(0, 0, 0, 0.05);
 }
 
 .uutis-kuva {
@@ -26,5 +36,5 @@ body {
 }
 
 .uutis-tiedot {
-    padding: 10px;
+    padding: 10px 20px;
 }
\ No newline at end of file