diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..0caf532 --- /dev/null +++ b/README.md @@ -0,0 +1,61 @@ +# CSS Week + +## Monday + +- Layout + + Using layout.html and layout.js, we designed a page that has a spatially designed layout. Each element, instead of being based on content and floating left/right, is given a percentage of the page to occupy. + + Layout.js is only used to color the divs on the layout.html page. Do not edit/worry too much about the javascript. + +- Animations Intro + + keyframes + + from & to - useful for 2 state animation, a start and finish + from sets the beginning + to sets the end + percentages - thinking of your animation more as a video that you're editing, you can add styles that control what the target should be doing at certain parts of the animation. In the example, the emoji starts at 0, halfway through its animation it is across the page. 100% aka at the end of the animation, it should be back where it started at 0 + +## Tuesday + +- [Selectors](https://codeschoolcourses.slack.com/archives/C06ELJ3SV1A/p1707838519276469) + + - Elementname/Tagname/Type Selectors + - Class Selector + - ID Selector + - Attribute Selector + - Pseudo-class Selector + - Pseudo-Element Selector + +## Wednesday + +- Box Model + - content + - padding + - border + - margin + - ++ block vs inline - new line vs same line + - ++ alternative model - no margin or padding + +- Flex + + Control the layout of child elements either horizontally or vertically + +- Grid + + Control the layout of child elements both horizontally and vertically + + +## Layout Examples + +The folders in this repo contain a collection of the various ways of setting up page layouts we've discussed this week. + +[semantic](https://codecrew-codeschool.github.io/css-intro/semantic/layout.html) +- using semantic elements and the float style for sidebars, we can arrange content on our page based on our content. + +[div](https://codecrew-codeschool.github.io/css-intro/div/layout.html) +- irrespective of content, we can generate a layout using div elements and give them a percentage of the page they can take up. + +[grid](https://codecrew-codeschool.github.io/css-intro/grid/layout.html) +- going all in, we can use semantic elements where applicable, and style our page with a specific grid layout to properly space elements \ No newline at end of file diff --git a/anim/index.html b/anim/index.html new file mode 100644 index 0000000..a772dcf --- /dev/null +++ b/anim/index.html @@ -0,0 +1,22 @@ + + + + + + Animation Overview + + + +

Header Text

+

Header Text

+

Header Text

+

Header Text

+ + \ No newline at end of file diff --git a/div/layout.html b/div/layout.html new file mode 100644 index 0000000..24042cc --- /dev/null +++ b/div/layout.html @@ -0,0 +1,93 @@ + + + + + + +
+
+
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+ This is our link + This is just text +
+ no image +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo autem iusto earum modi quas facere consequatur fuga temporibus a ullam, architecto ab iure maxime amet nihil ad nostrum saepe ipsum. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolores, doloremque, facilis incidunt quisquam earum facere, aliquid minima numquam molestiae praesentium cum pariatur dolore! Cumque numquam id perferendis ex distinctio! + Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis aut pariatur eveniet aliquam! Numquam, a. Dolorum, possimus sapiente asperiores repudiandae officia, cumque aperiam consectetur quas quidem, veritatis eius labore facilis! +

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo autem iusto earum modi quas facere consequatur fuga temporibus a ullam, architecto ab iure maxime amet nihil ad nostrum saepe ipsum. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolores, doloremque, facilis incidunt quisquam earum facere, aliquid minima numquam molestiae praesentium cum pariatur dolore! Cumque numquam id perferendis ex distinctio! + Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis aut pariatur eveniet aliquam! Numquam, a. Dolorum, possimus sapiente asperiores repudiandae officia, cumque aperiam consectetur quas quidem, veritatis eius labore facilis! +

+
+ +
+
+ + + + + \ No newline at end of file diff --git a/div/layout.js b/div/layout.js new file mode 100644 index 0000000..ed4b17a --- /dev/null +++ b/div/layout.js @@ -0,0 +1,18 @@ +function changeDivDisplayToInlineBlock() { + // Select all div elements on the page + const divs = document.querySelectorAll('div'); + + // Iterate over each div + divs.forEach(function(div) { + div.style.display = "inline-block" + div.style.boxSizing = "border-box" + div.style.border = "3px solid black" + div.style.minWidth = "1%" + div.style.minHeight = "1%" + const randomColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`; + div.style.border = `3px solid ${randomColor}` + }); +} + +// Run the function to change the colors +changeDivDisplayToInlineBlock(); diff --git a/grid/C.png b/grid/C.png new file mode 100644 index 0000000..7d240f8 Binary files /dev/null and b/grid/C.png differ diff --git a/grid/layout.html b/grid/layout.html new file mode 100644 index 0000000..12165dd --- /dev/null +++ b/grid/layout.html @@ -0,0 +1,221 @@ + + + + + + Layout Medley + + + +
+

This div has it's display style set to "display: block;" by default

+
+
+

Column 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 3

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+
+
+ +
+
+

This div has it's display style set to "display: flex;" by the flex-div class

+

"flex-direction: row;" arranges the content into separate columns on the same row. If it is changed to "flex-direction: column;", it would mirror the previous block layout

+
+
+
+

Column 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+

The next list displays block

+ +
    +
  • Lorem ipsum
    • +
  • ipsum Lorem
    • +
  • Lorem ipsum
    • +
+ +

The next list displays flex

+
    +
  • Lorem ipsum
    • +
  • ipsum Lorem
    • +
  • Lorem ipsum
    • +
+
+
+

Column 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+ +

The following text is inline, the above is block

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui voluptatibus quo excepturi! Sed quam quibusdam libero, impedit facilis placeat veritatis accusamus, unde nulla minus nostrum autem praesentium suscipit cumque ratione!

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio fuga vero commodi, esse repudiandae totam quis tempora veniam nihil iste facilis consectetur ipsam error, ullam illum iusto doloremque enim obcaecati?

+ +
+
+

Column 3

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+ Link Text + Link Text + Link Text + Link Text + Link Text + Link Text + Link Text + Link Text + + + +

The first image displays inline-block so it will join inline with the links if possible, the second image is block so it doesn't play well with others.

+
+
+
+
+ +
+ +
+

This div has it's display style set to "display: grid;" by the container class.

+

The grid is ordered into 3 columns and as many rows as needed via grid-template-areas

+
+
+
+

Column 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 3

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 3

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 3

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+

Column 3

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+
+ +
+
+ +
+

This div has it's display style set to "display: grid;" by the area-container class.

+

The grid is ordered into 3 rows via grid-template-areas

+

Each area is specified with the grid-area style

+
+ +
+

Header Text

+
+
+

Content

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, officia! Dignissimos accusantium, sed incidunt porro ipsam, eius at neque dolores atque repellendus culpa cupiditate nisi? Eius excepturi qui distinctio dolore?

+
+ +
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index fe914a0..89d4440 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ #emoji { display: inline-block; /* Allows transformation */ - animation: slideRightAndBack 2s infinite; /* Adjust timing as needed */ + animation: slideRightAndBack 10s infinite; /* Adjust timing as needed */ } .header-container { @@ -19,7 +19,7 @@ transform: rotate(0deg); } to { - transform: rotate(360deg); + transform: rotate(180deg); } } diff --git a/layout.html b/layout.html index 58aa0f4..2fe77d8 100644 --- a/layout.html +++ b/layout.html @@ -1,5 +1,92 @@ - + -
+ + + + +
+
+
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+ This is our link + This is just text +
+ no image +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo autem iusto earum modi quas facere consequatur fuga temporibus a ullam, architecto ab iure maxime amet nihil ad nostrum saepe ipsum. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolores, doloremque, facilis incidunt quisquam earum facere, aliquid minima numquam molestiae praesentium cum pariatur dolore! Cumque numquam id perferendis ex distinctio! + Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis aut pariatur eveniet aliquam! Numquam, a. Dolorum, possimus sapiente asperiores repudiandae officia, cumque aperiam consectetur quas quidem, veritatis eius labore facilis! +

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo autem iusto earum modi quas facere consequatur fuga temporibus a ullam, architecto ab iure maxime amet nihil ad nostrum saepe ipsum. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolores, doloremque, facilis incidunt quisquam earum facere, aliquid minima numquam molestiae praesentium cum pariatur dolore! Cumque numquam id perferendis ex distinctio! + Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis aut pariatur eveniet aliquam! Numquam, a. Dolorum, possimus sapiente asperiores repudiandae officia, cumque aperiam consectetur quas quidem, veritatis eius labore facilis! +

+
+ +
+
+ + + \ No newline at end of file diff --git a/media/index.html b/media/index.html new file mode 100644 index 0000000..295885d --- /dev/null +++ b/media/index.html @@ -0,0 +1,18 @@ + + + + + + Media Queries + + + +

Media Query Examples

+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit dolore doloremque maxime enim sint ex, sed velit quia optio! Enim facere tempore animi quibusdam eius libero, rerum tenetur. Sit, ipsa.

+ +

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe delectus deleniti labore reiciendis a quam, illo, est quibusdam similique praesentium repellendus! Incidunt distinctio officiis commodi saepe odio? Quaerat, fuga eos.

+
+ + + \ No newline at end of file diff --git a/media/styles.css b/media/styles.css new file mode 100644 index 0000000..148377e --- /dev/null +++ b/media/styles.css @@ -0,0 +1,17 @@ +@media (width <= 1250px) { + body { + background-color: black; + color: pink; + } +} +@media (width > 1250px) { + body { + background-color: lightgray; + } + .content { + display: flex; + } +} +/* BEGIN with the END in MIND -brainEmoji- +-- Georleshia Minter, + Systems Engineer @ AutoZone HQ */ \ No newline at end of file diff --git a/semantic/layout.html b/semantic/layout.html new file mode 100644 index 0000000..8cb9f2d --- /dev/null +++ b/semantic/layout.html @@ -0,0 +1,40 @@ + + + + + + Semantic Layouts + + + + + + + Header + + +
+ Main Content + + +
+ + + + \ No newline at end of file