From 2e95a6be2554849129935ccb2d73a598c208debb Mon Sep 17 00:00:00 2001
From: RemRem <remrem@github.com>
Date: Sat, 4 Feb 2023 00:35:04 +0100
Subject: [PATCH] add margin for better display

---
 styles/card.css  |  3 +--
 views/cards.html | 20 +++++++++-----------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/styles/card.css b/styles/card.css
index 3e0d00d..43932f4 100644
--- a/styles/card.css
+++ b/styles/card.css
@@ -6,6 +6,7 @@
   height: 10rem;
   width: 20rem;
   padding: 3em;
+  margin: 1.7rem; /* for better display */
   border: 0.3em solid black;
   border-radius: 2em;
   background-color: white;
@@ -13,8 +14,6 @@
 
 .item {
   margin: 1rem;
-  /* height: calc(10rem - 6em);
-  width: calc(20rem - 6em); */
 }
 
 #main {
diff --git a/views/cards.html b/views/cards.html
index 351e787..2dc5a14 100644
--- a/views/cards.html
+++ b/views/cards.html
@@ -77,7 +77,7 @@
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
-        <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
+        <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18" "></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
@@ -105,8 +105,8 @@
 
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
-        <use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
+        <use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
+        <use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
@@ -115,24 +115,22 @@
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
-        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
+        <use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
+        <use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
       </svg>
     </div>
 
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use>
-        <use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use>
+        <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
       </svg>
 
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use>
-        <use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use>
+        <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
       </svg>
-    </div>
 
-    <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
         <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
         <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>