Skip to content

Commit ff97120

Browse files
Mr-Rafiqul-IslamMr-Rafiqul-Islam
committed
single blog page done
1 parent 84264bc commit ff97120

File tree

6 files changed

+828
-718
lines changed

6 files changed

+828
-718
lines changed

‎assets/css/style.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2972,6 +2972,48 @@ p {
29722972
color: var(--black);
29732973
}
29742974

2975+
.single-blog .blog-item {
2976+
margin-bottom: 80px;
2977+
}
2978+
.single-blog .blog-item .text {
2979+
padding: 30px 40px 40px 40px;
2980+
}
2981+
.single-blog .blog-item .text .blog-title {
2982+
font-size: 32px;
2983+
font-weight: 500;
2984+
line-height: 40px; /* 125% */
2985+
letter-spacing: -0.64px;
2986+
margin-bottom: 0 !important;
2987+
}
2988+
.single-blog .blog-item .text p {
2989+
margin-bottom: 50px !important;
2990+
margin-top: 30px;
2991+
}
2992+
.single-blog .pagination ul {
2993+
gap: 15px;
2994+
}
2995+
.single-blog .pagination ul li .paginate {
2996+
width: 60px;
2997+
height: 60px;
2998+
border: 0;
2999+
border: 1px solid var(--border-color);
3000+
font-weight: 700;
3001+
color: var(--black);
3002+
font-size: 22px;
3003+
font-family: var(--font-Space);
3004+
line-height: 36px;
3005+
}
3006+
.single-blog .pagination ul li .paginate:hover {
3007+
background-color: var(--primary);
3008+
border-color: transparent;
3009+
color: white;
3010+
}
3011+
.single-blog .pagination ul li .paginate.active {
3012+
border-color: transparent;
3013+
background-color: var(--primary);
3014+
color: white;
3015+
}
3016+
29753017
.blog-sidebar .blog-widget {
29763018
border: 1px solid var(--border-color);
29773019
padding: 40px;

‎assets/images/blog/blog-sm-img1.png‎

29.1 KB
Loading

‎assets/images/blog/blog-sm-img2.png‎

27.3 KB
Loading

‎assets/images/blog/blog-sm-img3.png‎

24.7 KB
Loading

‎assets/sass/pages/_blog.scss‎

Lines changed: 183 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,214 @@
1-
.blog-sidebar {
2-
.blog-widget {
3-
border: 1px solid var(--border-color);
4-
padding: 40px;
5-
border-radius: 10px;
6-
7-
.sub-title {
8-
font-weight: 700;
9-
font-size: 22px;
10-
line-height: 36px;
11-
letter-spacing: 0;
12-
padding-right: 20px;
13-
color: var(--black) !important;
1+
// blog page css start
2+
3+
.single-blog {
4+
.blog-item {
5+
margin-bottom: 80px;
6+
.text {
7+
padding: 30px 40px 40px 40px;
8+
.blog-title {
9+
font-size: 32px;
10+
font-weight: 500;
11+
line-height: 40px; /* 125% */
12+
letter-spacing: -0.64px;
13+
margin-bottom: 0 !important;
14+
}
15+
p {
16+
margin-bottom: 50px !important;
17+
margin-top: 30px;
1418
}
15-
16-
.input-group {
17-
.form-control {
18-
width: 100%;
19-
height: 58px;
20-
border-radius: 50px !important;
21-
background-color: rgba(255, 255, 255, 0.1);
22-
padding: 0 20px;
19+
}
20+
}
21+
.pagination {
22+
ul {
23+
gap: 15px;
24+
li {
25+
26+
.paginate {
27+
width: 60px;
28+
height: 60px;
2329
border: 0;
24-
color: rgba(255, 255, 255, 0.8);
25-
padding-right: 73px;
26-
background-color: var(--bg-one);
27-
border: 1px solid transparent;
28-
29-
&:focus {
30-
z-index: 1;
31-
border-color: var(--primary);
30+
border: 1px solid var(--border-color);
31+
font-weight: 700;
32+
color: var(--black);
33+
font-size: 22px;
34+
font-family: var(--font-Space);
35+
line-height: 36px;
36+
&:hover {
37+
background-color: var(--primary);
38+
border-color: transparent;
39+
color: white;
3240
}
33-
34-
&::placeholder {
35-
color: var(--paragraph-color);
41+
&.active {
42+
border-color: transparent;
43+
background-color: var(--primary);
44+
color: white;
3645
}
3746
}
38-
39-
button {
40-
width: 58px;
41-
height: 58px;
42-
background-color: var(--tertiary);
43-
border-top-right-radius: 50px;
44-
border-bottom-right-radius: 50px;
45-
color: white;
46-
border: 0;
47+
}
48+
}
49+
}
50+
}
51+
52+
.blog-sidebar {
53+
.blog-widget {
54+
border: 1px solid var(--border-color);
55+
padding: 40px;
56+
border-radius: 10px;
57+
58+
.sub-title {
59+
font-weight: 700;
60+
font-size: 22px;
61+
line-height: 36px;
62+
letter-spacing: 0;
63+
padding-right: 20px;
64+
color: var(--black) !important;
65+
}
66+
67+
.input-group {
68+
.form-control {
69+
width: 100%;
70+
height: 58px;
71+
border-radius: 50px !important;
72+
background-color: rgba(255, 255, 255, 0.1);
73+
padding: 0 20px;
74+
border: 0;
75+
color: rgba(255, 255, 255, 0.8);
76+
padding-right: 73px;
77+
background-color: var(--bg-one);
78+
border: 1px solid transparent;
79+
80+
&:focus {
81+
z-index: 1;
82+
border-color: var(--primary);
83+
}
84+
85+
&::placeholder {
86+
color: var(--paragraph-color);
4787
}
4888
}
49-
50-
.category {
51-
li {
52-
a {
53-
background-color: var(--bg-one);
54-
border-radius: 10px;
89+
90+
button {
91+
width: 58px;
92+
height: 58px;
93+
background-color: var(--tertiary);
94+
border-top-right-radius: 50px;
95+
border-bottom-right-radius: 50px;
96+
color: white;
97+
border: 0;
98+
}
99+
}
100+
101+
.category {
102+
li {
103+
a {
104+
background-color: var(--bg-one);
105+
border-radius: 10px;
106+
font-size: 18px;
107+
font-weight: 700;
108+
color: var(--black);
109+
line-height: 30px;
110+
padding: 10px 20px;
111+
gap: 15px;
112+
113+
span {
55114
font-size: 18px;
56-
font-weight: 700;
57-
color: var(--black);
58-
line-height: 30px;
59-
padding: 10px 20px;
60-
gap: 15px;
61-
115+
font-weight: 400;
116+
color: var(--paragraph-color);
117+
transition: var(--transition);
118+
}
119+
120+
&:hover {
121+
background-color: var(--primary);
122+
color: white;
123+
62124
span {
63-
font-size: 18px;
64-
font-weight: 400;
65-
color: var(--paragraph-color);
66-
transition: var(--transition);
67-
}
68-
69-
&:hover {
70-
background-color: var(--primary);
71-
color: white;
72-
73-
span {
74-
color: white !important;
75-
}
125+
color: white !important;
76126
}
77127
}
78-
79-
& + li {
80-
margin-top: 20px;
81-
}
128+
}
129+
130+
& + li {
131+
margin-top: 20px;
82132
}
83133
}
84-
85-
.recent-blog {
86-
.blog-sm-item {
87-
gap: 15px;
88-
89-
.image {
90-
border-radius: 20px 0 0 20px;
91-
92-
img {
93-
transition: var(--transition);
94-
}
134+
}
135+
136+
.recent-blog {
137+
.blog-sm-item {
138+
gap: 15px;
139+
140+
.image {
141+
border-radius: 20px 0 0 20px;
142+
143+
img {
144+
transition: var(--transition);
95145
}
96-
97-
.text {
98-
.blog-meta {
99-
gap: 10px;
100-
row-gap: 5px;
101-
margin-bottom: 10px;
102-
103-
li {
104-
font-size: 14px;
105-
font-weight: 400;
106-
107-
a {
108-
color: var(--paragraph-color);
109-
110-
&:hover {
111-
color: var(--primary);
112-
}
113-
}
114-
}
115-
}
116-
117-
.blog-title {
146+
}
147+
148+
.text {
149+
.blog-meta {
150+
gap: 10px;
151+
row-gap: 5px;
152+
margin-bottom: 10px;
153+
154+
li {
155+
font-size: 14px;
156+
font-weight: 400;
157+
118158
a {
119-
color: var(--black);
120-
159+
color: var(--paragraph-color);
160+
121161
&:hover {
122162
color: var(--primary);
123163
}
124164
}
125165
}
126166
}
127-
128-
&:hover {
129-
.image img {
130-
transform: scale(1.1);
167+
168+
.blog-title {
169+
a {
170+
color: var(--black);
171+
172+
&:hover {
173+
color: var(--primary);
174+
}
131175
}
132176
}
133-
134-
& + .blog-sm-item {
135-
margin-top: 20px;
177+
}
178+
179+
&:hover {
180+
.image img {
181+
transform: scale(1.1);
136182
}
137183
}
184+
185+
& + .blog-sm-item {
186+
margin-top: 20px;
187+
}
138188
}
139-
140-
.tags {
141-
li {
142-
a {
143-
font-weight: 400;
144-
font-size: 18px;
145-
line-height: 28px;
146-
color: var(--paragraph-color);
147-
background-color: var(--bg-one);
148-
border-radius: 20px;
149-
padding: 5px 10px;
150-
151-
&:hover {
152-
background-color: var(--black);
153-
color: white;
154-
}
189+
}
190+
191+
.tags {
192+
li {
193+
a {
194+
font-weight: 400;
195+
font-size: 18px;
196+
line-height: 28px;
197+
color: var(--paragraph-color);
198+
background-color: var(--bg-one);
199+
border-radius: 20px;
200+
padding: 5px 10px;
201+
202+
&:hover {
203+
background-color: var(--black);
204+
color: white;
155205
}
156206
}
157207
}
158208
}
159-
160-
.blog-widget + .blog-widget {
161-
margin-top: 60px;
162-
}
163209
}
164-
210+
211+
.blog-widget + .blog-widget {
212+
margin-top: 60px;
213+
}
214+
}

0 commit comments

Comments
 (0)