Skip to content

Commit 34ea474

Browse files
d13d13
committed
Adds adds basic formatting to the page markup
1 parent a98b02f commit 34ea474

3 files changed

Lines changed: 206 additions & 27 deletions

File tree

‎assets/styles.css‎

Lines changed: 64 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -25,26 +25,26 @@
2525
</header>
2626
<div class="content">
2727
<section class="section section--intro">
28-
<h1>
28+
<h1 class="section__title">
2929
Hi, my name is Keith
30-
<small>I make pixels &amp; divs pretty</small>
30+
<small class="section__subtitle">I make pixels &amp; divs pretty</small>
3131
</h1>
3232
<p>An accomplished User Interface Developer and Designer with a passion for creating awesome user experiences for web and mobile.</p>
3333
</section>
3434
<section class="section section--bio">
35-
<h1>Keith Daulton &mdash;</h1>
35+
<h1 class="section__title">Keith Daulton &mdash;</h1>
3636
<p>
3737
A leader in user-interface development and design with over 14 years of experience and a proven track record for delivering scalable, interactive and multi-device web experiences including: online stores, single-page applications, marketing apps, widgets, microsites, landing pages and social-networking websites.
3838
</p>
3939
</section>
4040
<section class="section section--portfolio">
41-
<h1>
41+
<h1 class="section__title">
4242
Portfolio
43-
<small>because seeing is much more fun</small>
43+
<small class="section__subtitle">because seeing is much more fun</small>
4444
</h1>
4545
<div class="portfolio">
4646
<figure class="portfolio__item">
47-
<img src="http://dev.d13design.com/assets/images/port/port_sparx_prev.png" alt="Sparx site design">
47+
<img class="portfolio__image" src="http://dev.d13design.com/assets/images/port/port_sparx_prev.png" alt="Sparx site design">
4848
<figcaption>
4949
<h2 class="portfolio__name">Sparx</h2>
5050
<dl>
@@ -60,7 +60,7 @@ <h2 class="portfolio__name">Sparx</h2>
6060
</figcaption>
6161
</figure>
6262
<figure class="portfolio__item">
63-
<img src="http://dev.d13design.com/assets/images/port/port_dpi_prev.png" alt="Dynamic Partners International Website">
63+
<img class="portfolio__image" src="http://dev.d13design.com/assets/images/port/port_dpi_prev.png" alt="Dynamic Partners International Website">
6464
<figcaption>
6565
<h2 class="portfolio__name">Dynamic Partners International</h2>
6666
<dl>
@@ -77,7 +77,7 @@ <h2 class="portfolio__name">Dynamic Partners International</h2>
7777
</figcaption>
7878
</figure>
7979
<figure class="portfolio__item">
80-
<img src="http://dev.d13design.com/assets/images/port/port_bhpm_prev.png" alt="BHP Markets Website">
80+
<img class="portfolio__image" src="http://dev.d13design.com/assets/images/port/port_bhpm_prev.png" alt="BHP Markets Website">
8181
<figcaption>
8282
<h2 class="portfolio__name">BHP Markets</h2>
8383
<dl>
@@ -93,7 +93,7 @@ <h2 class="portfolio__name">BHP Markets</h2>
9393
</figcaption>
9494
</figure>
9595
<figure class="portfolio__item">
96-
<img src="http://dev.d13design.com/assets/images/port/port_restee-v1-app_prev.png" alt="RESTEE Mobile Design">
96+
<img class="portfolio__image" src="http://dev.d13design.com/assets/images/port/port_restee-v1-app_prev.png" alt="RESTEE Mobile Design">
9797
<figcaption>
9898
<h2 class="portfolio__name">RESTEE Mobile</h2>
9999
<dl>
@@ -109,7 +109,7 @@ <h2 class="portfolio__name">RESTEE Mobile</h2>
109109
</figcaption>
110110
</figure>
111111
<figure class="portfolio__item">
112-
<img src="http://dev.d13design.com/assets/images/port/port_rojo-v2_prev.png" alt="Rojo Solutions Corporate Site">
112+
<img class="portfolio__image" src="http://dev.d13design.com/assets/images/port/port_rojo-v2_prev.png" alt="Rojo Solutions Corporate Site">
113113
<figcaption>
114114
<h2 class="portfolio__name">Rojo Solutions v2</h2>
115115
<dl>
@@ -125,7 +125,7 @@ <h2 class="portfolio__name">Rojo Solutions v2</h2>
125125
</figcaption>
126126
</figure>
127127
<figure class="portfolio__item">
128-
<img src="http://dev.d13design.com/assets/images/port/port_colors-logo_prev.png" alt="Colors App Logo">
128+
<img class="portfolio__image" src="http://dev.d13design.com/assets/images/port/port_colors-logo_prev.png" alt="Colors App Logo">
129129
<figcaption>
130130
<h2 class="portfolio__name">Colors App</h2>
131131
<dl>
@@ -141,7 +141,7 @@ <h2 class="portfolio__name">Colors App</h2>
141141
</figcaption>
142142
</figure>
143143
<figure class="portfolio__item">
144-
<img src="http://keithdaulton.com/assets/images/port/port_spirit_prev.png" alt="Spirit Airlines Site">
144+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_spirit_prev.png" alt="Spirit Airlines Site">
145145
<figcaption>
146146
<h2 class="portfolio__name">Spirit Airlines</h2>
147147
<dl>
@@ -158,7 +158,7 @@ <h2 class="portfolio__name">Spirit Airlines</h2>
158158
</figcaption>
159159
</figure>
160160
<figure class="portfolio__item">
161-
<img src="http://keithdaulton.com/assets/images/port/port_betterfly_prev.png" alt="Betterfly.com Homepage Redesign">
161+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_betterfly_prev.png" alt="Betterfly.com Homepage Redesign">
162162
<figcaption>
163163
<h2 class="portfolio__name">Betterfly.com</h2>
164164
<dl>
@@ -174,7 +174,7 @@ <h2 class="portfolio__name">Betterfly.com</h2>
174174
</figcaption>
175175
</figure>
176176
<figure class="portfolio__item">
177-
<img src="http://keithdaulton.com/assets/images/port/port_rojosolutions_prev.png" alt="ROJO Solutions Corporate Site">
177+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_rojosolutions_prev.png" alt="ROJO Solutions Corporate Site">
178178
<figcaption>
179179
<h2 class="portfolio__name">Rojo Solutions</h2>
180180
<dl>
@@ -190,7 +190,7 @@ <h2 class="portfolio__name">Rojo Solutions</h2>
190190
</figcaption>
191191
</figure>
192192
<figure class="portfolio__item">
193-
<img src="http://keithdaulton.com/assets/images/port/port_d13design_prev.png" alt="D13 Design Corporate Site">
193+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_d13design_prev.png" alt="D13 Design Corporate Site">
194194
<figcaption>
195195
<h2 class="portfolio__name">D13 Design</h2>
196196
<dl>
@@ -207,7 +207,7 @@ <h2 class="portfolio__name">D13 Design</h2>
207207
</figcaption>
208208
</figure>
209209
<figure class="portfolio__item">
210-
<img src="http://keithdaulton.com/assets/images/port/port_drghersi_prev.png" alt="Marcelo Ghersi, M.D., P.A Site">
210+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_drghersi_prev.png" alt="Marcelo Ghersi, M.D., P.A Site">
211211
<figcaption>
212212
<h2 class="portfolio__name">Marcelo Ghersi, M.D., P.A</h2>
213213
<dl>
@@ -223,7 +223,7 @@ <h2 class="portfolio__name">Marcelo Ghersi, M.D., P.A</h2>
223223
</figcaption>
224224
</figure>
225225
<figure class="portfolio__item">
226-
<img src="http://keithdaulton.com/assets/images/port/port_cybertek_prev.png" alt="Cybertek Solutions Corporate Site">
226+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_cybertek_prev.png" alt="Cybertek Solutions Corporate Site">
227227
<figcaption>
228228
<h2 class="portfolio__name">CyberTek Solutions</h2>
229229
<dl>
@@ -240,7 +240,7 @@ <h2 class="portfolio__name">CyberTek Solutions</h2>
240240
</figcaption>
241241
</figure>
242242
<figure class="portfolio__item">
243-
<img src="http://keithdaulton.com/assets/images/port/port_bahamas_prev.png" alt="Bahama Cruise Vacations Site">
243+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_bahamas_prev.png" alt="Bahama Cruise Vacations Site">
244244
<figcaption>
245245
<h2 class="portfolio__name">Bahama Cruise Vacations</h2>
246246
<dl>
@@ -256,7 +256,7 @@ <h2 class="portfolio__name">Bahama Cruise Vacations</h2>
256256
</figcaption>
257257
</figure>
258258
<figure class="portfolio__item">
259-
<img src="http://keithdaulton.com/assets/images/port/port_dreammaker_prev.png" alt="DreamMaker Miami Company Site">
259+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_dreammaker_prev.png" alt="DreamMaker Miami Company Site">
260260
<figcaption>
261261
<h2 class="portfolio__name">DreamMaker Miami</h2>
262262
<dl>
@@ -272,7 +272,7 @@ <h2 class="portfolio__name">DreamMaker Miami</h2>
272272
</figcaption>
273273
</figure>
274274
<figure class="portfolio__item">
275-
<img src="http://keithdaulton.com/assets/images/port/port_dscripted_prev.png" alt="DScripted Wordpress Site">
275+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_dscripted_prev.png" alt="DScripted Wordpress Site">
276276
<figcaption>
277277
<h2 class="portfolio__name">DScripted</h2>
278278
<dl>
@@ -288,7 +288,7 @@ <h2 class="portfolio__name">DScripted</h2>
288288
</figcaption>
289289
</figure>
290290
<figure class="portfolio__item">
291-
<img src="http://keithdaulton.com/assets/images/port/port_efrai_prev.png" alt="Efrai Corporate Site">
291+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_efrai_prev.png" alt="Efrai Corporate Site">
292292
<figcaption>
293293
<h2 class="portfolio__name">Efrai</h2>
294294
<dl>
@@ -304,7 +304,7 @@ <h2 class="portfolio__name">Efrai</h2>
304304
</figcaption>
305305
</figure>
306306
<figure class="portfolio__item">
307-
<img src="http://keithdaulton.com/assets/images/port/port_rosenbaumcontemporary_prev.png" alt="Rosenbaum Contemporary Corporate Site">
307+
<img class="portfolio__image" src="http://keithdaulton.com/assets/images/port/port_rosenbaumcontemporary_prev.png" alt="Rosenbaum Contemporary Corporate Site">
308308
<figcaption>
309309
<h2 class="portfolio__name">Rosenbaum Contemporary</h2>
310310
<dl>
@@ -322,7 +322,7 @@ <h2 class="portfolio__name">Rosenbaum Contemporary</h2>
322322
</div>
323323
</section>
324324
<section class="section section--experience">
325-
<h1>Experience</h1>
325+
<h1 class="section__title">Experience</h1>
326326
<h2>Core Competencies</h2>
327327
<ul>
328328
<li>mobile-first and responsive web design</li>
@@ -356,7 +356,7 @@ <h2>Technical Competencies</h2>
356356
</dl>
357357
</section>
358358
<section class="section section--skunkworks">
359-
<h1>Skunkworks</h1>
359+
<h1 class="section__title">Skunkworks</h1>
360360
<h2>BEM + LESS</h2>
361361
<script src="https://gist.github.com/d13/90aa65b955907209c430.js"></script>
362362
<h2>Node.js: XML API hell</h2>
@@ -365,7 +365,7 @@ <h2>LESS: variables as mixins</h2>
365365
<script src="https://gist.github.com/d13/b31489dd37e0f34b5175.js"></script>
366366
</section>
367367
<section class="section section--contact">
368-
<h1>Contact</h1>
368+
<h1 class="section__title">Contact</h1>
369369
<dl>
370370
<dt>Address:</dt>
371371
<dd>

‎src/styles/styles.scss‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,121 @@
1+
*, *:before, *:after {
2+
box-sizing: border-box;
3+
}
4+
5+
html {
6+
text-size-adjust: 100%;
7+
}
8+
19
body {
210
margin: 0;
311
padding: 0;
12+
13+
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
14+
font-size: 14px;
15+
line-height: 1.2;
16+
17+
color: #333;
18+
}
19+
20+
a {
21+
color: #2d8af0;
22+
}
23+
24+
25+
// ----------------------------
26+
// header
27+
// ----------------------------
28+
29+
.header {
30+
background-color: #d4d8dc;
31+
padding: 1em;
32+
}
33+
34+
35+
// ----------------------------
36+
// brand
37+
// ----------------------------
38+
39+
.brand {
40+
font-size: 2.4em;
41+
}
42+
43+
.brand__Link {
44+
color: #333;
45+
text-decoration: none;
46+
}
47+
48+
.brand__name {}
49+
50+
51+
// ----------------------------
52+
// menu
53+
// ----------------------------
54+
55+
.menu {
56+
font-size: 18px;
57+
}
58+
59+
.menu__list {
60+
list-style: none;
61+
padding-left: 0;
62+
}
63+
.menu__item {}
64+
.menu__link {
65+
color: #333;
66+
text-decoration: none;
67+
}
68+
69+
70+
// ----------------------------
71+
// content
72+
// ----------------------------
73+
74+
.content {}
75+
76+
77+
// ----------------------------
78+
// section
79+
// ----------------------------
80+
81+
.section {
82+
padding: 1em;
83+
}
84+
.section__title {
85+
font-weight: normal;
86+
font-size: 2.4em;
87+
}
88+
.section__subtitle {
89+
display: block;
90+
font-size: 0.6em;
91+
color: #666;
92+
}
93+
94+
95+
// ----------------------------
96+
// portfolio
97+
// ----------------------------
98+
99+
.portfolio {}
100+
.portfolio__item {
101+
margin-left: 0;
102+
margin-right: 0;
103+
}
104+
.portfolio__image {
105+
max-width: 100%;
106+
height: auto;
107+
}
108+
.portfolio__name {}
109+
.portfolio__details {}
110+
111+
112+
113+
// ----------------------------
114+
// footer
115+
// ----------------------------
116+
117+
.footer {
118+
padding: 1em;
119+
background: #666;
120+
color: #eaeaea;
4121
}

0 commit comments

Comments
 (0)