-
Notifications
You must be signed in to change notification settings - Fork 0
/
ecell.html
110 lines (105 loc) · 5.83 KB
/
ecell.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
<!doctype html>
<html lang="en" class="no-js">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-4946886-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-4946886-2');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" />
<meta name="description" content="Andy Patrick - Scotsman, UX Designer, Art Director - Ontario, Canada" />
<meta name="keywords" content="Andy Patrick, andrew patrick, andy patrick graphic, andy patrick design, UX Designer Ontario, UX Designer Canada, Art Director Ontario, UX designer hamilton, art director hamilton" />
<title>Andy Patrick - Work - Subaru Dealer</title>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<main>
<div class="cd-subaru cd-main-content">
<div class="heady">
<div class="logo"><a class="cd-btn" href="index.html#top" data-type="page-transition"><img src="images/logo.svg" alt="logo"/></a></div>
<div class="navitems">
<div class="navcolumn">
<h2>About</h2>
<a class="cd-btn" href="index.html" data-type="page-transition">Home</a>
<a class="cd-btn" href="about.html#top" data-type="page-transition">My Story</a>
</div>
<div class="navcolumn">
<h2>Work</h2>
<a class="cd-btn" href="londonborn.html#top" data-type="page-transition">London Born</a>
<p>Subaru</p>
<a class="cd-btn" href="valeyo.html#top" data-type="page-transition">Valeyo</a>
</div>
<div class="navcolumn">
<h2>Contact</h2>
<a class="cd-btn" href="contact.html#top" data-type="page-transition">Let's Talk</a>
</div>
</div>
<div class="bubbleback"></div>
<div class="bubble"></div>
<div class="bubble-wrap">
<div class="bar first"></div>
<div class="bar second"></div>
<div class="bar third"></div>
</div>
</div>
<a class="leftylink cd-btn" href="about.html" data-type="page-transition">About Me</a>
<a class="rightylink cd-btn" href="contact.html" data-type="page-transition">Contact Me</a>
<div class="leftbar"><div class="footleft"><p>© Andy Patrick 2018</p></div></div>
<div class="rightbar"><div class="footright"><a href="https://dribbble.com/handyandydesign" target="_blank"><img src="images/Dribbble.png" width="" height="" alt=""/></a><a href="https://twitter.com/handyandydesign" target="_blank"><img src="images/Twitter.png" width="" height="" alt=""/></a><a href="https://www.linkedin.com/in/andy-patrick-09a1b425/" target="_blank"><img src="images/linkedin.png" width="" height="" alt=""/></a></div></div>
<div class="wrapperwork">
<div class="worksubarubanner"><a name="top"></a><div class="bannertxt">
<div class="workbannersubpic"><img src="images/key.png" width="" height="" alt=""/></div>
<div class="bannersplat">
<img class="splatoverlay" src="images/splatterdark.png" width="" height="" alt=""/>
<div class="fluid lbdark">
</div>
</div>
<h1 class="fade-in">Subaru</h1>
</div>
</div>
<div class="workpix subpic"><img src="images/subaru-device.png" width="" height="" alt=""/></div>
<div class="workintrocont"><div class="workintrobox"><h2>More cars. Fewer starbursts.</h2><p>This Subaru Dealer was frustrated. Car dealer websites were all too busy an difficult to use. They were looking for a clean and modern design that focused on user needs – not flashy promotions. The result was a modern but functional design that still leads the way for all car dealerships.</p></div></div>
<div class="wires group">
<div class="wiresleft"><h2>Finding vehicles made easy.</h2><p>Help users find their car in as few clicks as possible. That was the main goal. To make this possible, I included a vehicle search right in the banner. I also asked myself the main questions I would ask if I were looking to buy a car myself and gave directional callouts for each of them to help people get there faster.</p></div>
<div class="wiresright hideme"><img src="images/work-sub-wires.png" width="" height="" alt=""/></div>
</div>
<div class="brandpic"><div class="brandpicoversub"><img src="images/work-sub-car.png" width="" height="" alt=""/></div>
<div class="fluiddark subblob">
</div>
</div>
<div class="fontsncolours group"><h2 class="hideme">Fonts & Colours</h2>
<div class="font hideme"><img src="images/subfont.png" width="" height="" alt=""/></div><div class="colours hideme"><img src="images/subcar.png" width="" height="" alt=""/></div>
</div>
<div class="mobileshots">
<div class="shot1"><img src="images/work-sub-phone1.png" width="" height="" alt=""/></div>
<div class="shot2"><img src="images/work-sub-phone3.png" width="" height="" alt=""/></div>
<div class="shot3"><img src="images/work-sub-phone2.png" width="" height="" alt=""/></div>
</div>
<div class="fullshot"><img src="images/work-sub-full.png" width="" height="" alt=""/></div>
<div class="nextvalbanner">
<a class="cd-btn" href="valeyo.html" data-type="page-transition">Up next: Valeyo</a>
</div>
</div></div>
</main>
<div class="cd-cover-layer"></div>
<div class="cd-loading-bar"></div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/in-view.min.js'></script>
<script src="js/preloader.js"></script>
<script src="js/blob.js"></script>
<script src="js/wordz.js"></script>
<script src="js/index.js"></script>
<script src="js/plane.js"></script>
</body>
</html>