Loruki-Example/features.html at main · mayaname/Loruki-Example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!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="./styles/utilities.css">  <!-- Have first -->
  <link rel="stylesheet" href="./styles/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
  <title>Lokuri | Features</title>
</head>
<body>
  <!-- Navbar -->
  <div class="navbar">
    <!-- added utility class if flex to allow alignment of elements -->
    <div class="container flex">
      <h1 class="logo">Lokuri.</h1>
      <nav>
        <ul>
          <li><a href="index.html" title="Current page">Home</a></li>
          <li><a href="features.html" title="To Features page">Features</a></li>
          <li><a href="docs.html" title="To Documents page">Docs</a></li>
        </ul>
      </nav>
    </div>
  </div>

  <!-- Head -->
  <section 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="./images/server.png" alt="Server">
    </div>
  </section>

  <!-- Sub Head -->
  <section class="features-sub-head bg-light py-3">
    <div class="container grid">
      <div>
        <h1 class="md">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="./images/server2.png" alt="Server">
    </div>
  </section>

  <!-- Main -->
  <section 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. Numquam voluptate laborum rem, nostrum ut nemo? Sunt vitae dicta saepe. Rarem magnam omnis aliquid ipsip dolor sit, amet consectetur adipisicing elit. Iure, a assumenda tenetur.
        </p>
      </div>
      <div class="card flex">
        <i class="fas fa-network-wired fa-3x"></i>
        <p>
          Nostrum, recusandae id? Harum, eius facilis elit. Numquam voluptate laborum rem, nostrum ut nemo. Alias veritatis blanditiis voluptate quisquam in repellat impedit, ad voluptatibus numquam consectetur voluptatem.
        </p>
      </div>
      <div class="card flex">
        <i class="fas fa-laptop-code fa-3x"></i>
        <p>
          Repellat laboriosam accusantium odio nostrum adipisicing elit. Numquam voluptate laborum rem.
        </p>
      </div>
      <div class="card flex">
        <i class="fas fa-database fa-3x"></i>
        <p>
          Laboriosam accusantium odio nostruorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </div>
      <div class="card flex">
        <i class="fas fa-power-off fa-3x"></i>
        <p>
          Ea repellat laboriosam accusantium odio nostrum, recusandae id? Harum, eius facilis.
        </p>
      </div>
      <div class="card flex">
        <i class="fas fa-upload fa-3x"></i>
        <p>
          Odio nostruorem sit amet consectetur adipisicing elit. Numquam voluptate laborum rem.
        </p>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer bg-dark py-5">
    <div class="container grid grid-3">
      <div>
        <h1>Loruki</h1>
        <p>Copyright &copy; 2021</p>
      </div>
      <nav>
        <ul>
          <li><a href="./index.html"></a>Home</li>
          <li><a href="./features.html"></a>Features</li>
          <li><a href="./docs.html"></a>Docs</li>
        </ul>
      </nav>
      <div class="social">
        <a href="https:\\github.com" class="social-icon" target="_blank"><i class="fab fa-github fa-2x"></i></a>
        <a href="https:\\facebook.com" class="social-icon" target="_blank"><i class="fab fa-facebook fa-2x"></i></a>
        <a href="https:\\instagram.com" class="social-icon" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
        <a href="https:\\twitter.com" class="social-icon" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
      </div>
    </div>
  </footer>
</body>
</html>