forked from toddler4372/Portfolio-Site
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ui-design.html
132 lines (121 loc) · 8.08 KB
/
ui-design.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<meta name="keywords" content="web development, web developer, web page developer, ecommerce web design, ecommerce website design, ecommerce site design, ecommerce web site design, ecommerce website designer, website ecommerce design, ecommerce website developer, ecommerce website, ecommerce website builder, ecommerce websites, best ecommerce website builder, ecommerce website development, best ecommerce website, best ecommerce websites, ecommerce website developers, ecommerce website developer, create ecommerce website, website ecommerce, ecommerce website cost, websites with ecommerce, websites ecommerce, ecommerce website solutions, creating ecommerce website, professional ecommerce website, website builder, website builders, responsive ecommerce design">
<meta name="description" content="Here are my projects as a responsive front end web developer and designer. The majority of my experience is with ecommerce websites, but I also am proficient in Bootstrap, Foundation and other responsive web design platforms.">
<meta name="author" content="Todd Williams">
<title>Todd Williams - Front End Developer - UI Design</title>
<!-- CSS -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400italic,700italic,700,400' rel='stylesheet' type='text/css'>
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="//cdn.rawgit.com/noelboss/featherlight/1.2.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" />
<script type="text/javascript" src="js/latest-tweet.js"></script>
</head>
<body>
<nav class="default-primary-color z-depth-5" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="/" class="brand-logo"><img src="images/logo.svg" class="logo" alt="Logo" /></a>
<ul class="right">
<li><a href="/sites.html">Sites</a></li>
<li><a href="/apps.html">Apps</a></li>
<li><a href="/ui-design.html">UI Design</a></li>
<li><a href="/blog.php">Blog</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li class="title"><div class="sidenav-header"><span class="helper"></span><img src="images/logo.svg" class="sidebar-logo" alt="Sidebar Logo" />Todd Williams</div></li>
<li class="waves-effect waves-dark"><a href="/">Home</a></li>
<li class="waves-effect waves-dark"><a href="/sites.html">Sites</a></li>
<li class="waves-effect waves-dark"><a href="/apps.html">Apps</a></li>
<li class="waves-effect waves-dark"><a href="/ui-design.html">UI Design</a></li>
<li class="waves-effect waves-dark"><a href="/blog.php">Blog</a></li>
<li class="waves-effect waves-dark"><a href="/about.html">About</a></li>
<li class="waves-effect waves-dark"><a href="/contact.html">Contact</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</div>
</div>
</nav>
<div id="sub-header" class="dark-primary-color z-depth-1">
<img src="images/logo.svg" class="logo-large" alt="logo large" />
<h1 class="header center white-text">UI Design</h1>
<div class="row center">
<h5 class="header col s12 white-text">My Most Recent Mockups</h5>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col m12">
<div class="icon-block">
<a href="#" data-featherlight="images/dashboard-1.png" title="Flat Mobile Dashboard Design"><img src="images/dashboard-1.png" alt="dashboards" class="ui-project"></a>
<a href="#" data-featherlight="images/dashboard-2.png" title="Flat Mobile Dashboard Design"><img src="images/dashboard-2.png" alt="dashboards" class="ui-project"></a>
<a href="#" data-featherlight="images/dashboard-3.png" title="Flat Mobile Dashboard Design"><img src="images/dashboard-3.png" alt="dashboards" class="ui-project"></a>
<a href="#" data-featherlight="images/dashboard-4.png" title="Flat Mobile Dashboard Design"><img src="images/dashboard-4.png" alt="dashboards" class="ui-project"></a><br><br>
<a href="#" data-featherlight="images/dashboard-desktop-2.jpg" title="Flat Mobile Dashboard Design"><img src="images/dashboard-desktop-2.jpg" alt="dashboards" class="ui-project-desktop"></a>
<a href="#" data-featherlight="images/dashboard-desktop-1.jpg" title="Flat Mobile Dashboard Design"><img src="images/dashboard-desktop-1.jpg" alt="dashboards" class="ui-project-desktop"></a>
<h5>Resolute Innovation</h5>
<p>I contracted with Resolute Innovation in order to create several mockups for their research and development platform. It's a UI study for mobile and desktop to explore a clean, minimal look on sidebars, hidden dashboard and search results screens. Search filters are accessed through a dropdown menu. It is inspired by flat design and contains some elements of material design. Photoshop was the only tool used.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer accent-color">
<div class="container">
<div class="row">
<div class="col l4 s12">
<div class="social-icons">
<h5 class="white-text center">Let's Connect!</h5>
<p class="grey-text text-lighten-4 center">I love connecting with other developers and designers. Follow me on Twitter, friend request me on Facebook, or contact me on LinkedIn. I would love to hear from you!</p>
<div class="center">
<a href="https://twitter.com/toddlerwilliams" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="http://www.linkedin.com/in/toddcwilliams" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="https://github.com/toddler4372" target="_blank"><i class="fa fa-github"></i></a>
<a href="https://www.facebook.com/profile.php?id=1467081438" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="mailto:[email protected]" target="_top"><i class="fa fa-envelope"></i></a>
</div>
</div>
</div>
<div class="col l4 s12">
<div class="quick-bio">
<h5 class="white-text center">Quick Bio</h5>
<p class="grey-text text-lighten-4 center">I am a Front End Developer living in Redlands, CA. I love creating clean, usable, responsive websites. My passions are family, sports, guitar, and new web technology.</p>
<div class="center">
<img src="images/bio-photo-small.png" class="bio-photo-small" alt="Bio Photo" />
</div>
</div>
</div>
<div class="col l4 s12">
<div class="quick-bio">
<h5 class="white-text center">Latest Tweet</h5>
<div id="example1"></div>
<div class="center">
<i class="fa fa-twitter"></i>
</div>
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container center">
©2015 Todd Williams. All Rights Reserved.
</div>
</div>
</footer>
<!-- Scripts-->
<script type="text/javascript" src="js/twitterFetcher_min.js"></script>
<script type="text/javascript" src="js/exampleUsage.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.2.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>