-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfw-index.html
154 lines (139 loc) · 5.18 KB
/
fw-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
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" scale=1>
<title>BS-Bits FW</title>
<link rel="stylesheet" href="./main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<nav class="navbar navbar-default"> <!-- START FULL-WIDTH navbar -->
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">
Logo
</a>
</div>
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Link <span class="sr-only">(current)</span>
</a>
</li>
<li>
<a href="./index.html">
Container Example
</a>
</li>
</ul>
<div class="collapse navbar-collapse">
<p class="navbar-text navbar-right">I'm a navbar!</p>
</div>
</div>
</nav> <!-- END FULL-WIDTH navbar -->
<section>
<div class="jumbotron"> <!-- START FULL-WIDTH jumbotron -->
<div class="container">
<h1>Full-Width Jumbotron (banner)</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>
<p><a class="btn btn-default btn-lg" href="#" role="button">Wut wut!</a>
</div>
</div>
</section> <!-- END FULL-WIDTH jumbotron -->
<div class="container"> <!-- START container -->
<main> <!-- START MAIN content -->
<div class="row"> <!-- START FIRST row -->
<section class="col-md-12"> <!-- START 12-col section -->
<header>
<h2>Section Header .col-md-12</h2>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Repellendus, aspernatur nesciunt pariatur illo perspiciatis cum
accusantium ipsa. Nostrum pariatur mollitia adipisci fuga numquam,
obcaecati ratione a fugiat impedit commodi, illum.
</p>
</article>
</section> <!-- END 12-col section -->
</div> <!-- END FIRST row -->
<div class="row"> <!-- START SECOND row -->
<section class="col-md-6">
<header>
<h2>Section Header .col-md-6</h2>
</header>
<article>
<h3>Article h3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Repellendus, aspernatur nesciunt pariatur illo perspiciatis cum
accusantium ipsa. Nostrum pariatur mollitia adipisci fuga numquam,
obcaecati ratione a fugiat impedit commodi, illum.
</p>
</article>
<button class="btn btn-default btn-block">I'm a block button!</button>
<footer>
<p class="text-center">Footer</p>
</footer>
</section>
<section class="col-md-6">
<header>
<h2>SECTION Header Title .col-md-6</h2>
</header>
<article class="col-md-6">
<h3>Article h3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Repellendus, aspernatur nesciunt pariatur illo perspiciatis cum
accusantium ipsa. Nostrum pariatur mollitia adipisci fuga numquam,
obcaecati ratione a fugiat impedit commodi, illum.
</p>
<footer>
<p>Article Footer</p>
</footer>
</article>
<article class="col-md-6">
<h3>Article h3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Repellendus, aspernatur nesciunt pariatur illo perspiciatis cum
accusantium ipsa. Nostrum pariatur mollitia adipisci fuga numquam,
obcaecati ratione a fugiat impedit commodi, illum.
</p>
<footer>
<p>Article Footer</p>
</footer>
</article>
</section>
</div> <!-- END SECOND row -->
</main> <!-- END MAIN content -->
</div> <!-- END container -->
<hr>
<section> <!-- START FW section -->
<div class="container-fluid">
<header class="page-header"> <!-- START header -->
<h2>Images Section Header</h2>
</header> <!-- END header -->
<div>
<a href="#" class="thumbnail">
<img class="img-responsive" src="http://placehold.it/1200x250"
alt="Responsive image">
</a>
</div>
</div>
</section> <!-- END FW Section -->
<hr>
<footer> <!-- START FULL-WIDTH footer -->
<p class="text-center">Full Width Main Footer</p>
</footer> <!-- END FULL-WIDTH footer -->
</body>
</html>