-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (138 loc) · 10.7 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
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<a href="#" class="btn btn-primary active">Sign Up</a>
</form>
</li>
</ul>
</div>
</div>
</nav>
<div style="padding-top: 40px; padding-bottom: 40px; background-color: lightgray;">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<div class="col-sm-3">
<ul>
<li>Go some place</li>
</ul>
</div>
<div class="container" style="border-top: grey; border-bottom: grey;">
<div class="col-sm-8">
<article>
<h2>My Article!<span class = "label label-primary">New</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut dolor felis. Vestibulum nec condimentum purus. Aliquam ipsum ex, commodo sit amet malesuada ac, venenatis ut magna. Nam vel velit et sapien hendrerit tempor. Ut malesuada magna neque, vulputate rutrum turpis semper non. Maecenas nec imperdiet turpis, eget finibus enim. Donec id lacus porttitor, tincidunt diam nec, rutrum nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ultrices turpis sapien, eget pellentesque massa ultricies vel. Nunc nec dictum neque. Curabitur placerat, dui id molestie commodo, urna ipsum pulvinar felis, ac fermentum lorem turpis rhoncus magna. Nulla facilisi. Sed eleifend rhoncus velit sed aliquet.
</p>
<p>
Curabitur semper augue ac sollicitudin rutrum. Suspendisse potenti. Maecenas consectetur vestibulum mattis. Nullam quis libero sit amet libero laoreet fermentum. Ut vel fringilla massa. Nunc venenatis ornare ornare. Nunc gravida elit sed sagittis pretium. Duis ac facilisis arcu. Vestibulum sit amet ullamcorper tortor. Pellentesque a lacinia sem, ac aliquam tellus. Proin sodales eu mi non tincidunt. Vivamus leo est, accumsan ut quam a, pellentesque pulvinar lectus. Nunc et est pharetra nunc egestas condimentum sit amet blandit justo. Praesent euismod nunc scelerisque est egestas hendrerit. Nulla pretium elit nec consequat semper. Vivamus ultricies eros eget mi vehicula, eget mollis nisl pretium.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam vel efficitur massa. Curabitur at euismod est, eu dignissim justo. Maecenas enim augue, mattis quis tortor vitae, bibendum dignissim lectus. Vestibulum tincidunt nisl sit amet turpis lacinia, quis congue eros ultrices. Vestibulum urna nisi, scelerisque a malesuada et, ornare ac tellus. Fusce ut ante ac arcu iaculis tincidunt quis id nisl. Sed tincidunt pretium metus, nec semper risus tempor eget. Nullam sed quam id lorem vehicula molestie quis in velit. Etiam porttitor erat est, ac dapibus diam tincidunt ac.
</p>
<p>
Quisque elit arcu, pharetra nec sollicitudin iaculis, elementum ut tellus. Vestibulum tincidunt sem et diam ullamcorper hendrerit. Pellentesque congue sed massa quis luctus. Nullam mauris lectus, imperdiet finibus nulla at, mollis malesuada elit. Curabitur sit amet sapien ut risus elementum laoreet vitae at enim. Donec pulvinar, tellus ac suscipit vehicula, augue mi aliquet orci, at aliquam lectus ex in mauris. Nulla at magna euismod, maximus turpis et, scelerisque dui. Curabitur a vulputate justo. Nam dignissim mi a tincidunt tristique. Nullam aliquam tortor non congue sollicitudin. Cras tempus nulla urna, nec placerat odio ornare id. Suspendisse dui nisl, tempor sed commodo at, venenatis a turpis.
</p>
<p>
Nullam placerat eget leo a convallis. Praesent in sapien tristique, suscipit dui a, bibendum est. Morbi nec justo lectus. Phasellus fringilla turpis eget nunc pellentesque tincidunt fermentum in enim. Nunc nunc metus, aliquet sed faucibus nec, fringilla nec ex. Quisque a tempus risus. Aenean pulvinar lectus elit, at luctus libero vestibulum a. Nam sapien enim, vehicula nec augue sed, tempor faucibus dolor. Suspendisse placerat eget tortor sit amet finibus. Ut feugiat aliquet varius. Nulla facilisi. Ut ultrices arcu id ultricies sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus feugiat lorem et tellus posuere, in venenatis nunc dictum.
</p>
</article>
</div>
</div>
<hr>
<div class="col-sm-3">
</div>
<div class="row">
<div class="col-sm-4">
<form>
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="First Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Last Name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">State</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>choose one</option>
<option>AL</option>
<option>FL</option>
<option>MA</option>
<option>CA</option>
</select>
</div>
</form>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>