DEV Community

Cover image for animals accordion
GiandoDev
GiandoDev

Posted on

1 1

animals accordion

Preview: Animals accordion
We start with html:

<div class="accordion-container">
    <div class="accordion" data-theme="baby-shark">
        <div class="accordion__header">
            <h2>
                <button>
                    <span class="accordion__title">Baby Shark</span>
                    <div class="accordion__indicator">
                        <svg class="indicator__plus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/></svg>
                        <svg class="indicator__minus"  fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"/></svg>
                    </div>
                </button>
            </h2>
        </div>

        <div class="accordion__content">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="256px" height="256px"><path fill="#c7ede6" d="M87.215,56.71C88.35,54.555,89,52.105,89,49.5c0-6.621-4.159-12.257-10.001-14.478 C78.999,35.015,79,35.008,79,35c0-11.598-9.402-21-21-21c-9.784,0-17.981,6.701-20.313,15.757C36.211,29.272,34.638,29,33,29 c-7.692,0-14.023,5.793-14.89,13.252C12.906,43.353,9,47.969,9,53.5C9,59.851,14.149,65,20.5,65c0.177,0,0.352-0.012,0.526-0.022 C21.022,65.153,21,65.324,21,65.5C21,76.822,30.178,86,41.5,86c6.437,0,12.175-2.972,15.934-7.614C59.612,80.611,62.64,82,66,82 c4.65,0,8.674-2.65,10.666-6.518C77.718,75.817,78.837,76,80,76c6.075,0,11-4.925,11-11C91,61.689,89.53,58.727,87.215,56.71z"/><path fill="#fdfcef" d="M30.625,47.625c0,0,3.64,0,6.125,0s4.5-2.015,4.5-4.5c0-2.333-1.782-4.229-4.055-4.455 c0.022-0.181,0.055-0.358,0.055-0.545c0-2.485-2.015-4.5-4.5-4.5c-1.438,0-2.703,0.686-3.527,1.736 c-0.14-2.636-2.302-4.736-4.973-4.736c-2.761,0-5,2.239-5,5c0,0.446,0.077,0.87,0.187,1.282c-0.642-0.777-1.6-1.282-2.687-1.282 c-1.781,0-3.234,1.335-3.455,3.055c-0.181-0.022-0.358-0.055-0.545-0.055c-2.485,0-4.5,2.015-4.5,4.5s2.015,4.5,4.5,4.5 s9.5,0,9.5,0h5.375v0.5h3V47.625z"/><path fill="#472b29" d="M24.25,30.125c-3.033,0-5.5,2.467-5.5,5.5c0,0.016,0,0.031,0,0.047 c-0.602-0.354-1.29-0.547-2-0.547c-1.831,0-3.411,1.261-3.858,3.005c-0.047-0.003-0.094-0.005-0.142-0.005c-2.757,0-5,2.243-5,5 s2.243,5,5,5h14.875c0.276,0,0.5-0.224,0.5-0.5s-0.224-0.5-0.5-0.5H12.75c-2.206,0-4-1.794-4-4s1.794-4,4-4 c0.117,0,0.23,0.017,0.343,0.032l0.141,0.019c0.021,0.003,0.041,0.004,0.062,0.004c0.246,0,0.462-0.185,0.495-0.437 c0.191-1.493,1.463-2.618,2.959-2.618c0.885,0,1.723,0.401,2.301,1.1c0.098,0.118,0.241,0.182,0.386,0.182 c0.078,0,0.156-0.018,0.228-0.056c0.209-0.107,0.314-0.346,0.254-0.573c-0.116-0.436-0.17-0.802-0.17-1.153 c0-2.481,2.019-4.5,4.5-4.5c2.381,0,4.347,1.872,4.474,4.263c0.011,0.208,0.15,0.387,0.349,0.45 c0.05,0.016,0.101,0.024,0.152,0.024c0.15,0,0.296-0.069,0.392-0.192c0.771-0.981,1.913-1.544,3.133-1.544c2.206,0,4,1.794,4,4 c0,0.117-0.017,0.23-0.032,0.343l-0.019,0.141c-0.016,0.134,0.022,0.268,0.106,0.373c0.084,0.105,0.207,0.172,0.34,0.185 c2.055,0.205,3.604,1.906,3.604,3.958c0,2.206-1.794,4-4,4h-6.125c-0.276,0-0.5,0.224-0.5,0.5s0.224,0.5,0.5,0.5h6.125 c2.757,0,5-2.243,5-5c0-2.397-1.689-4.413-4.003-4.877c0.002-0.041,0.003-0.082,0.003-0.123c0-2.757-2.243-5-5-5 c-1.176,0-2.293,0.416-3.183,1.164C28.969,31.885,26.805,30.125,24.25,30.125L24.25,30.125z"/><path fill="#472b29" d="M22.75,37.125c-1.403,0-2.609,0.999-2.913,2.341c-0.367-0.222-0.786-0.341-1.212-0.341 c-1.202,0-2.198,0.897-2.353,2.068c-0.203-0.045-0.396-0.068-0.585-0.068c-1.529,0-2.811,1.2-2.918,2.732 c-0.009,0.138,0.094,0.257,0.232,0.267c0.006,0,0.012,0,0.018,0c0.13,0,0.24-0.101,0.249-0.232 c0.089-1.271,1.151-2.268,2.419-2.268c0.229,0,0.47,0.042,0.738,0.127c0.022,0.007,0.045,0.01,0.067,0.01 c0.055,0,0.11-0.02,0.156-0.054c0.064-0.047,0.102-0.129,0.102-0.209c0-1.034,0.841-1.875,1.875-1.875 c0.447,0,0.885,0.168,1.231,0.473c0.047,0.041,0.106,0.063,0.165,0.063c0.032,0,0.063-0.006,0.093-0.019 c0.088-0.035,0.148-0.117,0.155-0.212c0.102-1.292,1.191-2.305,2.479-2.305c0.208,0,0.425,0.034,0.682,0.107 c0.023,0.007,0.047,0.01,0.07,0.01c0.109,0,0.207-0.073,0.239-0.182c0.038-0.133-0.039-0.271-0.172-0.309 C23.267,37.165,23.006,37.125,22.75,37.125L22.75,37.125z"/><path fill="#472b29" d="M36.633,38.625c-1.326,0-2.508,0.897-2.874,2.182c-0.038,0.133,0.039,0.271,0.172,0.309 c0.023,0.007,0.046,0.01,0.068,0.01c0.109,0,0.209-0.072,0.24-0.182c0.305-1.071,1.289-1.818,2.393-1.818 c0.117,0,0.23,0.014,0.342,0.029c0.012,0.002,0.023,0.003,0.035,0.003c0.121,0,0.229-0.092,0.246-0.217 c0.019-0.137-0.077-0.263-0.214-0.281C36.908,38.641,36.772,38.625,36.633,38.625L36.633,38.625z"/><path fill="#fff" d="M81.405,44H71.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h9.905c0.276,0,0.5,0.224,0.5,0.5 S81.682,44,81.405,44z"/><path fill="#fff" d="M84.5,44h-1c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h1c0.276,0,0.5,0.224,0.5,0.5 S84.777,44,84.5,44z"/><path fill="#fff" d="M89.491,46H80.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h8.991c0.276,0,0.5,0.224,0.5,0.5 S89.767,46,89.491,46z"/><path fill="#fff" d="M78.5,46h-1c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h1c0.276,0,0.5,0.224,0.5,0.5 S78.777,46,78.5,46z"/><path fill="#fff" d="M75.5,46h-2c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h2c0.276,0,0.5,0.224,0.5,0.5 S75.777,46,75.5,46z"/><path fill="#fff" d="M81.5,48h-2c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h2c0.276,0,0.5,0.224,0.5,0.5 S81.776,48,81.5,48z"/><path fill="#fff" d="M84.5,39c-0.177,0-0.823,0-1,0c-0.276,0-0.5,0.224-0.5,0.5c0,0.276,0.224,0.5,0.5,0.5 c0.177,0,0.823,0,1,0c0.276,0,0.5-0.224,0.5-0.5C85,39.224,84.776,39,84.5,39z"/><path fill="#fff" d="M84.5,41c-0.177,0-4.823,0-5,0c-0.276,0-0.5,0.224-0.5,0.5c0,0.276,0.224,0.5,0.5,0.5 c0.177,0,4.823,0,5,0c0.276,0,0.5-0.224,0.5-0.5C85,41.224,84.776,41,84.5,41z"/><path fill="#fff" d="M89.5,43c-0.177,0-2.823,0-3,0c-0.276,0-0.5,0.224-0.5,0.5c0,0.276,0.224,0.5,0.5,0.5 c0.177,0,2.823,0,3,0c0.276,0,0.5-0.224,0.5-0.5C90,43.224,89.776,43,89.5,43z"/><g><path fill="#fff" d="M33.5,78h-10c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h10c0.276,0,0.5,0.224,0.5,0.5 S33.776,78,33.5,78z"/><path fill="#fff" d="M37.5,78h-2c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h2c0.276,0,0.5,0.224,0.5,0.5 S37.776,78,37.5,78z"/><path fill="#fff" d="M42.5,80h-10c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h10c0.276,0,0.5,0.224,0.5,0.5 S42.777,80,42.5,80z"/><path fill="#fff" d="M30.5,80h-1c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h1c0.276,0,0.5,0.224,0.5,0.5 S30.776,80,30.5,80z"/><path fill="#fff" d="M27.375,80H25.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h1.875c0.276,0,0.5,0.224,0.5,0.5 S27.651,80,27.375,80z"/><path fill="#fff" d="M36.5,76h-5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h5c0.276,0,0.5,0.224,0.5,0.5 S36.777,76,36.5,76z"/><path fill="#fff" d="M33.5,82h-2c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h2c0.276,0,0.5,0.224,0.5,0.5 S33.776,82,33.5,82z"/></g><g><path fill="#fdfcef" d="M65.5,33.5c0,0-1.567,0-3.5,0s-3.5-1.567-3.5-3.5c0-1.781,1.335-3.234,3.055-3.455 C61.527,26.366,61.5,26.187,61.5,26c0-1.933,1.567-3.5,3.5-3.5c1.032,0,1.95,0.455,2.59,1.165c0.384-1.808,1.987-3.165,3.91-3.165 c2.209,0,4,1.791,4,4c0,0.191-0.03,0.374-0.056,0.558C75.872,24.714,76.408,24.5,77,24.5c1.228,0,2.245,0.887,2.455,2.055 C79.634,26.527,79.813,26.5,80,26.5c1.933,0,3.5,1.567,3.5,3.5s-1.567,3.5-3.5,3.5s-7.5,0-7.5,0V34h-7V33.5z"/><path fill="#472b29" d="M63.75,29c0.138,0,0.25-0.112,0.25-0.25c0-1.223-0.995-2.218-2.218-2.218 c-0.034,0.009-0.737-0.001-1.244,0.136c-0.133,0.036-0.212,0.173-0.176,0.306c0.036,0.134,0.173,0.213,0.306,0.176 c0.444-0.12,1.1-0.12,1.113-0.118c0.948,0,1.719,0.771,1.719,1.718C63.5,28.888,63.612,29,63.75,29z"/><circle cx="70.5" cy="33.5" r=".5" fill="#472b29"/><path fill="#472b29" d="M62,34h3.5c0.276,0,0.5-0.224,0.5-0.5S65.776,33,65.5,33H62c-1.654,0-3-1.346-3-3 c0-1.496,1.125-2.768,2.618-2.959c0.134-0.018,0.255-0.088,0.336-0.196s0.115-0.244,0.094-0.377C62.025,26.314,62,26.16,62,26 c0-1.654,1.346-3,3-3c0.85,0,1.638,0.355,2.219,1c0.125,0.139,0.321,0.198,0.5,0.148c0.182-0.049,0.321-0.195,0.36-0.379 C68.42,22.165,69.859,21,71.5,21c1.93,0,3.5,1.57,3.5,3.5c0,0.143-0.021,0.28-0.041,0.418c-0.029,0.203,0.063,0.438,0.242,0.54 c0.179,0.102,0.396,0.118,0.556-0.01C76.122,25.155,76.551,25,77,25c0.966,0,1.792,0.691,1.963,1.644 c0.048,0.267,0.296,0.446,0.569,0.405C79.686,27.025,79.84,27,80,27c1.654,0,3,1.346,3,3s-1.346,3-3,3h-7.5 c-0.276,0-0.5,0.224-0.5,0.5s0.224,0.5,0.5,0.5H80c2.206,0,4-1.794,4-4s-1.794-4-4-4c-0.059,0-0.116,0.002-0.174,0.006 C79.412,24.82,78.289,24,77,24c-0.349,0-0.689,0.061-1.011,0.18C75.824,21.847,73.874,20,71.5,20 c-1.831,0-3.466,1.127-4.153,2.774C66.667,22.276,65.845,22,65,22c-2.206,0-4,1.794-4,4c0,0.048,0.001,0.095,0.004,0.142 C59.261,26.59,58,28.169,58,30C58,32.206,59.794,34,62,34z"/><path fill="#472b29" d="M67.5,33c0.159,0,0.841,0,1,0c0.276,0,0.5,0.224,0.5,0.5c0,0.276-0.224,0.5-0.5,0.5 c-0.159,0-0.841,0-1,0c-0.276,0-0.5-0.224-0.5-0.5C67,33.224,67.224,33,67.5,33z"/></g><g><path fill="#8889b9" d="M34.104,55.657c0,0,0.397,0.268,1.105,0.724c2.305,0.715,5.772,1.002,9.52-1.474 c0,0,5.5,4.5,12.75,0.125c0,0,5.803,3.429,10.734,0.938c-0.044-0.14-0.082-0.272-0.128-0.416 C60.163,31.358,41.266,26.488,34.741,25.52c-1.149-0.171-2.133,0.803-2,1.957C33.85,37.098,34.429,46.801,34.104,55.657z"/><path fill="#472b29" d="M35.942,63.814c-0.212,0-0.408-0.135-0.476-0.347c-0.085-0.263,0.06-0.544,0.322-0.629 c0.3-0.096,0.576-0.2,0.829-0.307c1.19-0.502,1.846-1.059,1.853-1.065c0.211-0.18,0.526-0.156,0.705,0.052 c0.18,0.208,0.158,0.523-0.05,0.704c-0.031,0.027-0.771,0.662-2.119,1.231c-0.278,0.117-0.582,0.232-0.911,0.337 C36.045,63.807,35.993,63.814,35.942,63.814z"/><path fill="#472b29" d="M45.108,64.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.181-0.208,0.496-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878s5.962-1.86,5.983-1.878 c0.21-0.18,0.525-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C51.647,62.309,49.255,64.345,45.108,64.345z"/><path fill="#472b29" d="M57.729,64.345c-4.146,0-6.538-2.036-6.638-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.982,1.878c3.755,0,5.962-1.86,5.983-1.878 c0.211-0.18,0.526-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C64.268,62.309,61.875,64.345,57.729,64.345z"/><path fill="#472b29" d="M70.35,64.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.181-0.208,0.496-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878c0.276,0,0.5,0.224,0.5,0.5 S70.626,64.345,70.35,64.345z"/><path fill="#472b29" d="M29.96,64.067c-0.036,0-0.073-0.004-0.11-0.012c-2.526-0.57-3.94-1.781-4-1.833 c-0.208-0.181-0.229-0.495-0.05-0.704c0.18-0.208,0.495-0.232,0.705-0.052c0.013,0.011,1.3,1.101,3.565,1.613 c0.27,0.061,0.438,0.328,0.377,0.598C30.396,63.909,30.188,64.067,29.96,64.067z"/><path fill="#472b29" d="M32.487,64.345c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5c0.822,0,1.632-0.089,2.409-0.263 c0.316-0.071,0.614-0.154,0.894-0.243c0.262-0.084,0.544,0.061,0.629,0.324c0.084,0.263-0.062,0.544-0.324,0.629 c-0.305,0.098-0.632,0.188-0.979,0.266C34.268,64.248,33.383,64.345,32.487,64.345z"/><path fill="#472b29" d="M72.558,64.064c-0.242,0-0.455-0.177-0.493-0.424c-0.042-0.273,0.145-0.528,0.418-0.57 c0.52-0.08,1.479-0.274,1.842-0.454c0.245-0.122,0.547-0.022,0.67,0.226c0.122,0.248,0.021,0.547-0.227,0.67 c-0.619,0.307-1.979,0.522-2.133,0.546C72.609,64.062,72.583,64.064,72.558,64.064z"/><path fill="#472b29" d="M61.274,70.814c-0.051,0-0.103-0.008-0.153-0.024c-0.329-0.106-0.634-0.22-0.911-0.338 c-1.349-0.568-2.088-1.204-2.119-1.231c-0.208-0.181-0.229-0.495-0.05-0.704c0.18-0.208,0.496-0.232,0.705-0.052 c0.007,0.005,0.662,0.563,1.853,1.065c0.252,0.107,0.529,0.211,0.829,0.307c0.263,0.084,0.407,0.366,0.322,0.629 C61.683,70.679,61.486,70.814,61.274,70.814z"/><path fill="#472b29" d="M52.108,71.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878s5.962-1.86,5.983-1.878 c0.211-0.18,0.526-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C58.647,69.309,56.255,71.345,52.108,71.345z"/><path fill="#472b29" d="M39.487,71.345c-4.147,0-6.538-2.036-6.638-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.496-0.232,0.705-0.052c0.021,0.019,2.228,1.878,5.982,1.878s5.962-1.86,5.983-1.878 c0.211-0.18,0.526-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C46.026,69.309,43.634,71.345,39.487,71.345z"/><path fill="#472b29" d="M67.256,71.067c-0.229,0-0.436-0.158-0.487-0.39c-0.062-0.269,0.107-0.537,0.377-0.598 c2.284-0.516,3.553-1.601,3.565-1.612c0.209-0.181,0.523-0.159,0.706,0.05c0.181,0.208,0.158,0.524-0.05,0.705 c-0.06,0.051-1.475,1.262-4.001,1.832C67.329,71.063,67.292,71.067,67.256,71.067z"/><path fill="#472b29" d="M64.729,71.345c-0.896,0-1.779-0.097-2.627-0.288c-0.349-0.078-0.676-0.169-0.98-0.266 c-0.263-0.084-0.407-0.366-0.322-0.629c0.083-0.263,0.367-0.407,0.629-0.323c0.277,0.089,0.575,0.172,0.893,0.243 c0.777,0.175,1.587,0.264,2.408,0.264c0.276,0,0.5,0.224,0.5,0.5S65.005,71.345,64.729,71.345z"/><path fill="#472b29" d="M51.166,57.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878s5.962-1.86,5.983-1.878 c0.211-0.18,0.525-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C57.705,55.309,55.313,57.345,51.166,57.345z"/><path fill="#472b29" d="M36.019,57.067c-0.036,0-0.073-0.004-0.11-0.012c-2.526-0.57-3.941-1.781-4.001-1.832 c-0.208-0.181-0.229-0.495-0.05-0.704c0.18-0.208,0.495-0.232,0.705-0.052c0.013,0.011,1.301,1.101,3.566,1.613 c0.27,0.061,0.438,0.328,0.377,0.598C36.454,56.909,36.247,57.067,36.019,57.067z"/><path fill="#472b29" d="M41.063,57.069c-0.229,0-0.436-0.158-0.488-0.391c-0.06-0.27,0.109-0.537,0.379-0.597 c0.317-0.071,0.615-0.154,0.893-0.243c0.263-0.084,0.545,0.06,0.629,0.323c0.085,0.263-0.06,0.545-0.322,0.629 c-0.305,0.098-0.632,0.188-0.98,0.267C41.136,57.065,41.1,57.069,41.063,57.069z"/><path fill="#472b29" d="M42,56.814c-0.212,0-0.408-0.135-0.476-0.347c-0.085-0.263,0.06-0.544,0.322-0.629 c0.3-0.096,0.577-0.2,0.829-0.307c1.19-0.502,1.846-1.06,1.853-1.065c0.21-0.18,0.525-0.156,0.705,0.052 c0.18,0.208,0.158,0.523-0.05,0.704c-0.031,0.027-0.771,0.662-2.119,1.231c-0.277,0.117-0.582,0.231-0.911,0.337 C42.103,56.807,42.051,56.814,42,56.814z"/><path fill="#472b29" d="M17,56.814c-0.212,0-0.408-0.135-0.476-0.347c-0.085-0.263,0.06-0.544,0.322-0.629 c0.3-0.096,0.577-0.2,0.829-0.307c1.19-0.502,1.846-1.06,1.853-1.065c0.211-0.18,0.525-0.156,0.705,0.052 c0.18,0.208,0.158,0.523-0.05,0.704c-0.031,0.027-0.771,0.662-2.119,1.231c-0.277,0.117-0.582,0.231-0.911,0.337 C17.103,56.807,17.051,56.814,17,56.814z"/><path fill="#472b29" d="M85.855,56.814c-0.051,0-0.103-0.008-0.153-0.024c-0.329-0.106-0.633-0.22-0.911-0.337 c-1.348-0.568-2.088-1.204-2.119-1.231c-0.208-0.181-0.229-0.495-0.05-0.704c0.18-0.208,0.495-0.232,0.705-0.052 c0.006,0.006,0.663,0.563,1.853,1.065c0.253,0.106,0.529,0.21,0.829,0.307c0.263,0.084,0.407,0.366,0.322,0.629 C86.264,56.679,86.067,56.814,85.855,56.814z"/><g><path fill="#472b29" d="M26.051,57.345c-4.069,0-6.417-2.039-6.516-2.126c-0.206-0.183-0.225-0.498-0.043-0.704 c0.184-0.207,0.497-0.227,0.706-0.045c0.021,0.019,2.181,1.875,5.853,1.875c3.695,0,5.832-1.855,5.853-1.874 c0.207-0.183,0.522-0.165,0.706,0.042c0.184,0.207,0.164,0.523-0.042,0.706C32.469,55.306,30.121,57.345,26.051,57.345z"/></g><g><path fill="#472b29" d="M63.787,57.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878c3.777,0,5.96-1.859,5.981-1.877 c0.208-0.181,0.524-0.159,0.705,0.049c0.182,0.208,0.159,0.524-0.049,0.705C70.325,55.309,67.935,57.345,63.787,57.345z"/></g><g><path fill="#472b29" d="M76.407,57.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878c0.276,0,0.5,0.224,0.5,0.5S76.684,57.345,76.407,57.345 z"/></g><g><path fill="#472b29" d="M78.615,57.064c-0.242,0-0.455-0.177-0.493-0.424c-0.042-0.273,0.146-0.528,0.418-0.57 c0.52-0.08,1.479-0.274,1.842-0.454c0.245-0.122,0.546-0.022,0.67,0.226c0.122,0.247,0.021,0.547-0.227,0.67 c-0.618,0.307-1.979,0.523-2.133,0.546C78.667,57.062,78.641,57.064,78.615,57.064z"/></g><g><path fill="#472b29" d="M76.407,57.345c-4.146,0-6.539-2.036-6.639-2.123c-0.208-0.181-0.229-0.495-0.05-0.704 c0.18-0.208,0.495-0.232,0.705-0.052c0.021,0.019,2.229,1.878,5.983,1.878s5.962-1.86,5.983-1.878 c0.211-0.18,0.526-0.156,0.705,0.052c0.18,0.208,0.158,0.523-0.05,0.704C82.946,55.309,80.554,57.345,76.407,57.345z"/></g><g><path fill="#472b29" d="M67.546,56.217l-0.127-0.411C59.75,32.379,41.939,27.328,34.638,26.244 c-0.327-0.048-0.646,0.055-0.882,0.283c-0.242,0.234-0.359,0.563-0.32,0.901c1.211,10.496,1.671,20.013,1.367,28.287l-1.398-0.051 c0.301-8.204-0.156-17.65-1.359-28.075c-0.089-0.774,0.18-1.528,0.737-2.068c0.552-0.534,1.307-0.774,2.062-0.662 c5.896,0.875,25.771,5.663,33.905,30.51l0.131,0.42L67.546,56.217z"/></g><g><path fill="#472b29" d="M61.052,47.782c-0.17,0-0.336-0.087-0.43-0.245c-0.519-0.872-1.083-1.738-1.676-2.573 c-0.16-0.225-0.107-0.537,0.117-0.697c0.225-0.159,0.537-0.108,0.697,0.118c0.609,0.857,1.188,1.745,1.721,2.641 c0.142,0.237,0.063,0.544-0.174,0.685C61.228,47.76,61.139,47.782,61.052,47.782z"/></g><g><path fill="#472b29" d="M57.714,43.032c-0.145,0-0.287-0.062-0.387-0.182c-2.673-3.252-5.908-6.101-9.617-8.469 c-0.233-0.149-0.302-0.458-0.153-0.691c0.15-0.233,0.461-0.3,0.69-0.152c3.799,2.424,7.113,5.343,9.854,8.677 c0.175,0.213,0.145,0.528-0.069,0.704C57.938,42.995,57.826,43.032,57.714,43.032z"/></g><g><path fill="#472b29" d="M45.229,32.841c-0.081,0-0.162-0.019-0.238-0.06c-3.856-2.086-6.739-2.884-6.768-2.891 c-0.267-0.073-0.424-0.347-0.352-0.614c0.073-0.266,0.346-0.423,0.613-0.351c0.121,0.033,3.015,0.831,6.982,2.977 c0.242,0.131,0.333,0.435,0.201,0.678C45.578,32.746,45.406,32.841,45.229,32.841z"/></g></g></svg>
            <p>
                <a href="https://en.wikipedia.org/wiki/Baby_Shark">Baby Shark</a> originated from a campfire song or chant.
              Some sources have mentioned traditional myths as a basis, others camping origins in the early 20th century.
            </p>
        </div>
    </div>

    <div class="accordion" data-theme="snake">
        <div class="accordion__header">
            <h2>
                <button>
                    <span class="accordion__title">Snake</span>
                    <div class="accordion__indicator">
                        <svg class="indicator__plus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/></svg>
                        <svg class="indicator__minus"  fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"/></svg>
                    </div>
                </button>
            </h2>
        </div>

        <div class="accordion__content">
            <svg height="256px" viewBox="0 0 512 512" width="256px" xmlns="http://www.w3.org/2000/svg">
                <path d="M504.1,256c0,137-111.1,248.1-248.1,248.1S7.9,393,7.9,256S119,7.9,256,7.9S504.1,119,504.1,256"
                      fill="#49A0AE"/>
                <path d="M234.6,371.7c0,0-0.5-0.1-1.5-0.4c-1-0.3-2.6-0.7-4.6-1.2c-2-0.5-4.5-1-7.4-1.6c-2.9-0.6-6.1-1.2-9.7-1.7c-1.8-0.2-3.6-0.5-5.5-0.8c-1.9-0.2-3.9-0.5-5.9-0.6c-2-0.1-4.1-0.4-6.2-0.4c-1.1,0-2.1-0.1-3.2-0.1c-1.1,0-2.1,0-3.2,0c-2.2-0.1-4.3,0.2-6.5,0.3c-1.1,0-2.1,0.2-3.2,0.4c-1,0.2-2.2,0.2-3.1,0.5c-1,0.2-2,0.4-3,0.7c-0.5,0.1-2.5,0.7-3.1,0.9c-0.8,0.3-1.7,0.6-2.6,1l-1.3,0.6l-1.1,0.6c-1.4,0.8-2.4,1.7-2.7,1.9c-0.2,0.1-0.1,0-0.2-0.2c-0.1-0.2-0.3-0.4-0.3-0.3c0,0.1,0.1,0.4,0.4,0.8c0.4,0.4,0.8,0.9,1.4,1.3c1.2,0.9,2.9,1.7,4.7,2.3c1.8,0.6,3.7,1.1,5.7,1.4c1,0.2,2,0.3,3,0.4l0.2,0l0,0h-0.1l0.1,0l0.4,0l0.8,0.1c0.6,0,1.1,0.1,1.7,0.1c0.5,0,1.1,0.1,1.6,0.1s1,0,1.4,0c0.9,0,1.9,0.1,2.8,0c1.9,0,3.6-0.1,5.3-0.4c1.7-0.2,3.3-0.6,4.9-0.9c1.7-0.4,3.4-0.9,5.3-1.2c3.8-0.7,7.3-0.3,9.7,0.3c2.4,0.5,4.3,1.1,5.4,1.5c1.2,0.4,1.9,0.6,1.9,0.6c2,0.7,3.1,2.8,2.5,4.9c-0.6,1.9-2.5,2.9-4.4,2.6l-0.2,0c0,0-0.6-0.1-1.7-0.3c-1.1-0.2-2.7-0.5-4.7-0.6c-2-0.1-4.1-0.1-6.3,0.7c-1.1,0.4-2.6,1-4.2,1.6c-1.7,0.7-3.6,1.4-5.7,2c-2.1,0.6-4.3,1.1-6.5,1.4c-1.1,0.2-2.3,0.3-3.5,0.5c-0.6,0.1-1.2,0.1-1.8,0.2c-0.6,0.1-1.1,0.1-1.7,0.1c-0.6,0-1.1,0.1-1.7,0.1l-0.8,0.1l-0.4,0l-0.1,0l-0.3,0H175c-1.3,0-2.5,0.1-3.9,0c-2.6-0.1-5.4-0.3-8.2-0.9c-2.8-0.6-5.8-1.5-8.8-3c-1.5-0.8-3.1-1.8-4.6-3c-1.5-1.3-3-2.9-4.2-5.1c-1.2-2.1-2-4.8-2-7.5c-0.1-2.7,0.6-5.4,1.6-7.5c2-4.3,4.9-7,7.6-9.2l2.1-1.5l2.1-1.3c1.4-0.8,2.7-1.6,4.2-2.3l1.1-0.5l0.9-0.4l0.9-0.4l0.2-0.1l0.1,0l0.1,0c0.1,0-0.2,0.1,0.3-0.1l0.5-0.2c1.4-0.5,2.8-1,4.2-1.6c5.6-1.8,11.1-3,16.3-3.8c1.3-0.2,2.6-0.4,3.9-0.6c1.3-0.1,2.5-0.2,3.8-0.4c2.5-0.3,4.9-0.4,7.3-0.5c2.4-0.1,4.6-0.1,6.8-0.2c2.2,0,4.3,0,6.4,0c4.1,0.1,7.8,0.2,11.1,0.5c3.3,0.2,6.2,0.5,8.5,0.7c2.4,0.2,4.2,0.5,5.5,0.6c1.3,0.2,2,0.3,2,0.3c8.2,1.1,13.9,8.6,12.7,16.8c-1.1,8.1-8.6,13.9-16.8,12.8c-0.6-0.1-1.3-0.2-1.9-0.4L234.6,371.7z"
                      fill="#8BC53F"/>
                <path d="M269.9,289.2L269.9,289.2c-14.5,0-27.2-1.2-37.9-3.2c1.9,3.5,3.3,7.4,3.3,11.8v63.5c0,0-0.4,29.6,34.5,29.6s34.5-29.6,34.5-29.6v-63.5c0-4.7,1.4-8.5,3.1-11.7C296.7,288.1,284.4,289.2,269.9,289.2"
                      fill="#8BC53F"/>
                <path d="M269.9,275.4L269.9,275.4c-12.3,0-22.2-1-31.3-2.7c1.6,3,3.6,6.2,3.6,10v53.8c0,0-2,25.1,27.6,25.1s27.6-25.1,27.6-25.1v-53.8c0-4,2-7.2,3.4-9.9C291.8,274.4,282.2,275.4,269.9,275.4"
                      fill="#E2DA85"/>
                <path d="M282.1 340.4L269.8 329.8 257.5 340.4 257.5 282.1 282.1 282.1z" fill="#BE1E2D"/>
                <path d="M348.2,190.5c-15.3-69.8-78.3-69.5-78.3-69.5s-63.5-0.3-78.7,69.5c0,0-22.6,15.9-20,38.9c0,0-6.8,59.8,98.8,59.8c105.6,0,98.6-59.8,98.6-59.8C371,206.4,348.2,190.5,348.2,190.5"
                      fill="#F6F08E"/>
                <path d="M348.2,190.5c-15.3-69.8-78.4-69.5-78.4-69.5s-63.4-0.3-78.7,69.5c0,0-0.2,0.1-0.6,0.4c1.6,4.2,10.7,23.3,43.6,15.9c0,0,17.1-13.9,35.7-13.9c18.7,0,35.5,13.9,35.5,13.9c32.8,7.4,41.7-11.6,43.3-15.9C348.3,190.6,348.2,190.5,348.2,190.5"
                      fill="#8BC53F"/>
                <path d="M252.4 211.2c0 1.5-2.6 2.7-5.8 2.7-3.2 0-5.8-1.2-5.8-2.7 0-1.5 2.6-2.7 5.8-2.7C249.8 208.5 252.4 209.7 252.4 211.2M298.3 211.2c0 1.5-2.6 2.7-5.8 2.7-3.2 0-5.8-1.2-5.8-2.7 0-1.5 2.6-2.7 5.8-2.7C295.7 208.5 298.3 209.7 298.3 211.2"
                      fill="#5A692F"/>
                <path d="M238.7 192.3c0 6.9-5.6 12.4-12.4 12.4-6.9 0-12.4-5.6-12.4-12.4 0-6.9 5.6-12.4 12.4-12.4C233.1 179.9 238.7 185.4 238.7 192.3M325.3 192.3c0 6.9-5.6 12.4-12.4 12.4-6.9 0-12.4-5.6-12.4-12.4 0-6.9 5.6-12.4 12.4-12.4C319.7 179.9 325.3 185.4 325.3 192.3"
                      fill="#2D1312"/>
                <path d="M246.8,125.3c-0.1,1.3-0.1,2.7-0.1,4.1c0,21.5,10.3,38.9,22.9,38.9s22.9-17.4,22.9-38.9c0-1.4,0-2.8-0.1-4.2c-12.8-4.2-22.6-4.1-22.6-4.1S259.8,121,246.8,125.3"
                      fill="#FDCD0B"/>
            </svg>
            <p>
                <a href="https://en.wikipedia.org/wiki/Snake_charming">Snake charming</a> The earliest evidence for
                snake charming comes from ancient Egyptian sources.
            </p>
        </div>
    </div>

    <div class="accordion" data-theme="bear">
        <div class="accordion__header">
            <h2>
                <button>
                    <span class="accordion__title">Bear</span>
                    <div class="accordion__indicator">
                        <svg class="indicator__plus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/></svg>
                        <svg class="indicator__minus"  fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"/></svg>
                    </div>
                </button>
            </h2>
        </div>

        <div class="accordion__content">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="256px" height="256px"><path fill="#a6714e" d="M46.786,21.224L59.479,8.532c1.277-1.277,3.009-1.952,5.008-1.952c2.69,0,5.469,1.235,7.623,3.389 c3.879,3.879,4.523,9.545,1.438,12.631L60.854,35.293L46.786,21.224z"/><path fill="#7a4f34" d="M64.487,7.079c2.559,0,5.209,1.182,7.27,3.243c3.684,3.684,4.328,9.033,1.437,11.924L60.855,34.586 L47.494,21.225L59.833,8.885C61.014,7.704,62.624,7.079,64.487,7.079 M64.487,6.079c-2.041,0-3.949,0.687-5.361,2.099 L46.079,21.225L60.855,36l13.046-13.046c3.286-3.286,2.643-9.258-1.437-13.338C70.138,7.289,67.195,6.079,64.487,6.079 L64.487,6.079z"/><path fill="#a6714e" d="M6.532,22.521C3.446,19.435,4.09,13.768,7.969,9.889C10.122,7.735,12.901,6.5,15.592,6.5 c1.999,0,3.73,0.675,5.008,1.952l12.693,12.693L19.224,35.213L6.532,22.521z"/><path fill="#7a4f34" d="M15.592,7L15.592,7c1.863,0,3.473,0.624,4.654,1.806l12.339,12.339L19.225,34.506L6.885,22.167 c-2.891-2.891-2.247-8.24,1.437-11.924C10.383,8.182,13.033,7,15.592,7 M15.592,6c-2.708,0-5.65,1.209-7.977,3.536 c-4.08,4.08-4.723,10.052-1.437,13.338l13.046,13.046L34,21.145L20.954,8.099C19.541,6.687,17.633,6,15.592,6L15.592,6z"/><path fill="#d6aa70" d="M40,73.5c-21.961,0-36.908-13.769-37.509-15.573C2.5,39.979,11.132,26.481,18.374,18.332 c1.949-2.182,4.258-4.5,5.811-5.832H34c3.417,0,5.121,1.418,5.68,1.884L40,14.65l0.32-0.266C40.88,13.918,42.584,12.5,46,12.5 h9.816c1.554,1.334,3.863,3.651,5.811,5.833C68.868,26.482,77.5,39.98,77.5,58C76.907,59.731,61.961,73.5,40,73.5z"/><path fill="#7a4f34" d="M55.63,13c1.532,1.334,3.745,3.561,5.623,5.664c7.16,8.058,15.69,21.384,15.747,39.157 c-0.519,0.836-4.023,4.508-10.442,8.137C60.876,69.171,51.656,73,40,73s-20.876-3.829-26.557-7.042 C7.023,62.329,3.52,58.657,3,57.821c0.057-17.773,8.587-31.099,15.746-39.155c1.879-2.105,4.092-4.332,5.624-5.666H34 c3.237,0,4.835,1.331,5.36,1.768L40,15.301l0.64-0.533C41.165,14.331,42.763,13,46,13H55.63 M56,12H46c-3.458,0-5.255,1.38-6,2 c-0.745-0.62-2.542-2-6-2H24c-1.574,1.33-3.964,3.72-6,6C10.644,26.278,2,39.733,2,58c0,1.194,14.766,16,38,16s38-14.806,38-16 c0-18.267-8.644-31.722-16-40C59.964,15.72,57.574,13.33,56,12L56,12z"/><path fill="#f5ce85" d="M40,73.5c-3.146,0-6.285-0.293-9.596-0.896C23.311,70.274,18.5,63.594,18.5,56 c0-6.115,5.13-13.5,11.5-13.5h20c6.37,0,11.5,7.385,11.5,13.5c0,7.594-4.811,14.274-11.971,16.621 C46.285,73.207,43.146,73.5,40,73.5z"/><path fill="#7a4f34" d="M50,43c6.093,0,11,7.112,11,13c0,7.355-4.644,13.826-11.562,16.125C46.182,72.714,43.094,73,40,73 s-6.182-0.286-9.438-0.875C23.644,69.826,19,63.355,19,56c0-5.888,4.907-13,11-13h10H50 M50,42H40H30c-6.5,0-12,7.313-12,14 c0,7.727,4.96,14.685,12.315,17.096C33.354,73.649,36.572,74,40,74s6.646-0.351,9.685-0.904C57.04,70.685,62,63.727,62,56 C62,49.313,56.5,42,50,42L50,42z"/><path fill="#36404d" d="M52 28A4 4 0 1 0 52 36A4 4 0 1 0 52 28Z"/><g><path fill="#36404d" d="M28 28A4 4 0 1 0 28 36A4 4 0 1 0 28 28Z"/></g><g><path fill="#805f51" d="M40,53.452c-5.712-2.603-9.876-6.613-11.28-10.836C29.176,42.538,29.598,42.5,30,42.5h20 c0.401,0,0.824,0.038,1.28,0.115C49.877,46.839,45.712,50.848,40,53.452z"/><path fill="#593f33" d="M50,43c0.193,0,0.392,0.01,0.598,0.029c-1.515,3.832-5.376,7.445-10.598,9.872 c-5.222-2.427-9.084-6.04-10.598-9.872C29.608,43.01,29.807,43,30,43h10H50 M50,42H40H30c-0.653,0-1.292,0.092-1.92,0.232 C29.37,46.878,33.909,51.277,40,54c6.091-2.723,10.63-7.122,11.92-11.768C51.292,42.092,50.653,42,50,42L50,42z"/></g><path fill="#7a4f34" d="M43 66L37 66 40 56z"/><path fill="#7a4f34" d="M40 61L32 66 48 66z"/></svg>
            <p>
                The <a href="https://en.wikipedia.org/wiki/Bear">Bears</a> are carnivoran mammals of the family Ursidae.
              They are classified as caniforms, or doglike carnivorans.
            </p>
        </div>
    </div>

    <div class="accordion" data-theme="gorilla">
        <div class="accordion__header">
            <h2>
                <button>
                    <span class="accordion__title">Gorilla</span>
                    <div class="accordion__indicator">
                        <svg class="indicator__plus" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/></svg>
                        <svg class="indicator__minus"  fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M 2 11 L 2 13 L 22 13 L 22 11 Z"/></svg>
                    </div>
                </button>
            </h2>
        </div>

        <div class="accordion__content">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="256px" height="256px"><radialGradient id="364SjgJy2Awt5uCLzbNZXa" cx="7.289" cy="6.356" r="12.648" gradientTransform="matrix(1.0734 0 0 1 10.718 .022)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4f4f4f"/><stop offset=".275" stop-color="#4a4a4a"/><stop offset=".619" stop-color="#3a3a3a"/><stop offset=".998" stop-color="#212121"/><stop offset="1" stop-color="#212121"/></radialGradient><path fill="url(#364SjgJy2Awt5uCLzbNZXa)" d="M24.401,2c2.27,0,4.4,0.555,6.237,1.526c3.763,1.989,6.308,5.849,7.437,9.998    c2.279,8.381,2.054,10.438,2.5,13.95c0.416,3.278,1.671,7.737-3.729,12.737C35.159,41.772,30.471,46,24.401,46h-0.801   c-6.07,0-10.759-4.228-12.444-5.789c-5.399-5-4.145-9.459-3.729-12.737c0.446-3.511,0.221-5.569,2.5-13.95  c1.128-4.149,3.673-8.009,7.437-9.998C19.2,2.555,21.329,2,23.599,2H24.401z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXb" cx="12.422" cy="24.256" r="14.794" gradientTransform="matrix(1.0734 0 0 1.6169 10.718 -14.94)" gradientUnits="userSpaceOnUse"><stop offset=".017" stop-color="#424242" stop-opacity="0"/><stop offset=".305" stop-color="#3d3d3d" stop-opacity=".293"/><stop offset=".63" stop-color="#303030" stop-opacity=".623"/><stop offset=".972" stop-color="#191919" stop-opacity=".971"/><stop offset="1" stop-color="#171717"/></radialGradient><path fill="url(#364SjgJy2Awt5uCLzbNZXb)" d="M24.401,2c2.27,0,4.4,0.555,6.237,1.526c3.763,1.989,6.308,5.849,7.437,9.998   c2.279,8.381,2.054,10.438,2.5,13.95c0.416,3.278,1.671,7.737-3.729,12.737C35.159,41.772,30.471,46,24.401,46h-0.801   c-6.07,0-10.759-4.228-12.444-5.789c-5.399-5-4.145-9.459-3.729-12.737c0.446-3.511,0.221-5.569,2.5-13.95  c1.128-4.149,3.673-8.009,7.437-9.998C19.2,2.555,21.329,2,23.599,2H24.401z"/><path fill="#BDBDBD" d="M28.667,16C26,16,25.193,17,24,17s-2-1-4.667-1C16.388,16,14,18.455,14,21.483 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.455,31.612,16,28.667,16z"/><path fill="#BCBCBC" d="M28.667,16.027c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.448-5.333,5.455 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.476,31.612,16.027,28.667,16.027z"/><path fill="#BBB" d="M28.667,16.055c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.442-5.333,5.428 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.497,31.612,16.055,28.667,16.055z"/><path fill="#BABABA" d="M28.667,16.082c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.436-5.333,5.401 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.518,31.612,16.082,28.667,16.082z"/><path fill="#B9B9B9" d="M28.667,16.11c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.43-5.333,5.373 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.539,31.612,16.11,28.667,16.11z"/><path fill="#B8B8B8" d="M28.667,16.137c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.424-5.333,5.346 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.561,31.612,16.137,28.667,16.137z"/><path fill="#B7B7B7" d="M28.667,16.164c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.417-5.333,5.318 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.582,31.612,16.164,28.667,16.164z"/><path fill="#B6B6B6" d="M28.667,16.192c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.411-5.333,5.291 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.603,31.612,16.192,28.667,16.192z"/><path fill="#B5B5B5" d="M28.667,16.219c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.405-5.333,5.264 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.624,31.612,16.219,28.667,16.219z"/><path fill="#B4B4B4" d="M28.667,16.247c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.399-5.333,5.236 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.645,31.612,16.247,28.667,16.247z"/><path fill="#B3B3B3" d="M28.667,16.274c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.392-5.333,5.209 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.666,31.612,16.274,28.667,16.274z"/><path fill="#B2B2B2" d="M28.667,16.301c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.386-5.333,5.181 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.688,31.612,16.301,28.667,16.301z"/><path fill="#B1B1B1" d="M28.667,16.329c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.38-5.333,5.154 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.709,31.612,16.329,28.667,16.329z"/><path fill="#B0B0B0" d="M28.667,16.356c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.374-5.333,5.127 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.73,31.612,16.356,28.667,16.356z"/><path fill="#AFAFAF" d="M28.667,16.384c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.368-5.333,5.099 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.751,31.612,16.384,28.667,16.384z"/><path fill="#AEAEAE" d="M28.667,16.411c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.361-5.333,5.072 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.772,31.612,16.411,28.667,16.411z"/><path fill="#ADADAD" d="M28.667,16.438c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.355-5.333,5.044 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.793,31.612,16.438,28.667,16.438z"/><path fill="#ACACAC" d="M28.667,16.466c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.349-5.333,5.017 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.815,31.612,16.466,28.667,16.466z"/><path fill="#ABABAB" d="M28.667,16.493c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.343-5.333,4.99 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.836,31.612,16.493,28.667,16.493z"/><path fill="#AAA" d="M28.667,16.521c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.336-5.333,4.962 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.857,31.612,16.521,28.667,16.521z"/><path fill="#A9A9A9" d="M28.667,16.548c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.33-5.333,4.935 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.878,31.612,16.548,28.667,16.548z"/><path fill="#A8A8A8" d="M28.667,16.575c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.324-5.333,4.907 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.899,31.612,16.575,28.667,16.575z"/><path fill="#A7A7A7" d="M28.667,16.603c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.318-5.333,4.88 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.92,31.612,16.603,28.667,16.603z"/><path fill="#A6A6A6" d="M28.667,16.63c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.311-5.333,4.853 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.942,31.612,16.63,28.667,16.63z"/><path fill="#A5A5A5" d="M28.667,16.658c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.305-5.333,4.825 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.963,31.612,16.658,28.667,16.658z"/><path fill="#A4A4A4" d="M28.667,16.685c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.299-5.333,4.798 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,18.984,31.612,16.685,28.667,16.685z"/><path fill="#A3A3A3" d="M28.667,16.712c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.293-5.333,4.771 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.005,31.612,16.712,28.667,16.712z"/><path fill="#A2A2A2" d="M28.667,16.74c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.287-5.333,4.743 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.026,31.612,16.74,28.667,16.74z"/><path fill="#A1A1A1" d="M28.667,16.767c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.28-5.333,4.716 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.047,31.612,16.767,28.667,16.767z"/><path fill="#A0A0A0" d="M28.667,16.795c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.274-5.333,4.688 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.069,31.612,16.795,28.667,16.795z"/><path fill="#9F9F9F" d="M28.667,16.822c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.268-5.333,4.661 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.09,31.612,16.822,28.667,16.822z"/><path fill="#9E9E9E" d="M28.667,16.849c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.262-5.333,4.634 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.111,31.612,16.849,28.667,16.849z"/><path fill="#9D9D9D" d="M28.667,16.877c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.255-5.333,4.606 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.132,31.612,16.877,28.667,16.877z"/><path fill="#9C9C9C" d="M28.667,16.904c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.249-5.333,4.579 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.153,31.612,16.904,28.667,16.904z"/><path fill="#9B9B9B" d="M28.667,16.932c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.243-5.333,4.551 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.174,31.612,16.932,28.667,16.932z"/><path fill="#9A9A9A" d="M28.667,16.959c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.237-5.333,4.524 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.196,31.612,16.959,28.667,16.959z"/><path fill="#999" d="M28.667,16.986c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.23-5.333,4.497 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.217,31.612,16.986,28.667,16.986z"/><path fill="#999" d="M28.667,17.014c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.224-5.333,4.469 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.238,31.612,17.014,28.667,17.014z"/><path fill="#989898" d="M28.667,17.041c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.218-5.333,4.442 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.259,31.612,17.041,28.667,17.041z"/><path fill="#979797" d="M28.667,17.068c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.212-5.333,4.414 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.28,31.612,17.068,28.667,17.068z"/><path fill="#969696" d="M28.667,17.096c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.206-5.333,4.387 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.301,31.612,17.096,28.667,17.096z"/><path fill="#959595" d="M28.667,17.123c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.199-5.333,4.36 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.323,31.612,17.123,28.667,17.123z"/><path fill="#949494" d="M28.667,17.151c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.193-5.333,4.332 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.344,31.612,17.151,28.667,17.151z"/><path fill="#939393" d="M28.667,17.178c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.187-5.333,4.305 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.365,31.612,17.178,28.667,17.178z"/><path fill="#929292" d="M28.667,17.205c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.181-5.333,4.277 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.386,31.612,17.205,28.667,17.205z"/><path fill="#919191" d="M28.667,17.233c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.174-5.333,4.25 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.407,31.612,17.233,28.667,17.233z"/><path fill="#909090" d="M28.667,17.26c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.168-5.333,4.223 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.428,31.612,17.26,28.667,17.26z"/><path fill="#8F8F8F" d="M28.667,17.288c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.162-5.333,4.195 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.45,31.612,17.288,28.667,17.288z"/><path fill="#8E8E8E" d="M28.667,17.315c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.156-5.333,4.168 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.471,31.612,17.315,28.667,17.315z"/><path fill="#8D8D8D" d="M28.667,17.342c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.149-5.333,4.14 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.492,31.612,17.342,28.667,17.342z"/><path fill="#8C8C8C" d="M28.667,17.37c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.143-5.333,4.113 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.513,31.612,17.37,28.667,17.37z"/><path fill="#8B8B8B" d="M28.667,17.397c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.137-5.333,4.086 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.534,31.612,17.397,28.667,17.397z"/><path fill="#8A8A8A" d="M28.667,17.425c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.131-5.333,4.058 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.555,31.612,17.425,28.667,17.425z"/><path fill="#898989" d="M28.667,17.452c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.125-5.333,4.031 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.577,31.612,17.452,28.667,17.452z"/><path fill="#888" d="M28.667,17.479c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.118-5.333,4.003 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.598,31.612,17.479,28.667,17.479z"/><path fill="#878787" d="M28.667,17.507c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.112-5.333,3.976 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.619,31.612,17.507,28.667,17.507z"/><path fill="#868686" d="M28.667,17.534c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.106-5.333,3.949 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.64,31.612,17.534,28.667,17.534z"/><path fill="#858585" d="M28.667,17.562c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.1-5.333,3.921 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.661,31.612,17.562,28.667,17.562z"/><path fill="#848484" d="M28.667,17.589c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.093-5.333,3.894 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.682,31.612,17.589,28.667,17.589z"/><path fill="#838383" d="M28.667,17.616c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.087-5.333,3.866 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.704,31.612,17.616,28.667,17.616z"/><path fill="#828282" d="M28.667,17.644c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.081-5.333,3.839 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.725,31.612,17.644,28.667,17.644z"/><path fill="#818181" d="M28.667,17.671c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.075-5.333,3.812 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.746,31.612,17.671,28.667,17.671z"/><path fill="gray" d="M28.667,17.699c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.069-5.333,3.784 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.767,31.612,17.699,28.667,17.699z"/><path fill="#7F7F7F" d="M28.667,17.726c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.062-5.333,3.757 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.788,31.612,17.726,28.667,17.726z"/><path fill="#7E7E7E" d="M28.667,17.753c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.056-5.333,3.729 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.809,31.612,17.753,28.667,17.753z"/><path fill="#7D7D7D" d="M28.667,17.781c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.05-5.333,3.702 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.831,31.612,17.781,28.667,17.781z"/><path fill="#7C7C7C" d="M28.667,17.808c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.044-5.333,3.675 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.852,31.612,17.808,28.667,17.808z"/><path fill="#7B7B7B" d="M28.667,17.836c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.037-5.333,3.647 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.873,31.612,17.836,28.667,17.836z"/><path fill="#7A7A7A" d="M28.667,17.863c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.031-5.333,3.62 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.894,31.612,17.863,28.667,17.863z"/><path fill="#797979" d="M28.667,17.89c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.025-5.333,3.592 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.915,31.612,17.89,28.667,17.89z"/><path fill="#787878" d="M28.667,17.918c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.019-5.333,3.565 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.936,31.612,17.918,28.667,17.918z"/><path fill="#777" d="M28.667,17.945c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.012-5.333,3.538 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.958,31.612,17.945,28.667,17.945z"/><path fill="#767676" d="M28.667,17.973c-2.667,0-3.474,1-4.667,1s-2-1-4.667-1c-2.946,0-5.333,2.006-5.333,3.51 c0,3.517,3.721,9.595,6.667,9.595c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,19.979,31.612,17.973,28.667,17.973z"/><path fill="#757575" d="M28.667,18C26,18,25.193,19,24,19s-2-1-4.667-1C16.388,18,14,20,14,21.483c0,3.517,3.721,9.595,6.667,9.595 c1.666,0,5.001,0,6.667,0C30.279,31.078,34,25,34,21.483C34,20,31.612,18,28.667,18z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXc" cx="23.952" cy="35.427" r="7.875" gradientTransform="matrix(1 0 0 .9446 0 1.962)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b4b4b4"/><stop offset=".513" stop-color="#b2b2b2"/><stop offset=".698" stop-color="#ababab"/><stop offset=".829" stop-color="#a0a0a0"/><stop offset=".935" stop-color="#8f8f8f"/><stop offset="1" stop-color="gray"/></radialGradient><path fill="url(#364SjgJy2Awt5uCLzbNZXc)" d="M32,36.404c0-0.684,0.108-2.504-0.374-3.404c-1.298-2.424-2.435-5.88-6.069-7    c-0.914-0.282-2.2-0.282-3.114,0c-3.633,1.12-4.771,4.576-6.069,7C15.892,33.9,16,35.72,16,36.404C16,40.389,19.7,43,24,43  S32,40.389,32,36.404z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXd" cx="23.946" cy="32.801" r="8.907" gradientTransform="matrix(1 0 0 .9185 0 2.674)" gradientUnits="userSpaceOnUse"><stop offset=".776" stop-color="#999"/><stop offset=".872" stop-color="#a1a1a1" stop-opacity=".575"/><stop offset="1" stop-color="#b3b3b3" stop-opacity="0"/></radialGradient><path fill="url(#364SjgJy2Awt5uCLzbNZXd)" d="M32,36.404C32,36.957,30,41,24,41s-8-4.043-8-4.596c0,0,1.09,2,8,1.491    C30.422,38.404,32,36.404,32,36.404z"/><path fill="#424242" d="M16,36.404c1.16,0.835,2.541,1.152,3.813,1.074c0.632-0.067,1.319-0.23,2.036-0.335  c0.716-0.1,1.437-0.131,2.152-0.144c0.715,0.011,1.436,0.046,2.15,0.14c0.714,0.102,1.406,0.254,2.046,0.331    c1.269,0.105,2.645-0.226,3.803-1.066c-0.843,1.211-2.312,1.934-3.831,1.989c-1.509-0.027-2.779-0.251-4.168-0.203  c-0.685-0.011-1.363,0.016-2.039,0.07c-0.674,0.033-1.365,0.174-2.134,0.139C18.318,38.313,16.852,37.613,16,36.404z"/><path fill="#B4B4B4" d="M27.6,33c0,0,2.4-1.283,2.4-3.476c0-1.691-2.236-3.646-3.6-4.224C25.751,25.025,24.83,25,24,25  c-0.83,0-1.781-0.003-2.4,0.3c-1.338,0.654-3.6,2.533-3.6,4.224C18,31.717,20.4,33,20.4,33"/><radialGradient id="364SjgJy2Awt5uCLzbNZXe" cx="24" cy="32.029" r="6.14" gradientTransform="matrix(1 0 0 1.1641 0 -5.257)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b4b4b4" stop-opacity="0"/><stop offset=".309" stop-color="#b2b2b2" stop-opacity="0"/><stop offset=".44" stop-color="#ababab" stop-opacity="0"/><stop offset=".537" stop-color="#9e9e9e" stop-opacity="0"/><stop offset=".566" stop-color="#999" stop-opacity="0"/><stop offset=".68" stop-color="#929292" stop-opacity=".263"/><stop offset=".85" stop-color="#7d7d7d" stop-opacity=".654"/><stop offset="1" stop-color="#666"/></radialGradient><path fill="url(#364SjgJy2Awt5uCLzbNZXe)" d="M30,29.52c0,2.2-2.4,3.48-2.4,3.48h-7.2c0,0-2.4-1.28-2.4-3.48c0-1.69,2.268-3.56,3.6-4.22 C22.205,25,23.17,25,24,25s1.664,0,2.4,0.3C27.775,25.86,30,27.83,30,29.52z"/><path fill="#424242" d="M22.746,30.746c0.537-0.537,0.135-1.808-0.402-2.344c-0.537-0.537-1.406-0.537-1.941,0 c-0.537,0.537-0.537,1.406,0,1.941C20.938,30.881,22.21,31.283,22.746,30.746z"/><g><path fill="#212121" d="M31.961,23.737c0-1.628-1.325-2.948-2.96-2.948c-1.635,0-2.96,1.32-2.96,2.948 C26.04,24.158,27.365,25,29,25C30.635,25,31.961,24.158,31.961,23.737z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXf" cx="14.012" cy="15.09" r="1.951" gradientTransform="translate(14.638 7.533) scale(1.025)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5d4037"/><stop offset=".356" stop-color="#5b3f36"/><stop offset=".539" stop-color="#533a33"/><stop offset=".683" stop-color="#46332d"/><stop offset=".805" stop-color="#332825"/><stop offset=".914" stop-color="#1b1a1a"/><stop offset=".916" stop-color="#1a1a1a"/></radialGradient><circle cx="29" cy="23" r="2" fill="url(#364SjgJy2Awt5uCLzbNZXf)"/><path fill="#B1B1B1" d="M31.961,23.737c-0.138-0.739-1.494-2.497-2.983-2.497c-1.489,0-2.799,1.758-2.938,2.497 c-0.138-0.741,0.086-1.564,0.632-2.194c0.532-0.638,1.415-1.058,2.328-1.055c0.913-0.002,1.795,0.418,2.327,1.056 C31.873,22.173,32.098,22.995,31.961,23.737z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXg" cx="-49.961" cy="19.653" r=".693" gradientTransform="translate(101.114 -5.367) scale(1.4434)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c1911"/><stop offset=".999" stop-color="#171714"/></radialGradient><circle cx="29" cy="23" r="1" fill="url(#364SjgJy2Awt5uCLzbNZXg)"/><ellipse cx="28.605" cy="22.368" fill="#FFF" rx=".372" ry=".376"/></g><g><path fill="#212121" d="M16.039,23.737c0-1.628,1.325-2.948,2.96-2.948c1.635,0,2.96,1.32,2.96,2.948C21.96,24.158,20.635,25,19,25 C17.365,25,16.039,24.158,16.039,23.737z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXh" cx="-417.154" cy="15.09" r="1.951" gradientTransform="matrix(-1.025 0 0 1.025 -408.582 7.533)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5d4037"/><stop offset=".356" stop-color="#5b3f36"/><stop offset=".539" stop-color="#533a33"/><stop offset=".683" stop-color="#46332d"/><stop offset=".805" stop-color="#332825"/><stop offset=".914" stop-color="#1b1a1a"/><stop offset=".916" stop-color="#1a1a1a"/></radialGradient><circle cx="19" cy="23" r="2" fill="url(#364SjgJy2Awt5uCLzbNZXh)"/><path fill="#B1B1B1" d="M16.039,23.737c-0.137-0.741,0.087-1.564,0.633-2.193c0.532-0.637,1.414-1.058,2.327-1.056 c0.913-0.003,1.796,0.418,2.328,1.055c0.546,0.629,0.771,1.452,0.632,2.194c-0.139-0.739-1.449-2.497-2.938-2.497 S16.178,22.997,16.039,23.737z"/><radialGradient id="364SjgJy2Awt5uCLzbNZXi" cx="-355.049" cy="19.653" r=".693" gradientTransform="matrix(-1.4434 0 0 1.4434 -493.479 -5.367)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c1911"/><stop offset=".999" stop-color="#171714"/></radialGradient><circle cx="19" cy="23" r="1" fill="url(#364SjgJy2Awt5uCLzbNZXi)"/><ellipse cx="18.65" cy="22.368" fill="#FFF" rx=".372" ry=".376"/></g><path fill="#424242" d="M27.597,28.403c-0.537-0.537-1.406-0.537-1.941,0c-0.537,0.535-0.939,1.807-0.402,2.344    c0.537,0.537,1.808,0.135,2.344-0.402C28.134,29.809,28.134,28.938,27.597,28.403z"/></svg>
            <p>
                <a href="https://en.wikipedia.org/wiki/Beef">Gorillas</a> are ground-dwelling,
              predominantly herbivorous apes that inhabit the forests of central Sub-Saharan Africa.
            </p>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

reset css:

/*******************
 Box Sizing
 *******************/
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/****************************
 Generic Margins and Paddings
 ****************************/
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

/*******************
 Lists
 *******************/
ul {
  list-style: none;
}

/*******************
 Forms and buttons
 *******************/
input,
textarea,
select,
button {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* I usually expand input and textarea to full-width */
input[type="text"],
textarea {
  width: 100%;
}

/* More friendly border */
input,
textarea,
button {
  border: 1px solid gray;
}

/* Some defaults for one-liner buttons */
button {
  padding: 0.75em 1em;
  border-radius: 0;
  line-height: 1;
  background-color: transparent;
}

button * {
  pointer-events: none;
}

/***********************************
 Easy responsive for media elements
 ***********************************/
img,
svg,
iframe,
video,
object,
embed {
  display: block;
  max-width: 100%;
}

/*******************
 Useful table styles
 *******************/
table {
  table-layout: fixed;
  width: 100%;
}

/*******************
 The hidden attribute
 *******************/
[hidden] {
  display: none !important;
}

/*******************
 Noscript
 *******************/
noscript {
  display: block;
  margin-bottom: 1em;
  margin-top: 1em;
}

/*******************
 Focus
 *******************/
[tabindex="-1"] {
  outline: none !important;
}

Enter fullscreen mode Exit fullscreen mode

normalize css:

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

style css:

:root {
  --link-color: #2900b4;
  --link-color-dark: #190070;
}

[data-theme="baby-shark"] {
  --background-color: #f3ca5f;
  --text-color: #3a1e0e;
}

[data-theme="snake"] {
  --background-color: #88d28b;
  --text-color: #091e0a;
}

[data-theme="bear"] {
  --background-color: #f46e6e;
  --text-color: #1a0201;
}

[data-theme="gorilla"] {
  --background-color: #ac5a30;
  --text-color: #170005;
}

html {
  font-size: 125%;
  font-family: "Nunito", sans-serif;
  line-height: 1.4;
}

body {
  background-image: linear-gradient(135deg, #88d28b, #ffbfdd);
  min-height: 100vh;
  padding: 3em;
}

a {
  color: var(--link-color);
}

a:hover,
a:active {
  color: var(--link-color-dark);
}

.accordion-container {
  max-width: 30em;
}

.accordion {
  position: relative;
  background-color: var(--background-color);
  color: var(--text-color);
}

.accordion::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1em;
  background-color: rgba(125, 89, 69, 0.6);
  content: "";
}

.accordion:first-child {
  border-top-left-radius: 1.5em;
  border-top-right-radius: 1.5em;
}

.accordion:first-child::before {
  border-top-left-radius: 1.5em;
}

.accordion:last-child {
  border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
}

.accordion:last-child::before {
  border-bottom-left-radius: 1.5em;
}

/**
 * START EDITING HERE
 * ==================
 */
.accordion.is-open .accordion__content {
  display: grid;
}


.accordion__header button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 1rem);
  margin-left: 1rem;
  padding: 1.5rem 2rem 1.5rem;
  border: 0;
  text-align: left;
}

.accordion__title {
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: bold;
}

/* Indicators */
.accordion__indicator > * {
  width: 1rem;
}

.accordion .indicator__plus {
  display: block;
}

.accordion .indicator__minus {
  display: none;
}

.accordion.is-open .indicator__minus {
  display: block;
}

.accordion.is-open .indicator__plus {
  display: none;
}



/* Accordion content */
.accordion__content {
  display: none;
  grid-template-columns: 7.5em 1fr;
  grid-column-gap: 1.5em;
  align-items: center;
  padding-right: 3em;
  padding-bottom: 1.5em;
  padding-left: 3em;
}

.accordion__content svg {
  width: 10em;
  max-width: 100%;
}

@media (max-width: 619px) {
  .accordion {
    min-width: 300px;
  }
  .accordion.is-open .accordion__content {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

finally JavaScript:

const accordions = Array.from(document.querySelectorAll('.accordion'))

accordions.map(item => {
    item.addEventListener('click', evt => {
item.classList.toggle('is-open')
    })
})
Enter fullscreen mode Exit fullscreen mode

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️