generated from ZipCodeCore/CSS-Beginnings
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
151 lines (138 loc) · 7.39 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
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Basic CSS · Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/jumbotron/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<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 class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Simple Styling</h1>
<p>These are example HTML pages to show how small amounts of CSS can be used to generate decent looking web pages for applications.</p>
<p>Click on each
<strong>See Page »</strong> to see examples. Look at the source HTML files. (Or Inspect Element. Or See Page Source). Use the back button to return to this page.</p>
<p>Look at this page's source to understand this fancy template.</p>
<p><a class="btn btn-primary btn-lg" href="https://getbootstrap.com/docs/4.3/examples/" role="button">See Bootstrap Examples »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Phase Zero No CSS</h2>
<p>
This is ugly, unstyled HTML. No CSS, no JS helpers. You don't ever want project files to look like this. It is sloppy.
</p>
<p><a class="btn btn-secondary" href="./phase0/sample.html" role="button">See Page »</a></p>
</div>
<div class="col-md-4">
<h2>Phase Zero style in file</h2>
<p>
This example is using some very simple CSS inside of the file to style the HTML.
</p>
<p><a class="btn btn-secondary" href="./phase0/sampleWithCSS.html" role="button">See Page »</a></p>
</div>
<div class="col-md-4">
<h2>Phase Zero style by including CSS file</h2>
<p>
This example includes the styles in a CSS file in the local folder.
</p>
<p><a class="btn btn-secondary" href="./phase0/sampleCSSFile.html" role="button">See Page »
</a></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h2>Phase One (Bootstrap) </h2>
<p>
Justby includingBootstrap CSS,you get some styling.
</p>
<p><a class="btn btn-secondary" href="./phase1/sampleWithBootstrap.html" role="button">See Page »
</a></p>
</div>
<div class="col-md-4">
<h2>Bootstrap Better</h2>
<p>
This is some more better Bootstrap examples; lots of Javascript has been added. Use these kinds of things for your projects.
</p>
<p><a class="btn btn-secondary" href="./phase1/sampleWithBootstrapBetter.html" role="button">See Page »
</a></p>
</div>
<!-- <div class="col-md-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-secondary" href="#" role="button">See Page »
</a></p>
</div> -->
</div>
<hr>
</div>
<!-- /container -->
</main>
<footer class="container">
<p>© Zip Code Wilmington, All Rights Reserved, 2022</p>
</footer>
<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://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>