-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (123 loc) · 5.36 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<title>Cool Landing Page Here</title>
</head>
<body>
<!-- Customize a sweet Materialize Navbar -->
<nav>
<div class="nav-wrapper light-blue">
<a class="brand-logo center" class="center" href="#"><img class="circle" src="img/logo.png"></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Schedule</a></li>
<li><a href="#">Grades</a></li>
<li><a href="#" data-activates="dropdown" class="dropdown-button">Assignments<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!-- Customize Dropdown Structure -->
<ul id="dropdown" class="dropdown-content">
<li><a href="#">Lab1</a></li>
<li class="divider"></li>
<li><a href="#">Lab2</a></li>
<li class="divider"></li>
<li><a href="#">SA1</a></li>
<li class="divider"></li>
<li><a href="#">SA2</a></li>
</ul>
<!-- parallax code from: http://materializecss.com/parallax.html -->
<div class="parallax-container">
<div class='parallax'><img src='img/p1.jpg'></div>
</div>
<div class='section-white'>
<br />
<h1 class="header center orange-text">Hi CS52!</h1>
<div class="row center">
<h5 class="header col s12 light">Let's spruce up this landing page in 30 minutes.</h5>
</div>
<br /><br />
<div class="container">
<div class="section">
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h5 class="center">Change the headings.</h5>
<p class="light">Just follow the tutorial! It won't take too long, and you'll get a new logo.</p>
<a class="btn waves-effect waves-light" href="#getStartedModal">Button 1</a>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h5 class="center">Add some effects.</h5>
<p class="light">Make some buttons look cool! And by that I mean Button 1, Button 2, and Button 3.</p>
<a class="btn-floating waves-effect waves-light cyan" href="#getStartedModal"><i class="material-icons">cloud</i>Button 1</a>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h5 class="center">Add a modal.</h5>
<p class="light">Materialize makes it easy to do so, don't worry.</p>
<a id='getStartedModal' class="btn-floating waves-effect waves-light cyan" href="#getStartedModal"><i class="material-icons">add</i></a>
<!-- get example info from: http://materializecss.com/modals.html -->
<!-- code adapted from: http://materializecss.com/modals.html -->
<div id='getStartedModal' class='modal'>
<div class="modal-content">
<h4>Get Started with Materialize!</h4>
<p>Learn how to use Materialize.</p>
<div class='modal-footer'> <a class="modal-action modal-close waves-effect" href="#">I'm ready!</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Click outside to close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- parallax code from: http://materializecss.com/parallax.html -->
<div class="parallax-container">
<div class='parallax'><img src='img/p2.jpg'></div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Nice work!</h5>
<p class="grey-text text-lighten-4">We hope you enjoyed checking out how to make a landing page better, faster.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<script src='js/init.js'></script>
</body>
</html>