diff --git a/bird.png b/bird.png new file mode 100644 index 000000000..2dbc3f205 Binary files /dev/null and b/bird.png differ diff --git a/corn.png b/corn.png new file mode 100644 index 000000000..a6de3bc81 Binary files /dev/null and b/corn.png differ diff --git a/css/index.css b/css/index.css index 7dd97920d..03af02185 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,303 @@ -/* Compile your LESS file! */ \ No newline at end of file +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; +} +html, +body { + height: 100%; + font-size: 62.5%; +} +.flex { + display: flex; +} +.container { + display: flex; + flex-direction: column; + margin: 0 auto; + box-sizing: border-box; + background-color: grey; +} +.container header nav { + display: flex; + justify-content: space-evenly; + font-size: 3rem; + text-decoration: none; + align-items: center; + padding: 5rem; +} +@media (max-width: 500px) { + .container header nav { + flex-direction: column; + padding: 2rem; + margin: 2rem; + } +} +.container header nav a { + text-decoration: none; + color: black; +} +.firstbox { + display: flex; + box-sizing: border-box; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + border: 2rem solid black; + border-radius: 2rem; + padding: 5rem 2rem 5rem 5rem; + margin: 0 auto; + width: 70%; +} +@media (max-width: 500px) { + .firstbox { + width: 90%; + } +} +.firstbox h1 { + font-size: 5em; + display: flex; + padding: 2rem; + justify-content: center; +} +@media (max-width: 500px) { + .firstbox h1 { + font-size: 2rem; + } +} +.firstbox .picture img { + border: 1rem solid black; + border-radius: 1rem; + width: 30rem; +} +@media (max-width: 500px) { + .firstbox .picture img { + width: 15rem; + } +} +.intro p { + display: flex; + justify-content: center; + font-size: 2rem; + width: 40rem; + padding: 2rem; +} +@media (max-width: 500px) { + .intro p { + font-size: 1rem; + width: 90%; + } +} +.secondbox { + display: flex; + box-sizing: border-box; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + border: 2rem solid black; + border-radius: 2rem; + padding: 5rem 2rem 5rem 5rem; + margin: 5rem auto; + width: 90%; +} +.secondbox h2 { + font-size: 4rem; +} +.secondbox .portfolioimages img { + width: 20rem; + border: 1rem solid black; + border-radius: 1rem; + margin: 2rem; +} +.thirdbox { + display: flex; + box-sizing: border-box; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + border: 2rem solid black; + border-radius: 2rem; + padding: 2rem 2rem 5rem 5rem; + margin: 4rem auto; + width: 80%; +} +.thirdbox p { + border: 1rem solid black; + border-radius: 2rem; + padding: 1rem; + font-size: 3em; + width: 40rem; +} +@media (max-width: 500px) { + .thirdbox p { + font-size: 1rem; + width: 90%; + } +} +.thirdbox ol { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1rem solid black; + border-radius: 2rem; + padding: 2rem; + font-size: 3em; + width: 40rem; +} +@media (max-width: 500px) { + .thirdbox ol { + font-size: 1rem; + width: 30rem; + margin: 2rem; + } +} +.contact { + display: flex; + box-sizing: border-box; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + border: 2rem solid black; + border-radius: 2rem; + padding: 4em; + margin: 2rem auto; + width: 30%; +} +.contact a { + display: flex; + justify-content: center; + font-size: 3rem; + text-decoration: none; + color: black; +} diff --git a/elephant.png b/elephant.png new file mode 100644 index 000000000..40584d3ad Binary files /dev/null and b/elephant.png differ diff --git a/frog.png b/frog.png new file mode 100644 index 000000000..85152cd4f Binary files /dev/null and b/frog.png differ diff --git a/gate.png b/gate.png new file mode 100644 index 000000000..f7c70b6d3 Binary files /dev/null and b/gate.png differ diff --git a/index.html b/index.html index a7f9e3ad1..44c1d1183 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,53 @@ -

My Resume

+
+
+ +
+
+
+ +
+
+

Tyler Taylor

+

I am a blacksmith with over 7 years of experience. I specialize in architectual iron work and art primarily made from steel and bronze.

+
+
+
+

Portfolio

+
+ + + + + + + + +
+
+
+
+

I was trained by Andrew T. Crawford Ironworks in Atlanta, Ga. After 6 years I moved on to the more architectual size of metal work with Calhoun Design and Metalworks.

+
+
+
    +
  1. Profressional Skills
    2. +
  2. Master Blacksmith
    3. +
  3. Metal Artist
    4. +
  4. CAD Designer
    5. +
+
+
+
+ Contact Me +
+
\ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..780266d5d 100644 --- a/less/index.less +++ b/less/index.less @@ -54,6 +54,167 @@ table { } html, body { - height: 100%; + height: 100%; + font-size: 62.5%; } +.flex{ + display: flex; +} + +.container{ + .flex(); + flex-direction: column; + margin: 0 auto; + box-sizing: border-box; + background-color: grey; +} + +.container header nav{ + .flex(); + justify-content: space-evenly; + font-size: 3rem; + text-decoration: none; + align-items: center; + padding: 5rem; + @media(max-width: 500px){ + flex-direction: column; + padding: 2rem; + margin: 2rem; + } + a{ + text-decoration: none; + color: black; + } +} + +.firstbox{ + display: flex; + box-sizing: border-box; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + border: 2rem solid black; + border-radius: 2rem; + padding: 5rem 2rem 5rem 5rem; + margin: 0 auto; + width: 70%; + @media (max-width:500px){ + width: 90% + } + h1{ + font-size: 5em; + display: flex; + padding: 2rem; + justify-content: center; + @media (max-width:500px){ + font-size: 2rem; + + } + } +} + +.firstbox .picture img{ + border: 1rem solid black; + border-radius: 1rem; + width: 30rem; + @media (max-width: 500px){ + width: 15rem; + } +} + +.intro p{ + display: flex; + justify-content: center; + font-size: 2rem; + width: 40rem; + padding: 2rem; + @media(max-width: 500px){ + font-size: 1rem; + width: 90%; + } +} + +.secondbox{ + display: flex; + box-sizing: border-box; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + border: 2rem solid black; + border-radius: 2rem; + padding: 5rem 2rem 5rem 5rem; + margin: 5rem auto; + width: 90%; + h2{ + font-size: 4rem; + } + .portfolioimages img{ + width: 20rem; + border: 1rem solid black; + border-radius: 1rem; + margin: 2rem; + } +} +.thirdbox{ + display: flex; + box-sizing: border-box; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + border: 2rem solid black; + border-radius: 2rem; + padding: 2rem 2rem 5rem 5rem; + margin: 4rem auto; + width: 80%; + p{ + border: 1rem solid black; + border-radius: 2rem; + padding: 1rem; + font-size: 3em; + width: 40rem; + @media(max-width: 500px){ + font-size: 1rem; + width: 90%; + } + } + ol{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1rem solid black; + border-radius: 2rem; + padding: 2rem; + font-size: 3em; + width: 40rem; + @media(max-width: 500px){ + font-size: 1rem; + width: 30rem; + margin: 2rem; + } + } +} +.contact{ + display: flex; + box-sizing: border-box; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + border: 2rem solid black; + border-radius: 2rem; + padding: 4em; + margin: 2rem auto; + width: 30%; + a{ + display: flex; + justify-content: center; + font-size: 3rem; + text-decoration: none; + color: black + } + +} \ No newline at end of file diff --git a/owl.png b/owl.png new file mode 100644 index 000000000..d650a900f Binary files /dev/null and b/owl.png differ diff --git a/shovel.jpg b/shovel.jpg new file mode 100644 index 000000000..71b366882 Binary files /dev/null and b/shovel.jpg differ diff --git a/sunflowers.png b/sunflowers.png new file mode 100644 index 000000000..c4df0e724 Binary files /dev/null and b/sunflowers.png differ diff --git a/unnamed.png b/unnamed.png new file mode 100644 index 000000000..bb86e5940 Binary files /dev/null and b/unnamed.png differ