From a55bbfb2f1daac1d45bfe1919c0b9f88b302f018 Mon Sep 17 00:00:00 2001 From: Douglas Wilson Date: Fri, 29 Oct 2021 03:23:52 -0400 Subject: [PATCH 1/4] structure, some css --- Wireframe Options/ReadMe.md | 2 +- index.html | 46 +++++++++++++++++++- style/index.css | 85 ++++++++++++++++++++++++++++++++++++- 3 files changed, 130 insertions(+), 3 deletions(-) diff --git a/Wireframe Options/ReadMe.md b/Wireframe Options/ReadMe.md index 2bf501338..59c1fa219 100644 --- a/Wireframe Options/ReadMe.md +++ b/Wireframe Options/ReadMe.md @@ -2,7 +2,7 @@ From the images above, chose a wireframe to guide your design for today's project. Remember that your final project must include: -- [ ] A navigation bar with `About`, `Projects`, and `Contact` pages +- [done ] A navigation bar with `About`, `Projects`, and `Contact` pages - [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you. - [ ] Information about you in place of the given placeholder - [ ] A `My Projects` button (doesn't need to be functional) diff --git a/index.html b/index.html index d01f779ff..bff213be5 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,53 @@ - Document + Douglas Wilson's Site + +
+
+

Douglas Wilson

+
+
+ +
+
+
+
+ filler +
+
+

Douglas Wilson

+ My Projects +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat optio expedita architecto odio quisquam,
nemo harum explicabo eaque alias impedit libero fugiat similique aperiam deleniti labore sequi dolorem in? Possimus.

+
+
+
+
+ + + + + + + + +
+
+ + + + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..6f5b2023b 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,84 @@ -/* Add CSS styling here */ \ No newline at end of file +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; + + 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; +} +* { + box-sizing: border-box; + border: 1px gray solid ; +} +html { + font-size: 62.5%; + +} + +body { + font-size: 1.6rem; + line-height: 1.5; +} + +header { + background-color: gray; + +} + +h1 { + font-size: 5rem; + margin-top: 3%; + margin-left: 2%; +} + +.top-links nav { + margin-top: 1%; + margin-left: 4%; + +} + + + +.top-links nav a{ + color: white; + +} + +.button { + border: 1px darkgrey solid; + background: grey; + padding: .5rem 1rem 0 1rem; + } + +.one { + width: 100%; + display: flex; + justify-content: space-between; +} + +.img1 { + width: 50%; +} + +section-text{ + width: 50% +} + + From 24dc90747038dc30afd91adecd104c9233abe45a Mon Sep 17 00:00:00 2001 From: Douglas Wilson Date: Fri, 29 Oct 2021 04:04:53 -0400 Subject: [PATCH 2/4] added project section below description --- index.html | 30 ++++++++++++++++++---------- style/index.css | 53 ++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 69 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index bff213be5..c2ba9f8f5 100644 --- a/index.html +++ b/index.html @@ -22,24 +22,32 @@

Douglas Wilson

- filler +

Douglas Wilson

- My Projects -

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat optio expedita architecto odio quisquam,
nemo harum explicabo eaque alias impedit libero fugiat similique aperiam deleniti labore sequi dolorem in? Possimus.

+ My Projects +

I have always had a passion to understand computer programming. Now that I am a father of two amazing young boys, I know I want a career in this field. Ideally I will find a remote position full or part time. Happy Coding!

- - - - - - - - +
+
+
+
+
Project 1
+
Project 2
+
Project 3
+
Project 4
+
+
+
+
+
Project 5
+
Project 6
+
Project 7
+
Project 8
diff --git a/style/index.css b/style/index.css index 6f5b2023b..0cdb15f8f 100644 --- a/style/index.css +++ b/style/index.css @@ -25,7 +25,7 @@ footer, header, hgroup, menu, nav, section { } * { box-sizing: border-box; - border: 1px gray solid ; + } html { font-size: 62.5%; @@ -67,18 +67,65 @@ h1 { padding: .5rem 1rem 0 1rem; } + .button2 { + border: 1px darkgrey solid; + background: white; + padding: .5rem 1rem .5rem 1rem; + margin-left: 3%; + margin-bottom: 3%; + color: black; + } + .one { width: 100%; display: flex; justify-content: space-between; + align-items: center; } .img1 { + background-image: url('//www.html.am/images/samples/remarkables_queenstown_new_zealand-300x225.jpg'); + background-repeat: no-repeat; + background-size: cover; + width: 50%; + padding: 20%; + margin: 2%; +} + +.section-text{ + width: 50%; + padding: 0 3rem; } -section-text{ - width: 50% +.section-text p { + margin-top: 2%; + font-size: 2.2rem; } +h2 { + font-size: 3.2rem; + margin-bottom: 2%; +} + +.images { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-wrap: wrap; +} + +.box { + background-color: red; + width: 20%; + height: 20vh; + margin: 1.3%; +} + +.text-below { + text-align: center; + width: 20%; + height: 4vh; + +} From 979a629b8376a0977166c3e22f7ee79815c3b7b7 Mon Sep 17 00:00:00 2001 From: Douglas Wilson Date: Fri, 29 Oct 2021 04:27:37 -0400 Subject: [PATCH 3/4] done with project --- Wireframe Options/ReadMe.md | 10 ++++----- index.html | 18 +++++++-------- style/index.css | 45 +++++++++++++++++++++++++++++++++---- 3 files changed, 55 insertions(+), 18 deletions(-) diff --git a/Wireframe Options/ReadMe.md b/Wireframe Options/ReadMe.md index 59c1fa219..6524cec84 100644 --- a/Wireframe Options/ReadMe.md +++ b/Wireframe Options/ReadMe.md @@ -3,10 +3,10 @@ From the images above, chose a wireframe to guide your design for today's project. Remember that your final project must include: - [done ] A navigation bar with `About`, `Projects`, and `Contact` pages -- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you. -- [ ] Information about you in place of the given placeholder -- [ ] A `My Projects` button (doesn't need to be functional) -- [ ] A `Contact Me` button (doesn't need to be functional) -- [ ] Link navigation items to new HTML pages +- [done ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you. +- [done ] Information about you in place of the given placeholder +- [done ] A `My Projects` button (doesn't need to be functional) +- [done ] A `Contact Me` button (doesn't need to be functional) +- [done ] Link navigation items to new HTML pages Some choices are easier than others, pick something that feels right to you. \ No newline at end of file diff --git a/index.html b/index.html index c2ba9f8f5..24d18dffa 100644 --- a/index.html +++ b/index.html @@ -36,24 +36,24 @@

Douglas Wilson

-
Project 1
-
Project 2
-
Project 3
-
Project 4
+
Project 1
+
Project 2
+
Project 3
+
Project 4
-
Project 5
-
Project 6
-
Project 7
-
Project 8
+
Project 5
+
Project 6
+
Project 7
+
Project 8
diff --git a/style/index.css b/style/index.css index 0cdb15f8f..16b8d2242 100644 --- a/style/index.css +++ b/style/index.css @@ -61,21 +61,33 @@ h1 { } +.top-links nav a:hover{ + color: black; + +} + .button { border: 1px darkgrey solid; background: grey; padding: .5rem 1rem 0 1rem; } +.button:hover, { + background: white; +} - .button2 { +.button2 { border: 1px darkgrey solid; background: white; padding: .5rem 1rem .5rem 1rem; margin-left: 3%; margin-bottom: 3%; color: black; - } +} +.button2:hover { + background: black; + color: white; +} .one { width: 100%; display: flex; @@ -116,7 +128,7 @@ h2 { } .box { - background-color: red; + background-color: gray; width: 20%; height: 20vh; margin: 1.3%; @@ -124,8 +136,33 @@ h2 { .text-below { text-align: center; - width: 20%; + width: 25%; height: 4vh; } +.text-below a:hover { + color: black; +} + +footer { + background-color: gray; + display: flex; + justify-content: center; + align-items: center; + height: 24vh; + flex-direction: column; +} + +h3 { + font-size: 2.8rem; + +} + +footer a { + color: white; +} + +footer a:hover { + color: black; +} \ No newline at end of file From f9150998c028d114718b2a60bc661692f3376ccb Mon Sep 17 00:00:00 2001 From: Douglas O Wilson <92924114+dougwilson0000@users.noreply.github.com> Date: Fri, 29 Oct 2021 04:47:14 -0400 Subject: [PATCH 4/4] Update index.html --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 24d18dffa..70aae6215 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Douglas Wilson's Site - +
@@ -60,4 +60,4 @@

Like What You See

- \ No newline at end of file +