diff --git a/ReadMe.md b/ReadMe.md index 429023981..f59cd9967 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -25,23 +25,23 @@ Portfolio websites are a great way to show off your work to friends, family, and Follow these steps to set up and work on your project: -- [ ] Create a forked copy of this project. -- [ ] Add your Team Lead as collaborator on Github. -- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). -- [ ] Create a new branch: git checkout -b ``. -- [ ] Implement the project on your newly created `` branch, committing changes regularly. -- [ ] Push commits: git push origin ``. +- [x] Create a forked copy of this project. +- [x] Add your Team Lead as collaborator on Github. +- [x] Clone your OWN version of the repository (Not Lambda's by mistake!). +- [x] Create a new branch: git checkout -b ``. +- [x] Implement the project on your newly created `` branch, committing changes regularly. +- [x] Push commits: git push origin ``. ### Task 2: Minimum Viable Product Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: -- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding 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 that links to the projects page -- [ ] A `Contact Me` button that links to the contact page -- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page +- [x] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [x] 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 +- [x] Information about you in place of the given placeholder +- [x] A `My Projects` button that links to the projects page +- [x] A `Contact Me` button that links to the contact page +- [x] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page ### Task 3: Stretch Goals diff --git a/index.html b/index.html index d01f779ff..6934ab93f 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,66 @@ - - - - Document - - - - - \ No newline at end of file + + + + + Document + + +
+
+
+
+

Andrew Muto

+

+
+
+ About + Projects + Contact +
+
+
+
+
+

+ I was born in a place and I am currently working at a job. This is very obviously a placeholder. +

+
+
+
+
+
+
+ Project 1 +
+
+ Project 2 +
+
+ Project 3 +
+
+
+
+ Project 4 +
+
+ Project 5 +
+
+ Project 6 +
+
+
+
+ + + diff --git a/style/index.css b/style/index.css index 440e53514..1ac25a086 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,113 @@ -/* 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; +border: 0; +font-size: 100%; +font: inherit; +vertical-align: baseline; +} +* { + box-sizing:border-box; + padding:0; + margin:0; + max-width:100%; +} +.one{ + display:flex; + justify-content:space-between; + background-color:orange; +} +.name{ + display:flex; + justify-content:flex-start; + font-size:5rem; + } +.links{ + display: flex; + justify-content:flex-end; + font-size:3rem; +} +.links a{ + padding:1rem; + text-decoration: none; + color: black; +} +.opener{ + background-color:teal; + font-size:1.5rem; + padding: 5%; + text-align: center; + width: 100% + } +.picrow{ + display:flex; + flex-direction:row; + justify-content:space-around; + padding:2rem; + background-color:teal; +} +.picbox{ + display:flex; + flex-direction:column; + justify-content:space-between; + text-align:center; + } + +.contacts{ + font-size:2rem; + text-align:center; + background-color:orange; + } +.contacts a{ + padding:1rem; + text-decoration: none; + color: black; +} +@media(max-width: 800px){ + #title { + width:100%; + } + .about{ + display:flex; + text-align:center; + } + +} + +@media(max-width: 500px){ + #title{ + display:flex; + flex-direction:column; + align-items:center; + } + .links{ + width:100%; + } + #about{ + display:flex; + flex-direction:column; + align-items:center; + } + #projects .picrow{ + width:90%; + } + .picbox{ + display:flex; + flex-direction:column; + align-items:center; + margin:7% 0; + width:90% + } +} \ No newline at end of file