diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..9401b1690 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,22 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + }, + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/about.html b/about.html index df1043036..6d6e889bb 100644 --- a/about.html +++ b/about.html @@ -1,11 +1,40 @@ - - - - Document - + + + + Document + + + +
+
+

About Me

+ +
+ -

ABOUT

- +
+
+ +
+

I am a stay-at-home mom to a wild little girl (pictured left). As much as I love being home with her, I am ready to get back to work and start my new career. After graduating from Angelo State University with a BA in Journalism in 2012, I bounced around from admin job to admin job. I never found a job that truly made me happy and excited to go to work. I am currently enrolled in Lambda School's Full Stack Web Development program. This class is the opportunity I have been waiting for to jumpstart my new career. I like a career path that allows growth and advancement and web development definitely offers that. I also creating and designing new things. +

+ +
+ +
+ \ No newline at end of file diff --git a/contact.html b/contact.html index 7c293bd11..7b7babb7f 100644 --- a/contact.html +++ b/contact.html @@ -1,11 +1,40 @@ - - - - Document - - -

CONTACT

- - \ No newline at end of file + + + + Document + + + +
+
+

Contact Me

+ +
+ + +
+

Clicking on any link below will allow you to get in contact with me fast. Let's find out what I can do for you!

+ +

Let's Network! Check out my LinkedIn profile!

+ +

Connect With Me on Instagram

+ +

Check out some of my earlier work on Code Pen!

+ +

Here is some more of my work on Git Hub!

+
+ +
+ +
+ + \ No newline at end of file diff --git a/index.html b/index.html index d01f779ff..a6b105ec1 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,74 @@ - + - + Document + + +
+
+

Alix Catalanotto's Portfolio

+ +
+ + - +
+ + + +
+

Alix Catalanotto

+

Budding Web Developer

+

+ + + +
+
+

I started my journey at Lambda School after talking to my husband about what I want to do when I decide to go back to work after being a stay-at-home mom for a few years. Before having my daughter, I had done nothing but office admin work since graduating college in 2012. I have a BA in Journalism from Angelo State University but have not been able to do anything with it. I knew when I was ready to go back to work, I didn't just want a job; I wanted a career! Joining Lambda's Web Development program has been the best decison I have made in my professional career. I'm learning to code and how to develop websites which is something I have always wanted to learn how to do. As I continue this journey, I expect this portfoli site to grow and develop as much as I will in this program. I can't wait to see where this adventure takes me next.

+ +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+ \ No newline at end of file diff --git a/projects.html b/projects.html index 266e620b0..65ccd9a98 100644 --- a/projects.html +++ b/projects.html @@ -2,10 +2,43 @@ - + Document + -

PROJECTS

+ +
+
+

Projects

+ +
+ + +

During my time at Lambda School, I have learned a lot about what I am capable of! Help me in continueing my journey by checking out some of the work I have done not only as a student but for fun on the side!

+ +

Here is some more of my work on Git Hub!

+ + + + +

Check out some of my earlier work on Code Pen!

+ +
+ +
+ \ No newline at end of file diff --git a/style/about.css b/style/about.css new file mode 100644 index 000000000..9a3ed9917 --- /dev/null +++ b/style/about.css @@ -0,0 +1,184 @@ +/* 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; +} +/* Add CSS styling here */ + +html { + font-size: 62.5%; +} + +header { + margin: 10px auto; + margin-bottom: 30px; + padding: 10px; + background: pink; + border-bottom: 5px dotted purple; + text-align: center; + } + + h1 { + font-size: 5.5rem; + font-family: Bradley Hand ITC; + font-weight: bold; + margin-bottom: 30px; + text-align: center; + background: pink; + } + + header nav a { + margin: 0 10px; + margin-bottom: 20px; + border: 2px solid purple; + padding: 10px; + display: inline-block; + border-radius: 30px; + color: black; + font-family: comic sans ms; + font-size: 2.4rem; + text-decoration: none; + background: turquoise; + } + + header nav :hover { + border: 5px dotted yellow; + border-radius: 10px; + } + +.container { + display: flex; +} + + .image img { + border: 5px dashed magenta; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 20px; + margin-top: .5%; + height: 450px; + width: 350px; + flex-wrap: wrap; + display: flex; + border-radius: 10px; +} + + + .container p { + font-size: 2rem; + font-family: arial; + text-align: justify; + margin: 0 auto; + margin-right: 3%; + } + + .footer { + padding: 10px; + background: pink; + margin:0 auto; + margin-top: 30px; + text-align: center; + border-top: 5px dotted purple; + } + + .footer p { + font-size: 3.4rem; + font-family: Bradley Hand ITC; + font-weight: bold; + } + + .footer .linkedin { + font-size: 2.4rem; + margin-top: 20px; + } + + .footer .linkedin :hover { + color: black; + } + + .footer .instagram { + font-size: 2.4rem; + margin-top: 20px; + } + + .footer .instagram :hover{ + color: black; + } + + .footer button { + padding: 10px; + margin: 5px; + background: turquoise; + border: solid purple; + border-radius: 30px; + font-size: 2.4rem; + font-family: comic sans ms; + } + +@media(max-width: 800px){ + .home { + flex-direction: column; + } +} + +@media(max-width: 500px){ + .home { + font-size: 1.4rem; + } + + nav { + flex-direction: column; + display: none; + } + + .container { + flex-direction: column; + } +} + + \ No newline at end of file diff --git a/style/contact.css b/style/contact.css new file mode 100644 index 000000000..bddb28fe5 --- /dev/null +++ b/style/contact.css @@ -0,0 +1,176 @@ +/* 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; +} +/* Add CSS styling here */ + +html { + font-size: 62.5%; +} + +header { + margin: 10px auto; + margin-bottom: 30px; + padding: 10px; + background: pink; + border-bottom: 5px dotted purple; + text-align: center; +} + +h1 { + font-size: 5.5rem; + font-family: Bradley Hand ITC; + font-weight: bold; + margin-bottom: 30px; + text-align: center; + background: pink; +} + +header nav a { + margin: 0 10px; + border: 2px solid purple; + padding: 10px; + display: inline-block; + border-radius: 30px; + color: black; + font-family: comic sans ms; + font-size: 2.4rem; + text-decoration: none; + margin-bottom: 20px; + background: turquoise; +} + +header nav :hover { + border: 5px dotted yellow; + border-radius: 10px; +} + +p { + font-family: arial; + font-size: 2.4rem; + text-align: center; +} + +.linkedin { + font-family: arial; + font-size: 2.4rem; + margin: 10px; + padding: 20px; + border: 5px solid MediumTurquoise; +} + +.linkedin :hover { + font-style: italic; + color: crimson; +} + +.instagram { + font-family: arial; + font-size: 2.4rem; + margin: 10px; + padding: 20px; + border: 5px dotted MediumTurquoise; +} + +.instagram :hover { + font-style: italic; + color: crimson; +} + +.codepen { + font-family: arial; + font-size: 2.4rem; + margin: 10px; + padding: 20px; + border: 5px solid MediumTurquoise; +} + +.codepen :hover { + font-style: italic; + color: crimson; +} + +.github { + font-family: arial; + font-size: 2.4rem; + margin: 10px; + padding: 20px; + border: 5px dotted MediumTurquoise; +} + +.github :hover { + font-style: italic; + color: crimson; +} + + +.footer { + padding: 100px; + background: pink; + margin:0 auto; + margin-top: 30px; + text-align: center; + border-top: 5px dotted purple; +} + +@media(max-width: 800px){ + .home { + flex-direction: column; + } +} + +@media(max-width: 500px){ + .home { + font-size: 1.4rem; + } + + nav { + flex-direction: column; + display: none; + } +} + diff --git a/style/index.css b/style/index.css index 440e53514..780600f82 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,262 @@ -/* Add CSS styling here */ \ No newline at end of file +/* 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; +} +/* Add CSS styling here */ + +html { + font-size: 62.5%; +} + +header { + margin: 20px auto; + margin-bottom: 30px; + padding: 20px; + background: pink; + border-bottom: 5px dotted purple; + text-align: center; +} + +h1 { + font-size: 5.5rem; + font-family: Bradley Hand ITC; + font-weight: bold; + margin-bottom: 30px; + text-align: center; + background: pink; +} + +header nav a { + margin: 0 10px; + margin-bottom: 20px; + border: 2px solid purple; + padding: 10px; + display: inline-block; + border-radius: 30px; + color: black; + font-family: comic sans ms; + font-size: 2.4rem; + text-decoration: none; + background: turquoise; +} + +header nav :hover { + border: 5px dotted yellow; + border-radius: 10px; +} + +.Intro { + text-align: right; + margin: 20px; +} + + +h2 { + font-size: 4.4rem; + font-family: Bradley Hand ITC; + font-weight: bold; + margin-bottom: 10px; +} + +h3 { + font-size: 2.4rem; + font-family: Bradley Hand ITC; + font-weight: bold; + margin-top: 10px; +} + +button { + padding: 10px; + margin: 20px; + background: turquoise; + border: solid purple; + border-radius: 30px; + font-size: 2.4rem; + font-family: comic sans ms; +} + +button :hover { + border: 5px dotted yellow; + border-radius: 10px; +} + +.profile { + display: flex; + flex-direction: row; + text-align: right; +} + +.profile img { + height: 400px; + width: 400px; + margin: 20px; + border: 15px solid turquoise; + border-radius: 10px; +} + +p { + font-family: arial; + font-size: 2rem; + margin: 20px; +} + +.Project1 { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 2% 0; + margin: 20px; + flex-wrap: wrap; +} + +.Projects2 { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 2% 0; + margin: 20px; + flex-wrap: wrap; +} + +.Projects3 { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 2% 0; + margin: 20px; + flex-wrap: wrap; +} + +.Projects4 { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 2% 0; + margin: 20px; + flex-wrap: wrap; +} + + +.footer { + padding: 10px; + background: pink; + margin:0 auto; + margin-top: 30px; + text-align: center; + border-top: 5px dotted purple; +} + +.footer p { + font-size: 3.4rem; + font-family: Bradley Hand ITC; + font-weight: bold; +} + +.footer .linkedin { + font-size: 2.4rem; + margin-top: 20px; +} + +.footer .linkedin :hover { + color: black; +} + +.footer .instagram { + font-size: 2.4rem; +} + +.footer .instagram :hover{ + color: black; +} + +.footer button { + padding: 10px; + margin: 5px; + background: turquoise; + border: solid purple; + border-radius: 30px; + font-size: 20px; + font-family: comic sans ms; +} + +@media(max-width: 800px){ + .home { + flex-direction: column; + } +} + +@media(max-width: 500px){ + .home { + font-size: 1.4rem; + } + + nav { + flex-direction: column; + display: none; + } + + .profile { + width: 75%; + height: 50%; + display: flex; + flex-direction: column; + margin: 0 auto; + border: none; + } + + .profile img { + width: 50%; + height: 50%; + flex-direction: column; + } + + + .Project1, .Projects2, .Projects3, .Projects4 { + flex-direction: column; + justify-content: space-evenly; + } +} \ No newline at end of file diff --git a/style/projects.css b/style/projects.css new file mode 100644 index 000000000..35a98015f --- /dev/null +++ b/style/projects.css @@ -0,0 +1,161 @@ +/* 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; +} +/* Add CSS styling here */ + +html { + font-size: 62.5%; +} + +header { + margin: 10px auto; + margin-bottom: 30px; + padding: 10px; + background: pink; + border-bottom: 5px dotted purple; + text-align: center; +} + +h1 { + font-size: 5.5rem; + font-family: Bradley Hand ITC; + font-weight: bold; + margin-bottom: 30px; + text-align: center; + background: pink; +} + +header nav a { + margin: 0 10px; + border: 2px solid purple; + padding: 10px; + display: inline-block; + border-radius: 30px; + color: black; + font-family: comic sans ms; + font-size: 2.4rem; + text-decoration: none; + margin-bottom: 20px; + background: turquoise; +} + +header nav :hover { + border: 5px dotted yellow; + border-radius: 10px; +} + +p { + font-family: arial; + font-size: 2.4rem; + text-align: center; +} + +.github, .codepen { + text-align: center; + margin-top: 20px; +} + +.footer { + padding: 10px; + background: pink; + margin:0 auto; + margin-top: 30px; + text-align: center; + border-top: 5px dotted purple; +} + +.footer p { + font-size: 3.4rem; + font-family: Bradley Hand ITC; + font-weight: bold; +} + +.footer .linkedin { + font-size: 2.4rem; + margin-top: 20px; +} + +.footer .linkedin :hover { + color: black; +} + +.footer .instagram { + font-size: 2.4rem; + margin-top: 20px; +} + +.footer .instagram :hover{ + color: black; +} + +.footer button { + padding: 10px; + margin: 5px; + background: turquoise; + border: solid purple; + border-radius: 30px; + font-size: 20px; + font-family: comic sans ms; +} + +@media(max-width: 800px){ + .home { + flex-direction: column; + } +} + +@media(max-width: 500px){ + .home { + font-size: 1.4rem; + } + + nav { + flex-direction: column; + display: none; + } +} \ No newline at end of file