diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/ReadMe.md b/ReadMe.md index e92754962..f88b5e83f 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -1,6 +1,6 @@ # Flexbox Module Challenge -The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor. +The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor.. ## User Interface and Git diff --git a/images/backgroundImg.jpg b/images/backgroundImg.jpg new file mode 100644 index 000000000..10b866d33 Binary files /dev/null and b/images/backgroundImg.jpg differ diff --git a/images/img1.jpg b/images/img1.jpg new file mode 100644 index 000000000..7b043e59a Binary files /dev/null and b/images/img1.jpg differ diff --git a/images/img2.jpg b/images/img2.jpg new file mode 100644 index 000000000..35e885a21 Binary files /dev/null and b/images/img2.jpg differ diff --git a/images/img3.jpg b/images/img3.jpg new file mode 100644 index 000000000..0fa4a29e0 Binary files /dev/null and b/images/img3.jpg differ diff --git a/images/img4.jpg b/images/img4.jpg new file mode 100644 index 000000000..cd5179723 Binary files /dev/null and b/images/img4.jpg differ diff --git a/images/img5.jpg b/images/img5.jpg new file mode 100644 index 000000000..c7cf202b0 Binary files /dev/null and b/images/img5.jpg differ diff --git a/images/img6.jpg b/images/img6.jpg new file mode 100644 index 000000000..f0262e789 Binary files /dev/null and b/images/img6.jpg differ diff --git a/index.html b/index.html index d01f779ff..56358309c 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,63 @@ - Document + Jason Vann's Portfolio + - +
+ +
+
+
+
+

Jason Vann

+ Projects +
+
+
+
+
+ Multiple displays +

Plenty of Screens

+
+
+ Open Laptop on a table +

Open to begin

+
+
+ Man working in front of multiple screens +

Projects all day long

+
+
+
+
+ Backlit keyboard +

Even working at night

+
+
+ Sound studio image +

Music helps

+
+
+ Code on screen +

Code and more code

+
+
+ \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..e435ca3b1 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,171 @@ -/* Add CSS styling here */ \ No newline at end of file +/*Google Fonts import*/ +@import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap'); +/* 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; + 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; +} + +* { + box-sizing:border-box; /*respect the width I've given you, if I add padding or margin apply it within the given width no in addition to it*/ + padding:0; + margin:0; + max-width:100%; /*you can never be bigger than you parent*/ + /* border:1px solid grey; */ +} + +/*General Styles*/ +html { + font-size: 62.5%; +} + +body { + font-size: 1.8rem; + line-height: 1.5; + color:#4F4F4F; +} + +a { + text-decoration: none; + color: #4F4F4F; +} + +section { + padding: 4% 0; +} +html{ + font-family: 'Squada One', cursive; +} +/*Header*/ +nav{ + display: flex; + justify-content: flex-end; + padding: .25%; +} +.iconName{ + width: 90%; + padding: 1%; + font-size: 175%; +} +nav a{ + padding: 1%; +} + +/*Top*/ + +.topImg{ + height: 90vh; + margin: 2% 5% ; + background-image: url('../images/backgroundImg.jpg'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; +} +.bgButton a{ + background-color: #4F4F4F; + color:antiquewhite; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid black; + border-radius: 10px; +} +.bgButton h2{ + color:antiquewhite; + font-size: 200%; +} +/*Gallery*/ +.gallery1{ + margin: 2% 6%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.gallery1 div{ + width: 21%; +} +.gallery1 div img{ + width: 100%; +} +.gallery1 div p{ + text-align:center; +} + +.gallery2{ + margin: 2% 6%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.gallery2 div{ + width: 21%; +} +.gallery2 div img{ + width: 100%; +} +.gallery2 div p{ + text-align:center; +} +/*Footer*/ +.contactButton{ + margin: 3%; + display: flex; + justify-content: center; + background-color: #A0B09C; + +} +.contactButton a{ + border: 2px solid black; + background-color: antiquewhite; + border-radius: 10px; + padding: 1%; +} + +