DEV Community: GiandoDev

infinite scoll gallery

GiandoDev — Tue, 11 Aug 2020 18:04:30 +0000

Demo:
http://reactinfinitegallery.surge.sh/
Code: https://github.com/GiandomenicoRiceputi/react_unsplashAPI_infinite_gallery

ToDo app tailwindcss Reactjs

GiandoDev — Mon, 25 May 2020 06:36:18 +0000

ToDo with tailwindCss
and CRA
DEMO
jsx:

import React, { useEffect, useState} from 'react';
import './styles/main.css'
import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";

const LOCAL_STORAGE_KEY = "react-todo-list-todos"

function App() {
    const [todos, setTodos] = useState([])

    useEffect(() => {
        const storageTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
        if (storageTodos) {
setTodos(storageTodos)
        }
    }, [])

    useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))
    }, [todos])


    function addTodo(todo) {
        setTodos([todo, ...todos])
    }

    function toggleComplete(id) {
        setTodos(
            todos.map(todo => {
                if(todo.id === id) {
                    return {
                        ...todo,
                        completed: !todo.completed
                    }
                }
                return todo
            })
        )
    }

    function removeTodo(id) {
setTodos(todos.filter(todo => todo.id !== id ));
    }

    return (
        <div className="flex flex-col items-center h-screen bg-grey-300">
            <h1 className="mb-20 mt-3 text-5xl text-teal-600 underline font-mono text-lg ">React Todo</h1>
            <TodoForm addTodo={addTodo}/>
            <TodoList
                todos={todos}
                toggleComplete={toggleComplete}
            removeTodo={removeTodo}
            />
        </div>
    );
}

export default App;

Markdown Editor Reactjs

GiandoDev — Sat, 23 May 2020 12:59:04 +0000

First I want to thank @chrisoncode that created the beautiful course 20reactapps where I’m learning a lot by doing.

DEMO

In your CLI run this 🙂:

After write some Css in your index.css:

@import url('https://fonts.googleapis.com/css2?family=Bellota:ital,wght@1,700&display=swap');

body {
    background: #e8eaf1;
    font-family: 'Bellota', cursive;
}

.app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
}

textarea {
    background: #eff1f5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0  1px 2px 0 rgba(0, 0, 0, 0.06);
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 20px;
    font-size: 22px;
}

.preview  {
    padding-left: 20px;
    padding-right: 20px;
}

blockquote {
    font-size: 30px;
    background: #efefef;
    border-left: 12px solid rgb(44, 163, 241);
    padding: 20px 30px;
    border-radius: 5px;
    margin: 0;
}

Now install react-markdown
in your CLI (I use yarn but also npm is fine):

And last but not least compile our index.js file like this:

import React, {useState} from 'react'
import ReactMarkdown from "react-markdown";
import ReactDOM from 'react-dom'
import './index.css'


function MarkdownEditor() {
    const [markdown, setMarkdown] = useState('')

    function handleChange(e) {
        setMarkdown(e.target.value)
    }

    return (
        <div className='app'>
            <textarea
                onChange={handleChange}
                value={markdown}
            />
            <ReactMarkdown className="preview" source={markdown}  />
        </div>

    )
}

ReactDOM.render(<MarkdownEditor/>, document.querySelector('#root'))

Our markdown editor is now ready. Have fun 🙂!

ToDo app Reactjs

GiandoDev — Thu, 21 May 2020 16:42:05 +0000

Here I would use CRA
in order to keep the task fast and simple.
For the style I used Shards React, just to
try it.
DEMO

import React, {useState} from 'react';
import './App.css';
import {Container, Button, Form, FormInput} from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css"


function App() {
    // Set toDo List
    const [toDoList, setToDoList] = useState([])
// Set Input Value
    const [value, setValue] = useState([])

    // Handle the submission
const handleSubmit = (mouseClick) => {
        mouseClick.preventDefault()
        addTodo(value)
        setValue('')


}
    //  add toDo
const addTodo = (text) => {
    if(text !== ''){
        const updateTodoList = [...toDoList, {text}]
        setToDoList(updateTodoList)
    }

    }
    // Delete todo
const handleDelete = (todo) => {
 const  filteredToDolist  = toDoList.filter(currentToDoListValue => ( currentToDoListValue !== todo ))
    setToDoList(filteredToDolist)
}



    return (
        <Container>
            <h1>To do</h1>
            <Container className="toDoInput">
                <Form onSubmit={ handleSubmit}>
                    <FormInput
                    placeholder='type here'
                    value={value}
                    onChange={keyboardStroke => setValue(keyboardStroke.target.value)}
                    />
                    <Button className="btn-submit" type="submit">Add to-do</Button>
                </Form>
            </Container>
            <Container className="toDoList">
                {
                    toDoList.map((todo, index) => (
                        <div className="list" key={index}>
                            <span className="text">{todo.text}</span>
                            <Button className="delete" onClick={() => handleDelete(todo)}>Delete</Button>
                            <hr/>
                        </div>
                    ))
                }
            </Container>
        </Container>

    );
}

export default App;

And just a piece of css:

.App {
  text-align: center;
}

.btn-submit {
  margin: 1rem;
}

.list {
  max-width: 80vw;
}


.delete {
float: right;
}

Changing CSS with JavaScript

GiandoDev — Sat, 16 May 2020 18:17:27 +0000

I use two ways to change the css via JS:

element.style.cssProperty = value

element.style.setProperty(cssProperty, value)

Sign up tailwind css

GiandoDev — Wed, 13 May 2020 19:28:48 +0000

The Code, remember you have to import tailwndcss via CDN in your html file before using tailwind 🙂:

<div class="bg-white">
  <div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
    <h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
      Want  more News ?
      <br class="hidden sm:inline" />
      <span class="text-indigo-600">Sign up for My newsletter.</span>
    </h2>
    <form class="mt-8 sm:flex">
      <input aria-label="Email address" type="email" required class="appearance-none w-full px-5 py-3 border border-gray-300 text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline focus:border-blue-300 transition duration-150 ease-in-out sm:max-w-xs" placeholder="Enter your email" />
      <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
        <button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
          Send me
        </button>
      </div>
    </form>
  </div>
</div>

Id Classes Attributes tags

GiandoDev — Tue, 12 May 2020 18:57:33 +0000

If we need to select the element inside the html we have to decide if we want to select one element or multiple elements.
In the first case id is perfect, we can't name two elements with the same id ( the id is unique ).

To select more than one element we may use classes or attribute.

In general we use classes to select multiple elements and attribute to filter through them.

It`s a good practice to use js prefix for the elements that require javaScript to work.

animals accordion

GiandoDev — Mon, 11 May 2020 14:03:09 +0000

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>

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;
}

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;
}

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;
  }
}

finally JavaScript:

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

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

Accordion tailwindCss

GiandoDev — Sat, 09 May 2020 18:20:25 +0000

Let's build a simple tailwind accordion:

HTML

   <div class="w-full md:w-3/5 mx-auto p-8">
         <p>Accordion</p>
         <div class="shadow-md">
            <div class="tab w-full overflow-hidden border-t">
               <input class="absolute opacity-0" id="tab-single-one" type="radio" name="tabs2">
               <label class="block p-5 leading-normal cursor-pointer" for="tab-single-one">Label One</label>
               <div class="tab-content overflow-hidden border-l-2 bg-gray-100 border-indigo-500 leading-normal">
                  <p class="p-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
               </div>
            </div>
            <div class="tab w-full overflow-hidden border-t">
               <input class="absolute opacity-0" id="tab-single-two" type="radio" name="tabs2">
               <label class="block p-5 leading-normal cursor-pointer" for="tab-single-two">Label Two</label>
               <div class="tab-content overflow-hidden border-l-2 bg-gray-100 border-indigo-500 leading-normal">
                  <p class="p-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
               </div>
            </div>
            <div class="tab w-full overflow-hidden border-t">
               <input class="absolute opacity-0" id="tab-single-three" type="radio" name="tabs2">
               <label class="block p-5 leading-normal cursor-pointer" for="tab-single-three">Label Three</label>
               <div class="tab-content overflow-hidden border-l-2 bg-gray-100 border-indigo-500 leading-normal">
                  <p class="p-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
               </div>
            </div>
         </div>
      </div>

Some css:

  /* Tab content - closed */
         .tab-content {
         max-height: 0;
         -webkit-transition: max-height .35s;
         -o-transition: max-height .35s;
         transition: max-height .35s;
         }
         /* :checked - resize to full height */
         .tab input:checked ~ .tab-content {
         max-height: 100vh;
         }
         /* Label formatting when open */
         .tab input:checked + label{
         /*@apply text-xl p-5 border-l-2 border-indigo-500 bg-gray-100 text-indigo*/
         font-size: 1.25rem; /*.text-xl*/
         padding: 1.25rem; /*.p-5*/
         border-left-width: 2px; /*.border-l-2*/
         border-color: #6574cd; /*.border-indigo*/
         background-color: #f8fafc; /*.bg-gray-100 */
         color: #6574cd; /*.text-indigo*/
         }
         /* Icon */
         .tab label::after {
         float:right;
         right: 0;
         top: 0;
         display: block;
         width: 1.5em;
         height: 1.5em;
         line-height: 1.5;
         font-size: 1.25rem;
         text-align: center;
         -webkit-transition: all .35s;
         -o-transition: all .35s;
         transition: all .35s;
         }
         /* Icon formatting - closed */
         .tab input[type=checkbox] + label::after {
         content: "+";
         font-weight:bold; /*.font-bold*/
         border-width: 1px; /*.border*/
         border-radius: 9999px; /*.rounded-full */
         border-color: #b8c2cc; /*.border-grey*/
         }
         .tab input[type=radio] + label::after {
         content: "\25BE";
         font-weight:bold; /*.font-bold*/
         border-width: 1px; /*.border*/
         border-radius: 9999px; /*.rounded-full */
         border-color: #b8c2cc; /*.border-grey*/
         }
         /* Icon formatting - open */
         .tab input[type=checkbox]:checked + label::after {
         transform: rotate(315deg);
         background-color: #6574cd; /*.bg-indigo*/
         color: #f8fafc; /*.text-grey-lightest*/
         }
         .tab input[type=radio]:checked + label::after {
         transform: rotateX(180deg);
         background-color: #6574cd; /*.bg-indigo*/
         color: #f8fafc; /*.text-grey-lightest*/
         }

and JavaScript 🤪

 var myRadios = document.getElementsByName('tabs2');
      var setCheck;
      var x = 0;
      for(x = 0; x < myRadios.length; x++){
          myRadios[x].onclick = function(){
              if(setCheck != this){
                   setCheck = this;
              }else{
                  this.checked = false;
                  setCheck = null;
          }
          };
      }

JS compiled language

GiandoDev — Fri, 08 May 2020 12:30:12 +0000

The history teaches us that the compiler processes the code in three stages:

Lexing

As in the image above, in this phase, we convert our program into meaningful tokens.

Parsing

Here we take a stream of tokens (array) and trasform it into an abstract syntax tree called AST that represent the grammatical structure of the program.

Code Generation

Here JavaScript convert AST into a set of machine instruction.
Between parsing and code generation, JavaScript optimizes performance, execution and does also other cool stuff, all in a millisecond.
If you want take time to understand JavaScript engines look this awesome video from JS config Franziska Hinkelmann

Nodes vs Elements

GiandoDev — Thu, 07 May 2020 19:00:49 +0000

image source
In this image above we see our html and the rappresentation of it in the DOM. In the image above all the html is a node and also an element. The element is a special type of node.
This is the list of all types of node not deprecated:

Element node
Text node
Processing instruction node
Comment node
Document node
Document type node
Document fragment node Nodes have properties and methods; the two most used are Node.parentElement that returns the parent element if it exists, if it does not exist or if it is not an element, returns null. image source

The second is Node.textContent that sets / returns the textual content of an element and all its descendants.
Elements are also nodes but they have also another set of properties and methods that you may use with them. We will see them soon.

querySelectorAll

GiandoDev — Wed, 06 May 2020 16:12:31 +0000

Sometimes we need to select more than one item. We may select items through the tag name, the class, or a specific attribute.

        <div className="fruits" data-fruits="I love fruits">🍉</div>
        <div className="fruits" data-fruits="I love fruits">🍑</div>
        <div className="fruits" data-fruits="I love fruits">🥭</div>
        <div className="fruits" data-fruits="I love fruits">🍅</div>
        <div className="fruits" data-fruits="I love fruits">🍈</div>
        <div className="fruits" data-fruits="I love fruits">🍌</div>
        <div className="fruits" data-fruits="I love fruits">🥑</div>
        <div className="fruits" data-fruits="I love fruits">🍒</div>

querySelectorAll returns a nodelist that is an array-like, object—objects that looks like arrays. Array-like objects have length properties and have numbers as keys. In order to avoid problems, I suggest to always convert the nodelist in an array:

Now we may perform all the actions that an array allows us, like forEach method.
There are other methods that allow us to grab more than one items. They are getElementByClassName and getElementByTagName. This two methods are more fast than querySelectorAll method , but that is not a valid reason to use them.
The most important difference between getElementById, getElementByTagName and querySelectorAll is that querySelectAll is a static collection; this means that if you add or remove elements from the original selection your selection is not affected from this. On the other hand, with the other two methods the list is a live collection so if you change the original collection also your collection changes.

More about querySelectorAll MDN
More about getElemntById MDN
More about getElementByClassName MDN