diff --git a/index.html b/index.html index f5fd3fb..e2b39ea 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,136 @@ - - - - - CSS Board - - -
-
-

CSS Board

+ + + + + + CSS Board + + + +
+
+

CSS Board

Selectors

-
    + +
      +
    • + +

      Element Selector

      + +

      This group of selectors includes pseudo-classes, which style certain states of an element. + The :hover pseudo-class for example selects an element only when it is being hovered + over by the mouse pointer:

      +
      • + + +
    • +

      Pseudo Class Selectors

      +

      Pseudo-classes are keywords added to a selector
      + An example is selector:hover{}.

      +
      • +
    • +

      Pseudo-Element Selectors

      +

      Let you style part of the selected element e.g. the first line. They create an element without additonal HTML.

      +
    • +

      Class

      +

      The class selector starts with a dot (.) character. It will select everything in the document with that class applied to it.

      +
      • +
    • +

      Combinator Selectors

      +

      Combinator Selectors combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.

      +
      • +
    +

    Properties

    -
      + +
        +
      • + +

        Border

        +

        A border is an outline box that goes around a property you assign it to.

        +
        • +
      • +

        Font Weight

        +

        The font-weight CSS property sets the weight (or boldness) of the font.

        +
        • +
      • +

        Border Radius

        +

        The border-radius property defines the radius of an element's corners, which allows you to add rounded corners to elements.

        +
        • + +
      • +

        Opacity

        +

        Specifies the transparency of an element

        +
        • +
      • +

        Drop-shadow

        +
        +

        The drop-shadow function applies a shadow effect to the input image. Unlike box-shadow, it allows you to apply a shadow to non-rectangular shapes.

        + +
        • +

      Layouts

      -
        +
          +
        • +

          z-index

          +

          The z-index property specifies the stack order of an element. + + An element with greater stack order is always in front of an element with a lower stack order.

          +
          • +
        + + +
      • +

        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. +

        +
        • + + +
      • +

        Absolute Positioning

        +

        Absolute positiing is used within CSS to position an element in which the value is absolute or fixed. +

        +
        • + +
      • +

        + Fixed Positioning +

        +

        + Elements with a "postion:" property of "fixed" are positioned as fixed relative to the viewport. This means that the element will always stay in the same place, even if the page is scrolled. The element exists outside of the normal flow of the document. +

        +
        • +
      • +

        Flex

        +

        Flexbox allows the user to align items vertically and horizontally. It has 3 flex properties; grow, shrink and basis that allows the boxes to expand and contract.

        +
        • + +
      • +

        Grids

        +

        CSS Grid Layout (aka “Grid” or “CSS Grid”), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces.

        +
        • + + +
        -
        - - +
        + + + \ No newline at end of file diff --git a/styles.css b/styles.css index addc014..379ccb3 100644 --- a/styles.css +++ b/styles.css @@ -83,12 +83,210 @@ /***************************************************/ /* Put Selector post-it styles here! ↓ */ + +#asif-islam +{ + height: 200px; + aspect-ratio: 1 / 1; + background-color: #E0EA87; + rotate: 10deg; +} + +#asif-islam h3 +{ + font-weight: bold; +} + +#dave-bratby { + aspect-ratio: 1/1; + transform: rotate(-10deg); + height: 200px; + background: #e0ea87; +} + +#camillaPriestStephens { + aspect-ratio: 1 / 1; + height: 200px; + background-color: #e0ea87; + transform: rotate(-5deg); +} + +#camillaPriestStephens h3 { + font-weight: bold; +} + +/* joshkuhn start */ + +#jenny { + background-color: #e0ea87; + aspect-ratio: 1/1; + height: 200px; + transform: rotate(3deg); +} +#jenny h3 { + font-weight: bold; +} + +#joshkuhn { + color: black; + background-color: #e0ea87; + aspect-ratio: 1/1; + height: 200px; + width: auto; + transform: rotate(-5deg); +} + +#joshkuhn h3 { + font-weight: bold; +} + /***************************************************/ /* PROPERTIES */ /***************************************************/ /* Put Property post-it styles here! ↓ */ +#Emma-Wilkinson { + aspect-ratio: 1/1; + height: 200px; + background-color: #ff6f91; + transform: rotate(1deg); + width: 250px; +} + +#Emma-Wilkinson h3 { + font-weight: bold; +} + +#benj-speight { + aspect-ratio: 1 / 1; + height: 200px; + background-color: #ff6f91; + rotate: -6deg; +} + +#benj-speight h3 { + font-weight: bold; +} + +#jose-wills { + aspect-ratio: 1 / 1; + height: 200px; + background-color: #ff6f91; + transform: rotate(9deg); +} + +#jose-wills h3 { + font-weight: bold; +} + +#david { + aspect-ratio: 1 / 1; + height: 200px; + background-color: #ff6f91; + transform: rotate(-5deg); +} +#max-tauroza { + background-color: #ff6f91; + height: 200px; + transform: rotate(7deg); + aspect-ratio: 1 / 1; +} + +#max-tauroza h3 { + font-weight: bold; +} + +#david h3 { + font-weight: bold; +} /***************************************************/ /* LAYOUTS */ /***************************************************/ /* Put Layout post-it styles here! ↓ */ + +.post-it#amy-smith { + height: 200px; + aspect-ratio: 1; + background-color: #0089BA; + rotate: 10deg; +} + +#amy-smith h3 { + font-weight: bold; +} + +#armghan-zubair { + background-color: #0089ba; + height: 200px; + aspect-ratio: 1/1; + rotate: 5deg; + +#matt_mullins { + aspect-ratio: 1/1; + height: 200px; + background-color: #0089ba; + transform: rotate(6.7deg); +} + +#matt_mullins_h3 { + font-weight: bold; +} + +#jordan-noble { + height: 200px; + aspect-ratio: 1 / 1; + background-color: #0089ba; + rotate: -6deg; +} + +#jordan-noble h3 { + font-weight: bold; +} +#anthony { + height: 200px; + aspect-ratio: 1 / 1; + background-color: #0089ba; + transform: rotate(10deg); +} + +#anthony h3 { + font-weight: 700; +} + +#umar-farooq { + height: 200px; + aspect-ratio: 1 / 1; + background-color: #0089BA; + transform: rotate(-4deg); +} +/***************************************************/ +/* MEDIA QUERIES TO ENSURE RESPONSIVENESS */ +/* Please do not change ^_^ */ +/***************************************************/ + +@media screen and (min-width: 768px) { + .dashboard-area { + display: grid; + grid-template-rows: 0.5fr repeat(2, 1fr); + grid-template-areas: + "Heading Heading Heading" + "Selectors Properties Layouts" + "Selectors Properties Layouts"; + } + + .dashboard--heading { + grid-area: Heading; + } + + .dashboard--selectors { + grid-area: Selectors; + } + + .dashboard--properties { + grid-area: Properties; + } + + .dashboard--layouts { + grid-area: Layouts; + } +}