Skip to content

Commit 3b8dccc

Browse files
zlrundefinedzlrundefined
committed
Contact page form and more changes
1 parent 1784572 commit 3b8dccc

File tree

2 files changed

+77
-131
lines changed

2 files changed

+77
-131
lines changed

‎src/components/project/ProjectsGrid.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<!-- Projects start -->
3-
<section class="pt-12 sm:pt-20">
3+
<section class="pt-12 sm:pt-28">
44
<div class="text-center">
55
<p class="text-2xl sm:text-5xl font-semibold mb-3 text-gray-600">
66
Projects Portfolio

‎src/views/Contact.vue

Lines changed: 76 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,181 +1,116 @@
11
<template>
2-
<div class="container mx-auto flex py-10 mt-10 sm:mt-20">
3-
<div class="w-1/2">
2+
<div class="container mx-auto sm:flex py-5 sm:py-10 mt-10 sm:mt-20">
3+
<div class="w-full sm:w-1/2">
44
<div class="leading-loose">
55
<form
6-
class="max-w-xl m-4 p-10 bg-white rounded shadow-xl text-left"
6+
class="max-w-xl m-4 p-6 sm:p-10 bg-white rounded-xl shadow-xl text-left"
77
>
88
<p class="text-gray-600 text-2xl font-semibold mb-8">
9-
Customer information
9+
Contact Form
1010
</p>
1111
<div class="">
12-
<label class="block text-sm text-gray-00" for="cus_name"
13-
>Name</label
12+
<label
13+
class="block text-lg text-gray-00 mb-2"
14+
for="name"
15+
>Full Name</label
1416
>
1517
<input
16-
class="w-full px-5 py-1 text-gray-700 bg-gray-200 rounded"
17-
id="cus_name"
18-
name="cus_name"
18+
class="w-full px-5 py-2 text-gray-700 bg-gray-100 rounded"
19+
id="name"
20+
name="name"
1921
type="text"
2022
required=""
2123
placeholder="Your Name"
2224
aria-label="Name"
2325
/>
2426
</div>
25-
<div class="mt-2">
27+
<div class="mt-6">
2628
<label
27-
class="block text-sm text-gray-600"
28-
for="cus_email"
29+
class="block text-lg text-gray-00 mb-2"
30+
for="email"
2931
>Email</label
3032
>
3133
<input
32-
class="w-full px-5 py-4 text-gray-700 bg-gray-200 rounded"
33-
id="cus_email"
34-
name="cus_email"
34+
class="w-full px-5 py-2 text-gray-700 bg-gray-100 rounded"
35+
id="email"
36+
name="email"
3537
type="text"
3638
required=""
3739
placeholder="Your Email"
3840
aria-label="Email"
3941
/>
4042
</div>
41-
<div class="mt-2">
42-
<label
43-
class=" block text-sm text-gray-600"
44-
for="cus_email"
45-
>Address</label
46-
>
47-
<input
48-
class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded"
49-
id="cus_email"
50-
name="cus_email"
51-
type="text"
52-
required=""
53-
placeholder="Street"
54-
aria-label="Email"
55-
/>
56-
</div>
57-
<div class="mt-2">
58-
<label
59-
class="hidden text-sm block text-gray-600"
60-
for="cus_email"
61-
>City</label
62-
>
63-
<input
64-
class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded"
65-
id="cus_email"
66-
name="cus_email"
67-
type="text"
68-
required=""
69-
placeholder="City"
70-
aria-label="Email"
71-
/>
72-
</div>
73-
<div class="inline-block mt-2 w-1/2 pr-1">
74-
<label
75-
class="hidden block text-sm text-gray-600"
76-
for="cus_email"
77-
>Country</label
78-
>
79-
<input
80-
class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded"
81-
id="cus_email"
82-
name="cus_email"
83-
type="text"
84-
required=""
85-
placeholder="Country"
86-
aria-label="Email"
87-
/>
88-
</div>
89-
<div class="inline-block mt-2 -mx-1 pl-1 w-1/2">
43+
<div class="mt-6">
9044
<label
91-
class="hidden block text-sm text-gray-600"
92-
for="cus_email"
93-
>Zip</label
45+
class="block text-lg text-gray-00 mb-2"
46+
for="subject"
47+
>Subject</label
9448
>
9549
<input
96-
class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded"
97-
id="cus_email"
98-
name="cus_email"
50+
class="w-full px-5 py-2 text-gray-700 bg-gray-100 rounded"
51+
id="subject"
52+
name="subject"
9953
type="text"
10054
required=""
101-
placeholder="Zip"
102-
aria-label="Email"
55+
placeholder="Subject"
56+
aria-label="Subject"
10357
/>
10458
</div>
105-
<p class="mt-4 text-gray-800 font-medium">
106-
Payment information
107-
</p>
108-
<div class="">
59+
60+
<div class="mt-6">
10961
<label
110-
class="block text-sm text-gray-600"
111-
for="cus_name"
112-
>Card</label
62+
class="block text-lg text-gray-00 mb-2"
63+
for="message"
64+
>Message</label
11365
>
114-
<input
115-
class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded"
116-
id="cus_name"
117-
name="cus_name"
118-
type="text"
119-
required=""
120-
placeholder="Card Number MM/YY CVC"
121-
aria-label="Name"
122-
/>
66+
<textarea
67+
class="w-full px-2 py-2 text-gray-700 bg-gray-100 rounded"
68+
id="message"
69+
name="message"
70+
cols="14"
71+
rows="6"
72+
></textarea>
12373
</div>
124-
<div class="mt-4">
74+
75+
<div class="mt-6">
12576
<button
126-
class="px-4 py-1 text-white font-light tracking-wider bg-gray-900 rounded"
77+
class="px-4 py-3 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 rounded-lg"
12778
type="submit"
12879
>
129-
$3.00
80+
Send Message
13081
</button>
13182
</div>
13283
</form>
13384
</div>
13485
</div>
135-
<div class="w-1/2">
136-
<div class="col-lg-4 col-md-4 offset-md-1">
137-
<h2 class="h4 pb-3">Contact details</h2>
138-
<h3 class="h6 pb-2">North America - New York, NY</h3>
139-
<ul class="list-unstyled fs-sm pb-3">
140-
<li class="d-flex align-items-top mb-3">
86+
<div class="w-full sm:w-1/2">
87+
<div class="text-left max-w-xl px-6">
88+
<h2 class="text-2xl font-semibold mt-12 mb-8">
89+
Contact details
90+
</h2>
91+
<ul class="">
92+
<li class="flex">
14193
<i
142-
class="ai-map-pin fs-xl text-muted mt-1 me-2 pe-1"
94+
data-feather="map-pin"
95+
class="w-5 text-gray-500 mr-4"
14396
></i>
144-
<div>
145-
396 Lillian Blvd, Holbrook,<br />NY 11741, USA<br /><a
146-
class="fancy-link"
147-
href="#map"
148-
data-scroll=""
149-
>See on the map</a
150-
>
151-
</div>
152-
</li>
153-
<li class="d-flex align-items-center mb-3">
154-
<i class="ai-mail fs-xl text-muted me-2 pe-1"></i>
155-
<div>new.york@example.com</div>
156-
</li>
157-
<li class="d-flex align-items-center mb-3">
158-
<i class="ai-phone fs-xl text-muted me-2 pe-1"></i>
159-
<div>+ 1 526 220 0459</div>
97+
<p class="text-lg mb-4">
98+
Wazir Akbar Khan, Kabul, Afghanistan
99+
</p>
160100
</li>
161-
</ul>
162-
<h3 class="h6 pb-2">Europe - Berlin, Germany</h3>
163-
<ul class="list-unstyled fs-sm">
164-
<li class="d-flex align-items-top mb-3">
101+
<li class="flex">
165102
<i
166-
class="ai-map-pin fs-xl text-muted mt-1 me-2 pe-1"
103+
data-feather="mail"
104+
class="w-5 text-gray-500 mr-4"
167105
></i>
168-
<div>
169-
Mohrenstrasse 37 10117,<br />Berlin, Germany<br />
170-
</div>
171-
</li>
172-
<li class="d-flex align-items-center mb-3">
173-
<i class="ai-mail fs-xl text-muted me-2 pe-1"></i>
174-
<div>berlin@example.com</div>
106+
<p class="text-lg mb-4">email@example.com</p>
175107
</li>
176-
<li class="d-flex align-items-center mb-3">
177-
<i class="ai-phone fs-xl text-muted me-2 pe-1"></i>
178-
<div>030 778 345 26</div>
108+
<li class="flex">
109+
<i
110+
data-feather="phone"
111+
class="w-5 text-gray-500 mr-4"
112+
></i>
113+
<p class="text-lg mb-4">+93 7888 888 88</p>
179114
</li>
180115
</ul>
181116
</div>
@@ -184,7 +119,18 @@
184119
</template>
185120

186121
<script>
122+
import feather from 'feather-icons';
123+
187124
export default {
188-
setup() {},
125+
data: () => {
126+
return {};
127+
},
128+
mounted() {
129+
feather.replace();
130+
},
131+
updated() {
132+
feather.replace();
133+
},
134+
methods: {},
189135
};
190136
</script>

0 commit comments

Comments
 (0)