-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (115 loc) · 5.9 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
<!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 rel="stylesheet" href="assets/css/main.css" />
<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=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap"
rel="stylesheet" />
<title>Technoblog</title>
</head>
<body>
<div class="main-container">
<div class="container">
<div class="row g-0">
<div class="col-md-3 min-vh-100 left-container">
<div class="intro text-center">
<a href="#"> sepatil </a>
<p class="fs-6">This is my personal blog. Eventually it is a portfolio of my side project and showcase
of my technical skills in web application design and development. This blog focus on web development
technologies.</p>
</div>
<div class="menu">
<h2>Quick Links</h2>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<hr class="text-white">
<div class="category-list">
<h2>Category</h2>
<ul class="list-unstyled">
<li><a href="#">WordPress</a></li>
<li><a href="#">ReactJS</a></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</div>
</div>
<div class="col-md-9 min-vh-100 right-container">
<div class="card w-100 g-0 rounded-0 border-0">
<img src="assets/images/carousel-image1.jpg" class="card-img-top rounded-0 border-0" alt="card images">
<div class="card-img-overlay ">
<h2>This is some text within a card body.</h2>
</div>
<div class="card-body position-relative p-5">
<h2 class="card-title">How to organize sass 1-7 structure</h2>
<p class="card-text">It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a
more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it
look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).</p>
<a href="#" class="btn btn-primary">Read More</a>
<hr>
</div>
</div>
<div class="card w-100 g-0 rounded-0 border-0">
<img src="assets/images/carousel-image2.jpg" class="card-img-top rounded-0 border-0" alt="card images">
<div class="card-img-overlay ">
<h2>This is some text within a card body.</h2>
</div>
<div class="card-body position-relative p-5">
<h2 class="card-title">How to organize sass 1-7 structure</h2>
<p class="card-text">It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a
more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it
look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).</p>
<a href="#" class="btn btn-primary">Read More</a>
<hr>
</div>
</div>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<div class="site-footer text-center">
<p class="fs-6">© 2022 <a href="http://www.sepatil.in">sepatil.in</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src=" https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>