index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FormQL - A framework for building dynamic forms</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="assets/bootstrap.css">
    <link rel="stylesheet" href="assets/style.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,900" rel="stylesheet">
    <meta name="description" content="FormQL - A framwork for building dynamic forms">
    <meta name="robots" content="noodp" />
    <link rel="canonical" href="https://formql.io" />
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
    <meta property="og:url" content="https://formql.io" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="FormQL - A framework for building dynamic forms" />
    <meta property="og:title" content="FormQL - A framework for building dynamic forms" />
    <meta property="og:description" content="A framework for building dynamic forms" />
    <meta property="og:image" content="https://formql.io/formql-logo.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="650" />
    <meta name="twitter:description" content="A framework for building dynamic forms" />
    <meta name="twitter:title" content="FormQL - A framework for building dynamic forms" />
    <meta name="twitter:card" content="summary" />
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
</head>

<body>
    <header class="page-header">
        <div class="web-background"></div>
        <div class="container">
            <div class="top-wrapper">
                <div class="logo-wrapper d-inline-block">
                    <a href="/">
                        <img src="assets/formql-logo.png" alt="FormQL - A framework for bulding dynamic forms" />
                    </a>
                    FormQL
                </div>
                <div class="logo-wrapper-mobile">
                    <a href="/">
                        <img src="assets/formql-logo.png" alt="FormQL - A framework for bulding dynamic forms" />
                    </a>
                </div>
                <nav class="nav-menu pull-right">
                    <ul class="nav-wrapper">
                        <li class="hidden-sm">
                            <a href="https://github.com/formql/formql">GET STARTED</a>
                        </li>
                        <li>
                            <a href="https://github.com/formql/formql" target="blank" class="icon">
                                <i class="fab fa-github"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://twitter.com/formql_io" target="blank" class="icon">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
                <nav class="nav-menu-mobile pull-right">
                    <ul class="nav-wrapper">
                        <li>
                            <a href="https://github.com/formql/formql" target="blank" class="icon">
                                <i class="fab fa-github"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://twitter.com/formql_io" target="blank" class="icon">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="main-wrapper">
                    <h1>FormQL</h1>
                    <h3>A framework for building dynamic forms</h3>
                    <h3>Don't hard code your forms, build them dynamically with FormQL</h3>
                    <div class="buttons-wrapper">
                        <a href="https://github.com/formql/formql" class="btn btn-primary d-inline-block">Get started</a>
                        <a href="https://github.com/formql/formql" class="btn btn-secondary d-inline-block">
                            <i class="fab fa-github"></i>
                            <span>Github</span>
                        </a>
                    </div>
                </div>
                <div class="demo-wrapper">
                    <div class="demo-title">
                        <h1>How does it work?</h1>
                        <div style="color: black;">FormQL allows you to create forms on the fly by using a drag and
                            drop functionality </div>
                        <br>
                        <div class="demo-items">
                            <div class="demo-item">
                                <div>1. Hover over the fields, use the </div>
                                <div class="move-icon"></div>
                                <div> icon to drag and organise the components in the form</div>
                            </div>
                            <div class="demo-item">
                                <div>2. Click on the </div>
                                <div class="edit-icon"></div>
                                <div> icon to edit field and select the appropiate type of field</div>
                            </div>
                            <div class="demo-item">
                                <div>3. Use the left hand side menu to drag and drop new sections or components into
                                    the
                                    form</div>
                            </div>
                            <div class="demo-item">
                                <div>4. Save the form and open the view mode to see the final result.</div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <iframe src="https://formql.io/example/#/form/contactInfo/edit" class="demo-iframe"></iframe>
                </div>
            </div>
        </div>
        </div>
    </header>
    <footer class="page-footer">
        <div class="container">
            <div class="social-wrapper">
                <a href="https://github.com/formql/formql" target="blank" class="icon">
                    <i class="fab fa-github"></i>
                </a>
                <a href="https://twitter.com/formql_io" target="blank" class="icon">
                    <i class="fab fa-twitter"></i>
                </a>
            </div>
            <p>
                Released under the MIT License
                <br /> Copyright © 2018-2019 by
                <a href="https://twitter.com/juanstoppa" target="blank">Juan Stoppa</a>
                <br /> Designed by
                <a href="https://dribbble.com/JakubStaron" target="blank">Jakub Staroń</a>
            </p>
        </div>
    </footer>
</body>

</html>