LIGMATV/bento-self

A Link in Bio. But Rich and Beautiful.

Bento Self

A Link in Bio. But Rich and Beautiful. Inspired from bento.me

Configuration

1. Header

<!-- [1] Header -->

<header>

    <!-- [1.1] Image profile -->
    <img class="profile" src=" <!-- Link to image --> ">

    <!-- [1.2] Your name -->
    <h1>Lorem ipsum</h1>

    <!-- [1.3] A bit description -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</header>

2. Menu and Sections

<!-- [2] Menu buttons -->

<div class="menu">

    <a href="#menu-1">Menu 1</a>
    <a href="#menu-2">Menu 2</a>
    <a href="#menu-3">Menu 3</a>

</div>


<!-- [0] First section -->

<section id="menu-1">
    <!-- Your widgets here... -->
</section>

<section id="menu-2">
    <!-- Your widgets here... -->
</section>

<section id="menu-3">
    <!-- Your widgets here... -->
</section>

3. Big widget

<!-- [3] Big widget -->

<a href="https://example.com" widget="big">

    <!-- [3.1] Favicon -->
    <div class="favicon">
        <img src=" <!-- Link to image --> ">
    </div>

    <!-- [3.2] Name of site -->
    <p class="name">Example</p>

    <!-- [3.3] A bit url of site -->
    <p class="url">example.com</p>

    <!-- [3.4] Preview or some image from site -->
    <div class="preview">
        <img src=" <!-- Link to image --> ">
    </div>

</a>

4. Bigger widget

<!-- [4] Bigger widget -->

<a href="https://example.com" widget="bigger">

    <!-- [3.1] -->
    <div class="favicon">
        <img src=" <!-- Link to image --> ">
    </div>

    <!-- [3.2] -->
    <p class="name">Example</p>

    <!-- [3.3] -->
    <p class="url">example.com</p>

    <!-- [3.4] -->
    <div class="preview">
        <img src=" <!-- Link to image --> ">
    </div>

</a>

5. Wide widget

<!-- [5] Wide widget -->

<a href="https://example.com" widget="wide">

    <!-- [3.1] -->
    <div class="favicon">
        <img src=" <!-- Link to image --> ">
    </div>

    <!-- [3.2] -->
    <span class="name">Example</span>

</a>

5.1 Wide note

<!-- [5.1] [5]Wide widget contain notes -->
<a widget="wide">
    <h2>Hmmm... we need more <b>wider space!</b></h2>
    <code>print('Hello, world!')</code>
</a>

5.2 Wide picture

<!-- [5.2] [5]Wide widget contain picture -->
<a widget="wide">
    <img class="picture" src=" <!-- Link to image --> ">
</a>

6. Medium widget and group

<!-- [6] Group of medium widgets -->

<group>

<a href="https://example.com" widget="medium">

    <!-- [3.1] -->
    <div class="favicon">
        <img src=" <!-- Link to image --> ">
    </div>

    <!-- [3.2] -->
    <p class="name">Example</p>

    <!-- [3.3] -->
    <p class="url">example.com</p>

</a>

<a href="https://example.com" widget="medium">
     <!-- Your elements here -->
</a>

</group>

6.1 Medium note

<group>

    <a widget="medium" 
        style="background-color: #5b5b5b; color: #fff;">
            <h2>Customize the note<em>!</em></h2>
    </a>

    <a widget="medium">
        <em>Another cool text that just work</em>
    </a>

</group>

Add <group> for every 2 medium widget.

<group>

    <!-- [6.3] Centered text -->
    <a widget="medium" 
        style="text-align: center; display: flex; justify-content: center; align-items: center;">
            <h2>Anything centered</h2>
    </a>

   <a widget="medium">
       <!-- Your elements here -->
   </a>

</group>

6.2 Medium picture

<group>
    <!-- [6.4] Medium widget contain picture -->
    <a widget="medium">
        <img class="picture" src=" <!-- Link to image --> ">
    </a>

   <a widget="medium">
       <!-- Your elements here -->
   </a>

</group>

7. Section title

<!-- [7] Section title -->
<section-title>Section title</section-title>

8. Blockquote

<!-- [8] Quote -->

<a widget="medium"
      style="background-color:#fff6e7;">

      <!-- [8.1] The quote
      <blockquote>So I'll go, I'll go, I will go, go, go <br>

      <!-- [8.2] Who quoting
      <sub>- Bastille</sub>

      </blockquote>

</a>