-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
211 lines (202 loc) · 11.8 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
<title>Exercise 2 - Lab 1</title>
</head>
<body>
<!--Header-->
<nav class="navbar navbar-dark navbar-expand-sm">
<div class="container-fluid" id="header">
<a class="navbar-brand" href="#">
<img src="media/Bootstrap_logo.svg.png" alt="logo" width="40" height="32" class="d-inline-block">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Docs</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Examples</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Icons</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Themes</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Blog</a>
</li>
</ul>
<span></span>
<div class="multiMedia">
<a href="#"><i class="bi bi-github"></i></a>
<a href="#"><i class="bi bi-twitter"></i></a>
<a href="#"><i class="bi bi-facebook"></i></a>
</div>
<div class="vr text-white"></div>
<div class="nav-item dropdown" id="dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Versions</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Latest (5.2.x)</a></li>
<li><a class="dropdown-item" href="#">v5.1.3</a></li>
<li><hr class="dropdown-divider"></li>
<li class="dropdown-header">Previous releases</li>
<li><a class="dropdown-item" href="#">v4.6.x</a></li>
<li><a class="dropdown-item" href="#">v3.4.1</a></li>
<li><a class="dropdown-item" href="#">v2.3.2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">All versions</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--Body-->
<div class="container-fluid" id="main">
<div id="overall">
<button type="button" class="btn btn-warning"><b>New in v5.2</b></button>
<span>CSS variables, responsive offcanvas, new utilities, and more!</span>
<img src="media\Bootstrap_logo.svg.png" alt="logo" class="d-block position-absolute start-50 translate-middle" width="200" heigh="165">
<h1>Build fast, responsive sites with Bootstrap</h1>
<p>Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system
and components, and bring projects to life with powerful JavaScript plugins.</p>
<button type="button" class="btn btn-info"><i class="bi bi-book-half"></i>Read the doc</button>
</div>
<div class="content">
<h1>What is Bootstrap</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut ante vitae nunc consectetur dignissim. Donec sit
amet tincidunt velit. Morbi bibendum imperdiet lobortis. Maecenas condimentum, libero in ullamcorper fermentum, metus
diam pulvinar ligula, vel eleifend augue metus quis tortor. Quisque sollicitudin, ipsum quis aliquet placerat, ligula
magna sollicitudin metus, auctor ornare ante metus ac mi. Proin eu eros urna. Aliquam mattis libero sed euismod
tincidunt. Mauris finibus blandit eros, vel iaculis ex. Mauris in lacus interdum turpis rutrum euismod. Vivamus eros
est, condimentum eget turpis sit amet, maximus blandit orci. Mauris in placerat orci. Maecenas vitae pulvinar neque, a
porttitor nibh. Ut quis mi quis felis pellentesque tincidunt.</p>
<div class="row icon">
<div class="col">
<ul class="list-unstyled">
<li>
<h1>Personalize it with Bootstrap Icons</h1>
</li>
<li>
<p>Bootstrap Icons is an open source SVG icon library featuring over 1,500 glyphs, with more added every
release.
They're
designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon
fonts—both
options
give you vector scaling and easy customization via CSS.</p>
</li>
<li><a href="#">Get Bootstrap Icons</a></li>
</ul>
</div>
<div class="col">
<img src="media\bootstrap-icons.png" alt="logo">
</div>
</div>
<h1>Customize everything with Sass</h1>
<p>Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global
options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.</p>
<a href="#">Learn more about Sass and customization</a>
<div class="row">
<div class="col"><h2>Include all of Bootstrap’s Sass</h2></div>
<div class="col"><h2>Include what you need</h2></div>
</div>
<div class="row">
<div class="col"><p>Import one stylesheet and you're off to the races with every feature of our CSS.</p></div>
<div class="col"><p>The easiest way to customize Bootstrap—include only the CSS you need.</p></div>
</div>
<div class="row">
<div class="col"><img src="media\Picture3.png" alt="logo" style="width:40em; height:12em"></div>
<div class="col"><img src="media\Picture4.png" alt="logo" style="width:40em; height:32em"></div>
</div>
<h1>Build and include in real-time with CSS-variables</h1>
<p>Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual
components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for
use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.</p>
<a href="#">Learn more about CSS variables</a>
<div class="row">
<div class="col"><h2>Using CSS variables</h2></div>
<div class="col"><h2>Customizing via CSS variables</h2></div>
</div>
<div class="row">
<div class="col"><p>Use any of our global :root variables to write new styles. CSS variables use the var(--bs-variableName) syntax and can
be inherited by children elements.</p></div>
<div class="col"><p>Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare
each rule, just a new variable value.</p></div>
</div>
<div class="row">
<div class="col"><img src="media\Picture1.png" alt="logo"></div>
<div class="col"><img src="media\Picture2.png" alt="logo"></div>
</div>
<h1>Components, meet the Utility API</h1>
<p>New in Bootstrap 5, our utilities are now generated by our Utility API. We built it as a feature-packed Sass map that
can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make
utilities responsive, add pseudo-class variants, and give them custom names.</p>
<a href="#">Learn more about utilities</a>
<a href="#">Explore customized components</a>
<div class="row icon">
<div class="col">
<ul class="list-unstyled">
<li>
<h1>Make it yours with official Bootstrap Themes</h1>
</li>
<li>
<p>Take Bootstrap to the next level with premium themes from the official <span><a href="#">Bootstrap Themes
marketplace</a></span>. Themes are built on
Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build
tools.</p>
</li>
<li><a href="#">Browse Bootstrap Themes</a></li>
</ul>
</div>
<div class="col">
<img src="media\bootstrap-themes.png" alt="logo">
</div>
</div>
</div>
<div class="setup">
<i class="bi bi-cloud-arrow-down-fill"></i>
<h1>Get started any way you want</h1>
<p>Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.</p>
<a href="#">Read installation docs</a>
</div>
</div>
<!--Footer-->
<footer class="bg-light">
<div class="row" id="credit">
<ul class="list-unstyled">
<li><img src="media\Bootstrap_logo.svg.png" alt="logo" width="40" height="32"> <b>Bootstrap</b></li>
<li><p>Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.</p></li>
</ul>
</div>
<div class="row" id="contact">
<h5>Contact us</h5>
<ul class="list-unstyled">
<li><i class="bi bi-house-fill"></i>New York, NY 10012, US</li>
<li><i class="bi bi-phone-fill"></i>+01 234 567 890</li>
<li><i class="bi bi-envelope-fill"></i>[email protected]</li>
</ul>
</div>
<div class="copyright">
<h6>© 2022 | Created and designed by: Phạm Hữu Đức</h6>
</div>
</footer>
</body>
</html>