internetprogrammierung/frontend/segments/_home.php

<p></p>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card-columns">
        <div class="card bg-success text-white">
          <div class="card-body">
            <h5 class="card-title">Hello and welcome on FriendsBook</h5>
            <p class="card-text">You can write entries for your friends on the New Entry Page or create your own FriendsBook account to get your own entries written by your friends.</p>
          </div>
        </div>
        <div class="card p-3">
          <blockquote class="blockquote mb-0 card-body">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
            <footer class="blockquote-footer">
              <small class="text-muted">
                <a style="color: grey;" href="www.loremipsum.de">www.loremipsum.de</a>
              </small>
            </footer>
          </blockquote>
        </div>
        <div class="card bg-warning text-white">
          <div class="card-body">
            <h5 class="card-title">Patch notes</h5>
            <p class="card-text">In this patch we implemented a nicer coloring of the pages, also some important bug fixes are done.</p>
            <p class="card-text">Please report all bugs and problems to our support mail adress: support@friendsbook.de</p>
            <p class="card-text"><small class="text-muted">Last updated 20.06.2018</small></p>
          </div>
        </div>
        <div class="card bg-dark text-white text-center p-3">
          <blockquote class="blockquote mb-0">
            <p>"I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it."</p>
            <footer class="blockquote-footer">
              <small>
                Bill Gates
              </small>
            </footer>
          </blockquote>
        </div>
        <div class="card text-center bg-primary text-white">
          <div class="card-body">
            <h5 class="card-title">How to create a friendsTAN?</h5>
            <p class="card-text">To create your friendsTAN just log in to your account and go to the MyFriendsBook page, there you will find a create TAN button on the top of the page, you can also see your unused TANs there.</p>
            <p class="card-text"><small class="text-white">FriendsBook</small></p>
          </div>
        </div>
        <div class="card bg-dark text-white text-center p-3">
          <blockquote class="blockquote mb-0">
            <p class="card-text">"Everybody should learn to program a computer because it teaches you how to think."</p>
            <footer class="blockquote-footer">
              <small>
                Steve Jobs
              </small>
          </blockquote>
        </div>
        <div class="card p-3 bg-info text-white text-right">
          <blockquote class="blockquote mb-0">
            <p>We are online since 21.06.2018</p>
            <footer class="blockquote-footer">
              <small class="text-muted">
                FriendsBook
              </small>
            </footer>
          </blockquote>
        </div>
        <div class="card p-3 bg-secondary text-white">
          <blockquote class="blockquote mb-0 card-body">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
            <footer class="blockquote-footer">
              <small class="text-muted">
                <a style="color: white;" href="www.loremipsum.de">www.loremipsum.de</a>
              </small>
            </footer>
          </blockquote>
        </div>
        <div class="card bg-primary text-white text-center">
          <div class="card-body">
            <h5 class="card-title">How to write a new entry?</h5>
            <p class="card-text">To write a new entry for your friend you can go to the New Entry page, there you have to fill in all informations which are starred. In the last field fill in the friendsTAN, please check twice that its correct, otherwise the entry is set.</p>
            <p class="card-text"><small class="text-white">FriendsBook</small></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> <!-- Ende container My FriendsBook -->

<!-- PRICING -->
<div class="alert pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center text-light">
  <h1 class="display-4">Pricing</h1>
  <p class="lead">Get more out of your FriendsBook account</p>
</div>
<div class="card-deck mb-3 text-center">
  <div class="card mb-4 box-shadow">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">Free</h4>
    </div>
    <div class="card-body">
      <h1 class="card-title pricing-card-title">0 € <small class="text-muted">/ mo</small></h1>
      <ul class="list-unstyled mt-3 mb-4">
        <li>Storage for 20 entries</li>
        <li>Email support</li>
        <li>Help center access</li>
      </ul>
    </div>
  </div>
  <div class="card mb-4 box-shadow">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">Plus</h4>
    </div>
    <div class="card-body">
      <h1 class="card-title pricing-card-title">15 € <small class="text-muted">/ mo</small></h1>
      <ul class="list-unstyled mt-3 mb-4">
        <li>Storage for 100 entries</li>
        <li>Multiple Friendbooks</li>
        <li>Priority email support</li>
        <li>Help center access</li>
      </ul>
    </div>
  </div>
  <div class="card mb-4 box-shadow">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">Pro</h4>
    </div>
    <div class="card-body">
      <h1 class="card-title pricing-card-title">29 € <small class="text-muted">/ mo</small></h1>
      <ul class="list-unstyled mt-3 mb-4">
        <li>Storage for 1000 entries</li>
        <li>Multiple Friendbooks</li>
        <li>Phone and email support</li>
        <li>Help center access</li>
      </ul>
    </div>
  </div>
</div>