-
Notifications
You must be signed in to change notification settings - Fork 0
/
work-with-me.html
153 lines (147 loc) · 10.6 KB
/
work-with-me.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Freelance Web Designer and Developer</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Montserrat|Quicksand" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="page-header">
<!--Menu -->
<nav class="top-nav">
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="" class="top-nav-link">portfolio</a></li>
<li><a href="" class="top-nav-link">work with me</a></li>
<li><a href="" class=""><span class="accent-text accent-menu">Grace</span></a></li>
<li><a href="" class="top-nav-link">blog</a></li>
<li><a href="" class="top-nav-link">contact</a></li>
</ul>
</nav>
<div class="header-image-work"></div>
</header>
<!-- Work With Me Page -->
<section class="work-with-me-page main">
<article class="main-content">
<div class="wwm-intro-text section-flex">
<h4>You have a vision for your business. You’re passionate about it. You can see every detail of your brand’s design in your head</h4>
<h4>The problem is you can’t communicate your vision to anyone else.</h4>
<div class="content-long">
<p> Maybe you tried working with designers in the past and couldn’t see eye to eye on the final result. Maybe you don’t trust your vision to anyone else and tried to DIY your website and are frustrated with the results.</p>
<p><strong>Don’t worry – Even just having a vision for your business can unleash extraordinary power.</strong></p>
<p><strong>You just need help refining, communicating, and acting upon that vision</strong></p>
<p>We’ll work together to clearly define your brand personality – how exactly you want your business to look and feel. From there, every element of your design system, the colors, fonts, website, and logo will support that personality. At the end of this experience you can feel confident that every aspect of your brand matches your vision</p>
<p><span class="wwm-intro-text-accent">Let me help you translate your vision into a brand identity.</span></p>
<hr class="section-divider">
</div>
<div class="work-process-section section-flex">
<h1>The Work Process</h1>
<div class="work-process-container section-flex">
<div class="work-process-subsection section-flex">
<img src="images/illus-define-project.png" class="content-image" alt="Define the Project">
<div class="content">
<h2>Define the Project</h2>
<p>Through consultations and worksheets, we’ll translate your vision into well defined business and brand goals that will give the project clarity.</p>
</div>
<img src="images/icon-arrow.png" class="icon-arrow" alt="Arrow">
</div>
<div class="work-process-subsection section-flex">
<img src="images/illus-design.png" class="content-image" alt="Design">
<div class="content">
<h2>Design</h2>
<p>Based on our consultation, I›ll draw up mockups of your logo, brand styles, wireframes, and website layouts.</p>
</div>
<img src="images/icon-arrow.png" class="icon-arrow" alt="Arrow">
</div>
<div class="work-process-subsection section-flex">
<img src="images/illus-revise.png" class="content-image" alt="Revise">
<div class="content">
<h2>Revise</h2>
<p>It’s time to stop and check to ensure we’re being true to your vision.</p>
</div>
<img src="images/icon-arrow.png" class="icon-arrow" alt="Arrow">
</div>
<div class="work-process-subsection section-flex">
<img src="images/illus-develop.png" class="content-image" alt="Develop">
<div class="content">
<h2>Develop</h2>
<p>Once the design is finalised, we’ll start setting up your hosting/domain, coding the web pages, and testing for bugs.</p>
</div>
<img src="images/icon-arrow.png" class="icon-arrow" alt="Arrow">
</div>
<div class="work-process-subsection section-flex">
<img src="images/illus-revise-again.png" class="content-image" alt="Revise Again">
<div class="content">
<h2>Revise … Again</h2>
<p>Now that everything is finished, we’ll check and double check that everything is exactly how you want it.</p>
</div>
<img src="images/icon-arrow.png" class="icon-arrow" alt="Arrow">
</div>
<div class="work-process-subsection section-flex">
<img src="images/illus-ship.png" class="content-image" alt="Ship It">
<div class="content ">
<h2>Ship It</h2>
<p>After a final walkthrough to show you how to maintain everything on your own, we’re ready to launch! Yay!</p>
</div>
</div>
<hr class="section-divider">
</div>
</div>
<div class="services-section section-flex">
<h1>Services</h1>
<div class="services-container section-flex">
<img src="images/icon-branding.png" class="content-image" alt="Branding Icon">
<div class="content-long">
<h2>Brand Identity Design</h2>
<h4>You want people to know exactly who you are and what you stand for within seconds of first encountering you or your business. The best way to do this is a brand identity in which every element works together to tell a cohesive story. </h4>
<p>Through one on one consultations, we’ll uncover your vision, who your target audience is, and how you want them to perceive you. From there, we’ll design a logo and styles that all support your branding. These elements, the logo and styles, will be the foundation for the rest of your brand identity (business cards, packaging, marketing materials, etc) ensuring a consistent and engaging experience for anyone interacting with your brand.</p>
</div>
<a href=""><button class="cta-btn">
<p class="cta-btn-text">Plan Your Brand Identity</p>
</button></a>
<hr class="section-divider">
</div>
<div class="services-container section-flex">
<img src="images/icon-web.png" class="content-image" alt="Website Icon">
<div class="content-long">
<h2>Website Design and Development</h2>
<h4>People only stay on a webpage for 10-20 seconds before bouncing away somewhere else. But pages that offer clear value can hold someone’s attention for much longer. If you want people to interact with your website, you have to clearly communicate your brand and value immediately.</h4>
<p>We’ll take your brand identity and apply it to your specific website goals. What is the purpose of this website and does the design support this? What do you want your audience to do and does the design encourage this? We can accomplish this with a fully customised website (WordPress or not) that makes sure all the important stuff shines through in those crucial first seconds. </p>
</div>
<a href=""><button class="cta-btn">
<p class="cta-btn-text">Plan Your Website</p>
</button></a>
<hr class="section-divider">
</div>
<div class="services-container section-flex">
<img src="images/icon-a-la-carte.png" class="content-image" alt="A La Carte Icon">
<div class="content-long">
<h2>A La Carte Services</h2>
<h4>Do you have something specific in mind that doesn’t fit in with the other packages? No problem, I love working on a variety of projects. Go ahead and ask!</h4>
</div>
<a href=""><button class="cta-btn">
<p class="cta-btn-text">Plan Your Custom Project</p>
</button></a>
<hr class="section-divider">
</div>
</div>
</div>
</article>
</section>
<!-- Footer -->
<footer>
<div class="newsletter-container">
<input type="email" class="newsletter-input" placeholder="email address">
<input type="button" class="newsletter-button" value="Join the Newsletter">
</div>
<div class="social-container">
<a href=""><img src="images/icon-facebook.png" class="social-btn" alt="Facebook"></a>
<a href=""><img src="images/icon-twitter.png" class="social-btn" alt="Twitter"></a>
<a href=""><img src="images/icon-linkedin.png" class="social-btn" alt="Linkedin"></a>
<a href=""><img src="images/icon-behance.png" class="social-btn" alt="Behance"></a>
</div>
</footer>
</body>
</html>