Referencing-Tool/home.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!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/background-animation.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 class="active"><a href="home.html">HOME</a></li>
                <li><a href="#about">ABOUT</a></li>
            </ul>
        </div>
        <div class="login">
            <a href="login.html">LOGIN</a>
        </div>
    </nav>
    <!-- Main Content -->
    <main>
        <!-- Background Animation-->
        <div class="background-anim">
            <div class="dot fast"></div>
            <div class="dot medium"></div>
            <div class="dot slow"></div>
            <div class="filter">
            </div>
        </div>
        <!-- Hero Section -->
        <section class="hero">
            <div class="animate">
                <header>
                    <h1>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="login-signup">
            <a href="login.html">
                <button class="login">LOGIN</button>
            </a>
            <a href="login.html">
                <button class="sign-up">SIGN UP</button>
            </a>
        </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>Improved Art</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 id="about">About Us</h1>
            </header>
            <div class="content">
                <div class="text-container">
                    <div class="text">
                        <h1>Heading Goes Here</h1>
                        <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>
                <div class="image-container">
                    <div class="image">
                        <img src="hero-image.jpg" alt="">
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>
</html>