Eric anderson

README.md

@@ -21,10 +21,10 @@ Follow these steps for completing your project.
 
 ## Task 2: Minimum Viable Product
 
-* [ ] Review each [design file](design-files).  Notice the subtle differences between them all. 
-* [ ] 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  
-* [ ] Do your best to make your styles match the design files at each breakpoint 
+* [x] Review each [design file](design-files).  Notice the subtle differences between them all. 
+* [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] Do your best to make your styles match the design files at each breakpoint 
 
 ## Stretch Goals: 
 * [ ] Create a tablet and mobile version of the services page from previous projects

css/index.css

@@ -1,3 +1,282 @@
-/* Use your own code or past solution for Great Idea Web Page CSS here! */
+/* 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;
+}
 
+/* Set every element's box-sizing to border-box */
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: 'Titillium Web', sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: 'Bangers', cursive;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+}
+
+/* Your code starts here! */
+
+
+
+body{
+	width: 90%;
+	margin: 0 auto;
+	font-size: 13px;
+
+}
+/*---------Top Part ------------*/
+
+/*Parent */
+.navigation{
+	/*Added a new font style from fonts.google*/
+	font-family: 'Dancing Script', cursive;
+	/*margin:40px*/;
+	text-align: center;
+	width: 100%;	
+	display:flex;
+	justify-content: center;
+	/* height: 10vh; */
+
+}
+.nav-tag{
+	width: 100%;
+	display:flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+a{
+	text-decoration: none; /*Takes out line or decorations*/
+	/*T R B L*/
+	margin: 2% 5% 2% 0; 
+	color: grey; 	
+}
+ /*------------------------Top Mid--------------------*/
+
+.top-content{
+	width: 100%;
+	margin: 5 2 3 4;
+	text-align: center; 
+}
+.top-content h1{
+	font-size: 60px;
+}
+
+ header{
+	margin: 40px 0 40px 0;
+	display: flex;
+	justify-content: space-around; 
+}
+
+ button{ 
+	width: 33%;
+	text-align: center;
+}	
+
+/*auto is give it an equal left and right outward*/
+
+
+/*------------------------ Mid area------------------------*/
+
+p{ 
+	font-size: medium;	
+ }
+
+ .about{
+	display:inline-block;
+	width:45%; 
+	float: right;
+	margin:3% 3% 0 0;
+}
+
+.features{
+	display:inline-block;
+	width:40%;
+	/*T R B L*/
+	margin: 3% 0 0 0;
+}
+.mbottom{
+	display:flex;
+}
+.middle-img{
+	/*T R B L*/
+	margin: 2% 0 0 0;
+	width: 100%
+}
+
+ /*----------------------- Services page------------------*/
+.services{
+	width:100%; 
+
+} 
+
+.sixbox{
+	display:flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+.sixbox div{
+	width:45%; 
+	margin: 3% 0 3% 0;
+	border:1px solid black;
+	padding: 2.5%;
+
+}
+/* .dd, .dm, .iOS {
+
+	display: flex;
+	justify-content: space-around;
+	flex-direction: column;
+	padding: 2.5%;
+
+}
+
+.unix, .wd, .ad{
+	width:45%;
+	margin: 3% 0 3% 0%;
+	border:1px solid black;
+	display: flex;
+	float: right;
+	justify-content: space-around;
+	flex-direction: column;
+	align-self: center; 
+	padding: 2.5%;
+} */
+
+h4{
+	margin: 4%;
+	width: 40%;
+}
+
+.facts{
+	width:40%;
+}
+.ul{
+	list-style-type: circle;
+}
+footer{
+	text-align: center; 
+	margin: 50px 0; 
+} 
+.img{
+	 float:right;
+}
+
+/*-------------- MEDIA QUERIES-----------*/
+
+/*tablet*/
+@media(max-width: 800px){
+    .navigation{
+        justify-content: center;
+		flex-direction:column-reverse;
+	}
+	.img-title{
+		display:none;
+	}
+	button{
+		width:75%;
+	} 
+	.bottom{
+		/* border: 1px solid black; */
+		display:flex;
+		flex-flow:column;
+		align-items: left;
+	}
+	.facts{
+		/* border: 1px solid black; */
+	}
+	.ul{
+		/* border: 1px solid black; */
+	}
+	footer{
+		/* border: 1px solid black; */
+	}
+} 
+
+/*phone*/
+@media (max-width: 500px){
+	.nav-tag{
+		flex-direction:column;
+
+	}
+	.nav-tag a{
+		/* border-bottom: 1px solid black; */
+		width:100%;
+		padding-top: 8px;
+		padding-bottom: 10px;
+	}
+	.mid{
+		flex-direction: column;
+	}
+	.mid div{
+		width:100%;
+	}
+	.mbottom{
+		flex-direction: column;
+	}
+	.mbottom div{
+		width: 100%;
+	}
+	.sixbox{
+		flex-direction:column; 
+	}
+	.sixbox div{
+		flex-direction: column; 
+		width:100%;
+	}
+	button{
+		width:75%;
+
+	}
+
+
+}