create jasstafel #4

michivonah · Jan 15, 2023 · d0c7e02 · d0c7e02
1 parent 6735445
commit d0c7e02
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -82,6 +82,11 @@ <h2>Copyright</h2>
                     <img class="card given" src="https://jassverzeichnis.ch/wp-content/uploads/2022/05/rosen-under.gif" alt="Random Card">
                 </div>
             </div>
+            <div id="jasstafel">
+                <img id="currentTrump" src="" alt="Aktueller Trumpf">
+                <p>Du: 0</p>
+                <p>Gegner: 0</p>
+            </div>
             <div class="cardContainer user"></div>
             <div class="cardContainer cpu"></div>
             <div class="cardContainer cpu"></div>

diff --git a/style.css b/style.css
@@ -20,6 +20,7 @@ body{
     --theme2: #6ab04c;
     --theme3: #27ae60;
     --accent: #c0392b;
+    --brown: #a83b11;
     --font: 'Sofia Sans', sans-serif;
     --transition: 0.2s ease all;
 }
@@ -163,6 +164,28 @@ body{
     transition: 0.4s ease-out;
 }
 
+/* Jasstafel */
+#jasstafel{
+    width: 15%;
+    height: auto;
+    background: radial-gradient(circle, rgba(75,75,75,1) 0%, rgba(24,24,24,1) 100%);
+    color: var(--white);
+    border: 6px solid var(--brown);
+    border-radius: 4px;
+    padding: 15px;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+#jasstafel img{
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--white);
+    padding: 5px;
+}
+
 
 /* GENERAL */
 .notice{