-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (106 loc) · 7.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body class="bg-primary">
<div id="app" class='bg-primary w-full overflow-hidden'>
<div class='xs:mx-4 sm:mx-9.4 mx-43 flex justify-center items-center'>
<nav class="w-full lg:min-w-[1111px] xs:max-w-[343px] sm:max-w-[689px] flex mt-9 mb-17 sx:mx-4 sm:mx-9.4 mx-43 justify-between">
<img src="./assets/logo.svg" alt="Logo">
<button class=" hover:ease-in hover:duration-200 max-h-[44px] self-center font-jakarta font-medium bg-black text-white text-sm xs:text-xs hover:bg-cart1 xs:px-7 px-11.1 xs:py-2 py-3.5 text-center rounded-3xl">Free Consultation</button>
</nav>
</div>
<div class="bg-primary xs:mx-4 sm:mx-9.4 mx-43 flex justify-center items-center xs:pt-8 pt16 ">
<div class="w-full max-w-[1111px] xs:max-w-[343px] sm:max-w-[690px] text-center">
<h1 class="font-jakarta font-bold text-4xl xs:text-lg text-black sm:text-3xl">Design solutions made easy</h1>
<p class="font-jakarta font-medium text-base xs:text-sm text-grey xs:pt4 pt-7 px-7 ">With over ten years of experience in various design disciplines, I’m your one-stop shop for your design needs.</p>
</div>
</div>
<div class="flex justify-center content-center bg-primary xs:mx-4 sm:mx-9.4 mx-43 xs:pt-8 pt-16" >
<div class="cart_box grid xs: gap-6 lg:max-w-[1110px] lg:grid-rows-none justify-center content-center w-full " >
<div class='cart1 flex rounded-lg font-medium text-white text-tiny bg-cart1' >
<p class="pl-6 pb-6 justify-self-start self-end text-tiny font-bold">Graphic Design</p>
<img class='mt-6 pb-28 mr-5 place-self-end' src="./assets/pattern-graphic-design.svg" alt="pattern-graphic-design">
</div>
<div class="flex flex-row lg:col-span-2 lg:max-h-[182px] gap-x-6">
<div class='car2 flex rounded-lg font-medium text-white text-tiny bg-cart2'>
<p class="pl-1.5 pb-4 justify-self-start self-end text-tiny font-bold">UI/UX</p>
<img class='mt-6 pb-24 mr-5 place-self-end' src="./assets/pattern-ui-ux.svg" alt="pattern-ui-ux">
</div>
<div class='cart3 flex rounded-lg font-medium text-white text-tiny bg-cart3'>
<p class="pl-1.5 pb-4 justify-self-start self-end text-tiny font-bold">Apps</p>
<img class='mt-6 pb-24 mr-5 place-self-end' src="./assets/pattern-apps.svg" alt="pattern-apps">
</div>
</div>
<div class='cart4 flex rounded-lg font-medium text-white text-tiny bg-neutral'>
<p class="pl-6 pb-6 justify-self-start self-end text-tiny font-bold">Illustrations</p>
<img class='mt-6 pb-20 place-self-end' src="./assets/pattern-illustrations.svg" alt="pattern-illustrations">
</div>
<div class='cart5 flex rounded-lg font-medium text-white text-tiny bg-cart4 overflow-hidden'>
<p class="pl-6 pb-6 self-end text-tiny font-bold">Photography</p>
<img class='mt-6 pb-24 mr-5.5 place-self-end self-start' src="./assets/pattern-photography.svg" alt="pattern-photography">
</div>
<div class='cart6 flex rounded-lg font-medium text-white text-tiny bg-cart5'>
<p class="pl-6 pb-6 justify-self-start self-end text-tiny font-bold">Motion Graphics</p>
<img class='mt-6 pb-24 mr-5 place-self-end self-start' src="./assets/pattern-motion-graphics.svg" alt="pattern-motion-graphics">
</div>
</div>
</div>
<section class="bg-primary flex flex-wrap justify-center content-center xs:mx-4 sm:mx-9.4 mx-43 xs:pt-8 pt-16 xs:my-26 sm:my-32 my-34 ">
<div class="text-center flex justify-around sm:justify-between flex-row flex-wrap sm:max-w-[800px] lg:max-w-[1500px]">
<img class=' basis-1/2 max-h-[445px] max-w-[445px] xs:max-w-xs' src="./assets/image_amy.webp" alt="image_amy">
<div class="sm:text-left basis-1/2 min-w-[343px] sm:max-w-[400px] lg:max-w-[549px]">
<h1 class="py-6 font-jakarta font-bold text-2xl xs:text-[26px] sm:text-xlg">I’m Amy, and I’d love to work on your next project</h1>
<p class="text-grey py-6 font-jakarta font-medium text-base xs:text-sm">I love working with others to create beautiful design solutions. I’ve designed everything from brand illustrations to complete mobile apps. I’m also handy with a camera!</p>
<button class=" hover:ease-in hover:duration-200 font-jakarta font-medium bg-neutral text-white text-sm xs:text-xs hover:bg-cart2 xs:px-7 px-11.1 xs:py-2 py-3.5 text-center rounded-3xl">
Free Consultation
</button>
</div>
</div>
</section>
<section class="bg-primary flex flex-wrap justify-center content-center xs:mx-4 sm:mx-9.4 mx-43 xs:pt-8 pt-16 xs:my-26 sm:my-7">
<div>
<h1 class="font-jakarta font-bold text-black text-xlg sm:text-[24px]">My Work</h1>
</div>
<div class=" mt-9 lg:mt-14 max-h-[180px] lg:max-h-[360px] flex flex-row gap-x-3.5 lg:gap-x-7 ">
<img class='rounded-lg' src="./assets/image-slide-1.jpg" alt="">
<img class='rounded-lg' src="./assets/image-slide-2.jpg" alt="">
<img class='rounded-lg' src="./assets/image-slide-3.jpg" alt="">
<img class='rounded-lg' src="./assets/image-slide-4.jpg" alt="">
<img class='rounded-lg' src="./assets/image-slide-5.jpg" alt="">
</div>
<div class="flex justify-between mt-[32px] gap-x-4">
<img class='bg-black p-[24px] rounded-full hover:bg-cart1' src="./assets/icon-arrow-left.svg" alt="">
<img class='bg-black p-[24px] rounded-full hover:bg-cart1' src="./assets/icon-arrow-right.svg" alt="">
</div>
</div>
</section>
<section class= "bg-primary flex justify-center content-center xs:mx-4 sm:mx-9.4 mx-43 xs:pt-8 pt-15 xs:my-26 sm:my-7 ">
<div class="bg-black text-white w-full text-center rounded-xl xs:flex xs:flex-wrap justify-center lg:justify-between content-center sm:max-w-[690px] lg:max-w-[950px]">
<div class='lg:ml-16 lg:pb-[70px] pt-12 lg:max-w-[490px] max-w-[295px] lg:text-left md:basis:1/4 basis:1/2'>
<h1 class="font-jakarta font-bold text-white text-2xl xs:text-[26px] sm:text-xlg">
Book a call with me
</h1>
<p class="py-6 font-jakarta font-medium text-base xs:text-sm">
I’d love to have a chat to see how I can help you. The best first step is for us to discuss your project during a free consultation. Then we can move forward from there.
</p>
</div>
<button class=" hover:ease-in hover:duration-200 lg:max-h-[56px] lg:mr-24 max-h-[44px] self-center basis:1/2 font-bold mb-12 font-jakarta bg-neutral text-white text-sm xs:text-xs hover:bg-cart2 xs:px-7 px-11.1 xs:py-2 py-3.5 text-center rounded-3xl">
Free Consultation
</button>
</div>
</section>
<div class=' bg-primary xs:mx-4 sm:mx-9.4 mx-43 flex justify-center items-center py-[40px]'>
<nav class=" lg:min-w-[1111px] w-full max-w-[1111px] xs:max-w-[343px] sm:max-w-[689px] flex mt-9 mb-17 sx:mx-4 sm:mx-9.4 mx-43 justify-between content-center max-h-[343px]">
<img src="./assets/logo.svg" alt="Logo">
<button class=" hover:ease-in hover:duration-200 font-jakarta max-h-[44px] self-center font-medium bg-black text-white text-sm xs:text-xs hover:bg-cart1 xs:px-7 px-11.1 xs:py-2 py-3.5 text-center rounded-3xl">Free Consultation</button>
</nav>
</div>
</div>
</body>
</html>