add font awesome
This commit is contained in:
chris
parent
e73724bcbc
commit
1b4b38ff6b
BIN
MTG/down.jpeg
Normal file
BIN
MTG/down.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@ -14,6 +14,8 @@
|
||||
<title>MTG Life Counter</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/menu/menu.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@ -29,13 +31,13 @@
|
||||
Player 1</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(1)" id="lifeUp" class="fiveLife">▲</div>
|
||||
<div onclick="lifeIncrease(1)" id="lifeUp">▲</div>
|
||||
<div onclick="lifeIncrease5(1)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
||||
<div onclick="lifeIncrease(1)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
||||
</span>
|
||||
<div id="lifeCount1">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(1)" id="lifeDown" class="fiveLife">▼</div>
|
||||
<div onclick="lifeDecrease(1)" id="lifeDown">▼</div>
|
||||
<div onclick="lifeDecrease5(1)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
||||
<div onclick="lifeDecrease(1)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,13 +47,13 @@
|
||||
Player 2</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(2)" id="lifeUp" class="fiveLife">▲</div>
|
||||
<div onclick="lifeIncrease(2)" id="lifeUp">▲</div>
|
||||
<div onclick="lifeIncrease5(2)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
||||
<div onclick="lifeIncrease(2)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
||||
</span>
|
||||
<div id="lifeCount2">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(2)" id="lifeDown" class="fiveLife">▼</div>
|
||||
<div onclick="lifeDecrease(2)" id="lifeDown">▼</div>
|
||||
<div onclick="lifeDecrease5(2)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
||||
<div onclick="lifeDecrease(2)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -60,13 +62,13 @@
|
||||
Player 3</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(3)" id="lifeUp" class="fiveLife">▲</div>
|
||||
<div onclick="lifeIncrease(3)" id="lifeUp">▲</div>
|
||||
<div onclick="lifeIncrease5(3)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
||||
<div onclick="lifeIncrease(3)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
||||
</span>
|
||||
<div id="lifeCount3">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(3)" id="lifeDown" class="fiveLife">▼</div>
|
||||
<div onclick="lifeDecrease(3)" id="lifeDown">▼</div>
|
||||
<div onclick="lifeDecrease5(3)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
||||
<div onclick="lifeDecrease(3)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -75,13 +77,13 @@
|
||||
Player 4</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(4)" id="lifeUp" class="fiveLife">▲</div>
|
||||
<div onclick="lifeIncrease(4)" id="lifeUp">▲</div>
|
||||
<div onclick="lifeIncrease5(4)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
||||
<div onclick="lifeIncrease(4)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
||||
</span>
|
||||
<div id="lifeCount4">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(4)" id="lifeDown" class="fiveLife">▼</div>
|
||||
<div onclick="lifeDecrease(4)" id="lifeDown">▼</div>
|
||||
<div onclick="lifeDecrease5(4)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
||||
<div onclick="lifeDecrease(4)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -90,13 +92,13 @@
|
||||
Player 5</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(5)" id="lifeUp" class="fiveLife">▲</div>
|
||||
<div onclick="lifeIncrease(5)" id="lifeUp">▲</div>
|
||||
<div onclick="lifeIncrease5(5)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
||||
<div onclick="lifeIncrease(5)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
||||
</span>
|
||||
<div id="lifeCount5">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(5)" id="lifeDown" class="fiveLife">▼</div>
|
||||
<div onclick="lifeDecrease(5)" id="lifeDown">▼</div>
|
||||
<div onclick="lifeDecrease5(5)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
||||
<div onclick="lifeDecrease(5)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -105,13 +107,13 @@
|
||||
Player 6</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(6)" id="lifeUp" class="fiveLife">▲</div>
|
||||
<div onclick="lifeIncrease(6)" id="lifeUp">▲</div>
|
||||
<div onclick="lifeIncrease5(6)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
||||
<div onclick="lifeIncrease(6)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
||||
</span>
|
||||
<div id="lifeCount6">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(6)" id="lifeDown" class="fiveLife">▼</div>
|
||||
<div onclick="lifeDecrease(6)" id="lifeDown">▼</div>
|
||||
<div onclick="lifeDecrease5(6)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
||||
<div onclick="lifeDecrease(6)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -120,13 +122,13 @@
|
||||
Player 7</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(7)" id="lifeUp" class="fiveLife">▲</div>
|
||||
<div onclick="lifeIncrease(7)" id="lifeUp">▲</div>
|
||||
<div onclick="lifeIncrease5(7)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
||||
<div onclick="lifeIncrease(7)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
||||
</span>
|
||||
<div id="lifeCount7">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(7)" id="lifeDown" class="fiveLife">▼</div>
|
||||
<div onclick="lifeDecrease(7)" id="lifeDown">▼</div>
|
||||
<div onclick="lifeDecrease5(7)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
||||
<div onclick="lifeDecrease(7)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -135,13 +137,13 @@
|
||||
Player 8</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(8)" id="lifeUp" class="fiveLife">▲</div>
|
||||
<div onclick="lifeIncrease(8)" id="lifeUp">▲</div>
|
||||
<div onclick="lifeIncrease5(8)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
||||
<div onclick="lifeIncrease(8)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
||||
</span>
|
||||
<div id="lifeCount8">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(8)" id="lifeDown" class="fiveLife">▼</div>
|
||||
<div onclick="lifeDecrease(8)" id="lifeDown">▼</div>
|
||||
<div onclick="lifeDecrease5(8)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
||||
<div onclick="lifeDecrease(8)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,8 +10,9 @@ body {
|
||||
background-color: rgb(82, 100, 100);
|
||||
/* height: 100vh; */
|
||||
/* width: 100vw; */
|
||||
/* margin: 0 auto; */
|
||||
margin: 0;
|
||||
display: flex;
|
||||
height: 100%
|
||||
/* align-items: center */
|
||||
}
|
||||
main {
|
||||
@ -22,12 +23,12 @@ main {
|
||||
flex-wrap: wrap;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
/* align-items: center; */
|
||||
position: relative;
|
||||
/* margin: 0 auto; */
|
||||
padding-bottom: 70px;
|
||||
margin-top: 70px;
|
||||
margin-bottom: 70px;
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
.name {
|
||||
font-size: 3rem;
|
||||
@ -97,7 +98,7 @@ main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* flex-grow: 1; */
|
||||
margin: 3%;
|
||||
/* margin: 3%; */
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
@ -131,16 +132,29 @@ main {
|
||||
|
||||
.fiveLife {
|
||||
display: flex;
|
||||
color: blue;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
/* font-size: 3rem; */
|
||||
}
|
||||
.fiveLife::after{
|
||||
content: '5';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
color: #aaa;
|
||||
z-index: -1;
|
||||
}
|
||||
.lifeUp{
|
||||
color: #00cc00
|
||||
}
|
||||
.lifeDown{
|
||||
color:#e60000
|
||||
}
|
||||
.vert{
|
||||
flex-direction: column;
|
||||
font-size: 5rem ;
|
||||
}
|
||||
.fiveLifeDown {
|
||||
color: greenyellow;
|
||||
}
|
||||
|
||||
.lifeFlex{
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
BIN
MTG/up.jpeg
Normal file
BIN
MTG/up.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
x
Reference in New Issue
Block a user