app.css

/* Notes */

/* Most of the content in this file is referring content from freeCodeCamp's Responsive Web Design Certification course.. https://www.freecodecamp.org/learn/ */

/* 1. Notes about length units
      Pixels(px) are a type of length unit, which is what tells the browser how to size or space an item. Apart from px, CSS provides other types like Relative and Absolute
      1. Absolute is represented using mm(millimeters) and in(inch)
      2. Relative is represented using em or rem.
      Relative is majoritly used(I guess). when we tried to set any element's size or dimension related properties using "em", it's relative to the parent element's dimensions
*/

/* 2. Overriding properties Notes
        1. Classes will override
        2. Classes can override other Classes. But be sure to place the style properties below the class which you want to override.
            In words we can tell The second declaration in(css file or style tag) will always take precedence over the first declaration
        3. ID's will override all the styles provided in classes. position of ID style properties not matter, because,
            id declarations override class declarations, regardless of where they are declared in your style tag or css file
        4. Inline styles will override class and id style properties. inline styles  have highest specificity
        5. if we add keywork "!important" to any of the css style, then will override or take precedence among all the styles that we added for that element
*/

/* 3. Coloring methods
      1. mentioning colour name
      2. Hex code
      3. RGB value
          rgba stands for:
              r = red
              g = green
              b = blue
              a = alpha/level of opacity
              The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. (source freeCodeCamp)
*/

/* 4. We can define global styles in css called css variables and we can use these variables with key word "var".
          We have to define our variable in :root tag for global vibility. more details on root below
          :root is a pseudo-class selector that matches the root element of the document, usually the html element.
          By creating your variables in :root, they will be available globally and can be accessed from any other selector in the style sheet.
*/

/* 5. Text align properties 
        1. text-align: justify; causes all lines of text except the last line to meet the left and right edges of the line box.
        2. text-align: center; centers the text
        3. text-align: right; right-aligns the text
        4. text-align: left; (the default) left-aligns the text.
*/

/* 6. we can specify the width of an element using the "width" property in CSS*/

/* 7. we can specify the height of an element using the "height" property in CSS*/

/* 8. we can use strong tag in html to make text bold. inside functionality of this tag is it uses css property font-weigth: bold*/

/* 9. We can use u tag to give a text underline. inside functionality of this tag is it uses css property text-decoration: underline./

/* 10. We can use em tag to make a text italicize. inside functionality of this tag is it uses css property font-style: italic./

/* 10. We can use s tag to make a Strikethrough Text. inside functionality of this tag is it uses css property text-decoration: line-through./

/* 11. we use the font-size property to adjust the size of the text in an element. */

/* 12. The box-shadow property applies one or more shadows to an element.
            The box-shadow property takes values for
                offset-x (how far to push the shadow horizontally from the element),
                offset-y (how far to push the shadow vertically from the element),
                blur-radius,
                spread-radius and
                color. In that order. The blur-radius and spread-radius values are optional.
                More on https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
*/

/* 13. we can change the opacity of a element by using opacity property in CSS which is used to adjust the opacity, or conversely, the transparency for an item.
        A value of 1 is opaque, which isn't transparent at all.
        A value of 0.5 is half see-through.
        A value of 0 is completely transparent.
*/

/* 14. we can use text-tranform property to change the appearance of text. text-tranform property takes below values
            lowercase  ----->  use me to make any text lowercase
            uppercase  ----->  USE ME TO MAKE ANY TEXT UPPERCASE
               ----->  Use Me To Make Starting Letter Of Each Word Capital
            initial    ----->  Use the default value
            inherit    ----->  Use the text-transform value from the parent element
            none       ----->  Default: Use the original text
*/

/* 14. we can use the font-weight property to set how thick or thin the characters of text*/

/* 15. We can use line-height property to set the space between lines */

/* 16. We can use hover pesudo class selector to change the property of any element when we hovered(mouse movment on that element) over that element */

/* 17. Position property is used to set the position of html element with help of CSS offset peroperties like right, left, top, bottom(these properties tell how many pixels, percentages, or ems to move the item away from where it is normally positioned). some of the position properties are
        a. relative: css move the element relative to its default position 
            Note about CSS offsets:
                The CSS offsets of top or bottom, and left or right tell the browser how far to offset an item relative to where it would sit in the normal flow of the document.
                You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction).
                As you saw in the last challenge, using the top offset moved the h2 downwards. Likewise, using a left offset moves an item to the right.
        b. absolute: this property will locks the element in relative position to its parent container. Be sure to give add postiton to element's parent element position
            property, if you didnt provided one, css will use the default value, which is body tag's position.
        c. fixed: an element with fixed position stay in the same place even if we scroll the page. example navigation bar with fixed top position. the top, right, bottom, and left properties are used to position the element.
*/

/* 18. We can push html elements left or right using float peoperty in their containing parent element  */

/* 19. z-index:  z-index tells which html element should be displayed over other i.e.. it takes an int value for html element and check's that whether this value is greater
          than other element's z-index, if greater it puhes the element top of the screen, if not pushes the other element.
          In simple words, higher values for the z-index property of an element move it higher in the stack than those with lower values
*/

/* 20. CSS provides a "linear gradient" color poperty from which we can do color transitions from one to one or one to many.
        Usally we will use this property with background property. Below is example
            background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
                The first argument specifies the direction from which color transition starts - it can be stated as a degree,
                where 90deg makes a vertical gradient and 45deg is angled like a backslash.
                The following arguments specify the order of colors used in the gradient.
*/

/* 21. We can use repeating-linear-gradient() property to repeat a specified gradient pattern.  */

/* 22. We can add background image or a pattern using url() function to background property.  */

/* 23. We can change the size of an element with tranfrom property. tranform property uses scale function with a value.
          We can also use this property in hover state .
*/

/* 24. We can also use the skewX or skewY functions with tranform property.
        skewX: skews the selected element along its X (horizontal) axis by a given degree.
        skewY: skews the selected element along its Y (Verical) axis by a given degree.
*/

/* 25. We can create shaped with mixing/manipuating different properties in css.  */

/* 26. We can add something to an element before it selected or something after it selected using ::before and ::after pseudo-elements
        For the ::before and ::after pseudo-elements to function properly, they must have a defined content property.
        This property is usually used to add things like a photo or text to the selected element.
        When the ::before and ::after pseudo-elements are used to make shapes, the content property is still required, but it's set to an empty string 
*/

/* 26. we can do animations in css using animation properties and @keyframes rule. for an html element we have to specify the animation-name
        and we can use this name in @keyframes rule to which controls what happens during that animation.
      There are around 8 css animation properties are present, please refer https://www.w3schools.com/cssref/css3_pr_animation.asp
      We can use CSS animations in multiple occasion like
        a. changing hover state of element
*/

/* 27. Use display flex property to make responsive page using flex properties */

/* 28. Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns.
          You do this by adding the flex-direction property to the parent item and setting it to row or column. Creating a row will align the children horizontally,
            and creating a column will align the children vertically 
        i.e.. we can use felx direction property to form column or row using html elemets
        example: if you want make column using html elements do like below,
                   display:flex;
                   flex-direction: column;
                 if you want make row using html elements do like below,
                   display:flex;
                   flex-direction: row;
*/

/* 29. We can use justify-content property to align flexed items along the main axis(x-axiz)/horizontal axis*/

/* 30. SImilar to justify-content, we use align-items property to align flexed items along the cross axis(y-axiz)/vertical axis */

/* 31. Use flex-shrink and flex-grow property to shrink or grow the flex elements
          a. flex-shrink controls the size of the items when the container shrinks
          b. flex-grow property controls the size of items when the parent container expands
*/

/* 32. We can use flex-basis property to specify the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow */

/* 33. Using flex property alone, we can set flex-grow, flex-basis and flex-shrink properties in shorthand
       ex: flex: flex-grow flex-shrink flex-basis;
           flex: 0 1 10px; 
*/

/* 34. Use order property to tell CSS the order of how flex items appear in the flex container. 
        By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, 
            and negative numbers can be used
*/

/* 35. using CSS we can make any element to grid container using display property which inturn set to grid.
        In CSS Grid, the parent element is referred to as the container and its children are called items
*/

/* 36. we can create columns inorder to define structure for Grid using grid-template-columns */

/* 37. when we set grid-template-columns, rows number will be automatically set. If you want manually set, use grid-template-rows  */

/* 38. If you want to give space between columns and row then, use grid-column-gap and grid-column-row property */

/* 39. We can use grid-column property to control the amount of columns an item will consume.
        use the grid-column property in conjunction with the line numbers you want the item to start and stop at
          ex: grid-column: 1 / 3;
              This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.
*/

/* 40. In CSS Grid each cell has data, and each data by default strechted horizontally i.e using "justify-self:strech". 
        However justify-self property accepts other values,
            start: aligns the content at the left of the cell,
            center: aligns the content in the center of the cell,
            end: aligns the content at the right of the cell. 
*/

/* 41. Similar to justify-self, we can align items vertically using align-self. */

/* 42. we can use justify-items to align items horizontally and vertically */

/* 43. Use grid-template-areas to group cells together and create an "area". also, you can give custom name to the area*/

/* 44. We can place an item to the custom area that we created using grid-template-areas just by placing that area name to the grid-area property of any item*/

/* 45. use "repeat" function with grid-template-rows or grid-template-columns to create multiple rows and column at once rather repeating*/

/* 46. use "minmax" function to give a column minimum value and maximum value */

/* 47. we can use auto-fill function with repeat function to create flexible layouts, below ix an example,
          repeat(auto-fill, minmax(60px, 1fr));
          When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one.
          Note: If your container can't fit all your items on one row, it will move them down to a new one. 
*/

/* 48. we can use auto-fit to collapses the empty rows or columns and stretch your items to fit the size of the container */

/* 49. We can use media queries to create responsive layouts for Grid */



:root{
    --color-body : rgb(96, 96, 96);
}

/* We can use @media query to change style of an element at particular size's */
@media (max-width: 300px) {
    :root {
        --color-body : red;
    }
    
}

body {
    /* Below method showing using variable and adding fallback colour*/
    /* background-color: var(--color-body, rgb(96, 96, 96)); */
    background: url('https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png');
    /* Below is rgb method */
    /* background-color: rgb(96, 96, 96); */
    font-family: monospace;
    /* color: blue; */
}

/* Changing color using color property */
.purple-text{
    color: purple;
}

/* usage of font size with text */
p{
    font-size: 20px;
    /* font-family: Lobster, 'Franklin Gothic Medium'; */
}

/* usage of width property with image */
.small-image{
    width: 500px;
   
}

/* Giving margin at top of using margin top */
h1{
  margin-top: 40px;
}

/* Changing color using color property*/
#darkGreen{
    color: darkgreen;
}

/* Changing color using color property and using "!important" keyword to give high importance for override(property Precedence)*/
.red_color{
   color: crimson !important; 
}
.darkblue-text{
    color: darkblue ;
}

/* Setting background color using background color property */
#photo-form{
    background-color: green;;
}
.silver{
    background-color: silver;
}

/* Creating border using border properties */
.green-border{
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 20px;
}

/* Giving margin to bottom position*/
.injected-text {
    margin-bottom: 10px;
    text-align: center;
}

/* Aligning content of the box with text align property */
/* Padding, Margin, Border 
      Padding: is the space between html element and its border
      Marging: is the space between html and other html elements
*/
.box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
}

.yellow-box {
    background-color: silver;
    padding: 20px;
    position: relative;
}

.red-box {
    background-color: crimson;
    color: #fff;
    /* padding-top: 40px;
    padding-left: 40px;
    padding-bottom: 20px;
    padding-right: 20px; */
    padding: 1.5em;
    margin-top: 40px;
    margin-left: 40px;
    margin-bottom: 20px;
    margin-right: 20px;
    position: relative;
    /* left: 20px; */
    /* position: absolute;
    left: 20px; */
}

.blue-box {
    background-color: blue;
    color: #fff;
    /* giving padding with specifiying the side */
    /* padding-top: 40px;
    padding-left: 40px;
    padding-bottom: 20px;
    padding-right: 20px; */
    /* clockwise notation to give padding  */
    padding: 40px 20px 20px 40px; /* This produces exact result as above */
    /* giving margin with specifiying the side */
    /* margin-top: 40px;
    margin-left: 40px;
    margin-bottom: 20px;
    margin-right: 20px; */
    margin: 40px 20px 20px 40px; /* This produces exact result as above */
}

/* We can assign CSS properties to any type of HTML elements with input type selectors example text, radio, checkboox, number etc.. */
[type='checkbox']{
    margin: 10px 0 15px 0;
}

/*Section of Applied Visual Design from freeCodeCamp */
/* Giving opacity to anchor tags. opacity ranges from 0 minimum value and 1 is maximum value
    where 0 is transparent
          1 is no transparent
*/
.links {
    font-size: 1.5em;
    margin-right: 20px;
    opacity: 0.7;
}

.fullCard {
    border: 1.5px solid black;
    border-radius: 5px;
    margin: 20px 20px;
    padding: 4px;
    background-color: silver;
}

.cardContent {
    padding: 10px;
}

.fullCard h2{
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 25px;
    text-transform: uppercase;
}

.fullCard p{
    text-align: center;
    line-height: 30px;
}

/* Creating a shadow around image/box using Box shadow property*/
#thumbnail{
    box-shadow: 0 10px 20px rgba(255,0,0,0.5);
}

/* hover property */
.links:hover {
    color: blue;
}

/*Nav bar css and demo of positin fixed */
#navbar {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    background-color: goldenrod;
}
nav ul {
    margin: 0px;
    padding: 5px 0px 5px 30px;
}
nav li {
    display: inline;
    margin-right: 20px;
    font-size:1.5em;
    color: white;
}
  a {
    text-decoration: none;
  }

  /* Nav bar css and demo of positin fixed */

/* if we add float left to below element the margin left  will become 0, that is it will to left */
  #left {
 float: left;
    width: 40%;
  }

/* if we add float right to below element the margin right become 0, that is it float to right */
  #right {
    float: right; 
    width: 40%;
  }
  aside, section {
    padding: 2px;
    background-color: #ccc;
  }

  .asideAndSection{
      width: 100%;
      height: 200px;
  }

  #footer{
    margin: 150px 0 0 0;
  }

/* Color compliment */

header {
    background-color: teal;
    color: white;
    padding: 0.25em;
  }
article > h2 {
    color: teal;
}
article > button {
    background-color: orange;
}
footer {
    background-color: teal;
    color: white;
    padding: 0.5em;
}

/* Linear Gradient property */

.linearGradient{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
    background: linear-gradient(35deg, #CCFF44, #FF55CC);
}

/* Repeating linear gradient. in below example,
the gradient starts with the color yellow at 0 pixels which blends into the second color blue at 40 pixels away from the start.
Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color green,
which itself blends into the fourth color value red as that is 80 pixels away from the beginning of the gradient*/

.repeatLinearGradient{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50px auto;
    background: repeating-linear-gradient(
      90deg,
      yellow 0px,
      blue 40px,
      green 40px,
      red 80px
    );
}


/* Tranform property usage */
.tranformDiv{
    width: 100%;
    height: 150px;
}
.ball {
    width: 40px;
    height: 40px;
    margin: 50 auto;
    position: relative;
    top: 5px;
    left: 10px;
    background: linear-gradient(
      35deg,
      #ff66d3,
      #0066cc
    );
    border-radius: 50%;
}
#ball1 {
    left: 20%;
}
#ball2 {
    left: 65%;
    transform: scale(3);
}

/* scale with hover property */
#ball1:hover {
    transform: scale(3);
}
#ball2:hover  {
    transform: scale(1);
}

/* Skew function with tranform property in hover state */
.skewDiv{
    width: 100%;
    height: 280px;
}

.skewDiv > div{
    width: 70%;
    height: 100px;
    margin:  50px auto;
  }
  #top {
    background-color: red;
  }
  #bottom {
    background-color: blue;
  }
  #top:hover {
    background-color: red;
    transform: skewX(-50deg);
  }
  #bottom:hover  {
    background-color: blue;
    transform: skewX(50deg);
  }


/* Usage os before and after pseudo-elements*/
.shapeDiv{
    height: 80px;
    
}
.heart {
    margin: 20px auto;
    background-color: red;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
}
.heart::after {
    background-color: red;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
}
.heart::before {
    content:"" ;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
}

/* Animation using @keyframes rule */
.animationClass{
    width: 100%;
    height: 250px;
}

.animationClass > div {
    height: 40px;
    width: 50%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
    position: relative;
}

/* The rect element's animation name is rainbow, which refers to @keyframes rainbow rule for animation which runs for 4 seconds by animation-duration*/
#rect {
    animation-name: rainbow;
    animation-duration: 4s;
    
}

/* Below animation will set the rectangle element's background color red at 0% i.e..start of animation,
     at 50% background color will be set to green and at 100% background color set to blue 
*/

@keyframes rainbow {
        0% {
          background-color: red;
          top: 0px;
          left: 0px;
        }
        50% {
          background-color: green;
          top: 50px;
          left: 25px;
        }
        100% {
          background-color: blue;
          top: 0px;
          left: -25px;
        }
}

.animationClass > button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }

.animationClass >button:hover {
    /* animation name */
    animation-name: background-color;
    /* duration of animation */
    animation-duration: 500ms;

    animation-fill-mode: forwards;
}

@keyframes background-color{
    100% {
        background-color: #4791d0;
    }
}

#animationBall {
    width: 70px;
    height: 70px;
    margin: 50px 0;
    position: relative;
    left: 20%;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      red,
      #ffcccc
    );
    animation-name: fade;
    animation-duration: 3s;
    /* specifies how manu times animations has to run */
    animation-iteration-count: 2;
    animation-timing-function: ease-in;
}

@keyframes fade {
    50% {
      left: 60%;
      opacity: 50%;
    }
}

/* audio part css*/
.audioClass{
  width: 100%;
  height: 100px;
}

/* Figure caption section */

.figureClass{
  width: 100%;
  height: 400px; 
}
#figImage, figcaption{
  width: 70%;
  height: 350px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figcaption{
  background: grey;
  height: 20px;
}

/* Figure caption section */

/* label and for */
.forClass{
  width: 100%;
  height: 120px;
  display: block;
  margin-left: 150px;
}

.forClass input[type=text], input[type=email]{
  width: 70%;
}
.forClass button{
  background: goldenrod;
}
/* label and for */


/* fieldset section css */
.fieldsetClass{
  width: 80%;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* fieldset section css */


/* media query section */
@media (max-width: 500px){
  .forClass input[type=text], input[type=email]{
    width: 100%;
  }
}

/* CSS Fles Section */

.cssFlex{
  height: 600px;
}
#box-container {
  height: 300px;
}
#box-container-using-flex{
  height: 300px;
  display: flex;
}

#box-1 {
  background-color: dodgerblue;
  width: 50%;
  height: 50%;
}

#box-2 {
  background-color: orangered;
  width: 50%;
  height: 50%;
}

/* Flex properties */
.flexProperty{
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.flexProperty header {
  display: flex;
  flex-direction: row;
}
.flexProperty header .profile-thumbnail {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}
.flexProperty header .profile-name {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  color: black;
  justify-content: center;
}
.flexProperty header .follow-btn {
  display: flex;
  margin: 0 0 0 auto;
  align-items: center;
}
.flexProperty header .follow-btn button {
  border: 0;
  border-radius: 3px;
  padding: 5px;
}
.flexProperty header h3, header h4 {
  display: flex;
  margin: 0;
}
.flexProperty #inner p {
  margin-bottom: 10px;
  font-size: 20px;
}
.flexProperty #inner hr {
  margin: 20px 0;
  border-style: solid;
  opacity: 0.3;
}
.flexProperty footer {
  display: flex;
  flex-direction: row;
}
.flexProperty footer .stats {
display: flex;
  font-size: 15px;
}
.flexProperty footer .stats strong {
  font-size: 18px;
}
.flexProperty footer .stats .likes {
  margin-left: 10px;
}
.flexProperty footer .cta {
  margin-left: auto;
}
.flexProperty footer .cta button {
  border: 0;
  background: transparent;
}
/* CSS Flex Section */

/* CSS Grid Section */
.d1{background:orangered;}
.d2{
  background:LightSalmon;
  justify-self: center;
}
.d3{background:grey;}
.d4{background:blueviolet;}
.d5{
  background:rgb(2, 107, 2);
  grid-column: 2 / 4;
  grid-row:2/4;
  /* grid-area: header; */

  /* If we don't have area template,we can create one using grid-area like below */
  /* grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at; */
  grid-area: 3/1/4/4;
}

.container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* grid-template-columns: 300px 300px 300px;
    grid-template-rows: 50px 50px; */

    /* changing size of row and column using CSS Grid units */
    /* grid-template-columns: repeat(3, minmax(90px, 1fr)); */

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

    grid-template-rows: 1fr 1fr 1fr;

    /* grid-column-gap: 20px;
    grid-row-gap: 10px; */
     /* Alternative for above. grid-gap: grid-template-rows grid-template-column */
    grid-gap: 15px 20px;
    grid-template-areas:
      "header header header"
      "advert content content"
      "footer footer footer";
}




/* CSS Grid Section */

/* media query combined with grid */

.mediaContainer{
  font-size: 1.5em;
  min-height: 300px;
  width: 100%;
  background: LightGray;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto 1fr auto;
  grid-gap: 10px;
  grid-template-areas:
    "header"
    "advert"
    "content"
    "footer";
}

.item1 {
  background: rgb(5, 84, 133);
  grid-area: header;
}

.item2 {
  background: rgb(211, 65, 8);
  grid-area: advert;
}

.item3 {
  background: rgb(5, 83, 83);
  grid-area: content;
}

.item4 {
  background: rgb(139, 8, 27);
  grid-area: footer;
}
@media (min-width: 400px){
  .container{
    grid-template-areas:
    "header header"
    "advert content"
    "footer footer";
  }
}