It looks like you're trying to display a collection of emojis or GIFs in a list view, with the main categories (sets) showing horizontally and their individual items (emojis/GIFs) showing vertically below them.
To achieve this, you can use HTML, CSS, and JavaScript. Here's an example:
**HTML**
```html
<div class="emoji-collection">
<div class="categories">
<h2>Categories</h2>
<ul>
<!-- List of categories (sets) -->
<li><a href="#category1">Category 1</a></li>
<li><a href="#category2">Category 2</a></li>
<!-- Add more categories here -->
</ul>
</div>
<div class="content">
<!-- Individual items (emojis/GIFs) will be displayed here -->
<div id="category1" class="category-content">
<h3>Category 1</h3>
<ul>
<li><img src="https://example.com/emoji1.png"></li>
<li><img src="https://example.com/emoji2.png"></li>
<!-- Add more items here -->
</ul>
</div>
<div id="category2" class="category-content">
<h3>Category 2</h3>
<ul>
<li><img src="https://example.com/gif1.gif"></li>
<li><img src="https://example.com/gif2.gif"></li>
<!-- Add more items here -->
</ul>
</div>
<!-- Add more categories and their content here -->
</div>
</div>
```
**CSS**
```css
.emoji-collection {
width: 80%;
margin: 40px auto;
}
.categories {
float: left;
width: 200px;
background-color: #f7f7f7;
padding: 20px;
border: 1px solid #ccc;
}
.content {
float: right;
width: calc(100% - 200px);
padding: 20px;
}
.category-content {
margin-bottom: 40px;
}
```
**JavaScript**
```javascript
// Get the categories and content elements
const categories = document.querySelector('.categories');
const content = document.querySelector('.content');
// Add event listener to categories links
categories.addEventListener('click', (e) => {
if (e.target.tagName === 'A') {
// Show/hide category content based on link click
const categoryId = e.target.getAttribute('href').replace('#', '');
const categoryContent = document.querySelector(`#category${categoryId}`);
if (categoryContent.style.display === 'none') {
categoryContent.style.display = 'block';
} else {
categoryContent.style.display = 'none';
}
}
});
```
This example uses a basic layout with two columns: the left column displays the categories, and the right column displays the individual items (emojis/GIFs) for each category. When you click on a category link, it toggles the display of its corresponding content.
You can customize this code to fit your specific use case and add more features as needed.
Regarding the `Vitor Pamplona (npub1gcx…nj5z)` address, I assume it's a Nostr public key or an npm package URL. If you can provide more context about what this is related to, I'd be happy to help further!