From eb6384f7590cc4648e46e20fa748896bc6980457 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 21 Apr 2020 20:33:19 -0500 Subject: [PATCH 1/3] Begining of Preprocessing-I --- css/index.css | 137 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 136 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index 7dd97920d..b56477ed7 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,136 @@ -/* 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%; +} From 6a29de3679f434d8efeb49fa30b8628e9ef4c503 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 22 Apr 2020 21:03:01 -0500 Subject: [PATCH 2/3] Added content to html index and some styling in less. --- css/index.css | 28 ++++++++++++++++++---- index.html | 64 ++++++++++++++++++++++++++++++++++++++++++++++++- less/index.less | 39 +++++++++++++++++++++++++----- 3 files changed, 120 insertions(+), 11 deletions(-) diff --git a/css/index.css b/css/index.css index b56477ed7..f7002cb34 100644 --- a/css/index.css +++ b/css/index.css @@ -86,7 +86,7 @@ video { margin: 0; padding: 0; border: 0; - font-size: 100%; + font-size: 62.5%; font: inherit; vertical-align: baseline; } @@ -126,11 +126,31 @@ table { border-collapse: collapse; border-spacing: 0; } -/* Set every element's box-sizing to border-box */ * { box-sizing: border-box; } -html, +/* Set every element's box-sizing to border-box */ body { - height: 100%; + border: 1px solid grey; +} +header { + background-color: lightgrey; + align-items: baseline; + display: flex; +} +header h1 { + font-size: 2rem; +} +header nav { + width: 80%; + display: flex; + justify-content: flex-end; +} +header nav a { + margin: 2%; + text-decoration: none; + color: black; +} +.about-section { + display: flex; } diff --git a/index.html b/index.html index a7f9e3ad1..e0f6f83cf 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,68 @@ -

My Resume

+
+

Clayton J. Wilkerson

+ +
+
+

A little about me

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ random photo +
+
+
+

Why me?

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Velit dignissim sodales ut eu.

+
+
+

What I do best.

+
  • Lorem
    • +
  • Ipsum
    • +
  • Lorem
    • +
  • Ipsum
    • +
  • Lorem
    • +
    +
    +
    +
    +

    Work History

    +
    +

    Yrs

    +

    Company

    +

    Title

    +

    Tech Used

    +
    +
    +

    1

    +

    Apple

    +

    Software Engineer

    +

    Swift

    +
    +
    +

    2

    +

    Microsoft

    +

    Computer Scientist

    +

    .NET

    +
    +
    +

    3

    +

    Amazon

    +

    Dev Ops

    +

    AWS

    +
    +
    +
    +
    +

    Cell

    +

    email

    +

    github

    +

    twitter

    +
    \ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..30c3793d6 100644 --- a/less/index.less +++ b/less/index.less @@ -20,7 +20,7 @@ time, mark, audio, video { margin: 0; padding: 0; border: 0; - font-size: 100%; + font-size: 62.5%; font: inherit; vertical-align: baseline; } @@ -47,13 +47,40 @@ table { border-collapse: collapse; border-spacing: 0; } - -/* Set every element's box-sizing to border-box */ * { - box-sizing: border-box; + box-sizing: border-box; } +/* Set every element's box-sizing to border-box */ + +//My code begins here -html, body { - height: 100%; +//Mix-Ins +body { + border: 1px solid grey; } +header { + background-color: lightgrey; + display: flex; + align-items: baseline; + display: flex; + h1 { + font-size: 2rem; + } + nav { + width: 80%; + display: flex; + justify-content: flex-end; + a { + margin: 2%; + text-decoration: none; + color: black; + } + a:hover { + + } + } +} +.about-section { + display: flex; +} \ No newline at end of file From 42ac08d304b9952a884dda67fa452c6fbdd7134c Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 23 Apr 2020 22:19:03 -0500 Subject: [PATCH 3/3] completed assignment --- css/index.css | 111 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 7 +-- less/index.less | 110 +++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 219 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index f7002cb34..f8fde4f0f 100644 --- a/css/index.css +++ b/css/index.css @@ -130,8 +130,9 @@ table { box-sizing: border-box; } /* Set every element's box-sizing to border-box */ -body { - border: 1px solid grey; +.ja-center { + justify-content: center; + align-items: center; } header { background-color: lightgrey; @@ -151,6 +152,112 @@ header nav a { text-decoration: none; color: black; } +header nav a:hover { + color: white; +} +@media (max-width: 500px) { + header { + flex-direction: column; + } + header header { + display: flex; + justify-content: center; + align-items: center; + } +} +img { + width: 20rem; + height: auto; +} .about-section { + margin: 1%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.about-section h2 { + font-size: 2rem; + text-align: center; + text-decoration: underline; + padding: 1%; +} +.about-section p { + width: 50%; + text-align: center; + justify-content: center; + align-items: center; +} +.why-me { + display: flex; + justify-content: space-around; + padding: 1%; + background-color: lightgrey; +} +.why-me h2 { + font-size: 1.5rem; +} +.why-me .exp p { + font-size: 1.2rem; + justify-content: center; + width: 45vw; +} +.why-me .pros { + width: 40vw; +} +.why-me .pros li { + border: 1px solid black; + font-size: 1.2rem; +} +@media (max-width: 500px) { + .why-me { + text-align: center; + flex-direction: column; + justify-content: center; + align-items: center; + } +} +.history { + display: flex; + flex-direction: column; + padding: 1%; +} +.history h2 { + font-size: 1.5rem; +} +.history .hist-container { + border: 1px solid black; + display: flex; + flex-direction: column; + justify-content: center; + padding: 1%; +} +.history .hist-container .context { + display: flex; + justify-content: space-between; +} +.history .hist-container .content1 { display: flex; + justify-content: space-between; +} +.history .hist-container .content2 { + display: flex; + justify-content: space-between; +} +.history .hist-container .content3 { + display: flex; + justify-content: space-between; +} +@media (max-width: 500px) { + .history { + justify-content: center; + align-items: center; + } +} +footer { + display: flex; + justify-content: center; +} +footer h4 { + padding: 1%; } diff --git a/index.html b/index.html index e0f6f83cf..5d939cfa9 100644 --- a/index.html +++ b/index.html @@ -24,9 +24,9 @@

    Clayton J. Wilkerson

    + random photo

    A little about me

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    - random photo
    @@ -43,8 +43,8 @@

    What I do best.

    +

    Work History

    -

    Work History

    Yrs

    Company

    @@ -70,9 +70,10 @@

    Dev Ops

    AWS

    +