<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="softBar">
<div id="smile" class="yellow softButton" onclick="selectItem('smile')">
<i class=" fas fa-smile-wink"></i>
</div>
<div id="list" class="green softButton" onclick="selectItem('list')">
<i class="fas fa-list-ul " data-fa-mask="fas fa-circle"></i>
</div>
<div id="share" class="red softButton" onclick="selectItem('share')">
<i class="fas fa-share-alt"></i>
</div>
<div id="user" class="pink softButton" onclick="selectItem('user')">
<i class="fas fa-user"></i>
</div>
<div id="cog" class="turquoise softButton" onclick="selectItem('cog')">
<i class="fas fa-cog"></i>
</div>
</div>
<div class="contentBox">
<h1 id="output">#Emoji</h1>
<div class="demoCard">
<div style="position: relative; ">
License:
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>
</div>
</div>
<div class="demoCard">
<div style="position: relative; ">Blog:
<a href="https://epische.website" target="_blank">epische.website</a>
</div>
</div>
<div class="demoCard">
<div style="position: relative; ">
Twitter:
<a href="https://twitter.com/MenschOmaten" target="_blank">@MenschOmaten</a>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Baloo+2&subset=latin-ext");
* {
font-family: "Baloo 2", cursive;
}
:root {
--yellow: linear-gradient(151deg, rgba(242,209,7,1) 0%, rgba(255,138,138,1) 100%);
--green: linear-gradient(139deg, rgba(0,188,212,1) 0%, rgba(139,195,74,1) 100%);
--red: linear-gradient(120deg, rgba(255,152,0,1) 0%, rgba(233,30,99,1) 100%);
--pink: linear-gradient(147deg, rgba(104,190,252,1) 0%, rgba(229,55,252,1) 100%);
--turquoise: linear-gradient(307deg, rgba(0,191,242,1) 0%, rgba(135,241,146,1) 100%);
}
html,
body {
height: 100%;
max-height: 100%;
overflow: hidden;
background-color: #f2f5f7;
display:flex;
align-items:center;
flex-direction:column;
justify-content: center;
}
.softBar{
border-radius: 1rem;
margin-bottom: 1rem;
background: transparent;
display: flex;
padding: 0.25rem;
justify-content: space-around;
align-items: center;
min-height: 4rem;
min-width: 20rem;
max-width: 20rem;
box-shadow: inset 6px 6px 10px #d1d9e6, inset -6px -6px 10px #fff;
}
.softButton{
cursor: pointer;
min-width: 2.6rem;
min-height: 2.55rem;
max-width: 2.6rem;
width: 2.6rem;
max-height: 2.55rem;
background-color: transparent;
border-radius: 0.7rem;
display: flex;
border:none;
margin:0;
align-items: center;
justify-content: center;
box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #fff;
}
.fas{
font-size: 1.5rem;
}
.green > .fas{
background: var(--green);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color:transparent;
}
.yellow > .fas{
background: var(--yellow);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color:transparent;
}
.red > .fas{
background: var(--red);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color:transparent;
}
.pink > .fas{
background: var(--pink);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color:transparent;
}
.turquoise > .fas{
background: var(--turquoise);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color:transparent;
}
.yellow.selected{
background:var(--yellow);
}
.green.selected{
background:var(--green);
}
.pink.selected{
background:var(--pink);
}
.red.selected{
background:var(--red);
}
.turquoise.selected{
background:var(--turquoise);
}
.selected{
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25),
inset -2px -2px 5px rgba(255, 255, 255, 0.25);
}
.selected > .fas{
color:#f2f5f7
}
.contentBox{
border-radius: 1rem;
margin-bottom: 1rem;
background: transparent;
display: flex;
flex-direction:column;
padding: 1.5rem;
min-height: 30rem;
min-width: 17.5rem;
max-width: 17.5rem;
margin:0 1rem 0 1rem;
box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #fff,
inset 6px 6px 10px #d1d9e6, inset -6px -6px 10px #fff;
}
.demoCard {
border-radius: 10px;
margin: 0 0 1.5rem 0;
padding: 0.7rem;
position: relative;
border: 2px solid transparent;
box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #fff,
inset 6px 6px 10px #d1d9e6, inset -6px -6px 10px #fff;
color:rgba(0, 0, 0, 0.7);
}
a{
color:rgba(0, 0, 0, 0.7);
}
.demoCard::before{
content: "";
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(233, 30, 99);
background: linear-gradient(
90deg,
rgba(255, 152, 0, 1) 0%,
rgba(233, 30, 99, 1) 100%
);
filter: opacity(25%);
}
h1{
margin-left: 1rem;
margin-top: 0.5rem;
opacity: 0.5;
}
var selected = "smile"
selectItem(selected)
function selectItem(e){
document.getElementById(selected).classList.remove('selected');
selected = e;
document.getElementById("output").innerHTML='#'+e
document.getElementById(selected).classList.add('selected');
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.