-
Notifications
You must be signed in to change notification settings - Fork 1
/
bloggrid.html
177 lines (160 loc) · 7.08 KB
/
bloggrid.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
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<title>Document</title>
<style>
body {
background-color:#252525 ;
}
* {
font-family: 'Montserrat', sans-serif;
}
#blognav {
width: 80%;
height: 60px;
display: flex;
justify-content: space-around;
color: white;
background-color: #252525 ;
cursor: pointer;
margin: auto;
}
#blognav>p:hover {
text-decoration:underline;
}
#container {
width: 80%;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: repeat(3 , auto);
display: grid;
gap: 30px;
margin: auto;
padding-left: 80px;
padding: 20px;
/* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
background-color: #252525 ;
justify-content: space-around;
border-radius: 10px;
justify-content: space-around;
}
#container>div {
background-color: #333333;
color: white;
}
#container>div>p {
padding: 10px;
margin-top: 0%;
line-height: 25px;
}
#container>div>h3 {
padding: 10px;
margin-top: 0%;
margin-bottom: 0%;
}
#container>div>img {
height: 300px;
width: 100%;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<img src="https://cdn.shopify.com/s/files/1/0057/8938/4802/files/Blog-Header-desktop.jpg?v=1604480765" alt="">
<div id = blognav>
<p>View</p>
<p>All Post</p>
<p>Accessorise</p>
<p>bluetooth speaker</p>
<p>Campaign</p>
<p>Cricket</p>
<p>do what floats your boAt</p>
<p>dwfyv</p>
<p>earbuds</p>
<p>Earphones</p>
<p>headphones</p>
<p>home audio </p>
<p>lr</p>
</div>
<div id = "container">
<div>
<img src="https://cdn.shopify.com/s/files/1/0057/8938/4802/articles/blog-Recovered_600x.png?v=1655395776" alt="">
<h3
>The 3 Best Smartwatch Under 5000 with Powerful Performance</h3
>
<p>Smart watches are a dime a dozen these days. But not every smart watch is created equally. Some have better performance than others. And some are more affordable than others. In this blog post, we will take a look at the 5 best smartwatch under 5000 with powerful performance and utilitarian features.</p>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0057/8938/4802/articles/blog_600x.jpg?v=1654260672" alt="">
<h3
>It Is Time To Rock The Streets With boAt Headphones</h3
>
<p>Are you someone who is looking for headphones that not only sound bombastic but also adds as an accessory to your daily OOTDs? Your search ends right here! We have curated not just a list but a whole collection for you to- Rock The Streets! Let's dig in now.</p>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0057/8938/4802/articles/Website-stone-banner_600x.jpg?v=1654152654" alt="">
<h3
>Best Bluetooth Speakers Under 2000 in India</h3
>
<p>You like your weekends packed with bashes but your pockets holds you back. We've got speakers for you that will bring the party to your home without hurting your pocket. Find here a curated list of bluetooth speakers under 2000 that will make the vibe hit the roof at your parties.</p>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0057/8938/4802/articles/connect-blog_600x.jpg?v=1654519937" alt="">
<h3
>boAt Wave Connect Bluetooth Calling Smartwatch - #StayConnecte</h3
>
<p>It is not just the weather that is bringing the heat. Our scorching new Bluetooth calling smartwatch – boAt Wave Connect – is in town and ready to make you #StayConnected.</p>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0057/8938/4802/articles/sd_600x.jpg?v=1653897955" alt="">
<h3
>Your Search For the Best Earphones Under 1000 Ends Here (June 2022)</h3
>
<p>If this listicle of the best earphones under 1000 could help my friend's mother, it’s very much possible that a ton of other music enthusiasts hunting the internet for a very similar requirement could also benefit from it.</p>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0057/8938/4802/articles/Banner_2_600x.png?v=1653120525" alt="">
<h3
>Top Headphones Under 2000 to Buy in June 2022 </h3
>
<p>When comes to choosing the right wireless headphones can be a task. Here is a list for you to go through to find headphones under 2000 before making your choice.</p>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0057/8938/4802/articles/MISFIT-BLOG_600x.jpg?v=1653301176" alt="">
<h3
>Beard Care in Summers</h3
>
<p>Summer is the time for everything bright & bold. Summer is the time for Misfits! In order to keep everything beautiful, just like you, we have picked up a beard care regime for the summers, only for YOU! So, get, set & dive right in. </p>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0057/8938/4802/articles/Artboard_1_600x.png?v=1652873769" alt="">
<h3
>Watch Primia: The Ultimate Bluetooth Calling Smartwatch</h3
>
<p>A bluetooth calling smartwatch is always a notch above the rest. Here are five reasons why you should get Watch Primia, our first calling smartwatch, with in-built mic and speaker.</p>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0057/8938/4802/articles/Blog-Primia_600x.jpg?v=1652709282" alt="">
<h3
>What is a Bluetooth Calling Smartwatch?</h3
>
<p>Simply put, a Bluetooth calling smartwatch is a type of smartwatch that lets you enjoy complete calling functionality through your watch. That essentially means that you can not only receive call notifications on your smart watch with calling feature but also attend them directly through the watch’s interface via a built-in speaker and a microphone.</p>
</div>
</div>
</body>
</html>
<script>
let card = document.querySelectorAll("#container>div")
card.forEach(function(elem){
elem.addEventListener("click" , openblog)
})
function openblog() {
window.location.href = "blogpage.html"
}
</script>