diff --git a/css - the complete guide/2. diving_into_basics.md b/css - the complete guide/2. diving_into_basics.md index a11779a..e16ad9e 100644 --- a/css - the complete guide/2. diving_into_basics.md +++ b/css - the complete guide/2. diving_into_basics.md @@ -236,7 +236,7 @@ div p { ## Summarizing Selectors, Properties & Values -A reference [link]() for all the css properties. +A reference [link](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) for all the css properties. ### Value Types diff --git a/css - the complete guide/5. practicing_the_basics.md b/css - the complete guide/5. practicing_the_basics.md index e69de29..41065af 100644 --- a/css - the complete guide/5. practicing_the_basics.md +++ b/css - the complete guide/5. practicing_the_basics.md @@ -0,0 +1,3 @@ +# Practicing The Basics + +The `chap5` direcoty contains all the code for this module, you can go through the css files to get a good idea of all the rules and properties used. \ No newline at end of file diff --git a/css - the complete guide/6. positioning_elements_with_css.md b/css - the complete guide/6. positioning_elements_with_css.md new file mode 100644 index 0000000..5255c2a --- /dev/null +++ b/css - the complete guide/6. positioning_elements_with_css.md @@ -0,0 +1,81 @@ +# Positioning Elements With CSS + +[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/position) for `position` property. + +## Theory Time - Understanding Positioning + +The `position` property with value `static` is applied by default to all elements in the *Document Flow*. + +`position` property has the following values that we can set to change the position of an element: +* `static` +* `absolute` +* `relative` +* `fixed` +* `sticky` + +To use the *positioning properties* like `top`, `right`, `bottom` and `left`, we need to change the value of `position` property from `static` to something else. + +## Working With The `fixed` Value + +We can use the `position: fixed` to keep our navigation bar from scrolling out of the viewport. For example: + +```css +.main-header { + position: fixed; + top: 0; + left: 0; + margin: 0; + width: 100%; + box-sizing: border-box; +} +``` + + +## Using The `position` To Add A Background Image + +`position: fixed` is useful when you want a background image that should not be the part of the *document flow*. But you'll see that by adding this rule to the image, it overlaps other elements. We can fix that using the `z-index`. + + +## Understanding the `z-index` + +The default value for `z-index` is `auto`, which is `0`. Adding `z-index` to elements with no `position` property applied or with `static` value, the `z-index` doesn't work. Elements with same value of `z-index` follow the order of the elements in the HTML document, that is the elements declared later will be displayed above the elements declared before them. + +```css +.background { + backgound: url(""); + width: 100%; + height: 100%; + position: fixed; + z-index: -1; +} +``` + + +## Styling And Positioning Our Badge With `absolute` + +`absolute` positioned element is removed from the normal document, and is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. + + +## Diving Deeper Into `relative` Positioning + +The element is positioned according to the normal flow of the document, and then offset `relative` to itself based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements; thus, the space given for the elemWent in the page layout is the same as if position were `static`. + + +## Working With `overflow` And Relative Positioning + +Setting `overflow: hidden;` on parent element hides the relatively positioned element once its outside of the containing parent. + +`overflow: hidden;` on `body` element by default doesn't work as it is passed on to the `html` element as a default CSS behavior, which can be overwritten by adding it to both `html` and `body` elements. + + +## `sticky` Positioning + +`stickey` is a combination of `relative` and `fixed`. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting `top` to value other than `auto`) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block. + + +## Understanding the Stacking Context + +A stacking context is formed anywhere in the document by any element with a `position` value `absolute`, `relative`, `fixed` or `sticky`. Within a stacking context, the `z-index` values only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context. + +Stacking context is formed in some other scenarios as well, which can be look at on its [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). + diff --git a/css - the complete guide/chap5/favicon.png b/css - the complete guide/chap5/favicon.png new file mode 100644 index 0000000..fc10fba Binary files /dev/null and b/css - the complete guide/chap5/favicon.png differ diff --git a/css - the complete guide/chap5/freedom.jpg b/css - the complete guide/chap5/freedom.jpg new file mode 100644 index 0000000..8c94eb7 Binary files /dev/null and b/css - the complete guide/chap5/freedom.jpg differ diff --git a/css - the complete guide/chap5/index.html b/css - the complete guide/chap5/index.html new file mode 100644 index 0000000..5420b95 --- /dev/null +++ b/css - the complete guide/chap5/index.html @@ -0,0 +1,126 @@ + + + + + + + uHost + + + + + + + + +
+
+ + uHost + +
+ +
+
+
+

Get the freedom you deserve.

+
+
+

Choose Your Plan

+
+
+

FREE

+

$0/month

+

For hobby projects or small teams.

+
    +
  • 1 Workspace
    • +
  • Unlimited Traffic
    • +
  • 10GB Storage
    • +
  • Basic Support
    • +
+
+ +
+
+
+

RECOMMENDED

+

PLUS

+

$29/month

+

For ambitious projects.

+
    +
  • 5 Workspaces
    • +
  • Unlimited Traffic
    • +
  • 100GB Storage
    • +
  • Plus Support
    • +
+
+ +
+
+
+

PREMIUM

+

$99/month

+

Your enterprise solution.

+
    +
  • 10 Workspaces
    • +
  • Unlimited Traffic
    • +
  • Unlimited Storage
    • +
  • Priority Support
    • +
+
+ +
+
+
+
+
+

Many Good Reasons to Stick Around

+ +
+
+ + + + \ No newline at end of file diff --git a/css - the complete guide/chap5/main.css b/css - the complete guide/chap5/main.css new file mode 100644 index 0000000..757201f --- /dev/null +++ b/css - the complete guide/chap5/main.css @@ -0,0 +1,119 @@ + + +#product-overview { + background: url("freedom.jpg"); + width: 100%; + height: 528px; + padding: 10px; +} + +.section-title { + color: #2ddf5c; + text-align: center; +} + +#product-overview h1 { + color: white; + font-family: 'Anton', sans-serif; +} + +.plan__list { + width: 80%; + margin: auto; + text-align: center; +} + +.plan { + background: #d5ffdc; + text-align: center; + padding: 16px; + margin: 8px; + display: inline-block; + width: 30%; + vertical-align: middle; +} + +.plan--highlighted { + background: #19b84c; + color: white; + box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5); +} + +.plan__annotation { + background: white; + color: #19b84c; + padding: 8px; + box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5); + border-radius: 8px; +} + +.plan__title { + color: #0e4f1f; +} + +.plan__price { + color: #858585; +} + +.plan--highlighted .plan__title { + color: white; +} + +.plan--highlighted .plan__price { + color: #0e4f1f; +} + +.plan__features { + list-style: none; + margin: 0; + padding: 0; +} + +.plan__feature { + margin: 8px 0; +} + +#key-features { + background: #ff1b68; + margin-top: 80px; + padding: 16px; +} + +#key-features .section-title { + color: white; + margin: 32px; +} + +.key-feature__list { + list-style: none; + margin: 0; + padding: 0; + text-align: center; +} + +.key-feature { + display: inline-block; + width: 30%; + vertical-align: top; +} + +.key-feature__image { + background: #ffcede; + width: 128px; + height: 128px; + border: 2px solid #424242; + border-radius: 50%; + margin: auto; +} + +.key-feature__description { + text-align: center; + font-weight: bold; + color: white; + font-size: 20px; +} + +/* h1 { + font-family: sans-serif; +} */ + diff --git a/css - the complete guide/chap5/packages/index.html b/css - the complete guide/chap5/packages/index.html new file mode 100644 index 0000000..7649fee --- /dev/null +++ b/css - the complete guide/chap5/packages/index.html @@ -0,0 +1,74 @@ + + + + + + + uHost + + + + + + + +
+
+ + uHost + +
+ +
+
+
+ +

Our PLUS Plan

+

The most popular choice of our customers.

+

Benefit from increased storage and faster support to ensure that your mission-critical data and applications + are always available!

+ +
+
+ +

Our FREE Plan

+

An extremely solid start into our hosting world.

+

Get started immediately at zero cost!

+ +
+
+
+ +

Our PREMIUM Plan

+

All your enterprise needs. Instant support, guaranteed uptime.

+

The best solution for small to large enterprises. Because hosting shouldn't be in the way!

+ +
+
+ + + + \ No newline at end of file diff --git a/css - the complete guide/chap5/packages/packages.css b/css - the complete guide/chap5/packages/packages.css new file mode 100644 index 0000000..f91743b --- /dev/null +++ b/css - the complete guide/chap5/packages/packages.css @@ -0,0 +1,69 @@ +main { + padding-top: 32px; +} + +.package { + width: 80%; + margin: 16px 0; + border: 4px solid #0e4f1f; + border-left: none; +} + +.package:hover, +.package:active { + box-shadow: 2px 2px 4px rgba(0,0,0,0.5); + border-color: #ff5454; + /* border-color: #ff5454 !important; */ +} + +.package a { + text-decoration: none; + color: inherit; + display: block; + padding: 32px; +} + +.package__subtitle { + color: #979797; +} + +.package__info { + padding: 16px; + border: 1px solid #0e4f1f; + font-size: 20px; + color: #0e4f1f; + background: white; +} + +.clearfix { + clear: both; +} + +#plus { + background: rgba(213, 255, 220, 0.95); +} + +#free { + background: rgba(234, 252, 237, 0.95); + float: right; + border-right: none; + border-left: 4px solid #0e4f1f; + text-align: right; +} + +#free:hover, +#free:active { + border-left-color: #ff5454; +} + +#premium { + background: rgba(14, 79, 31, 0.95); +} + +#premium .package__title { + color: white; +} + +#premium .package__subtitle { + color: #bbb; +} \ No newline at end of file diff --git a/css - the complete guide/chap5/shared.css b/css - the complete guide/chap5/shared.css new file mode 100644 index 0000000..edfaf1e --- /dev/null +++ b/css - the complete guide/chap5/shared.css @@ -0,0 +1,120 @@ +* { + box-sizing: border-box; +} + +body { + font-family: 'Montserrat', sans-serif; + margin: 0; +} + +.main-header { + width: 100%; + background: #2ddf5c; + padding: 8px 16px; +} + +.main-header > div { + display: inline-block; + vertical-align: middle; +} + +.main-header__brand { + color: #0e4f1f; + text-decoration: none; + font-weight: bold; + font-size: 22px; +} + +.main-nav { + display: inline-block; + text-align: right; + width: calc(100% - 74px); + vertical-align: middle; +} + +.main-nav__items { + margin: 0; + padding: 0; + list-style: none; +} + +.main-nav__item { + display: inline-block; + margin: 0 16px; +} + +.main-nav__item a { + text-decoration: none; + color: #0e4f1f; + font-weight: bold; + padding: 3px 0; +} + +.main-nav__item a:hover, +.main-nav__item a:active { + color: white; + border-bottom: 5px solid white; +} + +.main-nav__item--cta a { + color: white; + background: #ff1b68; + padding: 8px 16px; + border-radius: 8px; +} + +.main-nav__item--cta a:hover, +.main-nav__item--cta a:active { + color: #ff1b68; + background: white; + border: none; +} + +.main-footer { + background: black; + padding: 32px; + margin-top: 48px; +} + +.main-footer__links { + list-style: none; + margin: 0; + padding: 0; + text-align: center; +} + +.main-footer__link { + display: inline-block; + margin: 0 16px; +} + +.main-footer__link a { + color: white; + text-decoration: none; +} + +.main-footer__link a:hover, +.main-footer__link a:active { + color: #ccc; +} + +.button { + background: #0e4f1f; + color: white; + font: inherit; + border: 1.5px solid #0e4f1f; + padding: 8px; + border-radius: 8px; + font-weight: bold; + cursor: pointer; +} + +.button:hover, +.button:active { + background: white; + color: #0e4f1f; +} + +.button:focus { + outline: none; +} diff --git a/css - the complete guide/important_properties.md b/css - the complete guide/important_properties.md new file mode 100644 index 0000000..8484921 --- /dev/null +++ b/css - the complete guide/important_properties.md @@ -0,0 +1,15 @@ +text-align: center; +vertical-align: +border-radius: 50%; +margin: 0 auto; + +:focus { + outline: none; +} + +float: right; /* instead use flexbox */ + +position: ...; +overflow: + +