vegard-uni/webtek-assignment2
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Task 4: Playing cards

Browse Source
This commit is contained in:
Brikt Wiedswang
2025-10-02 16:28:52 +02:00
parent 57e3a3cae4
commit c67ec16e5e
1 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
style.css
View File

@@ -53,23 +53,48 @@
} }
.card { .card {
display: inline-flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: row;
width: 12em; width: 300px;
height: 18em; height: 450px;
border: 1px solid black; border: 1px solid black;
border-radius: 5px; border-radius: 5px;
font-family: monospace;
font-size: 32px;
} }
.container>.card>.middle { .container>.card>.middle {
display: grid; display: grid;
text-align: center; text-align: center;
grid-template-columns: repeat(2, 50% [col-start]); align-items: center;
font-size: 3em; grid-template-columns: repeat(2, 96px [col-start]);
font-size: 64px;
} }
.container>.card>.middle>div:nth-last-child(2) {
.container>.card.>.left { transform: rotate(0.5turn);
} }
.container>.card.>.right { .container>.card>.middle>div:nth-last-child(1) {
text-align: center; transform: rotate(0.5turn);
} }
.container>.card>.right {
text-align: left;
transform: rotate(0.5turn);
padding: 1em 0em 0em 1em;
}
.container>.card>.center {
font-size: 128px;
align-items: center;
display: flex;
}
.container>.card>.bottom {
text-align: left;
transform: rotate(0.5turn);
padding: 1em 0em 0em 1em;
}
.container>.card>.top {
padding: 1em 0em 0em 1em;
}
.container>.card>.left {
padding: 1em;
padding: 1em 0em 0em 1em;
}