diff --git a/HONK.PNG b/HONK.PNG new file mode 100644 index 000000000..837bd0c0b Binary files /dev/null and b/HONK.PNG differ diff --git a/cat.jpg b/cat.jpg new file mode 100644 index 000000000..a93ec177b Binary files /dev/null and b/cat.jpg differ diff --git a/contact.html b/contact.html index 7c293bd11..d69253447 100644 --- a/contact.html +++ b/contact.html @@ -3,9 +3,42 @@ - Document + + + Contact -

CONTACT

+
+

Rococo Code

+ +
+
+

CONTACT

+ +
+ + + + +
+ +
\ No newline at end of file diff --git a/cool.jpg b/cool.jpg new file mode 100644 index 000000000..eb1bd0fac Binary files /dev/null and b/cool.jpg differ diff --git a/cow.jpg b/cow.jpg new file mode 100644 index 000000000..7b0584db1 Binary files /dev/null and b/cow.jpg differ diff --git a/doggo.jpg b/doggo.jpg new file mode 100644 index 000000000..d181e8b66 Binary files /dev/null and b/doggo.jpg differ diff --git a/fun.jpg b/fun.jpg new file mode 100644 index 000000000..653c329ae Binary files /dev/null and b/fun.jpg differ diff --git a/goose.jpg b/goose.jpg new file mode 100644 index 000000000..79d77426c Binary files /dev/null and b/goose.jpg differ diff --git a/index.html b/index.html index d01f779ff..c62b7c0a3 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,45 @@ - Document + + + Rococo Code - +
+

Rococo Code

+ +
+
+
+ screenshot of library database project +
+

Alice Chang

+ My Projects +

Full-time web dev student at Lamba School learning how to code! My dream job would be working remotely building educational games. I love learning new things and am excited to learn programming because people say you never get bored.

+
+
+
+
screenshot of Untitled Goose Game fan siteHONK!
+
photo of a highland cattleMoo
+
black lab puppyWoof
+
kitten head popping out of a bagMeow
+
ice floesCool
+
pineapples with party hats and sunglasses and balloonsFun
+
handful of chili peppersSpicy
+
gift box wrapped with ribbonSpecial
+
+
+ \ No newline at end of file diff --git a/linkedin.png b/linkedin.png new file mode 100644 index 000000000..c7384edbb Binary files /dev/null and b/linkedin.png differ diff --git a/special.jpg b/special.jpg new file mode 100644 index 000000000..b98be101e Binary files /dev/null and b/special.jpg differ diff --git a/spicy.jpg b/spicy.jpg new file mode 100644 index 000000000..b000d859d Binary files /dev/null and b/spicy.jpg differ diff --git a/stacks.PNG b/stacks.PNG new file mode 100644 index 000000000..26c1db128 Binary files /dev/null and b/stacks.PNG differ diff --git a/style/contact.css b/style/contact.css new file mode 100644 index 000000000..ba40f32ea --- /dev/null +++ b/style/contact.css @@ -0,0 +1,134 @@ +/*#region css reset */ +/* 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; +} +/*#endregion*/ + +:root { + --dark-color2: #12095F; + --med-dark-color2: #211778; + --med-color2: #392E96; + --med-light-color2: #574EA4; + --light-color2:#867ECA; + --dark-color1: #001c1a; + --med-dark-color1: #076966; + --med-color1: #1A837F; + --med-light-color1: #39908C; + --light-color1: #6ABAB7; + --offwhite: #dbdbdb; +} +html { + font-size: 62.5%; +} + +body { + position: absolute; + font-size: 2rem; + font-family: 'Poppins', sans-serif; + background-color: var(--light-color1); +} + +a { + text-decoration: none; + color: white; +} + +img { + box-shadow: .5rem .5rem 4rem -0.5rem black; /*thanks to erick in slack!*/ +} + + +/*#region nav*/ +header { + position: fixed; + z-index: 2; + width: 100%; + height: 13%; + background-color: var(--med-color1); + padding: 1%; +} + +h1 { + font-family: 'Mitr', sans-serif; + font-size: 5rem; + margin-bottom: 1.5%; + margin-left: 0.5%; + color: var(--med-dark-color2); +} + +nav a { + background-color: var(--med-dark-color2); + color: var(--offwhite); + border-radius: 15px; + padding: 0.2% 0.5%; + margin-left: 0.5%; +} + +/*#endregion*/ + + +main { + margin-top: 10%; + width: 100vw; + text-align: center; +} + +form { + display: flex; + flex-direction: column; + width: 50%; + margin: 0 auto; +} + +input { + height: 3rem; +} + +textarea { + height: 20rem; +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..1383b0fec 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,271 @@ -/* Add CSS styling here */ \ No newline at end of file +/*#region css reset */ +/* 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; +} +/*#endregion*/ + +:root { + --dark-color2: #12095F; + --med-dark-color2: #211778; + --med-color2: #392E96; + --med-light-color2: #574EA4; + --light-color2:#867ECA; + --dark-color1: #001c1a; + --med-dark-color1: #076966; + --med-color1: #1A837F; + --med-light-color1: #39908C; + --light-color1: #6ABAB7; + --offwhite: #dbdbdb; +} +html { + font-size: 62.5%; +} + +body { + position: absolute; + font-size: 2rem; + font-family: 'Poppins', sans-serif; + background-color: var(--light-color1); +} + +a { + text-decoration: none; + color: white; +} + +img { + box-shadow: .5rem .5rem 4rem -0.5rem black; /*thanks to erick in slack!*/ +} + + +/*#region nav*/ +header { + position: fixed; + z-index: 2; + width: 100%; + height: 13%; + background-color: var(--med-color1); + padding: 1%; +} + +h1 { + font-family: 'Mitr', sans-serif; + font-size: 5rem; + margin-bottom: 1.5%; + margin-left: 0.5%; + color: var(--med-dark-color2); +} + +nav a { + background-color: var(--med-dark-color2); + color: var(--offwhite); + border-radius: 15px; + padding: 0.2% 0.5%; + margin-left: 0.5%; +} + +/*#endregion*/ + +/*#region intro*/ +.intro { + display: flex; + flex-direction: column; + margin: 13% 2% 2% 2%; +} + +.intro img { + position: absolute; + width: 35vw; + border: 4px groove var(--med-dark-color2); +} + +.intro img:hover { + margin: -2%; + width: 40vw; +} + +.intro div { + display: flex; + flex-direction: column; + margin-top: 1%; + margin-left: 40%; + line-height: 3rem; +} + +h2 { + font-size: 5rem; + margin-bottom: 3%; +} + +.intro div a { + font-size: 2.5rem; + background-color: var(--med-dark-color2); + width: max-content; + padding: 1% 3%; + border-radius: 25px; + color: var(--offwhite); + margin-bottom: 2%; +} + +/*#endregion*/ + + +/*#region main*/ +.projects { + display: flex; + flex-wrap: wrap; + margin: 10% 2% 5%; + text-align: center; + height: 47vw; +} +.projects div { + margin: 2%; +} +.projects img { + width: 19vw; + height: 19vw; + object-fit: cover; + display: block; +} + +.projects img:hover { + width: 22vw; + height: 22vw; +} +.placeholder { + opacity: 0.5; +} +/*#endregion*/ + +/*#region footer*/ +footer { + text-align: center; +} + + +.contact-me { + display: block; + /* margin: 1% 40% 1% 44%; + background-color: var(--dark-color2); + color: white; + width: max-content; + padding: 0.5%; + border-radius: 25px; */ + margin: 1% 0; + color: var(--dark-color2); +} + +.social-media { + width: 2vw; + margin-bottom: 3%; +} +/*#endregion*/ + +@media only screen and (max-width: 550px) { + body { + font-size: 1rem; + } + + header { + text-align: center; + max-height: 9%; + } + + h1 { + font-size: 3rem; + } + + .intro img { + margin-top: 2%; + } + + h2 { + font-size: 3rem; + margin: 3% 0 5% 45%; + } + + .intro div { + line-height: 2rem; + margin-left: 0; + } + + .intro div a { + font-size: 2rem; + margin-left: 50%; + } + + .intro div p { + margin-top: 10%; + align-self: stretch; + } + .projects { + margin-top: 4%; + } +} + +@media only screen and (max-width: 1000px) { + body { + font-size: 1.5rem; + } + header { + height: 12%; + } + + .intro { + margin-top: 18%; + } + + .intro div { + margin-top: -2%; + line-height: 2rem; + } + + .intro a { + margin: 3% 0; + } +} \ No newline at end of file diff --git a/twitter.png b/twitter.png new file mode 100644 index 000000000..382c332d0 Binary files /dev/null and b/twitter.png differ