mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
115 lines
3.5 KiB
HTML
115 lines
3.5 KiB
HTML
<div class="card">
|
|
<div class="GameImg">
|
|
|
|
<div class="Gfooter">
|
|
<div class="SmallIcon"></div>
|
|
<span class="Stars"><svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 50.000000 50.000000" height="50.000000pt" width="50.000000pt" version="1.0" xmlns="http://www.w3.org/2000/svg" class="StarIcon">
|
|
<g stroke="none" fill="#ebd300" transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)">
|
|
<path d="M210 405 l-33 -85 -83 0 c-45 0 -85 -4 -88 -9 -3 -5 23 -33 59 -62 36 -29 65 -60 65 -68 0 -9 -9 -48 -20 -86 -11 -38 -20 -71 -20 -72 0 -12 35 4 85 37 33 22 67 40 75 40 8 0 42 -18 75 -40 50 -33 85 -49 85 -37 0 1 -9 34 -20 72 -11 38 -20 77 -20 86 0 8 29 39 65 68 36 28 63 56 60 62 -4 5 -44 9 -90 9 l-83 0 -33 85 c-17 47 -35 85 -39 85 -4 0 -22 -38 -40 -85z"></path>
|
|
</g>
|
|
</svg>
|
|
5/5</span>
|
|
<span class="Descripion">This is Descripion of The Game</span>
|
|
</div>
|
|
|
|
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 50.000000 50.000000" height="50.000000pt" width="50.000000pt" version="1.0" xmlns="http://www.w3.org/2000/svg" class="GameIcon">
|
|
<g stroke="none" fill="#ff5858" transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)">
|
|
<path d="M427 471 c-2 -11 -36 -35 -78 -57 -62 -33 -77 -46 -94 -81 -14 -30 -24 -41 -35 -36 -64 25 -90 27 -117 7 -58 -42 -115 -185 -99 -248 19 -76 81 -73 195 9 19 14 41 25 50 25 9 0 43 -18 75 -40 33 -22 70 -43 83 -46 64 -16 101 30 89 113 -7 56 -62 159 -99 187 -28 20 -56 18 -121 -9 -16 -7 -17 -5 -11 16 12 39 36 60 102 90 56 25 83 50 83 78 0 18 -17 12 -23 -8z m-41 -252 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m-236 -14 c0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -8 -7 -15 -15 -15 -8 0 -15 -7 -15 -15 0 -8 -7 -15 -15 -15 -8 0 -15 7 -15 15 0 8 -7 15 -15 15 -8 0 -15 7 -15 15 0 8 7 15 15 15 8 0 15 7 15 15 0 8 7 15 15 15 8 0 15 -7 15 -15z m196 -26 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m80 0 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m-40 -40 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z"></path></g></svg>
|
|
<span class="Name">Game Name</span>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by 1osm - Tags: card */
|
|
.card {
|
|
width: 200px;
|
|
height: 250px;
|
|
background: #262626;
|
|
}
|
|
|
|
.GameIcon {
|
|
transform: translate(-80px,-50px);
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 200px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.GameImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.Gfooter {
|
|
width: 100%;
|
|
height: 0%;
|
|
background-color: #262626;
|
|
border-radius: 10px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.Name {
|
|
transform: translate(10px,200px);
|
|
position: absolute;
|
|
background-color: transparent;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
transition: 0.3s;
|
|
color: #ff5858;
|
|
}
|
|
|
|
.SmallIcon {
|
|
width: 0px;
|
|
height: 0px;
|
|
transform: translate(10px,10px);
|
|
border-radius: 10px;
|
|
background-color: #ff5858;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.Descripion {
|
|
padding: 10px;
|
|
position: absolute;
|
|
transform: translate(0px,20px);
|
|
opacity: 0%;
|
|
color: #ff5858;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.StarIcon {
|
|
transform: translate(-0px,25px);
|
|
width: 20px;
|
|
fill: #ebd300;
|
|
}
|
|
|
|
.Stars {
|
|
position: absolute;
|
|
color: white;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
transform: translate(80px,-70px);
|
|
}
|
|
|
|
.GameImg:hover .Descripion {
|
|
opacity: 100%;
|
|
}
|
|
|
|
.GameImg:hover .Gfooter {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.GameImg:hover .SmallIcon {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.GameImg:hover .Name {
|
|
transform: translate(75px,-235px);
|
|
}
|
|
|
|
.GameImg:hover .GameIcon {
|
|
transform: translate(100px,-160px);
|
|
}
|
|
|
|
</style>
|