const card = props.card; const Card = styled.div` .container { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; } .zone { cursor: pointer; /* display: block; */ text-align: center; font-size: 10em; border-radius: 4px; border: 1px solid #bbb; transition: all 0.3s linear; } .zone:hover { -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px; -moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px; -o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px; box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px; } /*********************************************************************** * Green Background **********************************************************************/ .green { background: #56b870; /* Old browsers */ background: -moz-linear-gradient(top, #56b870 0%, #a5c956 100%); /* FF3.6+ */ background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, #56b870), color-stop(100%, #a5c956) ); /* Chrome,Safari4+ */ background: -webkit-linear-gradient( top, #56b870 0%, #a5c956 100% ); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient( top, #56b870 0%, #a5c956 100% ); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #56b870 0%, #a5c956 100%); /* IE10+ */ background: linear-gradient(top, #56b870 0%, #a5c956 100%); /* W3C */ } /*********************************************************************** * Red Background **********************************************************************/ .red { background: #c655be; /* Old browsers */ background: -moz-linear-gradient(top, #c655be 0%, #cf0404 100%); /* FF3.6+ */ background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, #c655be), color-stop(100%, #cf0404) ); /* Chrome,Safari4+ */ background: -webkit-linear-gradient( top, #c655be 0%, #cf0404 100% ); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient( top, #c655be 0%, #cf0404 100% ); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #c655be 0%, #cf0404 100%); /* IE10+ */ background: linear-gradient(top, #c655be 0%, #cf0404 100%); /* W3C */ } /*********************************************************************** * Yellow Background **********************************************************************/ .yellow { background: #f3aaaa; /* Old browsers */ background: -moz-linear-gradient(top, #f3aaaa 0%, #febf04 100%); /* FF3.6+ */ background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, #f3aaaa), color-stop(100%, #febf04) ); /* Chrome,Safari4+ */ background: -webkit-linear-gradient( top, #f3aaaa 0%, #febf04 100% ); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient( top, #f3aaaa 0%, #febf04 100% ); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f3aaaa 0%, #febf04 100%); /* IE10+ */ background: linear-gradient(top, #f3aaaa 0%, #febf04 100%); /* W3C */ } /*********************************************************************** * Blue Background **********************************************************************/ .blue { background: #7abcff; /* Old browsers */ background: -moz-linear-gradient( top, #7abcff 0%, #60abf8 44%, #4096ee 100% ); /* FF3.6+ */ background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee) ); /* Chrome,Safari4+ */ background: -webkit-linear-gradient( top, #7abcff 0%, #60abf8 44%, #4096ee 100% ); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient( top, #7abcff 0%, #60abf8 44%, #4096ee 100% ); /* Opera 11.10+ */ background: -ms-linear-gradient( top, #7abcff 0%, #60abf8 44%, #4096ee 100% ); /* IE10+ */ background: linear-gradient( top, #7abcff 0%, #60abf8 44%, #4096ee 100% ); /* W3C */ } /*********************************************************************** * Purple Background **********************************************************************/ .purple { background: #a88beb; /* Old browsers */ background: -moz-linear-gradient( top, #a88beb 0%, #f1a7f1 44%, #f8ceec 100% ); /* FF3.6+ */ background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, #a88beb), color-stop(44%, #f1a7f1), color-stop(100%, #f8ceec) ); /* Chrome,Safari4+ */ background: -webkit-linear-gradient( top, #a88beb 0%, #f1a7f1 44%, #f8ceec 100% ); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient( top, #a88beb 0%, #f1a7f1 44%, #f8ceec 100% ); /* Opera 11.10+ */ background: -ms-linear-gradient( top, #a88beb 0%, #f1a7f1 44%, #f8ceec 100% ); /* IE10+ */ background: linear-gradient( top, #a88beb 0%, #f1a7f1 44%, #f8ceec 100% ); /* W3C */ } /*********************************************************************** * Brown Background **********************************************************************/ .brown { background: #f6e6b4; /* Old browsers */ background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */ background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, #f6e6b4), color-stop(100%, #ed9017) ); /* Chrome,Safari4+ */ background: -webkit-linear-gradient( top, #f6e6b4 0%, #ed9017 100% ); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient( top, #f6e6b4 0%, #ed9017 100% ); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* IE10+ */ background: linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */ } `; return ( <Card className="card"> <div class="container"> <div class="zone purple">🛠️</div> <div class="zone yellow">Ⓝ</div> <div class="zone green">🔑</div> <div class="zone blue">👌</div> <div class="zone brown">₿</div> <div class="zone red">⚡</div> <div class="zone purple">🏖️</div> <div class="zone yellow">🍣</div> </div> </Card> );