Skip to content

Commit 393f125

Browse files
author
Asina7
committed
Added Blog detail and chnages in blog page
1 parent 32800c1 commit 393f125

File tree

8 files changed

+255
-62
lines changed

8 files changed

+255
-62
lines changed

‎package-lock.json

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"swiper": "^8.4.5",
2020
"vue": "^3.2.45",
2121
"vue-animated-cursor": "^1.0.3",
22+
"vue-parallaxy": "^1.1.1",
2223
"vue-router": "^4.0.13",
2324
"vue-scrollmagic": "^1.2.0"
2425
},

‎src/assets/imgs/blog/detail/1.jpg

96 KB
Loading

‎src/assets/imgs/blog/detail/2.jpg

51.2 KB
Loading

‎src/assets/imgs/blog/detail/author.png

6.73 KB
Loading

‎src/components/Blog/BlogDetails.vue

Lines changed: 184 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,193 @@
22
<div>
33
<main>
44

5-
<!-- Blog detail start -->
6-
<section class="blog__detail">
7-
<div class="container g-0 line pt-140">
8-
<span class="line-3"></span>
9-
<div class="row">
10-
<div class="col-xxl-8 col-xl-10 offset-xxl-2 offset-xl-1">
11-
<div class="blog__detail-top">
12-
<h2 class="blog__detail-date animation__word_come">Marketing <span>25 Jan 2019</span></h2>
13-
<h3 class="blog__detail-title animation__word_come">Donate your design for newest designers to try
14-
better
15-
</h3>
16-
17-
</div>
18-
</div>
19-
<div class="col-xxl-12">
20-
<div class="blog__detail-thumb">
21-
<img src="@/assets/imgs/blog/detail/1.jpg" alt="Blog Thumbnail" data-speed="0.5">
22-
</div>
23-
</div>
24-
25-
</div>
26-
</div>
27-
</section>
28-
<!-- Blog detail end -->
5+
<!-- Blog detail start -->
6+
<section class="blog__detail">
7+
<div class="container g-0 line pt-140">
8+
<span class="line-3"></span>
9+
<div class="row">
10+
<div class="col-xxl-8 col-xl-10 offset-xxl-2 offset-xl-1">
11+
<div class="blog__detail-top">
12+
<h2 class="blog__detail-date animation__word_come">Design, Marketing <span>25 Jan 2019</span></h2>
13+
<h3 class="blog__detail-title animation__word_come">Donate your design for newest designers to try
14+
better
15+
</h3>
16+
<div class="blog__detail-metalist">
17+
<div class="blog__detail-meta">
18+
<img src="@/assets/imgs/blog/detail/author.png" alt="Author Picture">
19+
<p>Writen by <span>Codexpand</span></p>
20+
</div>
21+
<div class="blog__detail-meta">
22+
<p>Viewed <span>3 min read</span></p>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
<div class="col-xxl-12">
28+
<div class="blog__detail-thumb" style="overflow: hidden;">
29+
<img ref="parallaxImage" src="@/assets/imgs/blog/detail/1.jpg" alt="Blog Thumbnail" style="position: absolute;">
30+
</div>
31+
<!-- <div class="blog__detail-thumb">
32+
<img src="@/assets/imgs/blog/detail/1.jpg" alt="Blog Thumbnail" data-speed="0.5">
33+
</div> -->
34+
</div>
35+
<div class="col-xxl-8 col-xl-10 offset-xxl-2 offset-xl-1">
36+
<div class="blog__detail-content">
37+
<p>We love to bring designs to life as a developer, and I aim to do this using whatever front end
38+
tools are necessary. My preferred tools are more modern javascript libraries like React.js but I
39+
like to use whatever is best for the websites needs. There are several reasons why a business would
40+
consider a rebrand and it doesn’t necessarily mean the business has been unsuccessful. </p>
41+
<p>But in order that you may see whence all this born error of those who accuse pleasure and praise
42+
pain, I will open the whole matter, and explain the very things which were said by that discoverer
43+
of truth and, as it were, the architect of a happy life.</p>
44+
<img src="@/assets/imgs/blog/detail/2.jpg" alt="Blog Image">
45+
<h2>JavaScript</h2>
46+
<p>We love to bring designs to life as a developer, and I aim to do this using whatever front end
47+
tools are necessary. My preferred tools are more modern javascript libraries like React.js but I
48+
like to use whatever is best for the websites needs. There are several reasons why a business would
49+
consider a rebrand and it doesn’t necessarily mean the business has been unsuccessful.</p>
50+
<h2>Fremework</h2>
51+
<p>Always ready to push the boundaries, especially when it comes to our own platform, Our analytical
52+
eye to create a site that was visually engaging and also optimised for maximum performance. It also
53+
perfectly reflects the journey to help it tell a story to increase its understanding and drive
54+
action. To create a site that was visually engaging for maximum performance.</p>
55+
<ul>
56+
<li>Brand Development</li>
57+
<li>UX/UI Design</li>
58+
<li>Front-end Development</li>
59+
<li>Copywriting</li>
60+
<li>Shopify Development</li>
61+
</ul>
62+
<h2>Visual Studio</h2>
63+
<p>Just like other pseudo-elements and pseudo-class selectors, :not() can be chained with other
64+
pseudo-classes and pseudo-elements. For example, the following will add a “New!” word to list items
65+
that do not have a .old class name, using the ::after pseudo-element:</p>
66+
<img src="@/assets/imgs/blog/detail/2.jpg" alt="Code">
67+
</div>
68+
<div class="blog__detail-tags">
69+
<p class="sub-title-anim">tags: <a href="tag.html">design</a>, <a href="tag.html">figma</a>,
70+
<a href="tag.html">update</a>
71+
</p>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</section>
77+
<!-- Blog detail end -->
78+
79+
80+
<!-- Related blog start -->
81+
<section class="blog__related blog__animation">
82+
<div class="container g-0 line pt-130 pb-140">
83+
<span class="line-3"></span>
84+
<div class="row">
85+
<div class="col-xxl-12">
86+
<div class="sec-title-wrapper">
87+
<h2 class="sec-title title-anim">Related Aricles</h2>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<div class="row reset-grid">
93+
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4" v-for="(blog, index) in blogData.slice(0, commentsToShow)" v-bind:key="index">
94+
<article class="blog__item">
95+
<div class="blog__img-wrapper">
96+
<a href="blog-details.html">
97+
<div class="img-box">
98+
<img class="image-box__item" src="@/assets/imgs/blog/1.jpg" alt="Blog Thumbnail">
99+
<img class="image-box__item" src="@/assets/imgs/blog/1.jpg" alt="BLog Thumbnail">
100+
</div>
101+
</a>
102+
</div>
103+
<h4 class="blog__meta sub-title-anim"><a href="">UI Design</a>{{blog.date}}</h4>
104+
<h5><a href="" class="blog__title sub-title-anim">{{blog.title}}
105+
</a></h5>
106+
107+
<router-link :to="'/post' + index" class="blog__btn">Read More<span><i class="fa-solid fa-arrow-right"></i></span></router-link>
108+
<!-- <a href="blog-details.html" class="blog__btn">Read More <span><i
109+
class="fa-solid fa-arrow-right"></i></span></a> -->
110+
</article>
111+
</div>
112+
</div>
113+
</div>
114+
</section>
115+
<!-- Related blog end -->
116+
117+
118+
<!-- CTA area start -->
119+
<section class="cta__area">
120+
<div class="container line pb-110">
121+
<div class="line-3"></div>
122+
<div class="row">
123+
<div class="col-xxl-12">
124+
<div class="cta__content">
125+
<p class="cta__sub-title">Work with us</p>
126+
<h2 class="cta__title title-anim">We would love to hear more about your project</h2>
127+
<div id="btn_wrapper">
128+
<a href="/contact" class="wc-btn-primary btn-item btn-hover"><span></span>Let’s talk us <i
129+
class="fa-solid fa-arrow-right"></i></a>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
</section>
136+
<!-- CTA area end -->
29137

30138

31139

32140
</main>
33141
</div>
34142
</template>
143+
144+
<script>
145+
export default {
146+
data(){
147+
return{
148+
149+
blogData :
150+
[
151+
{
152+
date:". 02 May 2019",
153+
title:"How to bring fold to your startup company with Axtra",
154+
},
155+
{
156+
date:". 02 May 2019",
157+
title:"How to manage a talented and successful de sign team",
158+
},
159+
{
160+
date:". 02 May 2019",
161+
title:"How to bring fold to your startup company with Axtra",
162+
},
163+
],
164+
commentsToShow: 3
165+
}
166+
},
167+
168+
// parallex
169+
mounted() {
170+
window.addEventListener('scroll', this.handleScroll);
171+
},
172+
methods: {
173+
handleScroll() {
174+
const image = this.$refs.parallaxImage;
175+
const speed = 0.3;
176+
const yPos = window.pageYOffset * speed;
177+
image.style.transform = `translate3d(0, ${yPos}px, 0)`;
178+
179+
}
180+
},
181+
beforeDestroy() {
182+
window.removeEventListener('scroll', this.handleScroll);
183+
}
184+
// parallex ends
185+
};
186+
</script>
187+
188+
<style scoped>
189+
.blog__detail-thumb img {
190+
height: 150% !important;;
191+
}
192+
</style>
193+
194+

‎src/components/Blog/MainSection.vue

Lines changed: 53 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,67 @@
11
<template>
22
<div>
33
<!-- Blog area start -->
4-
<section class="blog__area-6 blog__animation">
5-
<div class="container g-0 line pt-110 pb-110">
6-
<span class="line-3"></span>
7-
<div class="row pb-130">
8-
<div class="col-xxl-8 col-xl-7 col-lg-6 col-md-6">
9-
<div class="sec-title-wrapper">
10-
<h2 class="sec-title-2 animation__char_come">BLOG</h2>
4+
<section class="blog__area-3 blog-v3 blog__animation">
5+
<div class="container line">
6+
<div class="line-3"></div>
7+
<div class="row ">
8+
<div class="col-xxl-12">
9+
<div class="sec-title-wrapper text-anim pt-130">
10+
<h2 class="sec-sub-title">Recent Blog</h2>
11+
<h3 class="sec-title title-anim">Read Updated <br>Journal</h3>
12+
<p>Read our blog and try to see everything from every perspective. Our passion lies in making
13+
everything
14+
accessible and aesthetic for everyone. </p>
15+
</div>
16+
</div>
17+
</div>
18+
19+
<div class="row">
20+
<div class="col-xxl-6 col-xl-6 col-lg-6" v-for="(blog, index) in blogData.slice(0, commentsToShow)" v-bind:key="index">
21+
<article class="blog__item-3">
22+
<div class="blog__img-wrapper-3">
23+
<a href="">
24+
<div class="img-box">
25+
<img class="image-box__item" src="@/assets/imgs/blog/2.jpg" alt="Blog Thumbnail">
26+
<img class="image-box__item" src="@/assets/imgs/blog/2.jpg" alt="BLog Thumbnail">
27+
</div>
28+
</a>
1129
</div>
12-
</div>
13-
<div class="col-xxl-4 col-xl-5 col-lg-6 col-md-6">
14-
<div class="blog__text">
15-
<p>Crafting new bright brands, unique visual systems and digital experience focused on a wide range of
16-
original collabs. </p>
30+
<div class="blog__info-3">
31+
<h4 class="blog__meta"><a href="">UI Design</a>{{blog.date}}</h4>
32+
<h5><a href="" class="blog__title-3">{{blog.title}}
33+
Axtra</a></h5>
34+
<router-link :to="'/post' + index" class="blog__btn">Read More<span><i class="fa-solid fa-arrow-right"></i></span></router-link>
1735
</div>
18-
</div>
36+
</article>
37+
</div>
38+
</div>
39+
<div class="hero-item-btn m-auto">
40+
<button class="hero-btn1" v-if="showMoreButton" @click="commentsToShow += 2">Show More</button>
1941
</div>
42+
</div>
43+
<!-- </div> -->
44+
</section>
2045

21-
<div class="row reset-grid">
22-
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4" v-for="(blog, index) in blogData.slice(0, commentsToShow)" v-bind:key="index">
23-
<article class="blog__item" >
24-
<div class="blog__img-wrapper" >
25-
<a href="blog-details.html">
26-
<div class="img-box">
27-
<img class="image-box__item" src="@/assets/imgs/blog/2.jpg" alt="Blog Thumbnail">
28-
<img class="image-box__item" src="@/assets/imgs/blog/2.jpg" alt="BLog Thumbnail">
29-
</div>
30-
</a>
46+
<section class="cta__area">
47+
<div class="container line pb-110">
48+
<div class="line-3"></div>
49+
<div class="row">
50+
<div class="col-xxl-12">
51+
<div class="cta__content">
52+
<p class="cta__sub-title">Work with us</p>
53+
<h2 class="cta__title title-anim">We would love to hear more about your project</h2>
54+
<div id="btn_wrapper">
55+
<a href="contact.html" class="wc-btn-primary btn-item btn-hover"><span></span>Let’s talk us <i
56+
class="fa-solid fa-arrow-right"></i></a>
3157
</div>
32-
<h4 class="blog__meta"><a href="category.html">UI Design</a>{{blog.date}}</h4>
33-
<h5><a href="" class="blog__title">{{blog.title}}</a></h5>
34-
<router-link :to="'/post' + index" class="blog__btn">Read More<span><i class="fa-solid fa-arrow-right"></i></span></router-link>
35-
</article>
58+
</div>
3659
</div>
37-
38-
</div>
39-
<div class="hero-item-btn m-auto">
40-
<button class="hero-btn1" v-if="showMoreButton" @click="commentsToShow += 3">Show More</button>
4160
</div>
42-
43-
44-
4561
</div>
46-
4762
</section>
63+
64+
4865
<!-- Blog area end -->
4966
<div class="offcanvas__close">
5067
<router-link :to="{ path: '/' }">
@@ -117,7 +134,7 @@ import FloatingWhatsapp from '../Home/FloatingWhatsapp.vue';
117134
},
118135
119136
],
120-
commentsToShow: 3
137+
commentsToShow: 2
121138
}
122139
},
123140
computed: {

‎src/components/Home/FooterPage.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<footer class="footer__area" data-scroll-section>
66
<div class="footer__top">
77
<div class="container footer-line"></div>
8-
<img src="@/assets/imgs/thumb/footer.jpg" alt="Footer Image" data-speed="0.5">
8+
<img src="@/assets/imgs/thumb/footer.jpg" alt="Footer Image" data-speed="0.5">
99
</div>
1010

1111
<div class="footer__btm">
@@ -98,6 +98,6 @@ import ContactInformation from './MainSection/ContactInformation.vue';
9898
name : 'FooterPage',
9999
components:{
100100
ContactInformation
101-
}
101+
},
102102
}
103103
</script>

0 commit comments

Comments
 (0)