diff --git a/Wireframe Options/ReadMe.md b/Wireframe Options/ReadMe.md index 2bf501338..6524cec84 100644 --- a/Wireframe Options/ReadMe.md +++ b/Wireframe Options/ReadMe.md @@ -2,11 +2,11 @@ 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 -- [ ] 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 ] A navigation bar with `About`, `Projects`, and `Contact` 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 d01f779ff..70aae6215 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,61 @@ - Document + Douglas Wilson's Site + +
+
+

Douglas Wilson

+
+
+ +
+
+
+
+ +
+
+

Douglas Wilson

+ 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
+
+
+ + + + + - \ No newline at end of file + diff --git a/style/index.css b/style/index.css index 440e53514..16b8d2242 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,168 @@ -/* 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; + +} +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; + +} + +.top-links nav a:hover{ + color: black; + +} + +.button { + border: 1px darkgrey solid; + background: grey; + padding: .5rem 1rem 0 1rem; + } +.button:hover, { + background: white; +} + +.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; + 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 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: gray; + width: 20%; + height: 20vh; + margin: 1.3%; +} + +.text-below { + text-align: center; + 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