diff --git a/index.html b/index.html index f5fd3fb..68358d7 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,164 @@ - - - - - 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{}.

    +

    • Selectors

    -
      +
        +
      • +

        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

      -
        -
        +
      • +

        Pseudo-Element Selectors

        +

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

        +
        • -
        -

        Layouts

        -
          -
          -
        +
      • +

        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.

          +
          • + +
        • +

          Background Image

          +

          Background image property in CSS essentially puts an image to become our backdrop it take in a url which is a directory to + the image

          +
          • + +
        • +

          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..ade2612 100644 --- a/styles.css +++ b/styles.css @@ -2,7 +2,9 @@ /* GENERAL STYLING */ /* Please do not change ^_^ */ /***************************************************/ - +body{ +/* background-image: url('./wood-texture.jpeg'); */ +} * { margin: 0; padding: 0; @@ -83,12 +85,218 @@ /***************************************************/ /* 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; +} + +#AhmedG41 { + aspect-ratio: 1 / 1; + height: 200px; + background-color: #FF6F91; + rotate: -6deg; +} +#AhmedG41 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; + } +}