-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
244 lines (230 loc) · 11.2 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
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | Designo</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400..500;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.scss" />
</head>
<body>
<!-- Header -->
<header class="header container">
<div class="header__wrapper">
<a href="/index.html"><img class="header__logo" src="/assets/shared/desktop/logo-dark.png" alt="Designo"></a>
<button class="header__toggle" aria-controls="primary-navigation" aria-expanded="false">
<img class="icon-hamburger" src="/assets/shared/mobile/icon-hamburger.svg" alt="presentation"
aria-hidden="true" />
<img class="icon-close" src="/assets/shared/mobile/icon-close.svg" alt="presentation" aria-hidden="true" />
<span class="visually-hidden">Menu</span>
</button>
<nav class="navigation" id="navigation">
<ul aria-label="Primary" role="list" class="nav-list">
<li><a href="/about/index.html">Our Company</a></li>
<li><a href="/locations/index.html">Locations</a></li>
<li><a href="/contact/index.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div id="overlay"></div>
<!-- Main -->
<main class="main-bg">
<section class="hero">
<div class="hero__wrapper">
<div class="hero__content">
<h1 class="hero__title">Award-winning custom designs and digital branding solutions
</h1>
<p class="hero__description">With over 10 years in the industry, we are
experienced in
creating fully
responsive websites, app
design,
and engaging brand experiences. Find out more about our services.</p>
<button class="hero__button">Learn
more</button>
</div>
<div class="hero__image">
<img src="/assets/home/desktop/image-hero-phone.png" alt="presentation" />
</div>
</div>
</section>
<section class="category">
<div class="container">
<div class="category__wrapper">
<!-- Category Items -->
<div class="category__item category--bg1">
<h3>Web Design</h3>
<a href="/web/index.html" class="category__link">
<p>View Projects</p>
<img src="/assets/shared/desktop/icon-right-arrow.svg" alt="icon-right-arrow" />
</a>
</div>
<div class="category__item-container">
<div class="category__item category--bg2">
<h3>App Design</h3>
<a href="/app/index.html" class="category__link">
<p>View Projects</p>
<img src="/assets/shared/desktop/icon-right-arrow.svg" alt="icon-right-arrow" />
</a>
</div>
<div class="category__item category--bg3">
<h3>Graphic Design</h3>
<a href="/graphic/index.html" class="category__link">
<p>View Projects</p>
<img src="/assets/shared/desktop/icon-right-arrow.svg" alt="icon-right-arrow" />
</a>
</div>
</div>
</div>
</div>
</section>
<section class="testimonals">
<div class="container">
<div class="testimonals__wrapper">
<div class="testimonals__item">
<div class="testimonals__image">
<img class="testimonals__bg testimonals--bg1" src="/assets/shared/desktop/bg-pattern-small-circle.svg"
alt="presentation">
<img src="/assets/home/desktop/illustration-passionate.svg" alt="presentation">
</div>
<div>
<h4>Passionate</h4>
<p>Each project starts with an in-depth brand research to ensure we only create products that
serve a
purpose. We merge
art, design, and technology into exciting new solutions.</p>
</div>
</div>
<div class="testimonals__item">
<div class="testimonals__image">
<img class="testimonals__bg testimonals--bg2" src="/assets/shared/desktop/bg-pattern-small-circle.svg"
alt="presentation">
<img src="/assets/home/desktop/illustration-resourceful.svg" alt="presentation">
</div>
<div>
<h4>Resourceful</h4>
<p>Everything that we do has a strategic purpose. We use an agile approach in all of our projects
and value
customer
collaboration. It guarantees superior results that fulfill our clients’ needs.</p>
</div>
</div>
<div class="testimonals__item">
<div class="testimonals__image">
<img class="testimonals__bg testimonals--bg3" src="/assets/shared/desktop/bg-pattern-small-circle.svg"
alt="presentation">
<img src="/assets/home/desktop/illustration-friendly.svg" alt="presentation">
</div>
<div>
<h4>Friendly</h4>
<p>We are a group of enthusiastic folks who know how to put people first. Our success depends on
our
customers, and we
strive to give them the best experience a company can provide.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<!-- Footer__CTA -->
<div class="container">
<div class="footer__CTA">
<div class="footer__content">
<h2>Let's talk about <br>your project</h2>
<p>Ready to take it to the
next
level? Contact us
today and
find out how
our
expertise
can help
your
business grow.</p>
</div>
<button class="footer__button">
Get in Touch
</button>
</div>
</div>
<!-- Footer__Nav -->
<section class="footer__nav">
<div class="container">
<div class="footer__top">
<a class="footer__logo" href="/index.html">
<img src="/assets/shared/desktop/logo-light.png" alt="designo" />
</a>
<hr class="footer__rule footer--ruletop w-full mt-8 mb-6 border-dark-grey border-t-1 md:hidden" />
<nav class="footer__list">
<ul role="list">
<li>
<a href="about/index.html">Our Company</a>
</li>
<li>
<a href="/locations/index.html">Locations</a>
</li>
<li>
<a href="/contact/index.html">Contact</a>
</li>
</ul>
</nav>
</div>
<hr class="footer__rule footer--rulebottom" />
<div class="footer__bottom">
<address class="footer__address">
<span>
<p><b>Designo Central Office</b></p>
<p>3886 Wellington Street, <br>Toronto, Ontario M9C 3J5</p>
</span>
</address>
<address class="footer__address">
<span>
<b>
<p>Contact Us (Central Office)</p>
<p>P : +1 253-863-8967</p>
<p>M : contact@designo.co</p>
</b>
</span>
</address>
<div class="footer__social">
<svg width="24" class="" height="24" xmlns="http://www.w3.org/2000/svg">
<path
d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"
fill-rule="nonzero" />
</svg>
<svg width="24" class="" height="24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.441 16.892c-2.102.144-6.784.144-8.883 0C5.282 16.736 5.017 15.622 5 12c.017-3.629.285-4.736 2.558-4.892 2.099-.144 6.782-.144 8.883 0C18.718 7.264 18.982 8.378 19 12c-.018 3.629-.285 4.736-2.559 4.892zM10 9.658l4.917 2.338L10 14.342V9.658z"
fill-rule="nonzero" />
</svg>
<svg width="24" class="" height="20" xmlns="http://www.w3.org/2000/svg">
<path
d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z"
fill-rule="nonzero" />
</svg>
<svg width="24" class="" height="24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"
fill-rule="nonzero" />
</svg>
<svg width="24" class="" height="24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
fill-rule="nonzero" />
</svg>
</div>
</div>
</div>
</section>
</footer>
<script type="module" src="main.js"></script>
</body>
</html>