Stapel auf dem Tisch CSS

2 years ago · 5deb6fc5a5
2 changed files with 48 additions and 1 deletions
--- a/uno/css/uno.css
+++ b/uno/css/uno.css
@ -3,3 +3,31 @@
 *{
    font-family: 'Cabin', sans-serif;
 }
+
+body
+{
+    overflow: hidden;
+}
+
+
+/* ### Stapel-"Karte ziehen" ### */
+.stack-draw
+{
+    max-width: 25vh;
+    min-width: 20vh;
+    position: absolute;
+    top: 47vh;
+    right: min(90%, (53% + 10vh));
+    transform: translate(50%, -50%);
+}
+
+/* ### Stapel-"Karte legen" ### */
+.stack-put
+{
+    max-width: 25vh;
+    min-width: 20vh;
+    position: absolute;
+    top: 47vh;
+    left: min(90%, (53% + 10vh));
+    transform: translate(-50%, -50%);
+}
--- a/uno/index.html
+++ b/uno/index.html
@ -9,7 +9,8 @@

    <link rel="stylesheet" href="./css/uno.css">
 </head>
-<body style="overflow: hidden">
+<body>
+
    <div id="debug">
        <p id="playerInGame"></p>
        <p id="player"></p>
@ -17,5 +18,23 @@
        <div id="playerCards"></div>
        <button id="drawCard">Karte Ziehen</button>
    </div>
+
+    <div>
+
+        <!-- "Karte legen" Stapel -->
+        <img class="stack-put" src="./img/stackCards/StackPutCards.png">
+
+        <!-- "Karte ziehen" Stapel -->
+        <img class="stack-draw" src="./img/stackCards/StackDrawCards.png">
+        <img class="stack-draw" alt="" id="first-draw" src="./img/stackCards/FirstDrawCard.png">
+
+    </div>
+
+    <div>
+
+
+
+    </div>
+
 </body>
 </html>