096-cloud hosting service/index.html

<!-- Based on Build a Responsive Website by Brad Traversy (2020)
see: https://www.youtube.com/watch?v=p0bGHP-PXD4 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="utilities.css" />
    <link rel="stylesheet" href="style.css" />
    <title>Loruki | Cloud Hosting For Everyone</title>
  </head>
  <body>
    <!-- Navbar -->
    <div class="navbar">
      <div class="container flex">
        <h1 class="logo">Loruki.</h1>
        <nav>
          <ul>
            <li><a href="#demo">Demo</a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#docs">Docs</a></li>
          </ul>
        </nav>
      </div>
    </div>

    <!-- showcase -->
    <section class="showcase" id="demo">
      <div class="container grid">
        <div class="showcase-text">
          <h1>Easier Deployment</h1>
          <p>
            Deploy web apps of all kinds, from large scale enterprise APIs to
            static websites for individuals. Fill out the form to try a demo of
            our platform
          </p>
          <a href="#features" class="btn btn-outline">Learn More</a>
        </div>
        <div class="showcase-form card">
          <h2>Request a Demo</h2>
          <form onsubmit="event.preventDefault()">
            <div class="form-control">
              <input type="text" name="name" placeholder="Name" required />
            </div>
            <div class="form-control">
              <input
                type="text"
                name="company"
                placeholder="Company Name"
                required
              />
            </div>
            <div class="form-control">
              <input type="email" name="email" placeholder="Email" required />
            </div>
            <input type="submit" value="Send" class="btn btn-primary" />
          </form>
        </div>
      </div>
    </section>

    <!-- stats -->
    <section class="stats">
      <div class="container">
        <h3 class="stats-heading text-center my-1">
          Welcome to the best platform for building applications of all types
          with modern architecture and scaling
        </h3>
        <div class="grid grid-3 text-center my-4">
          <div>
            <i class="fas fa-server fa-3x"></i>
            <h3>10,349,405</h3>
            <p class="text-secondary">Deployments</p>
          </div>
          <div>
            <i class="fas fa-upload fa-3x"></i>
            <h3>987 TB</h3>
            <p class="text-secondary">Published</p>
          </div>
          <div>
            <i class="fas fa-project-diagram fa-3x"></i>
            <h3>2,343,265</h3>
            <p class="text-secondary">Projects</p>
          </div>
        </div>
      </div>
    </section>

    <!-- cli -->
    <section class="cli">
      <div class="container grid">
        <img
          src="https://github.com/bradtraversy/loruki-website/blob/master/images/cli.png?raw=true"
          alt=""
        />
        <div class="card">
          <h3>Easy to use, cross platform CLI</h3>
        </div>
        <div class="card">
          <h3>Deploy in seconds</h3>
        </div>
      </div>
    </section>

    <!-- cloud -->
    <section class="cloud my-2 py-2">
      <div class="container grid bg-secondary">
        <div class="text-center">
          <h2 class="lg">Extreme Cloud Hosting</h2>
          <p class="lead my-1">
            Cloud hosting like you've never seen. Fast, efficient and scalable
          </p>
          <a href="#features" class="btn btn-dark">Read More</a>
        </div>
        <img
          src="https://github.com/bradtraversy/loruki-website/blob/master/images/cloud.png?raw=true"
          alt=""
        />
      </div>
    </section>

    <!-- languages -->
    <section class="languages">
      <h2 class="md text-center my-2">Supported Languages</h2>
      <div class="container flex">
        <div class="card">
          <h4>Node.js</h4>
          <img
            src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/node.png?raw=true"
            alt=""
          />
        </div>
        <div class="card">
          <h4>Python</h4>
          <img
            src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/python.png?raw=true"
            alt=""
          />
        </div>
        <div class="card">
          <h4>C#</h4>
          <img
            src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/csharp.png?raw=true"
            alt=""
          />
        </div>
        <div class="card">
          <h4>Ruby</h4>
          <img
            src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/ruby.png?raw=true"
            alt=""
          />
        </div>
        <div class="card">
          <h4>PHP</h4>
          <img
            src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/php.png?raw=true"
            alt=""
          />
        </div>
        <div class="card">
          <h4>Scala</h4>
          <img
            src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/scala.png?raw=true"
            alt=""
          />
        </div>
        <div class="card">
          <h4>Clojure</h4>
          <img
            src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/clojure.png?raw=true"
            alt=""
          />
        </div>
      </div>
    </section>

    <!-- features -->
    <section id="features">
      <!-- head -->
      <div class="features-head bg-primary py-3">
        <div class="container grid">
          <div>
            <h1 class="xl">Features</h1>
            <p class="lead">
              Check out the features of Loruki that separate us from the
              competition
            </p>
          </div>
          <img
            src="https://github.com/bradtraversy/loruki-website/blob/master/images/server.png?raw=true"
            alt=""
          />
        </div>
      </div>

      <!-- sub head -->
      <div class="features-sub-head bg-light py-3">
        <div class="container grid">
          <div>
            <h1 class="md">The Loruki Platform</h1>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor
              cupiditate dignissimos temporibus perspiciatis quae! Suscipit qui,
              consectetur ea consequatur, doloribus repellendus quasi, aut
              corporis nam alias culpa. Nostrum, inventore accusantium!
            </p>
          </div>
          <img
            src="https://github.com/bradtraversy/loruki-website/blob/master/images/server2.png?raw=true"
            alt=""
          />
        </div>
      </div>
      <!-- main features -->
      <div class="features-main my-2">
        <div class="container grid grid-3">
          <div class="card flex">
            <i class="fas fa-server fa-3x"></i>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
              nemo saepe corrupti et dolorem voluptate at, nostrum rem
              voluptatem ab alias quia molestiae ea, libero nihil deserunt.
              Molestias, eum? Necessitatibus!
            </p>
          </div>
          <div class="card flex">
            <i class="fas fa-network-wired fa-3x"></i>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus
              recusandae perferendis culpa, reiciendis a itaque debitis qui vel
              dignissimos ipsum!
            </p>
          </div>
          <div class="card flex">
            <i class="fas fa-laptop-code fa-3x"></i>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
              magnam.
            </p>
          </div>
          <div class="card flex">
            <i class="fas fa-database fa-3x"></i>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, a!
            </p>
          </div>
          <div class="card flex">
            <i class="fas fa-power-off fa-3x"></i>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
              magnam.
            </p>
          </div>
          <div class="card flex">
            <i class="fas fa-upload fa-3x"></i>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
              magnam.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- docs -->
    <section id="docs">
      <!-- head -->
      <div class="docs-head bg-primary py-3">
        <div class="container grid">
          <div>
            <h1 class="xl">Docs</h1>
            <p class="lead">Learn how to work with the Loruki platform</p>
          </div>
          <img
            src="https://github.com/bradtraversy/loruki-website/blob/master/images/docs.png?raw=true"
            alt=""
          />
        </div>
      </div>
      <!-- main docs -->
      <div class="docs-main my-4">
        <div class="container grid">
          <div class="card bg-light p-3">
            <h3 class="my-2">Essentials</h3>
            <nav>
              <ul>
                <li><a class="text-primary" href="#">Introduction</a></li>
                <li><a href="#">About Loruki</a></li>
                <li><a href="#">Installation</a></li>
              </ul>
            </nav>

            <h3 class="my-2">Deployment</h3>
            <nav>
              <ul>
                <li><a href="#">Setting up a container</a></li>
                <li><a href="#">Using the CLI</a></li>
                <li><a href="#">Managing resources</a></li>
                <li><a href="#">Upgrade & downgrade</a></li>
              </ul>
            </nav>
          </div>
          <div class="card">
            <h2>Introduction</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Distinctio illo facere perferendis laborum? Similique recusandae
              incidunt eos dolorum aliquam ipsam unde perspiciatis laudantium
              totam quam laborum velit, at maxime minus?
            </p>

            <div class="alert alert-success">
              <i class="fas fa-info"></i> Lorem ipsum dolor sit amet consectetur
              adipisicing elit. Quae, animi?
            </div>

            <h3>Lorem, ipsum dolor.</h3>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima
              totam magni eius vitae velit id, atque veritatis! At, vero porro.
            </p>
            <a href="#" class="btn btn-primary">Install CLI</a>

            <h3>Requirements</h3>
            <ul>
              <li>Windows 10, Mac OSX, Linux</li>
              <li>Node.js v14 or higher</li>
            </ul>

            <h3>Install</h3>
            <p>Mac (Homebrew)</p>
            <pre><code>$ brew install loruki-cli</code></pre>
            <p>NPM</p>
            <pre><code>$ npm install loruki-cli</code></pre>
            <p>Yarn</p>
            <pre><code>$ yarn install loruki-cli</code></pre>
          </div>
        </div>
      </div>
    </section>

    <!-- footer -->
    <footer class="footer bg-dark py-5">
      <div class="container grid grid-3">
        <div>
          <h1>Loruki</h1>
          <p>
            Copyright &copy;
            <script>
              document.write(new Date().getFullYear());
            </script>
          </p>
        </div>
        <nav>
          <ul>
            <li><a href="#demo">Demo</a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#docs">Docs</a></li>
          </ul>
        </nav>
        <div class="social">
          <a href="#"><i class="fab fa-github fa-2x"></i></a>
          <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
          <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
          <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
        </div>
      </div>
    </footer>
  </body>
</html>