Skip to content

Commit af5f0f8

Browse files
author
Asina7
committed
new blog Page
1 parent f175718 commit af5f0f8

File tree

12 files changed

+260
-171
lines changed

12 files changed

+260
-171
lines changed

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

155 KB
Loading

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

144 KB
Loading

‎src/assets/imgs/blog/3.jpg

143 KB
Loading

‎src/assets/imgs/blog/4.jpg

133 KB
Loading

‎src/assets/imgs/blog/5.jpg

156 KB
Loading

‎src/assets/imgs/blog/6.jpg

150 KB
Loading

‎src/components/About/HeaderSection.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
</li>
156156
<li><a href="career.html">Career</a></li>
157157
<li>
158-
<a><router-link to="/Blog">Blog</router-link></a>
158+
<a><router-link to="/blog">Blog</router-link></a>
159159
</li>
160160
</ul>
161161
</div>

‎src/components/Blog/MainSection.vue

Lines changed: 139 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,57 @@
11
<template>
22
<div>
33
<!-- Blog area start -->
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>
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>
11+
</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>
1517
</div>
1618
</div>
1719
</div>
1820

19-
<div class="row">
20-
<div class="col-xxl-6 col-xl-6 col-lg-6">
21-
<article class="blog__item-3">
22-
<div class="blog__img-wrapper-3">
21+
<div class="row reset-grid">
22+
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4" v-for="commentIndex in commentsToShow" v-bind:key="commentIndex.id">
23+
<article class="blog__item" >
24+
<div class="blog__img-wrapper" >
2325
<a href="blog-details.html">
2426
<div class="img-box">
25-
<img class="image-box__item" src="@/assets/imgs/blog/3/1.jpg" alt="Blog Thumbnail">
26-
<img class="image-box__item" src="@/assets/imgs/blog/3/1.jpg" alt="BLog Thumbnail">
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">
2729
</div>
2830
</a>
2931
</div>
30-
<div class="blog__info-3">
31-
<h4 class="blog__meta"><a href="category.html">UI Design</a> . 02 May 2019</h4>
32-
<h5><a href="blog-details.html" class="blog__title-3">How to bring fold to your startup
33-
company with
34-
Axtra</a></h5>
35-
<a href="blog-details.html" class="blog__btn">Read More <span><i
36-
class="fa-solid fa-arrow-right"></i></span></a>
37-
</div>
32+
<h4 class="blog__meta"><a href="category.html">UI Design</a>{{blogData[commentIndex].date}}</h4>
33+
<h5><a href="blog-details.html" class="blog__title">{{blogData[commentIndex].title}}</a></h5>
34+
<a href="blog-details.html" class="blog__btn">Read More <span><i
35+
class="fa-solid fa-arrow-right"></i></span></a>
3836
</article>
3937
</div>
4038

41-
<div class="col-xxl-6 col-xl-6 col-lg-6">
42-
<article class="blog__item-3">
43-
<div class="blog__img-wrapper-3">
44-
<a href="blog-details.html">
45-
<div class="img-box">
46-
<img class="image-box__item" src="@/assets/imgs/blog/3/2.jpg" alt="Blog Thumbnail">
47-
<img class="image-box__item" src="@/assets/imgs/blog/3/2.jpg" alt="BLog Thumbnail">
48-
</div>
49-
</a>
50-
</div>
51-
<div class="blog__info-3">
52-
<h4 class="blog__meta"><a href="category.html">UI Design</a> . 02 May 2019</h4>
53-
<h5><a href="blog-details.html" class="blog__title-3">How to manage a talented and
54-
successful design
55-
team</a></h5>
56-
<a href="blog-details.html" class="blog__btn">Read More <span><i
57-
class="fa-solid fa-arrow-right"></i></span></a>
58-
</div>
59-
</article>
60-
</div>
61-
<div class="col-xxl-6 col-xl-6 col-lg-6">
62-
<article class="blog__item-3">
63-
<div class="blog__img-wrapper-3">
64-
<a href="blog-details.html">
65-
<div class="img-box">
66-
<img class="image-box__item" src="@/assets/imgs/blog/3/1.jpg" alt="Blog Thumbnail">
67-
<img class="image-box__item" src="@/assets/imgs/blog/3/1.jpg" alt="BLog Thumbnail">
68-
</div>
69-
</a>
70-
</div>
71-
<div class="blog__info-3">
72-
<h4 class="blog__meta"><a href="category.html">UI Design</a> . 02 May 2019</h4>
73-
<h5><a href="blog-details.html" class="blog__title-3">How to bring fold to your startup
74-
company with
75-
Axtra</a></h5>
76-
<a href="blog-details.html" class="blog__btn">Read More <span><i
77-
class="fa-solid fa-arrow-right"></i></span></a>
78-
</div>
79-
</article>
80-
</div>
81-
82-
<div class="col-xxl-6 col-xl-6 col-lg-6">
83-
<article class="blog__item-3">
84-
<div class="blog__img-wrapper-3">
85-
<a href="blog-details.html">
86-
<div class="img-box">
87-
<img class="image-box__item" src="@/assets/imgs/blog/3/2.jpg" alt="Blog Thumbnail">
88-
<img class="image-box__item" src="@/assets/imgs/blog/3/2.jpg" alt="BLog Thumbnail">
89-
</div>
90-
</a>
91-
</div>
92-
<div class="blog__info-3">
93-
<h4 class="blog__meta"><a href="category.html">UI Design</a> . 02 May 2019</h4>
94-
<h5><a href="blog-details.html" class="blog__title-3">How to manage a talented and
95-
successful design
96-
team</a></h5>
97-
<a href="blog-details.html" class="blog__btn">Read More <span><i
98-
class="fa-solid fa-arrow-right"></i></span></a>
99-
</div>
100-
</article>
101-
</div>
10239
</div>
40+
<button @click="commentsToShow += 3">Show More</button>
41+
10342
</div>
43+
10444
</section>
10545
<!-- Blog area end -->
46+
<div class="offcanvas__close">
47+
<router-link :to="{ path: '/' }">
48+
<button type="button" id="close_offcanvas">
49+
<i class="fa-solid fa-xmark"></i>
50+
</button>
51+
</router-link>
52+
</div>
10653

107-
108-
<!-- CTA area start -->
109-
<section class="cta__area">
110-
<div class="container line pb-110">
111-
<div class="line-3"></div>
112-
<div class="row">
113-
<div class="col-xxl-12">
114-
<div class="cta__content">
115-
<p class="cta__sub-title">Work with us</p>
116-
<h2 class="cta__title title-anim">We would love to hear more about your project</h2>
117-
<div id="btn_wrapper">
118-
<a href="contact.html" class="wc-btn-primary btn-item btn-hover"><span></span>Let’s talk us <i
119-
class="fa-solid fa-arrow-right"></i></a>
120-
</div>
121-
</div>
122-
</div>
123-
</div>
124-
</div>
125-
<floating-whatsapp></floating-whatsapp>
126-
</section>
127-
<!-- CTA area end -->
54+
12855
<div class="float-icon">
12956

13057
</div>
@@ -138,6 +65,110 @@ import FloatingWhatsapp from '../Home/FloatingWhatsapp.vue';
13865
name : 'MainSection',
13966
components :{
14067
FloatingWhatsapp
141-
}
68+
},
69+
data(){
70+
return{
71+
blogData :
72+
[
73+
{
74+
id:"1",
75+
date:". 02 May 2019",
76+
title:"How to bring fold to your startup company with Axtra",
77+
},
78+
{
79+
id:"2",
80+
date:". 02 May 2019",
81+
title:"How to manage a talented and successful de sign team",
82+
},
83+
{
84+
id:"3",
85+
date:". 02 May 2019",
86+
title:"How to bring fold to your startup company with Axtra",
87+
},
88+
{
89+
id:"4",
90+
date:". 02 May 2019",
91+
title:"How to bring fold to your startup company with Axtra",
92+
},
93+
{
94+
id:"5",
95+
date:". 02 May 2019",
96+
title:"How to bring fold to your startup company with Axtra",
97+
},
98+
{
99+
id:"6",
100+
date:". 02 May 2019",
101+
title:"How to bring fold to your startup company with Axtra",
102+
},
103+
{
104+
id:"7",
105+
date:". 02 May 2019",
106+
title:"How to bring fold to your startup company with Axtra",
107+
},
108+
{
109+
id:"8",
110+
date:". 02 May 2019",
111+
title:"How to bring fold to your startup company with Axtra",
112+
},
113+
{
114+
id:"9",
115+
date:". 02 May 2019",
116+
title:"How to bring fold to your startup company with Axtra",
117+
},
118+
{
119+
id:"10",
120+
date:". 02 May 2019",
121+
title:"How to bring fold to your startup company with Axtra",
122+
},
123+
124+
],
125+
commentsToShow: 3
126+
}
127+
},
128+
methods:{
129+
offcanvascontact(){
130+
$("#open_offcanvas").click(function () {
131+
$('.offcanvas__area').css('opacity', '1');
132+
$('.offcanvas__area').css('visibility', 'visible');
133+
});
134+
$("#close_offcanvas").click(function () {
135+
$('.offcanvas__area').css('opacity', '0');
136+
$('.offcanvas__area').css('visibility', 'hidden');
137+
});
138+
},
139+
}
140+
142141
}
143142
</script>
143+
<style scoped>
144+
button{
145+
/* display:block; */
146+
color:rgb(255, 255, 255);
147+
margin:0 auto;
148+
line-height:50px;
149+
width:10%;
150+
border-radius:30px;
151+
text-decoration:none;
152+
border:3px #161616 solid;
153+
background:#000000;
154+
opacity:0.7;
155+
margin-bottom:50px;
156+
/* padding-left: 12px; */
157+
}
158+
159+
button:hover{
160+
opacity:1;
161+
}
162+
.line{
163+
/* display: none!important; */
164+
}
165+
.offcanvas__close button {
166+
font-size: 30px;
167+
width: 55px;
168+
}
169+
@media screen and (max-width:375px){
170+
#close_offcanvas{
171+
display:none;
172+
}
173+
}
174+
</style>

‎src/components/Home/MainHeader.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -194,14 +194,14 @@
194194
<div class="offcanvas__links side-links">
195195
<ul>
196196
<li>
197-
<a><router-link to="/About">About</router-link></a>
197+
<a><router-link to="/about">About</router-link></a>
198198
</li>
199199
<li>
200-
<a><router-link to="/Contact">Contact</router-link></a>
200+
<a><router-link to="/contact">Contact</router-link></a>
201201
</li>
202202
<li><a href="career.html">Career</a></li>
203203
<li>
204-
<a><router-link to="/Blog">Blog</router-link></a>
204+
<a><router-link to="/blog">Blog</router-link></a>
205205
</li>
206206
</ul>
207207
</div>

‎src/components/Home/MainSection/AboutSection.vue

Lines changed: 69 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,76 @@
4141
</div>
4242
</template>
4343
<script>
44-
// export default{
44+
import $ from "jquery";
45+
import { gsap } from 'gsap';
46+
import { scrollTrigger } from 'gsap';
47+
import { SplitText } from 'gsap'
48+
export default {
49+
name: 'AboutSection',
50+
data () {
51+
return {
52+
53+
}
54+
},
55+
methods: {
56+
AboutSectionAnimation: function(){
57+
let splitTitleLines = gsap.utils.toArray(".title-anim");
4558
46-
// }
47-
// mounted(){
48-
// this.aboutAnimate()
49-
// }
59+
splitTitleLines.forEach(splitTextLine => {
60+
const tl = gsap.timeline({
61+
scrollTrigger: {
62+
trigger: splitTextLine,
63+
start: 'top 90%',
64+
end: 'bottom 60%',
65+
scrub: false,
66+
markers: false,
67+
toggleActions: 'play none none none'
68+
}
69+
});
70+
71+
const itemSplitted = new SplitText(splitTextLine, { type: "words, lines" });
72+
gsap.set(splitTextLine, { perspective: 400 });
73+
itemSplitted.split({ type: "lines" })
74+
tl.from(itemSplitted.lines, { duration: 1, delay: 0.3, opacity: 0, rotationX: -80, force3D: true, transformOrigin: "top center -50", stagger: 0.1 });
75+
});
76+
/////////////////////////////////////////////////////
77+
78+
79+
/////////////////////////////////////////////////////
80+
// 26. Title Animation Top
81+
82+
/////////////////////////////////////////////////////
83+
84+
85+
/////////////////////////////////////////////////////
86+
// 27. Text Animation
87+
let splitTextLines = gsap.utils.toArray(".text-anim p");
88+
89+
splitTextLines.forEach(splitTextLine => {
90+
const tl = gsap.timeline({
91+
scrollTrigger: {
92+
trigger: splitTextLine,
93+
start: 'top 90%',
94+
duration: 2,
95+
end: 'bottom 60%',
96+
scrub: false,
97+
markers: false,
98+
toggleActions: 'play none none none'
99+
}
100+
});
101+
102+
const itemSplitted = new SplitText(splitTextLine, { type: "lines" });
103+
gsap.set(splitTextLine, { perspective: 400 });
104+
itemSplitted.split({ type: "lines" })
105+
tl.from(itemSplitted.lines, { duration: 1, delay: 0.5, opacity: 0, rotationX: -80, force3D: true, transformOrigin: "top center -50", stagger: 0.1 });
106+
});
107+
/////////////////////////////////////////////////////
108+
109+
110+
111+
}
112+
}
113+
}
50114
</script>
51115

52116

0 commit comments

Comments
 (0)