chriselles · chriselles · Jul 23, 2020 · Jul 23, 2020 · Sep 17, 2020 · Sep 17, 2020
diff --git 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 `<firstName-lastName>`:
+- [X ] `cd` into your personal portfolio folder
+- [X ] Create a new branch from `<firstName-lastName>`:
 
 ```bash
 git checkout -b <firstName-lastName-day2> <firstName-lastName>.
 ```
 
-- [ ] Implement the project on your newly created `<firstName-lastName-day2>` branch, committing changes regularly.
-- [ ] Push commits: git push origin `<firstName-lastName-day2>`.
+- [X ] Implement the project on your newly created `<firstName-lastName-day2>` branch, committing changes regularly.
+- [X ] Push commits: git push origin `<firstName-lastName-day2>`.
 
 ### 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 <firstName-lastName> 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 <firstName-lastName> 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
diff --git a/about.html b/about.html
diff --git a/index.css 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;
+	}
+}