Add contributing code for CSS challenge

index.html

@@ -13,53 +13,76 @@ <h1 class="dashboard--heading">CSS Board</h1>
 
         <section class="dashboard--selectors">
           <h2>Selectors</h2>
-          <ul></ul>
+          <ul>
+            <li class="post-it" id="Tony-Moran"> 
+            <h3>Pseudo-Element Selectors</h3>
+            <p> A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).</p> 
+            =======     </li>
+            <li class="post-it" id="Abi-Turner">
+              <h3>Element Selector</h3>
+              <p>The element selector selects HTML elements based on the element name.</p>
+            </li>
+          </ul>
         </section>
 
         <section class="dashboard--properties">
+         Lee-Moss
+          <ul>
+            <h2>Properties</h2>
+            <li class="post-it" id="Lee-Moss">
+              <h3>Float</h3>
+              <p>The float property can be used to wrap text around images</p>
+
           <h2>Properties</h2>
           <ul>
+            <li class="post-it" id="tom-wilkinson">
+              <h3> Opacity</h3>
+              <p> 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.</p>
+              </li>
+
+
+            <li class="post-it" id="rachmann-joubert">
+              <h3>Background Image</h3>
+              <p>The background-image property sets
+                one or more background images on an
+                element.
+              </p>
+            </li>
+
+            <li class="post-it" id="lewis-smith">
+              <h3>font-weight</h3>    
+              <p>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.</p>
+            </li>
+
+             <li class="post-it" id="joseph-redmond">
+            <h3>box-shadow</h3>
+             <p>the box-shadow CSS property adds shadow effects around an elements frame</p>
+           </li>
+
+          <li id="edcrowther" class="post-it">
+            <h3>Drop Shadow</h3>
+            <p>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.</p>
+          </li>
+
             <li class="post-it" id="Rob-B">
               <h3>Padding</h3>
               <p>
                 CSS padding properties are used to generate space around an
                 element's content, inside of any defined borders.
               </p>
+
+           oct-22
             </li>
           </ul>
         </section>
 
         <section class="dashboard--layouts">
           <h2>Layouts</h2>
           <ul>
-            <li id="sarah-moran" class="post-it">
-              <h3>Display inline</h3>
-              <p>
-                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.
-              </p>
-            </li>
-
-            <li class="post-it" id="tarndeep">
-              <h3>Display Block</h3>
-              <p>
-                Displays an element as a block. It starts on a new line, and
-                takes up the whole width of the line.
-              </p>
-            </li>
-
-            <li class="post-it" id="greg-cain">
-              <h3>Absolute Positioning</h3>
-              <p>
-                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.
-              </p>
-            </li>
+            <li class="post-it" id="matthew-giles">
+              <h3>z-index</h3>
+              <p>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.</p>
+              </li>
           </ul>
         </section>
       </div>

styles.css

@@ -14,6 +14,7 @@ h3 {
   font-weight: bold;
   margin-bottom: 4px;
   font-weight: bold;
+  font-display: bold;
 }
 
 .post-it {
@@ -22,6 +23,16 @@ h3 {
   text-align: center;
   padding: 10px;
   margin-bottom: 20px;
+  height: 200px;
+  aspect-ratio: 1/1;
+  background-color: #FF6F91;
+  transform: rotate(10deg)
+}
+#Lee-Moss {
+  aspect-ratio: 1;
+  height: 200px;
+  background-color: #ff6f91;
+  rotate: 2deg;
 }
 
 .dashboard-frame {
@@ -88,52 +99,71 @@ h3 {
 /* SELECTORS */
 /***************************************************/
 /* Put Selector post-it styles here! ↓ */
+.dashboard--selectors {
+transform: rotate(-3deg);
+background-color:#E0EA87;
+}
+h3 {
+  font-weight: bold;
+}
+=======
+.post-it {
+  aspect-ratio: 1/1;
+  height: 200px;
+  background-color: #E0EA87;
+  rotate: -10deg;
 
 /***************************************************/
 /* PROPERTIES */
 /***************************************************/
 /* Put Property post-it styles here! ↓ */
 
 .post-it {
-  background-color: #ff6f91;
-  aspect-ratio: 1 / 1;
+  aspect-ratio: 1/1;
   height: 200px;
-  transform: rotate(-5deg);
+  background-color: #FF6F91;
 }
 
-.post-it h3 {
-  font-weight: bold;
+
+#lewis-smith {
+  rotate: -4deg;
 }
 
-/***************************************************/
-/* LAYOUTS */
-/***************************************************/
-/* Put Layout post-it styles here! ↓ */
-#sarah-moran {
-  background-color: #0089ba;
+#joseph-redmond {
+  transform:rotate(8deg);
+  background-color: #0089BA;
   height: 200px;
-  aspect-ratio: 1/1;
-  rotate: 5deg;
+  padding-top: 100%;
 }
-#greg-cain {
-  background-color: #0089ba;
-  max-width: 200px;
-  max-height: 200px;
-  transform: rotate(10deg);
+#joseph-redmond h2 {
+  font-weight: bold;
+}
+
+#Rob-B {
+  background-color: #FF6F91;
 }
 
-#tarndeep {
-  width: 200px;
+
+  aspect-ratio: 1 / 1;
   height: 200px;
-  border: 2px turquoise solid;
-  background-color: #0089ba;
   transform: rotate(-5deg);
 }
 
-#tarndeep h3 {
+#Rob-B h3 {
   font-weight: bold;
 }
 
+
+/***************************************************/
+/* LAYOUTS */
+/***************************************************/
+/* Put Layout post-it styles here! ↓ */
+
+#matthew-giles {
+  background-color: #0089ba;
+  transform: rotate(-4deg);
+}
+
 /***************************************************/
 /* MEDIA QUERIES TO ENSURE RESPONSIVENESS */
 /* Please do not change ^_^ */