Referencing-Tool/about.html at master · AvaHurstCode/Referencing-Tool · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
    <link rel="stylesheet" href="CSS/defaults.css">
    <link rel="stylesheet" href="CSS/colour-scheme.css">
    <link rel="stylesheet" href="CSS/sections.css">
    <link rel="stylesheet" href="CSS/navbar.css">
    <link rel="stylesheet" href="CSS/about.css">
</head>
<body>
    <!-- Navigation Bar -->
    <nav>
        <div class="icon">ICON</div>
        <div class="pages">
            <ul>
                <li><a href="home.html">HOME</a></li>
                <li class="active"><a href="about.html">ABOUT</a></li>
            </ul>
        </div>
        <div class="login">
            <a href="login.html">LOGIN</a>
        </div>
    </nav>
    <!-- Main Content -->
    <main>
        <!-- Hero Section -->
        <section class="hero">
            <div class="animate">
                <header>
                    <h1>About RefManager</h1>
                </header>
                <div>
                    <p>
                        Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit.
                        Cras nisl ante, fermentum sit amet nunc sit amet,
                        facilisis porta lorem.
                    </p>
                </div>
            </div>
        </section>
        <section class="horizontal-cards">
            <header>
                <h1>Why Use It?</h1>
            </header>
            <div class="animate">
                <ul>
                    <li>
                        <div class="list-content">
                                <h1>Productivity</h1>
                                <h2>Sub header text</h2>
                                <p>Etiam ornare vehicula dignissim. Nam interdum at odio in ullamcorper. Cras sodales sodales nulla, sit amet fermentum massa varius sagittis. Maecenas consequat sed felis blandit viverra. Quisque vel.</p>
                        </div>
                    </li>
                    <li>
                        <div class="list-content">
                            <h1>Organisation</h1>
                            <h2>Sub header text</h2>
                            <p>Etiam ornare vehicula dignissim. Nam interdum at odio in ullamcorper. Cras sodales sodales nulla, sit amet fermentum massa varius sagittis. Maecenas consequat sed felis blandit viverra. Quisque vel.</p>
                        </div>
                    </li>
                    <li>
                        <div class="list-content">
                            <h1>Improvement</h1>
                            <h2>Sub header text</h2>
                            <p>Cras sodales sodales nulla, sit amet fermentum massa varius sagittis. Maecenas consequat sed felis blandit viverra. Quisque vel.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
        <section class="text-image">
            <header>
                <h1>Why We Made It</h1>
            </header>
            <div class="content">
                <div class="text">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt leo est.
                        Mauris ut tellus fermentum, bibendum dolor a, blandit tellus.
                        Pellentesque dignissim vel justo a tincidunt.
                        Fusce sed vehicula ante. Nulla facilisi.
                        Duis pharetra neque id risus tempus, ut tristique ligula aliquam.
                        Sed rhoncus neque at magna rutrum viverra.
                        Maecenas convallis nulla risus, vitae pretium nibh tincidunt id.
                        Nulla quis dui eu ligula aliquet vestibulum.
                        In lacus arcu, sollicitudin eget tempor quis, volutpat.
                    </p>
                </div>
                <div class="image">
                    <div>
                        <img src="hero-image.jpg" alt="">
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>
</html>