Skip to content

Commit 62d7314

Browse files
zlrundefinedzlrundefined
committed
Single project components division
1 parent 0cb9972 commit 62d7314

File tree

6 files changed

+298
-222
lines changed

6 files changed

+298
-222
lines changed

‎src/components/SingleProject.vue‎

Lines changed: 1 addition & 222 deletions
Original file line numberDiff line numberDiff line change
@@ -1,226 +1,5 @@
11
<template>
2-
<div class="container mx-auto px-4">
3-
<!-- Project heading and meta info start -->
4-
<p
5-
class="text-left text-3xl sm:text-4xl font-bold text-gray-600 mt-7 sm:mt-20 mb-7"
6-
>
7-
Kabul Project Management UI
8-
</p>
9-
<div class="flex">
10-
<div class="flex items-center mr-10">
11-
<i data-feather="clock" class="w-4 h-4 text-gray-400"></i>
12-
<span class="ml-2 leading-none text-gray-500"
13-
>Jul 26, 2021</span
14-
>
15-
</div>
16-
<div class="flex items-center">
17-
<i data-feather="tag" class="w-4 h-4 text-gray-400"></i>
18-
<span class="ml-2 leading-none text-gray-500"
19-
>UI / Frontend</span
20-
>
21-
</div>
22-
</div>
23-
<!-- Project heading and meta info end -->
24-
25-
<!-- Project gallery start -->
26-
<div class="grid grid-cols-1 sm:grid-cols-3 sm:gap-10 mt-12">
27-
<div class="mb-10 sm:mb-0">
28-
<img
29-
src="../assets/images/ui-project-1.jpg"
30-
class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
31-
alt="Kabul Project Management UI"
32-
/>
33-
</div>
34-
<div class="mb-10 sm:mb-0">
35-
<img
36-
src="../assets/images/web-project-2.jpg"
37-
class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
38-
alt="Kabul Project Management UI"
39-
/>
40-
</div>
41-
<div>
42-
<img
43-
src="../assets/images/mobile-project-2.jpg"
44-
class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
45-
alt="Kabul Project Management UI"
46-
/>
47-
</div>
48-
</div>
49-
<!-- Project gallery end -->
50-
51-
<!-- Project information start -->
52-
<div class="block sm:flex gap-0 sm:gap-10 mt-14">
53-
<div class="w-full sm:w-1/3 text-left">
54-
<div class="mb-7">
55-
<p class="text-2xl font-semibold text-gray-600 mb-2">
56-
About Client
57-
</p>
58-
<ul class="leading-loose">
59-
<li>
60-
<span class="text-gray-600">Name: </span> Kabul
61-
Company Ltd
62-
</li>
63-
<li>
64-
<span class="text-gray-600">Services: </span> UI
65-
Design & Frontend Development
66-
</li>
67-
<li>
68-
<span class="text-gray-600">Website: </span>
69-
<a href="#">https://kabul.com</a>
70-
</li>
71-
<li>
72-
<span class="text-gray-600">Phone: </span> +93 7888
73-
888 88
74-
</li>
75-
</ul>
76-
</div>
77-
<div class="mb-7">
78-
<p class="text-2xl font-semibold text-gray-600 mb-2">
79-
Objective
80-
</p>
81-
<p>
82-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
83-
Optio, natus! Quibusdam enim quod in esse, mollitia
84-
molestias incidunt quas ipsa accusamus veniam, quis odit
85-
cumque vero voluptate, reiciendis amet non!
86-
</p>
87-
</div>
88-
<div class="mb-7">
89-
<p class="text-2xl font-semibold text-gray-600 mb-2">
90-
Tools & Technologies
91-
</p>
92-
<p>HTML, CSS, JavaScript, Vue.js, TailwindCSS, AdobeXD</p>
93-
</div>
94-
<div>
95-
<p class="text-2xl font-semibold text-gray-600 mb-2">
96-
Share This
97-
</p>
98-
<div class="flex items-center gap-3 mt-5">
99-
<a
100-
href="#"
101-
class="bg-gray-100 hover:bg-blue-400 hover:text-white p-2 rounded-lg shadow-sm"
102-
><i
103-
data-feather="twitter"
104-
class="w-5 h-5 text-gray-500 hover:text-white"
105-
></i
106-
></a>
107-
<a
108-
href="#"
109-
class="bg-gray-100 hover:bg-blue-700 hover:text-white p-2 rounded-lg shadow-sm"
110-
><i
111-
data-feather="facebook"
112-
class="w-5 h-5 text-gray-500 hover:text-white"
113-
></i
114-
></a>
115-
<a
116-
href="#"
117-
class="bg-gray-100 hover:bg-red-400 hover:text-white p-2 rounded-lg shadow-sm"
118-
><i
119-
data-feather="instagram"
120-
class="w-5 h-5 text-gray-500 hover:text-white"
121-
></i
122-
></a>
123-
<a
124-
href="#"
125-
class="bg-gray-100 hover:bg-blue-500 hover:text-white p-2 rounded-lg shadow-sm"
126-
><i
127-
data-feather="linkedin"
128-
class="w-5 h-5 text-gray-500 hover:text-white"
129-
></i
130-
></a>
131-
<a
132-
href="#"
133-
class="bg-gray-100 hover:bg-red-700 hover:text-white p-2 rounded-lg shadow-sm"
134-
><i
135-
data-feather="youtube"
136-
class="w-5 h-5 text-gray-500 hover:text-white"
137-
></i
138-
></a>
139-
</div>
140-
</div>
141-
</div>
142-
<div class="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
143-
<p class="text-gray-600 text-2xl font-bold mb-7">Challenge</p>
144-
<p class="mb-5 text-lg text-gray-600">
145-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
146-
ipsa, ullam modi esse ea molestiae, non quidem expedita
147-
perspiciatis nihil eligendi maxime eum eos exercitationem.
148-
Aliquam labore amet odio quisquam? Lorem ipsum dolor sit
149-
amet consectetur, adipisicing elit. Velit, consectetur?
150-
Soluta, minus, quia tenetur distinctio asperiores aperiam
151-
impedit provident at autem omnis odio, atque dicta minima
152-
alias voluptatum ullam animi.
153-
</p>
154-
<p class="mb-5 text-lg text-gray-600">
155-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
156-
ipsa, ullam modi esse ea molestiae, non quidem expedita
157-
perspiciatis nihil eligendi maxime eum eos exercitationem.
158-
Aliquam labore amet odio quisquam? Lorem ipsum dolor sit
159-
amet consectetur, adipisicing elit. Velit, consectetur?
160-
Soluta, minus, quia tenetur distinctio asperiores aperiam
161-
impedit provident at autem omnis odio, atque dicta minima
162-
alias voluptatum ullam animi.
163-
</p>
164-
<p class="mb-5 text-lg text-gray-600">
165-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
166-
ipsa, ullam modi esse ea molestiae, non quidem expedita
167-
perspiciatis nihil eligendi maxime eum eos exercitationem.
168-
Aliquam labore amet odio quisquam? Lorem ipsum dolor sit
169-
amet consectetur, adipisicing elit. Velit, consectetur?
170-
Soluta, minus, quia tenetur distinctio asperiores aperiam
171-
impedit provident at autem omnis odio, atque dicta minima
172-
alias voluptatum ullam animi.
173-
</p>
174-
<p class="mb-5 text-lg text-gray-600">
175-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
176-
ipsa, ullam modi esse ea molestiae, non quidem expedita
177-
perspiciatis nihil eligendi maxime eum eos exercitationem.
178-
Aliquam labore amet odio quisquam?
179-
</p>
180-
</div>
181-
</div>
182-
<!-- Project information end -->
183-
184-
<hr class="mt-10 sm:mt-20" />
185-
186-
<!-- Related projects start -->
187-
<div class="mt-10 sm:mt-20">
188-
<p class="text-gray-600 text-3xl font-bold mb-10 sm:mb-14">
189-
Related Projects
190-
</p>
191-
<div class="grid grid-cols-1 sm:grid-cols-4 gap-10">
192-
<div>
193-
<img
194-
src="../assets/images/mobile-project-1.jpg"
195-
class="rounded-2xl"
196-
alt="Related Project"
197-
/>
198-
</div>
199-
<div>
200-
<img
201-
src="../assets/images/web-project-1.jpg"
202-
class="rounded-2xl"
203-
alt="Related Project"
204-
/>
205-
</div>
206-
<div>
207-
<img
208-
src="../assets/images/ui-project-2.jpg"
209-
class="rounded-2xl"
210-
alt="Related Project"
211-
/>
212-
</div>
213-
<div>
214-
<img
215-
src="../assets/images/mobile-project-1.jpg"
216-
class="rounded-2xl"
217-
alt="Related Project"
218-
/>
219-
</div>
220-
</div>
221-
</div>
222-
<!-- Related projects end -->
223-
</div>
2+
<div class="container mx-auto px-4"></div>
2243
</template>
2254

2265
<script>

‎src/components/project/SingleProjectGallery.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<!-- Project gallery start -->
3+
<div class="grid grid-cols-1 sm:grid-cols-3 sm:gap-10 mt-12">
4+
<div class="mb-10 sm:mb-0">
5+
<img
6+
src="../../assets/images/ui-project-1.jpg"
7+
class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
8+
alt="Kabul Project Management UI"
9+
/>
10+
</div>
11+
<div class="mb-10 sm:mb-0">
12+
<img
13+
src="../../assets/images/web-project-2.jpg"
14+
class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
15+
alt="Kabul Project Management UI"
16+
/>
17+
</div>
18+
<div>
19+
<img
20+
src="../../assets/images/mobile-project-2.jpg"
21+
class="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
22+
alt="Kabul Project Management UI"
23+
/>
24+
</div>
25+
</div>
26+
<!-- Project gallery end -->
27+
</template>
28+
29+
<script>
30+
export default {
31+
setup() {},
32+
};
33+
</script>

‎src/components/project/SingleProjectHeader.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<!-- Project heading and meta info start -->
3+
<p
4+
class="text-left text-3xl sm:text-4xl font-bold text-gray-600 mt-7 sm:mt-20 mb-7"
5+
>
6+
Kabul Project Management UI
7+
</p>
8+
<div class="flex">
9+
<div class="flex items-center mr-10">
10+
<i data-feather="clock" class="w-4 h-4 text-gray-400"></i>
11+
<span class="ml-2 leading-none text-gray-500">Jul 26, 2021</span>
12+
</div>
13+
<div class="flex items-center">
14+
<i data-feather="tag" class="w-4 h-4 text-gray-400"></i>
15+
<span class="ml-2 leading-none text-gray-500">UI / Frontend</span>
16+
</div>
17+
</div>
18+
<!-- Project heading and meta info end -->
19+
</template>
20+
21+
<script>
22+
export default {
23+
setup() {},
24+
};
25+
</script>

0 commit comments

Comments
 (0)