diff --git a/css/index.css b/css/index.css index 7dd97920d..d65079f1b 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,366 @@ -/* 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-family: 'Roboto Condensed', sans-serif; +} +h2 { + color: #e0e0e0; + font-size: 2rem; + padding-bottom: 4%; + padding-top: 2%; + text-align: center; + text-decoration: none; +} +a { + text-decoration: none; +} +header { + background-image: url("../images/wallpaper.jpg"); + height: 92.5%; + display: flex; + justify-content: left; + flex-direction: column; +} +header h1 { + font-size: 4rem; + color: #e0e0e0; + padding: 12% 0 0 16%; +} +header p { + color: #e0e0e0; + font-size: 1.5rem; + padding: 1% 0 0 16%; + width: 40%; +} +header .navBar { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +header .logo { + color: #e0e0e0; + font-size: 2rem; + padding: 1%; + width: 20%; +} +header nav { + padding: 1%; + width: 30%; +} +header nav a { + text-decoration: none; + color: #e0e0e0; + font-size: 1.5rem; + padding: 1%; +} +header .JeremyImg { + height: 100%; + display: flex; + justify-content: right; + align-items: flex-end; + margin-left: 100%; + position: absolute; + height: calc(100vh - 70px); + transform: translateX(-150%); + transition: transform 0.8s ease-in-out; +} +@media screen and (max-width: 600px) { + header .JeremyImg { + transform: translateX(-65%); + } + header h1 { + padding: 12% 0 0 2%; + width: 40%; + } + header p { + padding: 2% 0 0 2%; + width: 40%; + font-size: 1.5rem; + } + header .navBar { + padding: 0% 3%; + } + header nav { + width: 80%; + align-self: flex-start; + padding-left: 30%; + flex-direction: row; + } + header nav a { + font-size: 1rem; + } +} +@media screen and (min-width: 601px) and (max-width: 1060px) { + header .JeremyImg { + transform: translateX(-90%); + } + header h1 { + padding: 12% 0 0 2%; + width: 40%; + } + header p { + padding: 2% 0 0 2%; + width: 40%; + } + header .navBar { + padding: 0% 3%; + } + header nav { + width: 62%; + align-self: flex-start; + flex-direction: row; + } +} +@media screen and (min-width: 1061px) and (max-width: 1450px) { + header .JeremyImg { + transform: translateX(-100%); + } +} +.myWork { + background-image: url("../images/backgroundTree.jpg"); + background-size: cover; + height: 50rem; + background-repeat: no-repeat; +} +.myWork ul { + display: flex; + justify-content: center; + flex-direction: column; +} +.myWork .backLine { + display: flex; + justify-content: center; + padding-left: 1%; +} +.myWork li { + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + height: 200px; +} +.myWork li img { + height: 201px; +} +.myWork .textContainer { + padding: 5%; + width: 45%; +} +.myWork p { + color: #e0e0e0; + font-size: 1.5rem; +} +@media screen and (max-width: 800px) { + .myWork li { + height: 10%; + flex-direction: column; + } + .myWork .textContainer { + width: 90%; + } + .myWork li img { + height: 10rem; + } +} +@media (max-width: 800px) { + .myWork { + height: 1200px; + } +} +.divider { + background-color: #b9bdce; + background-size: cover; + height: 1%; + background-repeat: no-repeat; +} +.services { + background-image: url("../images/coverphotowolf.png"); + background-size: cover; + height: 400px; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; +} +.services ul { + display: flex; + list-style-type: disc; + flex-direction: column; +} +.services li { + color: #e0e0e0; + font-size: 1.8rem; + padding: 3%; + width: 150%; +} +footer { + background-image: url("../images/wallpaper.jpg"); + background-size: cover; + height: 150px; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; +} +footer nav { + padding: 1%; + width: 15%; + text-align: center; + flex-direction: column; + display: flex; + justify-content: center; + align-items: center; +} +footer nav a { + text-decoration: none; + color: #e0e0e0; + font-size: 1.5rem; + padding: 1%; +} +footer p { + color: #e0e0e0; + font-size: 1.5rem; + padding-top: 4%; +} +button { + border-radius: 8px; + background-color: #1c2f49; + padding: 10%; + text-decoration: none; +} +button:hover { + background-color: #b9bdce; +} diff --git a/images/Jeremy.png b/images/Jeremy.png new file mode 100644 index 000000000..4e17d8b3c Binary files /dev/null and b/images/Jeremy.png differ diff --git a/images/Signature.png b/images/Signature.png new file mode 100644 index 000000000..1c00ceb8a Binary files /dev/null and b/images/Signature.png differ diff --git a/images/backgroundTree.jpg b/images/backgroundTree.jpg new file mode 100644 index 000000000..6b95b514c Binary files /dev/null and b/images/backgroundTree.jpg differ diff --git a/images/coverphotowolf.png b/images/coverphotowolf.png new file mode 100644 index 000000000..a1f73a523 Binary files /dev/null and b/images/coverphotowolf.png differ diff --git a/images/line.png b/images/line.png new file mode 100644 index 000000000..c594d15e0 Binary files /dev/null and b/images/line.png differ diff --git a/images/wallpaper.jpg b/images/wallpaper.jpg new file mode 100644 index 000000000..33747a916 Binary files /dev/null and b/images/wallpaper.jpg differ diff --git a/images/work1.png b/images/work1.png new file mode 100644 index 000000000..55c9a54ed Binary files /dev/null and b/images/work1.png differ diff --git a/images/work2.png b/images/work2.png new file mode 100644 index 000000000..f47245edd Binary files /dev/null and b/images/work2.png differ diff --git a/images/work3.png b/images/work3.png new file mode 100644 index 000000000..a5c3869fb Binary files /dev/null and b/images/work3.png differ diff --git a/index.html b/index.html index a7f9e3ad1..528f970ed 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,84 @@ - - My Resume - + + Jeremy Adams - + -

My Resume

+
+
+
+ + +
+

Hi, I'm Jeremy,

+

I'm a concept artist and illustrator making professional art to make your product stand out.

+
Jeremy
+
+ +
+ +
+

My Work

+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..c437fc429 100644 --- a/less/index.less +++ b/less/index.less @@ -3,7 +3,7 @@ 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, @@ -50,10 +50,304 @@ table { /* Set every element's box-sizing to border-box */ * { - box-sizing: border-box; + box-sizing: border-box; +} + +//Variables +@font-color: #e0e0e0; +@font-type:'Roboto Condensed'; + +//Mixins +.flex(){ + display: flex; + justify-content: center; + align-items: center; } + html, body { - height: 100%; + height: 100%; + font-family: 'Roboto Condensed', sans-serif; +} + +h2{ + color: @font-color; + font-size: 2rem; + padding-bottom: 4%; + padding-top: 2%; + text-align: center; + text-decoration: none; +} + +a{ + text-decoration: none; +} + +header { + background-image: url("../images/wallpaper.jpg"); + height: 92.5%; + display: flex; + justify-content: left; + flex-direction: column; + + h1 { + font-size: 4rem; + color: @font-color; + padding: 12% 0 0 16%; + + } + + p { + color: @font-color; + font-size: 1.5rem; + padding: 1% 0 0 16%; + width: 40%; + } + + .navBar { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .logo{ + color: @font-color; + font-size: 2rem; + padding: 1%; + width: 20%; + } + + nav { + padding: 1%; + width: 30%; + + } + + nav a { + text-decoration: none; + color: @font-color; + font-size: 1.5rem; + padding: 1%; + } + + .JeremyImg { + height: 100%; + display: flex; + justify-content: right; + align-items: flex-end; + margin-left: 100%; + position: absolute; + height: calc(100vh - 70px); + transform: translateX(-150%); + transition: transform 0.8s ease-in-out; + } + + @media screen and (max-width: 600px){ + .JeremyImg{ + transform: translateX(-65%); + } + + h1{ + padding: 12% 0 0 2%; + width: 40%; + } + + p{ + padding: 2% 0 0 2%; + width: 40%; + font-size: 1.5rem; + + } + + .navBar { + padding: 0% 3%; + + } + + nav { + width: 80%; + align-self: flex-start; + padding-left: 30%; + flex-direction: row; + + } + + nav a { + font-size: 1rem; + } + }// @Media + + @media screen and (min-width: 601px) and (max-width: 1060px){ + .JeremyImg{ + transform: translateX(-90%); + } + + h1{ + padding: 12% 0 0 2%; + width: 40%; + } + + p{ + padding: 2% 0 0 2%; + width: 40%; + } + + .navBar { + padding: 0% 3%; + } + + nav { + width: 62%; + align-self: flex-start; + flex-direction: row; + } + }// @Media + + @media screen and (min-width: 1061px) and (max-width: 1450px){ + .JeremyImg{ + transform: translateX(-100%); + } + }// @Media +} //Header + +.myWork { + background-image: url("../images/backgroundTree.jpg"); + background-size: cover; + height: 50rem; + background-repeat: no-repeat; + + + ul{ + display: flex; + justify-content: center; + flex-direction: column; + } + + .backLine { + + display: flex; + justify-content: center; + padding-left: 1%;; + + } + + li { + + .flex(); + flex-direction: row; + height: 200px; + + } + + li img { + height: 201px; + + } + + .textContainer { + padding: 5%; + width: 45%; + } + + p{ + color: @font-color; + font-size: 1.5rem; + } + + + + @media screen and (max-width: 800px){ + + li{ + height: 10%; + flex-direction: column; + } + + .textContainer{ + width: 90%; + } + + li img{ + height: 10rem; + } + + + } + +}//MyWork +@media (max-width: 800px){ +.myWork{ + height: 1200px; +} +} +.divider{ + background-color: #b9bdce; + background-size: cover; + height: 1%; + background-repeat: no-repeat; } +.services { + background-image: url("../images/coverphotowolf.png"); + background-size: cover; + height: 400px; + background-repeat: no-repeat; + .flex(); + + ul{ + display: flex; + list-style-type: disc; + flex-direction: column; + } + + li { + color: @font-color; + font-size: 1.8rem; + padding: 3%; + width: 150%; + } +}//Services + +footer{ + background-image: url("../images/wallpaper.jpg"); + background-size: cover; + height: 150px; + background-repeat: no-repeat; + .flex(); + + nav { + padding: 1%; + width: 15%; + text-align: center; + flex-direction: column; + .flex(); + + } + + nav a { + text-decoration: none; + color: @font-color; + font-size: 1.5rem; + padding: 1%; + } + + p{ + color: @font-color; + font-size: 1.5rem; + padding-top: 4%;; + } + +}//Footer + +button { + border-radius: 8px; + background-color: #1c2f49; + padding: 10%; + text-decoration: none; + + &:hover{ + background-color: #b9bdce; + } +}//Button +