From 649bbf3ff804cc162bd940f7d76b981278ca90d0 Mon Sep 17 00:00:00 2001 From: Matthew Giles Date: Mon, 21 Nov 2022 19:30:22 +0000 Subject: [PATCH 01/21] Added Post-it for z-index --- index.html | 7 ++++++- styles.css | 2 ++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f5fd3fb..a09377a 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,12 @@

Properties

Layouts

- +
diff --git a/styles.css b/styles.css index 0abfc96..ec83b91 100644 --- a/styles.css +++ b/styles.css @@ -22,6 +22,7 @@ h3 { text-align: center; padding: 10px; margin-bottom: 20px; + transform: rotate(8deg); } .dashboard-frame { @@ -128,5 +129,6 @@ h3 { .dashboard--layouts { grid-area: Layouts; + background-color: #0089BA; } } From 1490c0069b012344629feb2deeb27d361de2a2f9 Mon Sep 17 00:00:00 2001 From: lamoss1 <109576407+lamoss1@users.noreply.github.com> Date: Mon, 21 Nov 2022 19:37:09 +0000 Subject: [PATCH 02/21] Added HTML and CSS as part of challenge --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index f5fd3fb..390f872 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,10 @@

Selectors

Properties

+
  • +

    Float

    +

    The float property can be used to wrap text around images

    +
    • From 998617a7da494b0f4a266680852f892c50cc5703 Mon Sep 17 00:00:00 2001 From: Ed Crowther Date: Mon, 21 Nov 2022 19:40:04 +0000 Subject: [PATCH 03/21] HTML added to properties section. CSS formatting added to .post-it section. --- index.html | 4 ++++ styles.css | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/index.html b/index.html index f5fd3fb..3007bb0 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,10 @@

    Selectors

    Properties

      +
    • +

      Drop Shadow

      +

      A property which attaches a shadow effect to an element, default value is none. Varibales such as horizontal and vertical offset can be defined, along with blur, spread and color, amongst others.

      +
      • diff --git a/styles.css b/styles.css index 0abfc96..3131a41 100644 --- a/styles.css +++ b/styles.css @@ -17,6 +17,10 @@ h3 { } .post-it { + height: 200px; + aspect-ratio: 1/1; + background-color: #0089ba; + rotate: -3deg; box-shadow: 0 8px 6px -6px black; list-style: none; text-align: center; From fce6a667637bf99d56d6d3ef9e6897f3d8e9e68e Mon Sep 17 00:00:00 2001 From: Tom Wilkinson Date: Mon, 21 Nov 2022 19:45:07 +0000 Subject: [PATCH 04/21] tom wilkinson post it --- index.html | 6 +++++- styles.css | 9 ++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f5fd3fb..ca8aef6 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,11 @@

      Selectors

      Properties

      -
        +
          +
          +

        • Opacity

          The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

          • +
          +
        diff --git a/styles.css b/styles.css index 0abfc96..f7412c9 100644 --- a/styles.css +++ b/styles.css @@ -16,12 +16,19 @@ h3 { font-weight: bold; } -.post-it { +.properties-post-it { box-shadow: 0 8px 6px -6px black; list-style: none; text-align: center; padding: 10px; margin-bottom: 20px; + height: 200px; + aspect-ratio: 1/1; + background-color: #FF6F91; + transform: rotate(10deg) + + + } .dashboard-frame { From 179ab51811b441fa043145d6231d1656f1195982 Mon Sep 17 00:00:00 2001 From: Rachmann Joubert Date: Mon, 21 Nov 2022 19:53:13 +0000 Subject: [PATCH 05/21] Created basic post-it with necessary information --- index.html | 10 +++++++++- styles.css | 5 +++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f5fd3fb..87545e4 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,15 @@

        Selectors

        Properties

        -
          +
            +
          • +

            Background Image

            +

            The background-image property sets
            + one or more background images on an
            + element. +

            +
            • +
          diff --git a/styles.css b/styles.css index 0abfc96..5682124 100644 --- a/styles.css +++ b/styles.css @@ -24,6 +24,11 @@ h3 { margin-bottom: 20px; } +#rachmann-joubert{ + height: 200px; + background-color: #FF6F91; +} + .dashboard-frame { background-image: url("wood-texture.jpeg"); height: 100vh; From 88ffe0a66821579046b89768ebb3a99b0968d8bc Mon Sep 17 00:00:00 2001 From: Matthew Giles Date: Mon, 21 Nov 2022 19:53:14 +0000 Subject: [PATCH 06/21] added Class and ID --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a09377a..67235f2 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

          Properties

          Layouts

            -
          • +

          • Z-index

            The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

            • From e598bce4602b828636c6cd6a7682dadd1d351354 Mon Sep 17 00:00:00 2001 From: lamoss1 <109576407+lamoss1@users.noreply.github.com> Date: Mon, 21 Nov 2022 19:53:16 +0000 Subject: [PATCH 07/21] fixed conflict and added rotate --- index.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 390f872..664eb1d 100644 --- a/index.html +++ b/index.html @@ -17,12 +17,13 @@

            Selectors

          -

          Properties

          -
        • -

          Float

          -

          The float property can be used to wrap text around images

          -
          • -
            +
              +

              Properties

              +
            • +

              Float

              +

              The float property can be used to wrap text around images

              +
              • +
            From dc9c165ba0f86b3cc6569a3cf40fd8f298206f5f Mon Sep 17 00:00:00 2001 From: Lewis Smith Date: Mon, 21 Nov 2022 19:54:43 +0000 Subject: [PATCH 08/21] lewis smith postit font-weight --- index.html | 8 +++++++- styles.css | 8 ++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f5fd3fb..f7197f1 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,13 @@

            Selectors

            Properties

            -
              +
                +
              • +

                font-weight

                +

                This property determines the weight (boldness) of the font. It is contingent on the font-family that is currently set. Example values include: normal, bold, lighter, bolder, 100, 900 etc.

                +
                • + +
              diff --git a/styles.css b/styles.css index 0abfc96..68fc238 100644 --- a/styles.css +++ b/styles.css @@ -93,7 +93,15 @@ h3 { /* PROPERTIES */ /***************************************************/ /* Put Property post-it styles here! ↓ */ +.post-it { + aspect-ratio: 1/1; + height: 200px; + background-color: #FF6F91; +} +#lewis-smith { + rotate: -4deg; +} /***************************************************/ /* LAYOUTS */ /***************************************************/ From f95b1400bdc1de677bdc6b52e2b6ea8cac803044 Mon Sep 17 00:00:00 2001 From: Abi Turner Date: Mon, 21 Nov 2022 19:57:51 +0000 Subject: [PATCH 09/21] added sticky note- Abi Turner --- index.html | 7 ++++++- styles.css | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f5fd3fb..9480c56 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,12 @@

              CSS Board

              Selectors

              -
                +
                  +
                • +

                  Element Selector

                  +

                  The element selector selects HTML elements based on the element name.

                  +
                  • +
                diff --git a/styles.css b/styles.css index 0abfc96..90fe053 100644 --- a/styles.css +++ b/styles.css @@ -88,7 +88,12 @@ h3 { /* SELECTORS */ /***************************************************/ /* Put Selector post-it styles here! ↓ */ - +.post-it { + aspect-ratio: 1/1; + height: 200px; + background-color: #E0EA87; + rotate: -10deg; +} /***************************************************/ /* PROPERTIES */ /***************************************************/ From 9280a9ce2e5a447174823e9b311370a3073d63eb Mon Sep 17 00:00:00 2001 From: josephredmond5 Date: Mon, 21 Nov 2022 19:59:46 +0000 Subject: [PATCH 10/21] index-boxshadow --- index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f5fd3fb..cc94c4a 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,13 @@

                Properties

                Layouts

                -
                  +
                    +
                  • +

                    box-shadow

                    +

                    the box-shadow CSS property adds shadow effects around an elements frame

                    +
                    • +
                  +
                  From 621d54c442b84edc3d43a8568575a0c3a02b6954 Mon Sep 17 00:00:00 2001 From: josephredmond5 Date: Mon, 21 Nov 2022 20:00:41 +0000 Subject: [PATCH 11/21] css-boxshadow --- styles.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/styles.css b/styles.css index 0abfc96..3790664 100644 --- a/styles.css +++ b/styles.css @@ -22,6 +22,9 @@ h3 { text-align: center; padding: 10px; margin-bottom: 20px; + background-color: #0089BA; + height: 200px; + padding-top: 100%; } .dashboard-frame { From 4eb00f12c903824bc29933d80b603d99aba642a0 Mon Sep 17 00:00:00 2001 From: Matthew Giles Date: Mon, 21 Nov 2022 20:04:22 +0000 Subject: [PATCH 12/21] delete other cohorts on my branch --- index.html | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/index.html b/index.html index 24049ee..a063c27 100644 --- a/index.html +++ b/index.html @@ -36,34 +36,6 @@

                  Layouts

                  z-index

                  The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

                  -
                • -

                  Display inline

                  -

                  - Inline elements do not generate a line-break before or after - themselves. The next element will be in the same line, as long - as there's enough space and no other properties stating - otherwise. You cannot adjust the height and width of these - elements. -

                  -
                  • - -
                • -

                  Display Block

                  -

                  - Displays an element as a block. It starts on a new line, and - takes up the whole width of the line. -

                  -
                  • - -
                • -

                  Absolute Positioning

                  -

                  - Absolute Positioning is a web design technique that involves - “breaking the grid” using absolute Positioning for elements. - This helps create a unique and memorable design while offering a - visually compelling user experience. -

                  -
                  • From 63fd74106861c4024564f84bda6a794327f56dde Mon Sep 17 00:00:00 2001 From: Ed Crowther Date: Mon, 21 Nov 2022 20:04:46 +0000 Subject: [PATCH 13/21] changes to
                    as requested by reviewer --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3007bb0..50df4c8 100644 --- a/index.html +++ b/index.html @@ -18,11 +18,12 @@

                    Selectors

                    Properties

                    -
                      +

                      • Drop Shadow

                        A property which attaches a shadow effect to an element, default value is none. Varibales such as horizontal and vertical offset can be defined, along with blur, spread and color, amongst others.

                        • +
                      From 67b39857e86748ef712d153138472f85655c5275 Mon Sep 17 00:00:00 2001 From: Rob B Date: Mon, 21 Nov 2022 20:07:18 +0000 Subject: [PATCH 14/21] Upated ID selector --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 86730a6..e375efa 100644 --- a/styles.css +++ b/styles.css @@ -94,14 +94,14 @@ h3 { /***************************************************/ /* Put Property post-it styles here! ↓ */ -.post-it { +#Rob-B { background-color: #FF6F91; aspect-ratio: 1 / 1; height: 200px; transform: rotate(-5deg); } -.post-it h3 { +#Rob-B h3 { font-weight: bold; } From 7b5468d717d09687385d6f801c0a2ee8e73e99e6 Mon Sep 17 00:00:00 2001 From: Anthony Moran Date: Mon, 21 Nov 2022 20:10:29 +0000 Subject: [PATCH 15/21] added Pseudo-Element Seletor Post-it --- index.html | 7 ++++++- styles.css | 10 ++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f5fd3fb..1d7d3f0 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,12 @@

                      CSS Board

                      Selectors

                      -
                        +
                          +
                        • +

                          Pseudo-Element Selectors

                          +

                          A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

                          +
                          • +
                        diff --git a/styles.css b/styles.css index 0abfc96..592d7ad 100644 --- a/styles.css +++ b/styles.css @@ -17,6 +17,8 @@ h3 { } .post-it { + aspect-ratio: 1:1; + height: 200px; box-shadow: 0 8px 6px -6px black; list-style: none; text-align: center; @@ -88,6 +90,14 @@ h3 { /* SELECTORS */ /***************************************************/ /* Put Selector post-it styles here! ↓ */ +.dashboard--selectors { +transform: rotate(-3deg); +background-color:#E0EA87; +} +h3 { + font-weight: bold; +} + /***************************************************/ /* PROPERTIES */ From 3ba301dba89f8139c5670266e903a6e31da62b48 Mon Sep 17 00:00:00 2001 From: Rachmann Joubert Date: Mon, 21 Nov 2022 20:11:21 +0000 Subject: [PATCH 16/21] Set size/rotation of post-it and additional margin for text --- index.html | 4 ++-- styles.css | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 87545e4..6cb2c1b 100644 --- a/index.html +++ b/index.html @@ -21,8 +21,8 @@

                        Properties

                        • Background Image

                          -

                          The background-image property sets
                          - one or more background images on an
                          +

                          The background-image property sets + one or more background images on an element.

                          • diff --git a/styles.css b/styles.css index 5682124..1b49a6f 100644 --- a/styles.css +++ b/styles.css @@ -25,8 +25,15 @@ h3 { } #rachmann-joubert{ + aspect-ratio: 1/1; height: 200px; background-color: #FF6F91; + transform: rotate(-4deg); +} + +#rachmann-joubert p, h3 { + margin-top: 20px; + font-family: Big Caslon; } .dashboard-frame { From 439f40a9973affca963bbe5ab3f97c87c0c7acbf Mon Sep 17 00:00:00 2001 From: josephredmond5 Date: Mon, 21 Nov 2022 20:15:28 +0000 Subject: [PATCH 17/21] shadow-box --- index.html | 12 +++++++----- styles.css | 15 ++++++++++----- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index cc94c4a..86f4dbf 100644 --- a/index.html +++ b/index.html @@ -18,16 +18,18 @@

                          Selectors

                          Properties

                          -
                            +
                              +
                            • +

                              box-shadow

                              +

                              the box-shadow CSS property adds shadow effects around an elements frame

                              +
                              • +

                            Layouts

                              -
                            • -

                              box-shadow

                              -

                              the box-shadow CSS property adds shadow effects around an elements frame

                              -
                              • +
                            diff --git a/styles.css b/styles.css index 3790664..e8e8e05 100644 --- a/styles.css +++ b/styles.css @@ -22,10 +22,7 @@ h3 { text-align: center; padding: 10px; margin-bottom: 20px; - background-color: #0089BA; - height: 200px; - padding-top: 100%; -} + } .dashboard-frame { background-image: url("wood-texture.jpeg"); @@ -96,7 +93,15 @@ h3 { /* PROPERTIES */ /***************************************************/ /* Put Property post-it styles here! ↓ */ - +#joseph-redmond { + transform:rotate(8deg); + background-color: #0089BA; + height: 200px; + padding-top: 100%; +} +#joseph-redmond h2 { + font-weight: bold; +} /***************************************************/ /* LAYOUTS */ /***************************************************/ From ca87ec4117fa58a0bf517a37a58749735b76cd58 Mon Sep 17 00:00:00 2001 From: Matthew Giles Date: Mon, 21 Nov 2022 20:16:04 +0000 Subject: [PATCH 18/21] attemp 2 at mergining correctly --- index.html | 10 +--------- styles.css | 35 ++--------------------------------- 2 files changed, 3 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index a063c27..e16551a 100644 --- a/index.html +++ b/index.html @@ -18,15 +18,7 @@

                            Selectors

                            Properties

                            -
                              -
                            • -

                              Padding

                              -

                              - CSS padding properties are used to generate space around an - element's content, inside of any defined borders. -

                              -
                              • -
                            +
                              diff --git a/styles.css b/styles.css index 0307753..c35af57 100644 --- a/styles.css +++ b/styles.css @@ -95,44 +95,14 @@ h3 { /***************************************************/ /* Put Property post-it styles here! ↓ */ -.post-it { - background-color: #ff6f91; - aspect-ratio: 1 / 1; - height: 200px; - transform: rotate(-5deg); -} - -.post-it h3 { - font-weight: bold; -} - /***************************************************/ /* LAYOUTS */ /***************************************************/ /* Put Layout post-it styles here! ↓ */ -#sarah-moran { - background-color: #0089ba; - height: 200px; - aspect-ratio: 1/1; - rotate: 5deg; -} -#greg-cain { - background-color: #0089ba; - max-width: 200px; - max-height: 200px; - transform: rotate(10deg); -} -#tarndeep { - width: 200px; - height: 200px; - border: 2px turquoise solid; +#matthew-giles { background-color: #0089ba; - transform: rotate(-5deg); -} - -#tarndeep h3 { - font-weight: bold; + transform: rotate(-4deg); } /***************************************************/ @@ -164,6 +134,5 @@ h3 { .dashboard--layouts { grid-area: Layouts; - background-color: #0089BA; } } From 9342f96b006433afb2d1f060e56fcd236a094407 Mon Sep 17 00:00:00 2001 From: Rob B Date: Mon, 21 Nov 2022 20:26:17 +0000 Subject: [PATCH 19/21] missing closing CSS selector curly brace --- styles.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/styles.css b/styles.css index 7b28001..ab1302e 100644 --- a/styles.css +++ b/styles.css @@ -107,6 +107,8 @@ h3 { #Rob-B { background-color: #FF6F91; +} + .post-it { background-color: #ff6f91; From 35443c310fd960439894094b53b03d895fd29d78 Mon Sep 17 00:00:00 2001 From: lamoss1 <109576407+lamoss1@users.noreply.github.com> Date: Mon, 21 Nov 2022 20:30:04 +0000 Subject: [PATCH 20/21] added css styles --- styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles.css b/styles.css index 0abfc96..94785b8 100644 --- a/styles.css +++ b/styles.css @@ -14,6 +14,7 @@ h3 { font-weight: bold; margin-bottom: 4px; font-weight: bold; + font-display: bold; } .post-it { @@ -22,6 +23,10 @@ h3 { text-align: center; padding: 10px; margin-bottom: 20px; + aspect-ratio: 1; + height: 200px; + background-color: #ff6f91; + rotate: 2deg; } .dashboard-frame { From 2f896c3b8e2ada7e1fdd4bd88ede1680d3b58f24 Mon Sep 17 00:00:00 2001 From: lamoss1 <109576407+lamoss1@users.noreply.github.com> Date: Mon, 21 Nov 2022 20:40:55 +0000 Subject: [PATCH 21/21] Changed code to styles.css --- styles.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/styles.css b/styles.css index 94785b8..2fd9875 100644 --- a/styles.css +++ b/styles.css @@ -23,6 +23,8 @@ h3 { text-align: center; padding: 10px; margin-bottom: 20px; +} +#Lee-Moss { aspect-ratio: 1; height: 200px; background-color: #ff6f91;