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
@ -2,4 +2,32 @@
 *{
    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>