week6

lmccart · May 7, 2023 · afc207d · afc207d
1 parent 19d15de
commit afc207d
Show file tree

Hide file tree

Showing 15 changed files with 188 additions and 151 deletions.
diff --git a/assets/week6/08_ResponsiveDesign.zip b/assets/week6/08_ResponsiveDesign.zip
diff --git a/assets/week6/08_ResponsiveDesign/06_simple_flexbox/index.html b/assets/week6/08_ResponsiveDesign/06_simple_flexbox/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>flexbox examples</title>
+    <link rel="stylesheet" href="style.css">
+	<style>
+		.flex-container {
+			background: red;
+			display: flex;
+			height: 500px;
+			/* flex-direction: column; */
+		}
+
+		div {
+			background: orange;;
+			margin: 10px;
+			padding: 10px;
+			width: 100px;
+		}
+
+	</style>
+  </head>
+  <body>
+		<section class="flex-container">
+			<div>1</div>
+			<div>2</div>
+			<div>3</div>
+			<div>4</div>
+			<div>5</div>
+			<div>6</div>
+			<div>7</div>
+			<div>8</div>
+			<div>9</div>
+		</section>
+  </body>
+</html>
diff --git a/assets/week6/08_ResponsiveDesign/07_flexbox/index.html b/assets/week6/08_ResponsiveDesign/07_flexbox/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>flexbox examples</title>
+    <link rel="stylesheet" href="style.css">
+	<style>
+		.flex-container {
+			background: red;
+			display: flex;
+			height: 500px;
+			/* flex-direction: column; */
+			/* flex-wrap: wrap; */
+			/* justify-content: center; */
+			align-items: baseline;
+		}
+
+		div {
+			background: orange;;
+			margin: 10px;
+			padding: 10px;
+			width: 100px;
+			font-size: 30px;
+		}
+
+	</style>
+  </head>
+  <body>
+		<section class="flex-container">
+			<div>1</div>
+			<div>2</div>
+			<div>3</div>
+			<div>4</div>
+			<div>5</div>
+			<div>6</div>
+			<div>7</div>
+			<div style="font-size: 50px;">8</div>
+			<div>9</div>
+		</section>
+  </body>
+</html>
diff --git a/assets/week6/08_ResponsiveDesign/08_flexbox_vertical_align/index.html b/assets/week6/08_ResponsiveDesign/08_flexbox_vertical_align/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>flexbox examples</title>
+    <link rel="stylesheet" href="style.css">
+	<style>
+		.flex-container {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 300px;
+			background-color: DodgerBlue;
+		}
+
+		div {
+			background: orange;
+			font-size: 100px;
+		}
+
+	</style>
+  </head>
+  <body>
+		<section class="flex-container">
+			<div>hello</div>
+		</section>
+  </body>
+</html>
diff --git a/assets/week6/08_ResponsiveDesign/09_flex_grow/index.html b/assets/week6/08_ResponsiveDesign/09_flex_grow/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>flexbox examples</title>
+    <link rel="stylesheet" href="style.css">
+	<style>
+		.flex-container {
+			display: flex;
+			height: 300px;
+			background-color: DodgerBlue;
+		}
+
+		div {
+			background: orange;
+			font-size: 100px;
+			padding: 10px;
+			flex-grow: 1;
+		}
+
+		.a {
+			flex-grow: 2;
+			background: red;
+		}
+
+		.b {
+			background: yellow;
+		}
+
+		.c {
+			background: green;
+		}
+		.d {
+			background: purple;
+		}
+
+
+	</style>
+  </head>
+  <body>
+		<section class="flex-container">
+			<div class="a">1</div>
+			<div class="b">2</div>
+			<div class="c">3</div>
+			<div class="d">4</div>
+		</section>
+  </body>
+</html>
diff --git a/assets/week6/08_ResponsiveDesign/10_flex_responsive/index.html b/assets/week6/08_ResponsiveDesign/10_flex_responsive/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>flexbox examples</title>
+    <link rel="stylesheet" href="style.css">
+	<style>
+		.flex-container {
+			display: flex;
+			flex-direction: row;
+			background: black
+		}
+		.flex-item-left {
+			background: yellow;
+			flex: 50%;
+		}
+
+		.flex-item-right {
+			background: orange;
+			flex: 50%;
+		}
+
+
+		/* Responsive layout - makes a one column layout instead of a two-column layout */
+		@media (max-width: 800px) {
+			.flex-container {
+				flex-direction: column;
+			}
+		}
+
+	</style>
+  </head>
+  <body>
+		<section class="flex-container">
+			<div class="flex-item-left">1</div>
+			<div class="flex-item-right">2</div>
+		</section>
+  </body>
+</html>
diff --git a/...Design/14_Grid01_TemplateAreas/index.html → ...Design/11_Grid01_TemplateAreas/index.html b/...Design/14_Grid01_TemplateAreas/index.html → ...Design/11_Grid01_TemplateAreas/index.html
diff --git a/...14_Grid01_TemplateAreas/templateAreas.css → ...11_Grid01_TemplateAreas/templateAreas.css b/...14_Grid01_TemplateAreas/templateAreas.css → ...11_Grid01_TemplateAreas/templateAreas.css
diff --git a/...eDesign/15_Grid02_gridLines/gridLines.css → ...eDesign/12_Grid02_gridLines/gridLines.css b/...eDesign/15_Grid02_gridLines/gridLines.css → ...eDesign/12_Grid02_gridLines/gridLines.css
diff --git a/...siveDesign/15_Grid02_gridLines/index.html → ...siveDesign/12_Grid02_gridLines/index.html b/...siveDesign/15_Grid02_gridLines/index.html → ...siveDesign/12_Grid02_gridLines/index.html
diff --git a/assets/week6/08_ResponsiveDesign/12_Responsive_AtMedia/index.html b/assets/week6/08_ResponsiveDesign/12_Responsive_AtMedia/index.html
diff --git a/...esign/16_Grid03_responsiveGrid/index.html → ...esign/13_Grid03_responsiveGrid/index.html b/...esign/16_Grid03_responsiveGrid/index.html → ...esign/13_Grid03_responsiveGrid/index.html
diff --git a/..._Grid03_responsiveGrid/responsiveGrid.css → ..._Grid03_responsiveGrid/responsiveGrid.css b/..._Grid03_responsiveGrid/responsiveGrid.css → ..._Grid03_responsiveGrid/responsiveGrid.css
diff --git a/assets/week6/08_ResponsiveDesign/13_Responsive_FlexBox/index.html b/assets/week6/08_ResponsiveDesign/13_Responsive_FlexBox/index.html
diff --git a/assets/week6/08_ResponsiveDesign/13_Responsive_FlexBox/style.css b/assets/week6/08_ResponsiveDesign/13_Responsive_FlexBox/style.css