From cd8731278bbf7d231c109bafaf547206b2a85ddb Mon Sep 17 00:00:00 2001 From: Chris Elles Date: Thu, 23 Jul 2020 16:18:42 +1200 Subject: [PATCH 1/5] first attempt, slow going --- index.css | 9 +++++++++ index.html | 28 ++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 index.css create mode 100644 index.html diff --git a/index.css b/index.css new file mode 100644 index 00000000..1d6ba319 --- /dev/null +++ b/index.css @@ -0,0 +1,9 @@ +body { + background-color: white; + } + h1 { + color: black; + } + p { + color: black; + } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..4611a4bb --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + + +

Chris Elles

+Home +About +Contact +Objects +

Introducing my site

+ +

Stuff stuff stuff stuffy stuff stuff

+ +BOX + +BOX BOX + +BOX BOX + + +

Some text will go here describing the projects I have done

+ +

Contact Me Box

+ + \ No newline at end of file From d8df94f55bf8b788ce2256f088e3b263a9e7d468 Mon Sep 17 00:00:00 2001 From: Chris Elles Date: Thu, 23 Jul 2020 17:15:41 +1200 Subject: [PATCH 2/5] second attempt, slow going --- index.css | 17 ++++++++++++++++- index.html | 51 +++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 63 insertions(+), 5 deletions(-) diff --git a/index.css b/index.css index 1d6ba319..16c70654 100644 --- a/index.css +++ b/index.css @@ -6,4 +6,19 @@ body { } p { color: black; - } \ No newline at end of file + } + + .flex-container { + display: flex; + background-color: white; + } + + .flex-container > div { + background-color: grey; + margin: 10px; + padding: 10px; + font-size: 30px; + + /*Start nested flexbox style*/ + + /*End nested flexbox style*/ \ No newline at end of file diff --git a/index.html b/index.html index 4611a4bb..358eaaa4 100644 --- a/index.html +++ b/index.html @@ -14,15 +14,58 @@

Chris Elles

Stuff stuff stuff stuffy stuff stuff

-BOX + +
+
BOX1
+
+ +
+
BOX2
+
BOX2
+
+ +
+
BOX3
+
BOX3
+
+ -BOX BOX +
+
Box 1 +
Box 1A
+
Box 1B
+
+
Box 2
+
Box 3
+
-BOX BOX + +

Some text will go here describing the projects I have done

-

Contact Me Box

+ \ No newline at end of file From 4766d5470a2936da3f21ccc8ef38807cf2ac8bb6 Mon Sep 17 00:00:00 2001 From: Chris Elles Date: Thu, 17 Sep 2020 14:39:53 +1200 Subject: [PATCH 3/5] Sept/20 latest --- README.md | 28 ++--- about | 0 about.html | 0 index.css | 330 +++++++++++++++++++++++++++++++++++++++++++++++++---- index.html | 133 ++++++++++----------- 5 files changed, 392 insertions(+), 99 deletions(-) create mode 100644 about create mode 100644 about.html diff --git a/README.md b/README.md index 17e0bc56..03bcc867 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** +- [X ] 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 - [ ] 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 index 16c70654..9cc6fc19 100644 --- a/index.css +++ b/index.css @@ -1,24 +1,312 @@ -body { - background-color: white; - } - h1 { - color: black; - } - p { - color: black; - } - - .flex-container { - display: flex; - background-color: white; - } - .flex-container > div { - background-color: grey; - margin: 10px; - padding: 10px; - font-size: 30px; +/*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; + } - /*Start nested flexbox style*/ + 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%; + } - /*End nested flexbox style*/ \ No newline at end of file + 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: 60%; +} + +/* second section code */ +.second-sect { + display: flex; + justify-content: space-evenly; + margin-bottom: 5%; +} + +.second-sect img { + width: 10%; + height: 20rem; +} + + +.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; + } + + .second-sect img { + width: 40%; + height: 70%; + margin-bottom: 3%; + } + + .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; + } + + .second-sect img { + width: 40%; + height: 70%; + margin-bottom: 3%; + } + + .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; + } + + .second-sect img { + width: 40%; + height: 70%; + margin-bottom: 3%; + } + + .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: 25%; + } + + 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: 25%; + } + + h2 { + text-align: center; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 358eaaa4..1006fe57 100644 --- a/index.html +++ b/index.html @@ -1,71 +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 From 11d3a4ad1cf6ebc92f9ef549b4ce512e9216ac98 Mon Sep 17 00:00:00 2001 From: Chris Elles Date: Thu, 17 Sep 2020 16:01:44 +1200 Subject: [PATCH 4/5] Sept/20 latest 2.0 --- index.css | 56 ++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 41 insertions(+), 15 deletions(-) diff --git a/index.css b/index.css index 9cc6fc19..e4cb04c3 100644 --- a/index.css +++ b/index.css @@ -96,7 +96,7 @@ p { } img { - width: 60%; + width: 100%; } /* second section code */ @@ -106,11 +106,15 @@ img { margin-bottom: 5%; } -.second-sect img { - width: 10%; - height: 20rem; +.first-sect img { + height: 60%; + max-width: 100%; } +.second-sect img { + height: 60%; + max-width: 50%; +} .second-sect p { width: 20%; @@ -176,10 +180,14 @@ footer { flex-wrap: wrap; } + .first-sect img { + height: 60%; + max-width: 100%; + } + .second-sect img { - width: 40%; - height: 70%; - margin-bottom: 3%; + height: 60%; + max-width: 50%; } .second-sect p { @@ -211,10 +219,14 @@ footer { flex-wrap: wrap; } + .first-sect img { + height: 60%; + max-width: 100%; + } + .second-sect img { - width: 40%; - height: 70%; - margin-bottom: 3%; + height: 60%; + max-width: 50%; } .second-sect p { @@ -246,10 +258,14 @@ footer { flex-wrap: wrap; } + .first-sect img { + height: 60%; + max-width: 100%; + } + .second-sect img { - width: 40%; - height: 70%; - margin-bottom: 3%; + height: 60%; + max-width: 50%; } .second-sect p { @@ -281,7 +297,12 @@ footer { .first-sect img { height: 60%; - max-width: 25%; + max-width: 100%; + } + + .second-sect img { + height: 60%; + max-width: 50%; } h2 { @@ -303,7 +324,12 @@ footer { .first-sect img { height: 60%; - max-width: 25%; + max-width: 100%; + } + + .second-sect img { + height: 60%; + max-width: 50%; } h2 { From 83cb7d6235d66ffb45e1afa81e305f8777e7c0f5 Mon Sep 17 00:00:00 2001 From: Chris Elles Date: Fri, 18 Sep 2020 14:34:45 +1200 Subject: [PATCH 5/5] SEPT/20 latest 3 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 03bcc867..fb9ef00d 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,6 @@ Once you finish the minimum viable project, work on any of the following stretch Follow these steps for completing your project. - [X ] 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 ] 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.