index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iván Hernández Framework</title>
    <link href="css/main.css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="g--background-color-primary-1 g--margin-8">
<h1 class="c-title c-title--1 g--margin-bottom-8">Iván Hernández Framework</h1>
    <div class="l-columns l-columns--4 g--gap-6">
        <div class="l-columns l-columns--1 g--margin-bottom-8 g--gap-4">
            <h2 class="c-title c-title--2 g--margin-bottom-6">Globals</h2>
            <a href="g--border-radius.html" class="c-button">Border radius</a>
            <a href="g--box-shadow.html" class="c-button">Box shadow</a>
            <a href="g--color.html" class="c-button">Color</a>
            <a href="g--font-family.html" class="c-button">Font family</a>
            <a href="g--font-size.html" class="c-button">Font size</a>
            <a href="g--font-weight.html" class="c-button">Font weight</a>
            <a href="g--gap.html" class="c-button">Gap</a>
            <a href="g--margin.html" class="c-button">Margin</a>
            <a href="g--opacity.html" class="c-button">Opacity</a>
            <a href="g--padding.html" class="c-button">Padding</a>
            <a href="g--text-decoration.html" class="c-button">Text decoration</a>
        </div>
        <div class="l-columns l-columns--1 g--margin-bottom-8 g--gap-4">
            <h2 class="c-title c-title--2 g--margin-bottom-6">Components</h2>
            <a href="c-alert.html" class="c-button">Alert</a>
            <a href="c-badge.html" class="c-button">Badge</a>
            <a href="c-button.html" class="c-button">Button</a>
            <a href="c-card.html" class="c-button">Card</a>
            <a href="c-pagination.html" class="c-button">Pagination</a>
            <a href="c-title.html" class="c-button">Title</a>
        </div>
        <div class="l-columns l-columns--1 g--margin-bottom-8 g--gap-4">
            <h2 class="c-title c-title--2 g--margin-bottom-6">Layouts</h2>
            <a href="l-center.html" class="c-button">Center</a>
            <a href="l-columns.html" class="c-button">Columns</a>
            <a href="l-flex.html" class="c-button">Flex</a>
            <a href="l-position.html" class="c-button">Position</a>
            <a href="l-rows.html" class="c-button">Rows</a>
        </div>
        <div class="l-columns l-columns--1 g--margin-bottom-8 g--gap-4">
            <h2 class="c-title c-title--2 g--margin-bottom-6">Media filters</h2>
            <a href="responsive.html" class="c-button">Responsive</a>
            <a href="dark.html" class="c-button">Dark</a>
        </div>
    </div>
</body>
</html>