Skip to content

Instantly share code, notes, and snippets.

@briglx

briglx/main.html

Created June 3, 2021 23:18
Show Gist options
  • Save briglx/dda340b2329db5d94261d73d23c14776 to your computer and use it in GitHub Desktop.
Save briglx/dda340b2329db5d94261d73d23c14776 to your computer and use it in GitHub Desktop.
Download ZIP
Mono select Card Game
Raw
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.row{
display:flex;
}
.card {
border: 1px solid black;
width: 200px;
height: 200px;
margin: 1px;
}
i{
font-size: 50px;
}
.color1{
color: #202140;
}
.color2{
color: #75BFB8;
}
.color3{
color: #F2A74B;
}
.color4{
color: #D94A3D;
}
i{
padding: 0px;
margin: 20px;
}
.hide{
display: none;
}
</style>
<script src="https://kit.fontawesome.com/e65da9f850.js" crossorigin="anonymous"></script>
</head>
<body>
<h1 class="hide">Icon Set</h1>
<ul class="hide">
<li><i class="fas fa-adjust"></i></li>
<li><i class="fas fa-user"></i></li>
<li><i class="fas fa-heart"></i></li>
<li><i class="fas fa-mitten"></i></li>
<li><i class="fas fa-video"></i></li>
<li><i class="fas fa-bell"></i></li>
<li><i class="fas fa-flag"></i></li>
<li><i class="fas fa-stop"></i></li>
<li><i class="fas fa-cloud"></i></li>
<li><i class="fas fa-power-off"></i></li>
<li><i class="fas fa-music"></i></li>
<li><i class="fas fa-shower"></i></li>
<li><i class="fas fa-phone"></i></li>
</ul>
<h2 class="hide">Main set</h2>
<div class="row">
<div class="card">
<i class="fas fa-adjust color1" ></i>
<i class="fas fa-mitten color3"></i>
<i class="fas fa-flag color2"></i>
<i class="fas fa-power-off color4"></i>
</div>
<div class="card">
<i class="fas fa-user color4"></i>
<i class="fas fa-video color1"></i>
<i class="fas fa-stop color2"></i>
<i class="fas fa-power-off color3"></i>
</div>
<div class="card">
<i class="fas fa-heart color3"></i>
<i class="fas fa-bell color4"></i>
<i class="fas fa-cloud color1"></i>
<i class="fas fa-power-off color2"></i>
</div>
</div>
<div class="row">
<div class="card">
<i class="fas fa-adjust color2"></i>
<i class="fas fa-bell color3"></i>
<i class="fas fa-stop color4"></i>
<i class="fas fa-music color1"></i>
</div>
<div class="card">
<i class="fas fa-user color1"></i>
<i class="fas fa-mitten color2"></i>
<i class="fas fa-cloud color3"></i>
<i class="fas fa-music color4"></i>
</div>
<div class="card">
<i class="fas fa-heart color4"></i>
<i class="fas fa-video color1"></i>
<i class="fas fa-flag color2"></i>
<i class="fas fa-music color3"></i>
</div>
</div>
<div class="row">
<div class="card">
<i class="fas fa-adjust color3"></i>
<i class="fas fa-video color4"></i>
<i class="fas fa-cloud color1"></i>
<i class="fas fa-shower color2"></i>
</div>
<div class="card">
<i class="fas fa-user color2"></i>
<i class="fas fa-bell color3"></i>
<i class="fas fa-flag color4"></i>
<i class="fas fa-shower color1"></i>
</div>
<div class="card">
<i class="fas fa-heart color1"></i>
<i class="fas fa-mitten color3"></i>
<i class="fas fa-stop color2"></i>
<i class="fas fa-shower color4"></i>
</div>
</div>
<h2 class="hide">Vanishing Point</h2>
<div class="row">
<div class="card">
<i class="fas fa-adjust color1"></i>
<i class="fas fa-user color2"></i>
<i class="fas fa-heart color3"></i>
<i class="fas fa-phone color4"></i>
</div>
<div class="card">
<i class="fas fa-mitten color2"></i>
<i class="fas fa-video color3"></i>
<i class="fas fa-bell color4"></i>
<i class="fas fa-phone color1"></i>
</div>
<div class="card">
<i class="fas fa-flag color3"></i>
<i class="fas fa-stop color4"></i>
<i class="fas fa-cloud color1"></i>
<i class="fas fa-phone color2"></i>
</div>
</div>
<div class="row">
<div class="card">
<i class="fas fa-power-off color4"></i>
<i class="fas fa-music color3"></i>
<i class="fas fa-shower color2"></i>
<i class="fas fa-phone color1"></i>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment