first-animated-css-grid/features.html at main · RxQuantum/first-animated-css-grid · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/utilities.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Quantum Server Hosting| For Everyone</title>
</head>
<body>
    <!--navbar-->
    <div class="navbar">
        <div class="container flex">
            <div class="logo-sec">
           <img src="/images/cropped-logo-quantum-150x150 - Edited.png" alt="" class="logo-img">
            <h1 class="logo">Quantum Server</h1>
        </div>
            <nav>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="docs.html">DOCS</a></li>
                    <li><a href="features.html">FEATURES</a></li>
                </ul>
            </nav>
        </div>
    </div>

<!--HEAD -->

<section class="features-head bg-primary">
    <div class="container grid">
        <div>
            <h1 class="xl">Features</h1>
            <p class="lead">Check out the features of Quantum Server that separates us from the competition.</p>
        </div>

            <img src="images/server.png" alt="">

    </div>
</section>

<!--subhead-->
<section class="features-sub-head bg-light">
    <div class="container grid">
        <div>
            <h1 class="md">Quantum Server</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis dolor eos quaerat odit illum alias nisi, sapiente exercitationem possimus iure nam incidunt deleniti animi suscipit porro aspernatur officiis, impedit consectetur.</p>
        </div>
            <img src="images/server2.png" alt="">
    </div>
</section>


<!--Features-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. Excepturi eos necessitatibus fugiat ad voluptates vero dolore voluptatum deserunt repellat voluptas sapiente quis dicta obcaecati vitae quas recusandae, dolorem, repellendus neque.</p>
        </div>

        <div class="card flex">
            <i class="fas fa-computer fa-3x"></i>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Excepturi eos necessitatibus fugiat ad voluptates vero dolore voluptatum deserunt repellat voluptas sapiente quis dicta obcaecati vitae quas recusandae, dolorem, repellendus neque.</p>
        </div>

        <div class="card flex">
            <i class="fas fa-laptop-code fa-3x"></i>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum reiciendis, laboriosam atque impedit totam rem delectus fugiat repellat veniam optio?</p>
                </div>
        <div class="card flex">
            <i class="fas fa-database fa-3x"></i>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam eos officia doloremque tenetur ipsam cum optio sequi est itaque quod.</p>
                </div>

        <div class="card flex">
            <i class="fas fa-power-off fa-3x"></i>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, dolores?</p>
                </div>

        <div class="card flex">
            <i class="fas fa-upload fa-3x"></i>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, minus.</p>
            </div>

    </div>
</section>


<!--footer-->
<footer class="footer bg-dark py-5">
    <div class="container grid grid-3">
        <div>
            <h1>Quantum Server </h1>
                <p>&copy; 2023</p>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="docs.html">DOCS</a></li>
                <li><a href="features.html">FEATURES</a></li>
            </ul>
        </nav>

        <div class="social">
            <a href="#"><i class="fab fa-github fa-2x"></i></a>
            <a href="#"><i class="fab fa-twitter 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>
        </div>
    </div>
</footer>
</body>
</html>