Skip to content

Commit 1784572

Browse files
zlrundefinedzlrundefined
committed
Tailwind css width changes
1 parent 394f894 commit 1784572

File tree

13 files changed

+216
-16
lines changed

13 files changed

+216
-16
lines changed

‎src/components/about/AboutCounter.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="mt-10 sm:mt-20 bg-gray-100 shadow-sm">
33
<div
4-
class="container mx-auto py-20 px-10 block sm:flex sm:justify-between sm:items-center"
4+
class="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
55
>
66
<div class="mb-20 sm:mb-0">
77
<p class="text-4xl font-bold text-gray-600 mb-2">12</p>

‎src/components/about/AboutMe.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="block sm:flex sm:gap-10">
2+
<div class="block sm:flex sm:gap-10 mt-10 sm:mt-20">
33
<div class="w-full sm:w-1/4 mb-7 sm:mb-0">
44
<img
55
src="../../assets/images/profile.jpeg"

‎src/components/about/Clients.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="mt-10">
2+
<div class="mt-10 sm:mt-20">
33
<p class="text-4xl text-gray-600 font-sans font-semibold">
44
Some of the best companies I worked with
55
</p>

‎src/components/home/Banner.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
22
<!-- Banner start -->
3-
<section class="flex flex-col items-center sm:flex-row justify-between">
3+
<section
4+
class="flex flex-col sm:justify-between items-center sm:flex-row mt-20"
5+
>
46
<div class="w-full sm:w-1/3 text-left">
57
<h1
68
class="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-gray-700 uppercase"
@@ -25,7 +27,7 @@
2527
>
2628
</div>
2729
</div>
28-
<div class="w-full sm:w-2/3 text-right">
30+
<div class="w-full sm:w-2/3 text-right float-right">
2931
<img src="@/assets/images/developer.svg" alt="Developer" />
3032
</div>
3133
</section>

‎src/components/project/SingleProjectRelatedProjects.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,28 @@
88
<div>
99
<img
1010
src="../../assets/images/mobile-project-1.jpg"
11-
class="rounded-2xl"
11+
class="rounded-2xl cursor-pointer"
1212
alt="Related Project"
1313
/>
1414
</div>
1515
<div>
1616
<img
1717
src="../../assets/images/web-project-1.jpg"
18-
class="rounded-2xl"
18+
class="rounded-2xl cursor-pointer"
1919
alt="Related Project"
2020
/>
2121
</div>
2222
<div>
2323
<img
2424
src="../../assets/images/ui-project-2.jpg"
25-
class="rounded-2xl"
25+
class="rounded-2xl cursor-pointer"
2626
alt="Related Project"
2727
/>
2828
</div>
2929
<div>
3030
<img
3131
src="../../assets/images/mobile-project-1.jpg"
32-
class="rounded-2xl"
32+
class="rounded-2xl cursor-pointer"
3333
alt="Related Project"
3434
/>
3535
</div>

‎src/components/shared/Footer.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="container mx-auto bg-white px-4 pt-20 sm:pt-40 pb-8">
2+
<div class="container mx-auto bg-white pt-20 sm:pt-40 pb-8">
33
<div class="flex flex-col justify-center items-center mb-12 sm:mb-28">
44
<p class="text-3xl sm:text-4xl font-semibold text-gray-500 mb-5">
55
Follow me

‎src/components/shared/Header.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<nav id="nav" class="container mx-auto bg-white">
3-
<div class="md:flex items-center justify-between px-4 py-5">
3+
<div class="md:flex items-center justify-between my-6">
44
<div class="flex justify-between items-center">
55
<div class="text-2xl font-bold text-gray-800 md:text-3xl">
66
<router-link to="/"

‎src/views/About.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<div class="container mx-auto px-4 py-10">
3+
<div class="container mx-auto">
44
<!-- About me start -->
55
<AboutMe />
66
<!-- About me end -->
@@ -10,7 +10,7 @@
1010
<AboutCounter />
1111
<!-- About counter end -->
1212

13-
<div class="container mx-auto px-4 py-10">
13+
<div class="container mx-auto">
1414
<!-- About counter start -->
1515
<Clients />
1616
<!-- About counter end -->

‎src/views/Contact.vue

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,190 @@
1+
<template>
2+
<div class="container mx-auto flex py-10 mt-10 sm:mt-20">
3+
<div class="w-1/2">
4+
<div class="leading-loose">
5+
<form
6+
class="max-w-xl m-4 p-10 bg-white rounded shadow-xl text-left"
7+
>
8+
<p class="text-gray-600 text-2xl font-semibold mb-8">
9+
Customer information
10+
</p>
11+
<div class="">
12+
<label class="block text-sm text-gray-00" for="cus_name"
13+
>Name</label
14+
>
15+
<input
16+
class="w-full px-5 py-1 text-gray-700 bg-gray-200 rounded"
17+
id="cus_name"
18+
name="cus_name"
19+
type="text"
20+
required=""
21+
placeholder="Your Name"
22+
aria-label="Name"
23+
/>
24+
</div>
25+
<div class="mt-2">
26+
<label
27+
class="block text-sm text-gray-600"
28+
for="cus_email"
29+
>Email</label
30+
>
31+
<input
32+
class="w-full px-5 py-4 text-gray-700 bg-gray-200 rounded"
33+
id="cus_email"
34+
name="cus_email"
35+
type="text"
36+
required=""
37+
placeholder="Your Email"
38+
aria-label="Email"
39+
/>
40+
</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">
90+
<label
91+
class="hidden block text-sm text-gray-600"
92+
for="cus_email"
93+
>Zip</label
94+
>
95+
<input
96+
class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded"
97+
id="cus_email"
98+
name="cus_email"
99+
type="text"
100+
required=""
101+
placeholder="Zip"
102+
aria-label="Email"
103+
/>
104+
</div>
105+
<p class="mt-4 text-gray-800 font-medium">
106+
Payment information
107+
</p>
108+
<div class="">
109+
<label
110+
class="block text-sm text-gray-600"
111+
for="cus_name"
112+
>Card</label
113+
>
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+
/>
123+
</div>
124+
<div class="mt-4">
125+
<button
126+
class="px-4 py-1 text-white font-light tracking-wider bg-gray-900 rounded"
127+
type="submit"
128+
>
129+
$3.00
130+
</button>
131+
</div>
132+
</form>
133+
</div>
134+
</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">
141+
<i
142+
class="ai-map-pin fs-xl text-muted mt-1 me-2 pe-1"
143+
></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>
160+
</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">
165+
<i
166+
class="ai-map-pin fs-xl text-muted mt-1 me-2 pe-1"
167+
></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>
175+
</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>
179+
</li>
180+
</ul>
181+
</div>
182+
</div>
183+
</div>
184+
</template>
1185

186+
<script>
187+
export default {
188+
setup() {},
189+
};
190+
</script>

‎src/views/Home.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="container mx-auto px-4 py-10">
2+
<div class="container mx-auto">
33
<!-- Banner start -->
44
<Banner />
55
<!-- Banner snd -->

‎src/views/Projects.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="container mx-auto px-4 py-10">
2+
<div class="container mx-auto">
33
<!-- Projects start -->
44
<ProjectsGrid />
55
<!-- Projects end -->

‎src/views/SingleProject.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="container mx-auto px-4 py-10">
2+
<div class="container mx-auto mt-10 sm:mt-20">
33
<!-- Projects start -->
44
<SingleProjectHeader />
55
<!-- Projects end -->

‎tailwind.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@ module.exports = {
33
darkMode: false, // or 'media' or 'class'
44
theme: {
55
extend: {},
6+
container: {
7+
padding: {
8+
DEFAULT: '1rem',
9+
sm: '2rem',
10+
lg: '4rem',
11+
xl: '5rem',
12+
'2xl': '6rem',
13+
},
14+
},
615
},
716
variants: {
817
extend: {},

0 commit comments

Comments
 (0)