catstrology/index.html at master · l-mack/catstrology · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!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/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500i,700|Roboto+Slab:400,700&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <title>index</title>
</head>
<body>
    <!-- header  starts  -->
    <div class="wrapper headerWrapper">

        <aside>
            <button id=displayAll, class="displayAll displayAllFeat" data-text-swap="back to search">
                display all
            </button>
            <div class="displayAllGrid displayAllFeat"></div>
            <div class="displayAllNext displayAllFeat"></div>
        </aside>


    <header>
        <h1>Catstrology</h1>
        <h2>find your cat's star sign</h2>
    </header>

        <!-- header wrapper ends  -->
    </div>

    <main>
        <!-- start of form section -->

        <!-- main wrapper start  -->
        <div class="wrapper mainWrapper">

            <section>

                <fieldset class="userInput">
                    <form action="#" method="get">
                        <legend>
                            <h3>enter your cat's birthday</h3>
                        </legend>

                        <!-- start of inputFlex  -->
                        <div class="inputFlex">


                            <!-- start of selectFlex  -->
                            <div class="selectFlex">
                                <label class="monthEntry" for="monthEntry">month</label>
                                <select class="monthEntry" name="monthEntry" id="monthEntry">
                                    <option value="01">Jan</option>
                                    <option value="02">Feb</option>
                                    <option value="03">Mar</option>
                                    <option value="04">Apr</option>
                                    <option value="05">May</option>
                                    <option value="06">Jun</option>
                                    <option value="07">Jul</option>
                                    <option value="08">Aug</option>
                                    <option value="09">Sep</option>
                                    <option value="10">Oct</option>
                                    <option value="11">Nov</option>
                                    <option value="12">Dec</option>
                                </select>

                                <label class="dayEntry" for="dayEntry">day</label>
                                <select class="dayEntry" name="dayEntry" id="dayEntry">
                                    <option value="01">01</option>
                                    <option value="02">02</option>
                                    <option value="03">03</option>
                                    <option value="04">04</option>
                                    <option value="05">05</option>
                                    <option value="06">06</option>
                                    <option value="07">07</option>
                                    <option value="08">08</option>
                                    <option value="09">09</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                    <option value="28">28</option>
                                    <option value="29">29</option>
                                    <option value="30">30</option>
                                    <option value="31">31</option>
                                </select>

                            <!-- end of selectFlex  -->
                        </div>

                            <input type="submit" class="submitButton" value="enter">
                    <!-- end of inputFlex  -->
                    </div>
                    </form>

                </fieldset>

            <!-- end of form section  -->
            </section>

            <section>
                <div class="resultsFlex">
                    <div class="placeHolderImg">
                        <img src="./assets/signsCats/catSearch.png" alt="Francis the cat with crystal ball">
                    </div>

                </div>

            </section>
        <!-- main wrapper ends  -->
        </div>
    </main>

    <footer>

        <!-- footer wrapper begins  -->
        <div class="wrapper footerWrapper">

            <!-- astrology sign icons  -->
            <p>
                all icons created by Denis Sazhin from the <a href="https://thenounproject.com/iconka/collection/cat-horoscope/">Noun Project</a>
            </p>

            <!-- footer wrapper ends  -->
            </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>