diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..0b9bb0da9 Binary files /dev/null and b/.DS_Store differ diff --git a/about.html b/about.html index df1043036..543c8368b 100644 --- a/about.html +++ b/about.html @@ -3,7 +3,7 @@ - Document + About

ABOUT

diff --git a/index.html b/index.html index d01f779ff..75b5439da 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,94 @@ + + + + + + - Document + VB Portfolio + +
+

Victoria Blancas

+ +
+ + + - +
+
+
+ +
+
+

Victoria Blancas

+ + +

--> write about coding journey

+
+
+
+ + +
+
+ random +
1
+
+ +
+ +
2
+
+ +
+ +
3
+
+ +
+ +
4
+
+ +
+ +
5
+
+ +
+ +
6
+
+ +
+ +
7
+
+ +
+ +
8
+
+
+ + + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..397f4d9b9 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,229 @@ -/* Add CSS styling here */ \ No newline at end of file +/* Add CSS styling here */ +/* 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; + /* i deleted border:0 bc i want border around things + 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; +} + +/*General Styles*/ +* { + box-sizing: border-box; + max-width: 100%; + /*border: 1px solid grey; comment out after*/ +} + +/*General section below*/ +html{ + font-size:62.5%; +} + +body{ + font-size: 1.6rem; + line-height: 1.5; + padding: 2%; +} + + +h1 { + font-family: 'Roboto Mono', monospace; + font-size: 4rem; + font-weight: bold; + padding: 0.5% 2%; +} + +h2 { + font-family: 'Roboto Mono', monospace; + font-size: 3rem; +} + + +/*Nav section below*/ +header{ + background-color:lightcyan; +} +nav{ + padding: 0% 5%; + display: flex; +} + +a{ + text-decoration: none; + /*border: solid 1px #4f4f4f;*/ + padding: 0.5% 2.5%; + text-align: center; +} + +/*body styles*/ +.top, .middle{ + padding: 2%; + max-width: 100%; +} + +.topImage{ + /*display:flex; --this isn't doing anything*/ + display:inline-block; + width: 50rem; +} + +.left{ + display:flex; + /* border: 1px solid pink; */ + align-items: center; +} + +.text{ + padding-left: 10%; + line-height: 2; +} + +button{ + padding: 2% 7%; +} + +/*middle style*/ +.middle{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: space-between; +} + +.box { + /*display:flex; don't need bc not parent for anything*/ + justify-content: center; + align-items: center; + display:inline-block; + width: 25%; + padding: 20px; +} + +.box img { + width: 100%; +} + +.boxText{ + text-align: center; +} + +/*Footer style*/ +footer{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-color:lightcyan; + padding: 9rem; +} + +footer a{ + background-color: white; +} + + +/*Media Queries*/ +@media(max-width:800px){ + /*everything looks good here still*/ +} + +@media(max-width:500px){ + /*header and nav styles for mobile*/ + header{ + display: flex; + align-items: center; + flex-direction: column; + } + h1 { + font-size: 4rem; + } + nav{ + display: flex; + align-items: center; + flex-direction: column; + } + nav a{ + border: 1px solid #4f4f4f; + padding: 10% 75%; + padding-right: 150%; + } + + /*top section styles for mobile*/ + .top{ + display: flex; + } + .left{ + align-items: center; + flex-direction: column; + } + .topImage{ + padding: 5%; + } + .text{ + text-align: center; + } + + /*middle mobile styles*/ + .box{ + width: 50%; + } + .middle{ + justify-content: center; + } + + /*Footer mobile styles*/ + h2{ + font-size: 2rem; + padding-bottom: 5%; + } + footer{ + padding: 3rem; + } + footer a{ + padding: 2%; + padding-right: 5%; + padding-left: 5%; + font-size: 2rem; + } +} \ No newline at end of file