-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsingleBlog.html
More file actions
228 lines (218 loc) · 16.9 KB
/
Copy pathsingleBlog.html
File metadata and controls
228 lines (218 loc) · 16.9 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
<!DOCTYPE html>
<html>
<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">
<title>V-Card | Single Blog</title>
<!-- cdn font-awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="assets/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!-- Main Wrapper -->
<div class="main-wrapper">
<div class="container-xl">
<div class="row">
<div class="col-lg-3 col-md-1 col-2">
<!-- Sidebar Menu -->
<header class="sidebar">
<div class="sidebar-profile">
<div class="sidebar-profile__image">
<img src="assets/images/img/sidebar-person.png" alt="">
<button id="mode-changer-singleBlog" class="mode-changer">
<svg id="moon-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6179 12.071C13.7745 12.3738 14.974 12.4512 16.1519 12.3038C15.7564 13.1576 15.2095 13.9368 14.5344 14.6022C13.5545 15.568 12.3386 16.2603 11.0079 16.61C9.67716 16.9596 8.27805 16.9546 6.9499 16.5953C5.62174 16.2359 4.41091 15.5349 3.438 14.562C2.4651 13.5891 1.76407 12.3783 1.40475 11.0501C1.04543 9.72196 1.04036 8.32284 1.39004 6.99212C1.73973 5.66139 2.43196 4.44551 3.39779 3.46558C4.06316 2.79049 4.84238 2.24362 5.69619 1.84807C5.54883 3.02598 5.62624 4.22554 5.92898 5.38214C6.34993 6.99039 7.19137 8.45761 8.36688 9.63312C9.54239 10.8086 11.0096 11.6501 12.6179 12.071Z" stroke="#707070" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg id="sun-svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 17.625C15.1066 17.625 17.625 15.1066 17.625 12C17.625 8.8934 15.1066 6.375 12 6.375C8.8934 6.375 6.375 8.8934 6.375 12C6.375 15.1066 8.8934 17.625 12 17.625Z" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 3.375V1.5" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.89689 5.89707L4.57501 4.5752" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.375 12H1.5" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.89689 18.103L4.57501 19.4249" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 20.625V22.5" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.1031 18.103L19.425 19.4249" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.625 12H22.5" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.1031 5.89707L19.425 4.5752" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<h2 class="sidebar-profile__name">Stiphen Osais</h2>
<p class="sidebar-profile__designation">UI/UX Designer</p>
<div class="sidebar-profile__social-media">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-pinterest-p"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-solid fa-phone"></i></a></li>
</ul>
</div>
</div>
<nav class="sidebar-menu">
<ul>
<li class="menu-item"><a href="index.html"><i class="fa-solid fa-house"></i><span>Home</span></a></li>
<li class="menu-item"><a href="resume.html"><i class="fa-solid fa-id-card-clip"></i><span>Resume</span></a></li>
<li class="menu-item"><a href="portfolio.html"><i class="fa-solid fa-briefcase"></i><span>Portfolio</span></a></li>
<li class="menu-item"><a href="blog.html" class="active"><i class="fa-brands fa-blogger-b"></i><span>Blogs</span></a></li>
<li class="menu-item"><a href="contact.html"><i class="fa-solid fa-table-list"></i><span>Contact</span></a></li>
</ul>
</nav>
<div class="sidebar-contact">
<p class="sidebar-contact__address">
<i class="fa-solid fa-location-arrow"></i><span>Stockton, New Hampshire</span>
</p>
<p class="sidebar-conatct__phone">
<i class="fa-solid fa-phone"></i><span>(219) 555-0114e</span>
</p>
<p class="sidebar-contact__email">
<i class="fa-regular fa-envelope"></i><span>example.email@gmail.com</span>
</p>
</div>
</header>
</div>
<div class="col-lg-9 col-md-11 col-10">
<div class="main-bar">
<!-- Blog Section -->
<h2 class="page-title">Blogs</h2>
<div class="single-blog">
<div class="single-blog__feature-image">
<img src="assets/images/img/single-blog-feature-image.png" alt="">
</div>
<div class="single-blog__meta">
<p class="single-blog__meta-left">Article</p>
<div class="single-blog__meta-right">
<p>
<img src="assets/images/img/calendar.png" alt="">
<span>May 02, 2020</span>
</p>
<p>
<img src="assets/images/img/watch.png" alt="">
<span>5 Minutes reading</span>
</p>
</div>
</div>
<h2 class="single-blog__title">How to use the click lens in an effective way</h2>
<div class="single-blog__content">
<div class="single-blog__content-left">
<p class="single-blog-author">By Tanvir Alam</p>
<p>Sed nisi, lorem sagittis tortor. Morbi iaculis nisi, turpis a pellentesque commodo turpis. Accumsan sit proin sit viverra viverra at in ullamcorper. Senectus aliquam pellentesque ornare egestas. Ultrices in id magna a at turpis. Risus, diam scelerisque sit vulputate pulvinar et.</p>
<p>Sem nunc nulla sem netus pharetra nulla etiam. Vitae quis velit convallis vulputate. Ac mauris, lectus at sit. Erat dignissim pharetra euismod rutrum. Feugiat ullamcorper auctor dolor enim, leo. Vel ac viverra et curabitur ac. </p>
</div>
<div class="single-blog__content-right">
<img src="assets/images/img/blog-1-1.png" alt="">
</div>
<div class="single-blog__content-details">
<p>Sed nisi, lorem sagittis tortor. Morbi iaculis nisi, turpis a pellentesque commodo turpis. Accumsan sit proin sit viverra viverra at in ullamcorper. Senectus aliquam pellentesque ornare egestas. Ultrices in id magna a at turpis. Risus, diam scelerisque sit vulputate pulvinar et.</p>
<p>Sem nunc nulla sem netus pharetra nulla etiam. Vitae quis velit convallis vulputate. Ac mauris, lectus at sit. Erat dignissim pharetra euismod rutrum. Feugiat ullamcorper auctor dolor enim, leo. Vel ac viverra et curabitur ac.</p>
</div>
<div class="single-blog__content-qoute">
<svg width="48" height="38" viewBox="0 0 48 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_113_3329)">
<path d="M27.5979 38V28.3041C29.8048 28.3041 31.4678 27.9247 32.5869 27.1659C33.7321 26.3363 34.4352 25.3963 34.696 24.3462C34.9569 23.296 35.1343 21.1956 35.2282 18.045H27.5979V0H48V15.3906C48 20.9645 47.837 24.757 47.5109 26.7682C47.1848 28.7793 46.23 30.8088 44.6466 32.8567C43.154 34.7397 41.1524 36.1483 38.8829 36.9131C36.676 37.6377 32.9143 38 27.5979 38ZM0 38V28.3041C2.1782 28.3041 3.82685 27.9247 4.94595 27.1659C5.99659 26.5355 6.7711 25.528 7.11372 24.3462C7.41372 23.2566 7.57675 21.1562 7.60284 18.045H0V0H20.3473V15.3906C20.3473 20.9645 20.1842 24.757 19.8582 26.7682C19.5321 28.7793 18.5786 30.8088 16.9978 32.8567C15.5044 34.7406 13.5013 36.1494 11.2301 36.9131C9.03106 37.6377 5.28768 38 0 38Z" fill="#161616"/>
</g>
<defs>
<clipPath id="clip0_113_3329">
<rect width="48" height="38" fill="white"/>
</clipPath>
</defs>
</svg>
<p>Suscipit sollicitudin amet enim ut rhoncus nascetur mi quis eu. Nisi blandit ut duis consectetur blandit ut egestas tristique.</p>
</div>
<p class="single-blog__content-last">diam scelerisque sit vulputate pulvinar et. Sem nunc nulla sem netus pharetra nulla etiam. Vitae quis velit convallis vulputate. Ac mauris, lectus at sit. Erat dignissim pharetra euismod rutrum. Feugiat ullamcorper auctor dolor enim, leo. Vel ac viverra et curabitur ac. </p>
</div>
<div class="share-item">
<p>Share This</p>
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-pinterest-p"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-solid fa-phone"></i></a></li>
</ul>
</div>
</div>
<h2 class="more-blogs-title">Relavent Blogs</h2>
<div class="row">
<div class="col-md-6 mb-4 mb-md-0">
<div class="blog-card">
<div class="blog-card__feature-image">
<a href="singleBlog.html"><img src="assets/images/img/blog-3-feature-image.png" /></a>
</div>
<div class="blog-card__meta">
<p class="blog-card__meta-left">Article</p>
<p class="blog-card__meta-right">5 minutes read - May, 2020</p>
</div>
<h2 class="blog-card__title"><a href="singleBlog.html">How to use the click lens in an effective way</a></h2>
<p class="blog-card__short-desc">Lens, which bills itself as "the Kubernetes IDE," is a useful, attractive, open source user interface (UI).</P>
<p class="blog-card__author">by <span>Tanvir Alam</span></p>
<a class="blog-card__btn" href="singleBlog.html">Read More</a>
</div>
</div>
<div class="col-md-6">
<div class="blog-card">
<div class="blog-card__feature-image">
<a href="singleBlog.html"><img src="assets/images/img/blog-6-feature-image.png" /></a>
</div>
<div class="blog-card__meta">
<p class="blog-card__meta-left">Article</p>
<p class="blog-card__meta-right">5 minutes read - May, 2020</p>
</div>
<h2 class="blog-card__title"><a href="singleBlog.html">How to use the click lens in an effective way</a></h2>
<p class="blog-card__short-desc">Lens, which bills itself as "the Kubernetes IDE," is a useful, attractive, open source user interface (UI).</P>
<p class="blog-card__author">by <span>Tanvir Alam</span></p>
<a class="blog-card__btn" href="singleBlog.html">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/blog.js"></script>
<!-- mode switcher javascript code -->
<script>
var toggleIcon = document.getElementById('mode-changer-singleBlog');
toggleIcon.onclick= () =>{
console.log("clicked");
let local_storage_mode = localStorage.getItem('mode')
console.log(local_storage_mode)
if(local_storage_mode === 'dark'){
localStorage.setItem('mode', 'light');
document.body.classList.toggle("dark-theme");
}else{
localStorage.setItem('mode', 'dark');
document.body.classList.toggle("dark-theme");
console.log('else')
}
if (document.body.classList.contains("dark-theme")) {
document.getElementById('moon-svg').style.display = "none"
document.getElementById('sun-svg').style.display = "block"
document.getElementById('mode-changer').style.background = "#434343"
}else{
document.getElementById('sun-svg').style.display = "none"
document.getElementById('moon-svg').style.display = "block"
document.getElementById('mode-changer').style.background = "#EDEDED"
}
};
let local_storage_mode = localStorage.getItem('mode')
if(local_storage_mode === 'dark'){
document.body.classList.add("dark-theme");
console.log('Hi Dark Theme')
}else{
document.body.classList.remove("dark-theme");
}
if (document.body.classList.contains("dark-theme")) {
document.getElementById('moon-svg').style.display = "none"
document.getElementById('sun-svg').style.display = "block"
document.getElementById('mode-changer').style.background = "#434343"
}else{
document.getElementById('sun-svg').style.display = "none"
document.getElementById('moon-svg').style.display = "block"
document.getElementById('mode-changer').style.background = "#EDEDED"
}
</script>
</body>
</html>