Zodiac-Compatibility-Calculator/index.html at master · eaglesTear/Zodiac-Compatibility-Calculator · 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
<!DOCTYPE html>
<html lang="en-GB">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
    <title>The Zodiac</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>

    <nav id="scroll-target" class="navbar navbar-expand-md bg-dark navbar-dark">
        <a class="navbar-brand" class="logo-style" href="index.html">
            <img src="images/logo.jpg" width="80" alt="logo" />
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="zodiac.html">Zodiac Signs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="compatibility.html">
                        Compatibility Calculator
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="compat_calc_2.html">Fun Calculator</a>
                </li>
            </ul>
            <button type="button" class="btn btn-primary mode">Toggle Dark Mode</button>
        </div>
    </nav>

    <header class="text-center page-header header container-fluid full-screen-header">
        <section>
            <h1 class="landing-title">The Answers are in the Stars</h1>
            <p class="landing-p">Nunc faucibus, ipsum sed commodo efficitur, risus nisi facilisis justo, nec aliquet odio magna maximus ante. Proin scelerisque lacinia porttitor. Nulla laoreet risus sed augue dapibus, eu dapibus elit hendrerit. Phasellus ac tellus mi. Pellentesque mollis nisi eget neque mattis maximus. Nunc quis laoreet leo, dapibus bibendum ipsum. Fusce posuere pharetra mauris et aliquet. Vestibulum molestie quis lorem vel tristique. </p>
            <a href="zodiac.html">
                <button id="landing-btn" class="btn btn-outline btn-primary btn-lg">
                    Who are you...?
                </button>
            </a>
        </section>
    </header>

    <div class="container features">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-12">
                <h3 class="feature-title">Lorem ipsum</h3>
                <img src="images/dial.jpg" alt="zodiac wheel on wall, Italy" class="img-fluid">
                <span>
                    Photo by <a href="https://unsplash.com/@jonathan_francisca?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Jonathan Francisca</a> on <a href="https://unsplash.com/s/photos/astrology?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
                </span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">
                <h3 class="feature-title">Lorem ipsum</h3>
                <img src="images/library.jpg" alt="library hall with books" class="img-fluid">
                <span>
                    Photo by <a href="https://unsplash.com/@jsr1?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Josh Rangel</a> on <a href="https://unsplash.com/s/photos/astrology?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
                </span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">
                <p>Feel free to get in touch!</p>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Name" name="">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" placeholder="Email Address" name="email">
                </div>
                <div class="form-group">
                    <textarea class="form-control" rows="4"></textarea>
                </div>
                <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
            </div>
        </div>
    </div>

    <footer class="page-footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-12">
                    <h6 class="text-uppercase font-weight-bold">
                        Additional Information
                    </h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <h6 class="text-uppercase font-weight-bold">Contact</h6>
                    <p>107 Anywhere Street, Birmingham R32 T15
                        <br />info@mywebsite.com
                        <br />+ 44 234 567 88
                        <br />+ 44 234 567 89</p>
                    <button id="scroll" class="btn btn-primary">
                        Going up?
                    </button>
                </div>
            </div>
        </div>
        <div class="footer-copyright text-center">
            &copy; 2020 Copyright: Ryan Hadley
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="script.js"></script>

</body>

</html>