diff --git a/README.md b/README.md index 17e0bc56..fb9ef00d 100644 --- a/README.md +++ b/README.md @@ -24,24 +24,24 @@ In this challenge you will refactor your personal portfolio code to make it resp New features of a project should occur in a new branch in the same repository. Follow these steps to set up and work on your project from yesterday: -- [ ] `cd` into your personal portfolio folder -- [ ] Create a new branch from ``: +- [X ] `cd` into your personal portfolio folder +- [X ] Create a new branch from ``: ```bash git checkout -b . ``` -- [ ] Implement the project on your newly created `` branch, committing changes regularly. -- [ ] Push commits: git push origin ``. +- [X ] Implement the project on your newly created `` branch, committing changes regularly. +- [X ] Push commits: git push origin ``. ### Task 2: Minimum Viable Product Use the checklist below to guide your work today. Your final product should be presentable at mobile, tablet and a desktop-width. -- [ ] Insert a viewport meta tag into the head of the project with these html attributes: content="width=device-width, initial-scale=1" -- [ ] Introduce max-width media queries into your project at 800px and 500px -- [ ] Add accessability features to your webpage -- [ ] Design should closely follow the [mobile wireframe](Wireframes/) given for your chosen layout +- [X ] Insert a viewport meta tag into the head of the project with these html attributes: content="width=device-width, initial-scale=1" +- [X ] Introduce max-width media queries into your project at 800px and 500px +- [X ] Add accessability features to your webpage +- [X ] Design should closely follow the [mobile wireframe](Wireframes/) given for your chosen layout ### Task 2b: Exit Ticket @@ -53,11 +53,11 @@ The completion of these questions is mandatory for MVP. However, passing the qui Once you finish the minimum viable project, work on any of the following stretch goals: -- [ ] Test your website at several breakpoints and refactor code as needed. A few common breakpoints are below: - - [ ] iPhone: 360×640 - - [ ] Laptop: 1366×768 - - [ ] Widescreen: 1920×1080 -- [ ] Test your webpage's accessibility with a screen reader like [this](https://support.google.com/accessibility/answer/7031755?hl=en) +- [X ] Test your website at several breakpoints and refactor code as needed. A few common breakpoints are below: + - [X ] iPhone: 360×640 + - [X ] Laptop: 1366×768 + - [X ] Widescreen: 1920×1080 +- [X ] Test your webpage's accessibility with a screen reader like [this](https://support.google.com/accessibility/answer/7031755?hl=en) - [ ] Start over with min-width media queries to get a feel for how a mobile first approach would be like. I recommend making a branch of all your content in a new folder named "mobile-first" to keep it separate - [ ] Test your webpage's accessibility with a screen reader like [this](https://support.google.com/accessibility/answer/7031755?hl=en) @@ -83,7 +83,7 @@ Once you finish the minimum viable project, work on any of the following stretch Follow these steps for completing your project. -- [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** -- [ ] Add your team lead as a reviewer on the pull-request +- [X ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** +- [X ] Add your team lead as a reviewer on the pull-request - [ ] Your team lead will count the project as complete by merging the branch back into master. diff --git a/about b/about new file mode 100644 index 00000000..e69de29b diff --git a/about.html b/about.html new file mode 100644 index 00000000..e69de29b diff --git a/index.css b/index.css new file mode 100644 index 00000000..e4cb04c3 --- /dev/null +++ b/index.css @@ -0,0 +1,338 @@ + +/*myers reset (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; +} + + /*general code*/ + html { + font-size: 62.5%; + } + + body { + background-color: #282828; + } + + p, h1, h2, h3 { + color: #66fcf1; + font-family: sans-serif; + } + +/* header code */ + header { + display: flex; + flex-direction: column; + align-items: center; + } + + h1 { + font-size: 5rem; + text-align: center; + color: #66fcf1; + width: 30%; + margin-top: 5%; + margin-bottom: 2%; + } + + nav { + display: flex; + flex-direction: row; + justify-content: space-evenly; + width: 50%; + margin-bottom: 5%; + } + + nav a { + font-size: 2rem; + text-decoration: none; + background: #c5c6c7; + color: #182f33; + font-size: 1.8rem; + border: .1rem solid black; + width: 30%; + text-align: center; + } + + nav a:hover { + background: #a5e9e9; + color: #1e2c2f; + } + +/* first section code */ +.first-sect { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 5%; +} + +h2 { + font-size: 4rem; + margin-bottom: 3%; +} + +p { + width: 60%; + font-size: 2rem; + line-height: 1.5; + margin-bottom: 3%; +} + +img { + width: 100%; +} + +/* second section code */ +.second-sect { + display: flex; + justify-content: space-evenly; + margin-bottom: 5%; +} + +.first-sect img { + height: 60%; + max-width: 100%; +} + +.second-sect img { + height: 60%; + max-width: 50%; +} + +.second-sect p { + width: 20%; + font-size: 2rem; + margin-right: 3%; +} + +/*footer code*/ +footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #0b0c10; +} + +.contact-button { + font-size: 2rem; + color: #a5e9e9; + margin-top: 3%; + text-align: center; + text-decoration: none; + margin-bottom: 3%; + height: 2.5rem; + width: 10%; + padding-top: 1%; + border: .1rem solid #c7c5c7; +} + +.contact-button:hover { + color: #a5e9e9; + border: .1rem solid #a5e9e9; +} + +.social-container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + width: 40%; + margin-bottom: 3%; +} + +.social-container a { + font-size: 2rem; + color: #66fcf1 +} + +.social-container a:hover{ + color: #45a29c; +} + +/* widescreen responsive code (1920px) */ +@media(max-width: 1920px) { + nav { + flex-wrap: wrap; + } + + nav a { + width: 40%; + } + + .second-sect { + flex-wrap: wrap; + } + + .first-sect img { + height: 60%; + max-width: 100%; + } + + .second-sect img { + height: 60%; + max-width: 50%; + } + + .second-sect p { + width: 50%; + text-align: center; + } + + .contact-button { + width: 35%; + margin-bottom: 5%; + } + + .social-container { + margin-bottom: 5%; + } +} + +/* Laptop responsive code (1366px) */ +@media(max-width: 1366px) { + nav { + flex-wrap: wrap; + } + + nav a { + width: 40%; + } + + .second-sect { + flex-wrap: wrap; + } + + .first-sect img { + height: 60%; + max-width: 100%; + } + + .second-sect img { + height: 60%; + max-width: 50%; + } + + .second-sect p { + width: 50%; + text-align: center; + } + + .contact-button { + width: 35%; + margin-bottom: 5%; + } + + .social-container { + margin-bottom: 5%; + } +} + +/* tablet responsive code (800px) */ +@media(max-width: 800px) { + nav { + flex-wrap: wrap; + } + + nav a { + width: 40%; + } + + .second-sect { + flex-wrap: wrap; + } + + .first-sect img { + height: 60%; + max-width: 100%; + } + + .second-sect img { + height: 60%; + max-width: 50%; + } + + .second-sect p { + width: 50%; + text-align: center; + } + + .contact-button { + width: 35%; + margin-bottom: 5%; + } + + .social-container { + margin-bottom: 5%; + } +} + +/*mobile responsive code (500px)*/ +@media(max-width: 500px) { + nav { + flex-direction: column; + align-items: center; + } + + nav a { + width: 20rem; + padding: 3% 0; + } + + .first-sect img { + height: 60%; + max-width: 100%; + } + + .second-sect img { + height: 60%; + max-width: 50%; + } + + h2 { + text-align: center; + } +} + +/*mobile response code iPhone(360px)*/ +@media(max-width: 360px) { + nav { + flex-direction: column; + align-items: center; + } + + nav a { + width: 20rem; + padding: 3% 0; + } + + .first-sect img { + height: 60%; + max-width: 100%; + } + + .second-sect img { + height: 60%; + max-width: 50%; + } + + h2 { + text-align: center; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..1006fe57 --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + + + + + Document + + + + + + + + + +
+ +

Chris Elles

+ + + +
+ +
+

Hello and welcome to my site...

+

I am a Lambda School student in the webpt23 cohort studying Software Development.

+ +
+ +
+ + + + + + + + + +

Feel free to contact me!

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