From afc207d362ed44b6d5d7570be7b524c6168e4630 Mon Sep 17 00:00:00 2001 From: Lauren Lee McCarthy Date: Sun, 7 May 2023 16:29:49 -0700 Subject: [PATCH] week6 --- assets/week6/08_ResponsiveDesign.zip | Bin 19683 -> 27467 bytes .../06_simple_flexbox/index.html | 36 ++++++++++ .../08_ResponsiveDesign/07_flexbox/index.html | 40 +++++++++++ .../08_flexbox_vertical_align/index.html | 27 +++++++ .../09_flex_grow/index.html | 47 +++++++++++++ .../10_flex_responsive/index.html | 38 ++++++++++ .../index.html | 0 .../templateAreas.css | 0 .../gridLines.css | 0 .../index.html | 0 .../12_Responsive_AtMedia/index.html | 33 --------- .../index.html | 0 .../responsiveGrid.css | 0 .../13_Responsive_FlexBox/index.html | 66 ------------------ .../13_Responsive_FlexBox/style.css | 52 -------------- 15 files changed, 188 insertions(+), 151 deletions(-) create mode 100644 assets/week6/08_ResponsiveDesign/06_simple_flexbox/index.html create mode 100644 assets/week6/08_ResponsiveDesign/07_flexbox/index.html create mode 100644 assets/week6/08_ResponsiveDesign/08_flexbox_vertical_align/index.html create mode 100644 assets/week6/08_ResponsiveDesign/09_flex_grow/index.html create mode 100644 assets/week6/08_ResponsiveDesign/10_flex_responsive/index.html rename assets/week6/08_ResponsiveDesign/{14_Grid01_TemplateAreas => 11_Grid01_TemplateAreas}/index.html (100%) rename assets/week6/08_ResponsiveDesign/{14_Grid01_TemplateAreas => 11_Grid01_TemplateAreas}/templateAreas.css (100%) rename assets/week6/08_ResponsiveDesign/{15_Grid02_gridLines => 12_Grid02_gridLines}/gridLines.css (100%) rename assets/week6/08_ResponsiveDesign/{15_Grid02_gridLines => 12_Grid02_gridLines}/index.html (100%) delete mode 100644 assets/week6/08_ResponsiveDesign/12_Responsive_AtMedia/index.html rename assets/week6/08_ResponsiveDesign/{16_Grid03_responsiveGrid => 13_Grid03_responsiveGrid}/index.html (100%) rename assets/week6/08_ResponsiveDesign/{16_Grid03_responsiveGrid => 13_Grid03_responsiveGrid}/responsiveGrid.css (100%) delete mode 100644 assets/week6/08_ResponsiveDesign/13_Responsive_FlexBox/index.html delete mode 100644 assets/week6/08_ResponsiveDesign/13_Responsive_FlexBox/style.css diff --git a/assets/week6/08_ResponsiveDesign.zip b/assets/week6/08_ResponsiveDesign.zip index 252bab5d89861e83ad9dfa68dcc940dfeea50c9b..331515f7f84acb9ad1db6882595d23203773339c 100644 GIT binary patch delta 11556 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 mIWR=I2JFw>y@4dj=jOO + + + flexbox examples + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+ + \ No newline at end of file diff --git a/assets/week6/08_ResponsiveDesign/07_flexbox/index.html b/assets/week6/08_ResponsiveDesign/07_flexbox/index.html new file mode 100644 index 0000000..2df7eb1 --- /dev/null +++ b/assets/week6/08_ResponsiveDesign/07_flexbox/index.html @@ -0,0 +1,40 @@ + + + + flexbox examples + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+ + \ No newline at end of file diff --git a/assets/week6/08_ResponsiveDesign/08_flexbox_vertical_align/index.html b/assets/week6/08_ResponsiveDesign/08_flexbox_vertical_align/index.html new file mode 100644 index 0000000..678e2cc --- /dev/null +++ b/assets/week6/08_ResponsiveDesign/08_flexbox_vertical_align/index.html @@ -0,0 +1,27 @@ + + + + flexbox examples + + + + +
+
hello
+
+ + diff --git a/assets/week6/08_ResponsiveDesign/09_flex_grow/index.html b/assets/week6/08_ResponsiveDesign/09_flex_grow/index.html new file mode 100644 index 0000000..dcbb640 --- /dev/null +++ b/assets/week6/08_ResponsiveDesign/09_flex_grow/index.html @@ -0,0 +1,47 @@ + + + + flexbox examples + + + + +
+
1
+
2
+
3
+
4
+
+ + \ No newline at end of file diff --git a/assets/week6/08_ResponsiveDesign/10_flex_responsive/index.html b/assets/week6/08_ResponsiveDesign/10_flex_responsive/index.html new file mode 100644 index 0000000..702a11f --- /dev/null +++ b/assets/week6/08_ResponsiveDesign/10_flex_responsive/index.html @@ -0,0 +1,38 @@ + + + + flexbox examples + + + + +
+
1
+
2
+
+ + \ No newline at end of file diff --git a/assets/week6/08_ResponsiveDesign/14_Grid01_TemplateAreas/index.html b/assets/week6/08_ResponsiveDesign/11_Grid01_TemplateAreas/index.html similarity index 100% rename from assets/week6/08_ResponsiveDesign/14_Grid01_TemplateAreas/index.html rename to assets/week6/08_ResponsiveDesign/11_Grid01_TemplateAreas/index.html diff --git a/assets/week6/08_ResponsiveDesign/14_Grid01_TemplateAreas/templateAreas.css b/assets/week6/08_ResponsiveDesign/11_Grid01_TemplateAreas/templateAreas.css similarity index 100% rename from assets/week6/08_ResponsiveDesign/14_Grid01_TemplateAreas/templateAreas.css rename to assets/week6/08_ResponsiveDesign/11_Grid01_TemplateAreas/templateAreas.css diff --git a/assets/week6/08_ResponsiveDesign/15_Grid02_gridLines/gridLines.css b/assets/week6/08_ResponsiveDesign/12_Grid02_gridLines/gridLines.css similarity index 100% rename from assets/week6/08_ResponsiveDesign/15_Grid02_gridLines/gridLines.css rename to assets/week6/08_ResponsiveDesign/12_Grid02_gridLines/gridLines.css diff --git a/assets/week6/08_ResponsiveDesign/15_Grid02_gridLines/index.html b/assets/week6/08_ResponsiveDesign/12_Grid02_gridLines/index.html similarity index 100% rename from assets/week6/08_ResponsiveDesign/15_Grid02_gridLines/index.html rename to assets/week6/08_ResponsiveDesign/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 deleted file mode 100644 index aef0ae4..0000000 --- a/assets/week6/08_ResponsiveDesign/12_Responsive_AtMedia/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - At Media - - - - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ipsum urna. Suspendisse sit amet scelerisque tellus. Aenean tempus, purus in dictum luctus, purus odio dapibus ipsum, et maximus neque sapien eget ex. Quisque urna nibh, commodo non enim at, lobortis ultricies diam. Vestibulum neque mi, tristique eu commodo et, commodo efficitur turpis. Pellentesque commodo libero velit, a vestibulum urna fermentum id. Suspendisse interdum nibh nibh, ac feugiat velit condimentum sit amet. Vivamus non arcu sit amet massa malesuada placerat lobortis in massa. Duis porta vehicula maximus. Proin ac arcu quis ipsum feugiat sollicitudin id et urna. Quisque fermentum congue diam, sed luctus elit sollicitudin sit amet. Suspendisse tempus lorem ut purus imperdiet volutpat. Nunc laoreet enim at diam viverra, eu fringilla nulla efficitur. Proin malesuada sollicitudin nibh nec auctor. Integer non semper mauris. Phasellus dapibus imperdiet risus. Donec eu varius lacus. Cras vehicula, mauris et viverra sodales, elit mauris luctus ante, et dapibus est erat vitae enim. Suspendisse lectus elit, tincidunt in tellus quis, luctus bibendum nisi. Etiam aliquet vitae erat in mollis. Fusce vehicula lacus vitae varius scelerisque. Aliquam faucibus arcu quis nunc molestie, vel euismod lectus suscipit. Sed euismod nulla et blandit dignissim. Vestibulum iaculis eu tortor sit amet suscipit. In tristique, lacus malesuada semper lobortis, justo elit congue lorem, nec lacinia lacus nisi ut purus. Pellentesque ac arcu turpis. In interdum nisi vitae lacus ultrices, vitae porttitor libero pulvinar. -
- -
- Nulla facilisi. Etiam sit amet ex nec tortor porta interdum id non justo. Phasellus quis augue in libero condimentum aliquet ut sed tellus. Nulla blandit ligula vel elit consequat faucibus. In dui erat, consectetur id aliquet sed, scelerisque sit amet nulla. Vivamus blandit porttitor mi vel pharetra. Curabitur a malesuada nunc. Nam maximus lobortis felis, vel porttitor neque consectetur eget. Nam nec volutpat diam. Nam consectetur metus in enim tincidunt, nec suscipit nunc gravida. Fusce ut consectetur massa. Nunc sit amet orci massa. Donec venenatis pellentesque ullamcorper. Aliquam erat volutpat. Donec iaculis consequat aliquet. Mauris a aliquam mi. Aliquam ultricies lacus elit. Phasellus posuere varius nibh, sed sollicitudin neque tristique vitae. Morbi euismod posuere volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus metus diam, aliquet dignissim fringilla eget, porttitor non lacus. Proin tincidunt vehicula sodales. Curabitur vulputate lacus odio, in cursus magna varius ut. Integer ut felis enim. Vestibulum id nunc vulputate lorem egestas convallis. Donec quis est ut lectus lacinia maximus. Suspendisse semper ornare lectus ac pulvinar. -
- - \ No newline at end of file diff --git a/assets/week6/08_ResponsiveDesign/16_Grid03_responsiveGrid/index.html b/assets/week6/08_ResponsiveDesign/13_Grid03_responsiveGrid/index.html similarity index 100% rename from assets/week6/08_ResponsiveDesign/16_Grid03_responsiveGrid/index.html rename to assets/week6/08_ResponsiveDesign/13_Grid03_responsiveGrid/index.html diff --git a/assets/week6/08_ResponsiveDesign/16_Grid03_responsiveGrid/responsiveGrid.css b/assets/week6/08_ResponsiveDesign/13_Grid03_responsiveGrid/responsiveGrid.css similarity index 100% rename from assets/week6/08_ResponsiveDesign/16_Grid03_responsiveGrid/responsiveGrid.css rename to assets/week6/08_ResponsiveDesign/13_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 deleted file mode 100644 index b7f5fc0..0000000 --- a/assets/week6/08_ResponsiveDesign/13_Responsive_FlexBox/index.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - flexbox examples - - - - -
-
ONE: Some Text
-
TWO:Some More Text
-
THREE:
Even
more
text
-
- - - \ No newline at end of file diff --git a/assets/week6/08_ResponsiveDesign/13_Responsive_FlexBox/style.css b/assets/week6/08_ResponsiveDesign/13_Responsive_FlexBox/style.css deleted file mode 100644 index 8f31ec0..0000000 --- a/assets/week6/08_ResponsiveDesign/13_Responsive_FlexBox/style.css +++ /dev/null @@ -1,52 +0,0 @@ -html{ - font-size: 200%; - } - - .divWithDisplayFlex { - /* width: 100%; */ - - /* 'display: flex' on a container makes its children into flex items */ - display: flex; - - /* lays the children out in rows, could also be 'column', 'row-reverse', or 'column-reverse' */ - flex-direction: row; - - /* sets the gap between the rows + columns, can set individually with column-gap an row-gap */ - gap: 20px; - - /* wraps the children making them fit within the flex box */ - /*flex-wrap: wrap;*/ - - /*aligns the items to different areas of the flex box, vertically*/ - /* align-items: flex-end; */ - - - /* sets how browser displays content with in the flex box and space around them horizontally */ - /* justify-content: space-between; */ - - } - - .text { - padding: 20px; - background-color: beige; - - } - - /* .one { - /* sets grow factor of item size, so this will grow up to twice as much */ - /* flex-grow: 2; - /* sets how much item will shrink within flex box, 1 is same as others, 0 is won't shrink. More than one is proportional. */ - /* flex-shrink: 1; - /* sets the initial size it'll grow and shrink from; */ - /* flex-basis: 100px; - } - - .two { - flex: 1 1 100px; - } - - .three { - flex: 1 1 100px; - } */ - - \ No newline at end of file