From f9e01cdc5272a6b2dd6e0437d0629253c4828c30 Mon Sep 17 00:00:00 2001 From: Jeremy Laabs Date: Mon, 8 May 2023 16:26:09 -0500 Subject: [PATCH 1/4] Met mvp - Jeremy Laabs --- about.html | 1 + contact.html | 2 +- index.html | 65 ++++++++++++++++++++++++++++++++++++++++++++++++- style/index.css | 49 ++++++++++++++++++++++++++++++++++++- 4 files changed, 114 insertions(+), 3 deletions(-) diff --git a/about.html b/about.html index df10430368..580e93b59b 100644 --- a/about.html +++ b/about.html @@ -7,5 +7,6 @@

ABOUT

+ \ No newline at end of file diff --git a/contact.html b/contact.html index 7c293bd115..271874f972 100644 --- a/contact.html +++ b/contact.html @@ -2,7 +2,7 @@ - + Document diff --git a/index.html b/index.html index d01f779ffe..c700d2c5d3 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,71 @@ Document + - +
+

Jeremy Laabs

+ +
+
+ +
+

Jeremy Laabs

+ +
+
+
+
+
+ picture 1 +

Portfolio 1

+
+
+ picture 2 +

Portfolio 2

+
+
+ picture 3 +

Portfolio 3

+
+
+ picture 4 +

Portfolio 4

+
+
+
+
+ picture 1 +

Portfolio 5

+
+
+ picture 2 +

Portfolio 6

+
+
+ picture 3 +

Portfolio 7

+
+
+ picture 4 +

Portfolio 8

+
+
+
+ \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e535149..757d03e8ec 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,48 @@ -/* Add CSS styling here */ \ No newline at end of file +/* Add CSS styling here */ +header{ + background-color: lightgray; + padding: 20px; + margin-bottom:15px; +} +footer{ + background-color: lightgray; + padding: 20px; + text-align:center + +} +.topsection{ + display:flex; + flex-direction: row; + justify-content: center; + +} +.class{ + padding:20px; + width: 50%; + align-self: center; + text-align: center; +} +.row{ + display: flex; + justify-content: space-evenly; + flex-direction: row; + padding: 20px; +} +.port-element{ + text-align: center; +} +button{ + background-color: white; + color: black; + border: black solid 1px; + padding: 5px 10px; +} +button:hover{ + background-color: black; + color: white; + border: white solid 1px; +} +button a{ + text-decoration: none; + color: inherit; +} \ No newline at end of file From e298528a6f6cbc527a5e25726e7877fd8ce14313 Mon Sep 17 00:00:00 2001 From: Jeremy Laabs Date: Mon, 8 May 2023 16:30:23 -0500 Subject: [PATCH 2/4] Final Met MVP --- style/index.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/style/index.css b/style/index.css index 757d03e8ec..2426dcfd78 100644 --- a/style/index.css +++ b/style/index.css @@ -1,3 +1,51 @@ +/* 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; +} /* Add CSS styling here */ header{ background-color: lightgray; From 624d777ccba75ffa2582cd0e5392cdb743433391 Mon Sep 17 00:00:00 2001 From: Jeremy Laabs Date: Thu, 11 May 2023 12:34:33 -0500 Subject: [PATCH 3/4] save 1 --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index c700d2c5d3..5271ad323a 100644 --- a/index.html +++ b/index.html @@ -67,7 +67,7 @@

Jeremy Laabs

-

LikeWhat you See?

+

Like What you See?

From a1e11ca0052efa128fcfb8a09d9668774d3cb466 Mon Sep 17 00:00:00 2001 From: Jeremy Laabs Date: Thu, 11 May 2023 16:00:23 -0500 Subject: [PATCH 4/4] MVP plus Stretch Jeremy-Laabs-2 --- index.html | 57 +++++++++++---------- style/index.css | 129 +++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 146 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 5271ad323a..cd1bb1038b 100644 --- a/index.html +++ b/index.html @@ -5,70 +5,69 @@ Document + Jeremy's Portfolio -
-

Jeremy Laabs

- -
+
+

Jeremy Laabs

+ +
- -
-

Jeremy Laabs

- + +
+

Jeremy Laabs

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, quod! Temporibus consequatur alias iure facilis ad tempora unde ipsam est rem eos? Veritatis, officia? Atque ratione fuga nulla in unde. +

-
- picture 1 +
+ Image of portfolio 1

Portfolio 1

- picture 2 + Image of portfolio 2

Portfolio 2

- picture 3 + Image of portfolio 3

Portfolio 3

- picture 4 + Image of portfolio 4

Portfolio 4

- picture 1 + Image of portfolio 5

Portfolio 5

- picture 2 + Image of portfolio 6

Portfolio 6

- picture 3 + Image of portfolio 7

Portfolio 7

- picture 4 + Image of portfolio 8

Portfolio 8

\ No newline at end of file diff --git a/style/index.css b/style/index.css index 2426dcfd78..a9b6f21a01 100644 --- a/style/index.css +++ b/style/index.css @@ -3,7 +3,7 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, +/* 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, @@ -22,8 +22,8 @@ time, mark, audio, video { 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; @@ -45,36 +45,42 @@ q:before, q:after { table { border-collapse: collapse; border-spacing: 0; -} +} */ /* Add CSS styling here */ +*{ + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: solid red; +} header{ background-color: lightgray; padding: 20px; - margin-bottom:15px; + margin-bottom:20px; } footer{ background-color: lightgray; padding: 20px; text-align:center - } .topsection{ display:flex; flex-direction: row; justify-content: center; - } -.class{ - padding:20px; +.toptext{ + padding:25px; width: 50%; align-self: center; text-align: center; + margin:auto; } .row{ display: flex; justify-content: space-evenly; flex-direction: row; - padding: 20px; + padding: 25px; } .port-element{ text-align: center; @@ -82,7 +88,7 @@ footer{ button{ background-color: white; color: black; - border: black solid 1px; + border: solid black 1px; padding: 5px 10px; } button:hover{ @@ -93,4 +99,105 @@ button:hover{ button a{ text-decoration: none; color: inherit; +} + +@media(max-width: 1921px){ + header { + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; + } + nav{ + display: flex; + width: 100%; + justify-content: center; + align-items: center; + } + button{ + width: 10%; + } + .row div{ + display: flex; + width: 100%; + justify-content: space-evenly; + align-items: center; + } + .topsection{ + width:100% + } + .topsection img{ + width: 40%; + } +} +@media(max-width: 1367px){ + .row div{ + width: 22%; + } + .topsection img{ + width: %; + } +} +@media(max-width: 801px){ + .row div{ + width: 22%; + } + .topsection img{ + width: 45%; + } +} +@media(max-width: 501px){ + header { + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; + } + nav{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + button{ + width: 40%; + margin: 1% 0; + } + .topsection{ + display: flex; + flex-direction: column; + align-items: center; + } + .topsection div{ + width: 90%; + } + .row{ + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } + .row div{ + width: 40%; + margin: 5% 0; + } +} +@media(max-width: 361px){ + header { + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; + } + nav { + display: flex; + flex-direction: row; + width: 100%; + } + .topsection img{ + width: 90%; + } + .row div{ + display: flex; + flex-direction: column-reverse; + } } \ No newline at end of file