Ứng dụng Angular 9

home.html
ui /
project /

1 <!doctype html>
2 <html lang="en">
3
4 <head>
5   <meta charset="utf-8">
6   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7   <meta name="description" content="">
8   <title>angular-starter</title>
9   <link href="assets/fontawesome/css/all.min.css" rel="stylesheet">
10   <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
11   <link href="assets/params/css/index.css" rel="stylesheet">
12   <link href="assets/params/css/home.css" rel="stylesheet">
13
14
15 </head>
16
17 <body>
18
19   <div class="app">
20
21     <header>
22       <nav class="navbar navbar-expand-md fixed-top navbar-dark " style="background-color: #212121;">
23         <a class="navbar-brand" href="#">
24           <span class="mr-1" style="color:white">ganatan</span>
25           <img src="./assets/params/images/logo/ganatan.png" width="20" height="20" alt="">
26         </a>
27         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
28           aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
29           <span class="navbar-toggler-icon"></span>
30         </button>
31         <div class="collapse navbar-collapse" id="navbarsExampleDefault">
32           <ul class="navbar-nav ml-auto">
33             <li class="nav-item active">
34               <a class="nav-link" href="#">
35                 <i class="fas fa-home mr-1"></i>home
36               </a>
37             </li>
38             <li class="nav-item active">
39               <a class="nav-link" href="#">
40                 <i class="far fa-question-circle mr-1"></i>About
41               </a>
42             </li>
43             <li class="nav-item active">
44               <a class="nav-link" href="#">
45                 <i class="fas fa-envelope mr-1"></i>Contact
46               </a>
47             </li>
48             <li class="nav-item active">
49               <a class="nav-link" href="#">
50                 <i class="fas fa-user mr-1"></i>Sign in
51               </a>
52             </li>
53             <li class="nav-item active">
54               <a class="nav-link" href="https://github.com/ganatan">
55                 <i class="fab fa-github mr-1"></i>Github
56               </a>
57             </li>
58           </ul>
59         </div>
60       </nav>
61     </header>
62
63
64
65     <main>
66       <div class="container-fluid">
67
68         <div class="row pt-1 mb-2">
69           <div class="col-md-3 text-center mb-2">
70             <h1 class="h5">
71               <i class="fas fa-laptop fa-lg mr-2 text-primary"></i>
72               angular-starter
73               <i class="fas fa-mobile-alt fa-lg ml-2 mr-1 text-primary"></i>
74               <i class="fas fa-tablet-alt fa-lg ml-2 mr-1 text-primary"></i>
75             </h1>
76           </div>
77           <div class="col-md-3 text-center text-danger">
78             <h2 class="h5">
79               Angular 8.2.14<i class="fab fa-angular fa-lg ml-2 mr-1 text-danger"></i>
80             </h2>
81           </div>
82           <div class="col-md-3 text-center text-primary">
83             <h2 class="h5">
84               Bootstrap 4.4.1<i class="fab fa-bootstrap fa-lg ml-2 mr-1 text-primary"></i>
85             </h2>
86           </div>
87           <div class="col-md-3 text-center text-warning">
88             <h2 class="h5">
89               Font Awesome 5.12.0<i class="fab fa-font-awesome-flag fa-lg ml-2 mr-1 text-warning"></i>
90             </h2>
91           </div>
92         </div>
93         <hr>
94         <div class="row mb-1">
95           <div class="col-md-12 text-center">
96             <h3 class="h6">Features  <i class="fas fa-list"></i></h3>
97           </div>
98         </div>
99
100         <div class="row pt-2">
101           <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
102             <div class="card bg-light mb-3">
103               <div class="card-header">
104                 <div class="row">
105                   <div class="col-10 col-xl-10">
106                     <h5 class="card-title">Components</h5>
107                   </div>
108                   <div class="col-2 col-xl-2">
109                     <i class="fas fa-share-alt-square fa-lg text-primary"></i>
110                   </div>
111                 </div>
112               </div>
113               <div class="card-body">
114                 <p class="card-text">Define and control views</p>
115               </div>
116             </div>
117           </div>
118           <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
119             <div class="card bg-light mb-3">
120               <div class="card-header">
121                 <div class="row">
122                   <div class="col-10 col-xl-10">
123                     <h5 class="card-title">Services</h5>
124                   </div>
125                   <div class="col-2 col-xl-2">
126                     <i class="far fa-address-card fa-lg text-primary"></i>
127                   </div>
128                 </div>
129               </div>
130               <div class="card-body">
131                 <p class="card-text">A great way to share information among classes</p>
132               </div>
133             </div>
134           </div>
135           <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
136             <div class="card bg-light mb-3">
137               <div class="card-header">
138                 <div class="row">
139                   <div class="col-10 col-xl-10">
140                     <h5 class="card-title">Directives</h5>
141                   </div>
142                   <div class="col-2 col-xl-2">
143                     <i class="fas fa-text-width fa-lg text-primary"></i>
144                   </div>
145                 </div>
146               </div>
147               <div class="card-body">
148                 <p class="card-text">Change the appearance or behavior of a DOM element</p>
149               </div>
150             </div>
151           </div>
152           <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
153             <div class="card bg-light mb-3">
154               <div class="card-header">
155                 <div class="row">
156                   <div class="col-10 col-xl-10">
157                     <h5 class="card-title">Pipes</h5>
158                   </div>
159                   <div class="col-2 col-xl-2">
160                     <i class="fas fa-code fa-lg text-primary"></i>
161                   </div>
162                 </div>
163               </div>
164               <div class="card-body">
165                 <p class="card-text">Write display-value transformations</p>
166               </div>
167             </div>
168           </div>
169           <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
170             <div class="card bg-light mb-3">
171               <div class="card-header">
172                 <div class="row">
173                   <div class="col-10 col-xl-10">
174                     <h5 class="card-title">Observables</h5>
175                   </div>
176                   <div class="col-2 col-xl-2">
177                     <i class="far fa-comment-alt fa-lg text-primary"></i>
178                   </div>
179                 </div>
180               </div>
181               <div class="card-body">
182                 <p class="card-text">Provide support for passing messages between publishers and subscribers</p>
183               </div>
184             </div>
185           </div>
186         </div>
187
188       </div>
189     </main>
190
191     <div class="footer">
192       <div class="container">
193         <div class="row">
194           <div class="col-12">
195             <p class="text-center text-white">© 2019 - www.ganatan.com</p>
196           </div>
197         </div>
198       </div>
199     </div>
200
201   </div>
202
203   <script src="assets/jquery/js/jquery-3.4.1.min.js"></script>
204   <script src="assets/bootstrap/js/bootstrap.min.js"></script>
205   <script src="assets/params/js/index.js"></script>
206
207 </body>
208
209 </html>

Ứng dụng Angular 9

Web, Tìm kiếm nhanh

Web, Tìm kết quả nhanh

Dự án liên quan!

Hệ thống thông tin và điều độ xe buýt

Tạo Trình quản lý điểm, Phá hủy ranh giới và Bộ điều khiển lối chơi

Cách tạo thu gọn Bootstrap

Bóng văn bản (và hiệu ứng)

Các lớp/tiểu bang giả

Lề và phần đệm