-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblog.html
More file actions
280 lines (270 loc) · 11.7 KB
/
blog.html
File metadata and controls
280 lines (270 loc) · 11.7 KB
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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Blogs</title>
</head>
<body class="container">
<style>
body {
border-top: 10px solid #1098ad;
position: relative;
}
h1 {
font-style: italic;
font-size: 28px;
}
.container {
width: 1400px;
margin: 0 auto;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 50px;
}
.like {
position: absolute;
bottom: 50;
padding: 20;
text-transform: uppercase;
font-size: 24px;
right: 0;
}
</style>
<nav class="navbar navbar-expand-lg navbar-light bg-light ">
<div class="container-fluid">
<a class="navbar-brand" href="#">Blogs</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
<nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Blogs</li>
</ol>
</nav>
<div
id="carouselExampleCaptions"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/blog-2.jpg" class="d-block w-100" alt="laptop" />
<div class="carousel-caption d-none d-md-block">
<h5>Frontend and backend</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
doloremque fugit voluptatibus amet adipisci earum eos consectetur
quasi ratione, nihil quidem sed architecto nam, ipsam impedit
corrupti et expedita odio..
</p>
</div>
</div>
<div class="carousel-item">
<img src="img/blog-3.jpg" class="d-block w-100" alt="coding image" />
<div class="carousel-caption d-none d-md-block">
<h5>Backend</h5>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos sit
amet nam harum architecto unde necessitatibus itaque officia
facere voluptates..
</p>
</div>
</div>
<div class="carousel-item">
<img
src="img/blog-4.jpg"
class="d-block w-100"
alt="computer setup"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Java Css HTML</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
possimus architecto, veritatis, animi corrupti tempora voluptatum
eaque tempore dicta nisi rem explicabo consequuntur laborum iste..
</p>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<h1>Bootstrap <span class="badge rounded-pill bg-primary">New</span></h1>
<div class="row">
<div class="card" style="width: 18rem">
<img src="img/blog-1.jpg" class="card-img-top" alt="..." height="350" />
<div class="card-body">
<h5 class="card-title">Bootstrap</h5>
<p class="card-text">
Get started with Bootstrap, the world's most popular framework for
building responsive, mobile-first sites, with jsDelivr and a
template starter page.
It simplifies the development of web pages and as a free and open-source tool, it is fast and easy for web development.
</p>
<a href="#" class="btn btn-primary">know More</a>
</div>
</div>
<div class="card" style="width: 18rem">
<img src="img/blog-5.jpg" class="card-img-top" alt="..." height="350" />
<div class="card-body">
<h5 class="card-title">Skeleton</h5>
<p class="card-text">
Skeleton is a simple, responsive, lightweight boilerplate and a CSS
framework. It consists of a 12-column fluid grid, consisting of rows
and columns. It is built keeping in mind the mobile framework. It is
easy to start and needs the least compilation. It is best for a
small project since it styles only major standard HTML elements and
considers a grid.
</p>
<a href="#" class="btn btn-primary">know More</a>
</div>
</div>
<div class="card" style="width: 18rem">
<img src="https://images.unsplash.com/photo-1496346651079-6ca5cb67f42f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGNvZGV8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="..." height="350" />
<div class="card-body">
<h5 class="card-title">Cardinal</h5>
<p class="card-text">
Cardinal is a mobile-first, CSS framework that is ideal for creating applications and responsive websites. It offers high performance, maintainability, and scalability. There are several helper classes for better application of styles thereby lessening the time for development. It is easy for developers to build a prototype, scale, and create CSS. It offers the flexibility of designing and creativity to the developers.
</p>
<a href="#" class="btn btn-primary">know More</a>
</div>
</div>
<div class="card" style="width: 18rem">
<img src="https://images.unsplash.com/photo-1577375729152-4c8b5fcda381?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y29kZXxlbnwwfDJ8MHx8&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="..." height="350" />
<div class="card-body">
<h5 class="card-title">Groundworkn</h5>
<p class="card-text">
Groundwork is a known, responsive, HTML5, CSS, and JavaScript framework that helps in the creation of scalable web applications that can execute on any platform. It has an efficient fluid grid layout system that is configurable, adaptive, and can work with nests. It can work on all kinds of devices and is available with ease. It has good support for semantic markup with ARIA attribute selectors and others.
</p>
<a href="#" class="btn btn-primary">know More</a>
</div>
</div>
<div class="card" style="width: 18rem">
<img src="img/blog-6.jpg" class="card-img-top" alt="..." height="350" />
<div class="card-body">
<h5 class="card-title">Bulma</h5>
<p class="card-text">
As one of the popular alternatives of Bootstrap, Bulma is a
modernized CSS framework that is free, open-source, and offers
competitive frontend components. It needs no prior knowledge of CSS
framework and developers can easily create responsive web
interfaces. It has a comprehensive flexbox grid, a wide range of
colors and helps in building good-looking websites with ease.
<a href="#" class="btn btn-primary">know More</a>
</p>
</div>
</div>
<div class="card" style="width: 18rem">
<img src="img/blog-7.jpg" class="card-img-top" alt="..." height="350" />
<div class="card-body">
<h5 class="card-title">Pure.css</h5>
<p class="card-text">
Considered as a very light weighted framework, Pure.css is apt for
small projects since it has a bunch of CSS frameworks clustered
together. Since it is designed especially for mobile devices, it
helps developers build responsive layouts with the use of grids,
menus, forms, buttons, etc. Despite being tiny in size, it offers
great performance and output.Pure.css
</p>
<a href="#" class="btn btn-primary">know More</a>
</div>
</div>
</div>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>
<span class="text-muted">© 2021 Blog, Inc</span>
<button type="button" class="btn like btn-outline-success">❤ like</button>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>