index.html 8.07 KB
Newer Older
Porter Libby's avatar
Porter Libby committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html class="no-js" lang="">
    <head>
        <title>EPIC Journey</title>

        <!-- META INFO -->
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CDN STYLES-->
        <link rel="stylesheet" 
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
            crossorigin="anonymous">
Porter Libby's avatar
Porter Libby committed
16
17
18
        <link rel="stylesheet" 
            href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" >
            
Porter Libby's avatar
Porter Libby committed
19
20
21
22
23
24
25
26
27
28
29
30
31
32

        <!-- CDN SCRIPTS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
            crossorigin="anonymous">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
            crossorigin="anonymous">
        </script>
Porter Libby's avatar
Porter Libby committed
33
        
Porter Libby's avatar
Porter Libby committed
34
35
36
37
38
39
40
41
42
43

        <!-- STYLE SHEETS -->
        <link rel="apple-touch-icon" href="icon.png">
        <link rel="stylesheet" href="public/css/main.css">

        <!-- SCRIPT REFERENCES -->

    </head>

    <body>
Porter Libby's avatar
Porter Libby committed
44
        <!-- NAV BAR -->
45
        <nav class="navbar navbar-expand-lg navbar-dark navbar-ec justify-content-betweenu">
Porter Libby's avatar
Porter Libby committed
46
47
48
            <a class="navbar-brand" href="#">
                <img height='35px' src='public/img/ec-logo.png'>
            </a>
Porter Libby's avatar
Porter Libby committed
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            About
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
Porter Libby's avatar
Porter Libby committed
64

Porter Libby's avatar
Porter Libby committed
65
66
67
68
69
70
71
72
73
74
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Your Journey
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
Porter Libby's avatar
Porter Libby committed
75

Porter Libby's avatar
Porter Libby committed
76
77
78
79
80
81
82
83
84
85
86
87
88
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Resources
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
                <form id='search-bar' class="form-inline">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
Porter Libby's avatar
Porter Libby committed
89
                    <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
Porter Libby's avatar
Porter Libby committed
90
91
92
                </form>
            </div>
        </nav>
Porter Libby's avatar
Porter Libby committed
93

Porter Libby's avatar
Porter Libby committed
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
        <!-- MAIN CONTENT AREA (padded scrollable area) -->
        <div id='main-content'>
            <!-- Block 1 -->
            <div id="create-carousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#create-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#create-carousel" data-slide-to="1"></li>
                    <li data-target="#create-carousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner"> <!-- slides go here -->
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="public/img/ec-1.jpg" alt="First slide">
                    </div>

                    <div class="carousel-item">
                        <img class="d-block w-100" src="public/img/ec-2.jpg" alt="Second slide">
                    </div>

                    <div class="carousel-item">
                        <img class="d-block w-100" src="public/img/ec-3.jpg" alt="Third slide">
                    </div>
Porter Libby's avatar
Porter Libby committed
115

Porter Libby's avatar
Porter Libby committed
116
                </div>
Porter Libby's avatar
Porter Libby committed
117
118
119
120
121
122
123
124
                <a class="carousel-control-prev" href="#create-carousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#create-carousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
Porter Libby's avatar
Porter Libby committed
125
            </div>
Porter Libby's avatar
Porter Libby committed
126

Porter Libby's avatar
Porter Libby committed
127
128
129
130
            <!-- Block 1 -->
            <div class='block'>
                <span class='section-prompt'>1. Type the name of a major you are interested in</span>
            </div>
Porter Libby's avatar
Porter Libby committed
131

Porter Libby's avatar
Porter Libby committed
132
133
134
135
136
137
138
139
140
141
142
143
            <!-- Block 2 -->
            <div class='block'>
                <span class='section-prompt'>2. Choose something that sounds fulfilling</span>
                <br>
                <div class='inner-nav'> <!-- Nav options for this block -->
                    <button type="button" class="btn btn-labeled btn-dark">
                        <span class="btn-label"><i class="fa fa-flask"></i></span><br>Research</button>
                    <button type="button" class="btn btn-labeled btn-dark">
                        <span class="btn-label"><i class="fa fa-user-md"></i></span><br> Internship</button>
                    <button type="button" class="btn btn-labeled btn-dark">
                        <span class="btn-label"><i class="fa fa-book"></i></span><br> Off-campus Study</button>
                </div>
Porter Libby's avatar
Porter Libby committed
144
            </div>
Porter Libby's avatar
Porter Libby committed
145

Porter Libby's avatar
Porter Libby committed
146
147
148
149
            <!-- Block 3 -->
            <div class='block'>
                <span class='section-prompt'>3. What would you like to do for fun?</span>
            </div>
Porter Libby's avatar
Porter Libby committed
150

Porter Libby's avatar
Porter Libby committed
151
152
153
154
155
156
157
            <!-- Block 4 -->
            <div class='block'>
                <span class='section-prompt'>4. What would you like to become?</span>
                <br>
                <div class='inner-nav'> <!-- Nav options for this block -->
                    <button type="button" class="btn btn-labeled btn-dark">
                        <span class="btn-label"><i class="fa fa-globe"></i></span><br> Explore</button>
Porter Libby's avatar
Porter Libby committed
158

Porter Libby's avatar
Porter Libby committed
159
160
161
                    <button type="button" class="btn btn-labeled btn-dark">
                        <span class="btn-label"><i class="fa fa-check"></i></span><br> Finish!</button>
                </div>
Porter Libby's avatar
Porter Libby committed
162
            </div>
Porter Libby's avatar
Porter Libby committed
163
        </div>
Porter Libby's avatar
Porter Libby committed
164
165
    </body>
</html>