CSS

.element {
      transition-property: width , height;
      transition-duration: 2s;
   }
.element:hover {
  filter : brightness(110%);
}
.element:active {
  transform : translate( 0 , 0.3rem);
  box-shadow: 0 2px 0 grey;
}
.loaderBox img {
  position : fixed;
  top : 50%;
  left : 50%;
  transform : translate( -50% , -50% )
}
 //OverLay. ( 1st Way )
  .parent {
       background: url("./folder1/img.jpg') no-repeat center center/cover;
  }
  .child { 
      background-color : rgba(0,0,0,0.5);
    //It will add Black ( required ) layer on the top of the parent-Background Image. 
    }       

------------------------------------------------------------------------

 //BackgroundImage, Adding Layer on the top of the Image. ( 2nd Way )
// Adding Image and providing Layer on that specific background only.
.selectContainer {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.377),
        rgba(0,0,0, 100)
      ),url(/r/featured.jpg) no-repeat center center/cover;
}
.parent {
  display : grid;
  
  //work with columns.
  grid-template-columns : 1fr 2fr 1fr;
  //content will be in ratios (1 : 2 : 1)
  //Or
  grid-template-columns : 200px auto 200px;
  //first and third will be 200px and middle will take whole place.
  //Or
  grid-template-columns : auto auto;
  //Or
  grid-template-columns : repeat(3,auto);
  grid-gap : 1rem;
  //Will create gap between Each items.

  //Work With Rows.
  grid-template-rows : 1fr 1fr;
  grid-auto-rows : 4fr;
  // Will triple the size by '4fr' after two (as only two are mentioned) Rows. 
}

/*
.parent {
 //Not used often. ( auto responsive but does not look good every time ).
  grid-template-columns: repeat(auto-fit, minmax(200px , 1fr))}
*/

.singleItem {
   //Spanning rows or columns. ( Lines should be counted ( horizontal or Vertical ).)
  //Here the Values are the postions of the current col/row.
     grid-column-start: 1;
     grid-column-end: 4;
     //or
     grid-column : 1 / span 3;   
  
     grid-row-start: 1;
     grid-row-end: 3;
     //or
     grid-row: 1 / span 2; 
}

//Grid , grid-template-areas.
.gridParent {
  padding : 8px;  
  display : grid;
  grid-template-areas:
    'header header header'
    'content box-1 sidebar'
    'footer footer footer';
    grid-gap: 1rem; 
}

.header  {  grid-area: header;}
.content {  grid-area: content;}
.sidebar {  grid-area: sidebar;}
.box-1   {  grid-area: box-1; }
.footer  {  grid-area: footer;}
//Ways for : Installation for compiling Sass.

 > npm init -y
// Install the package.json file on directory 

 > npm install node-sass
//Install 'node-sass' as dependencies.

//Edit Package.json File.
"scripts": {
 "sass": "node-sass -w scss/ -o dist/css/ --recursive"
  }

> npm run sass
// To Run Sass, ( Just once is needed ) . IF adding any Partials, Need to run the command again.
// <------> Varia bles and Partials.
// Partials are Similar like components,We can store 'variables'(_variables) here, Which Can be re-used in different css stylesheets.
$colorRed : red;
body {
    background : $colorRed;
}


//Nesting and Structuring
// '&' Will refer to the Parent element which is class '.section'
.section  {
    h3 {
        font-size: 1.6rem;    
        color : black;
    }
    p {      }
    &-A {
        background-color: rgba(48, 245, 196, 0.329);
        padding : 10px 20px;
    }
    &-B {
        background-color: rgba(91, 194, 60, 0.329);
        padding : 0 20px;
    }
    &-C {
        background-color: rgba(98, 137, 245, 0.774);
        padding : 10px 20px;
    }
}

a {
    text-decoration: none;
    color : blue;
    &:hover {
        color : red;
        cursor: pointer;
    }
    &:active {
     color : goldenrod;
    }
}

//Inheritance & Contrast.
%btn-shared {
    text-decoration: none;
    color : blue;
    display: block;
    text-align: center;
}

a {
    @extend %btn-shared;
    //All the styling from 'btn-shared' Will be applied.
    &:hover {
        color : red;
        cursor: pointer;
    }
  
}

//Functions , Mixins.
 //It's Good idead to have functions and variables on a separate Partials ( separate File, Import to current file )
@function set-text-color($color){
    @if(lightness($color) > 50){
        @return #000;
    }@else {
        @return #fff;
    }
}
header {
 background-color: black;
 color : set-text-color(red);
 font-size: 2.0rem;
 line-height: 1.5;
}
    //Mixin
@mixin transformScss($propertyName){
    transform: $propertyName;
}

h1 {
    @include transformScss(rotate(20deg));
}
//Ways for : Installation for compiling Sass.

 > npm init -y
// Install the package.json file on directory 

 > npm install node-sass
//Install 'node-sass' as dependencies.

//Edit Package.json File.
"scripts": {
 "sass": "node-sass -w scss/ -o dist/css/ --recursive"
  }

> npm run sass
// To Run Sass, ( Just once is needed ) . IF adding any Partials, Need to run the command again.
// <------> Varia bles and Partials.
// Partials are Similar like components,We can store 'variables'(_variables) here, Which Can be re-used in different css stylesheets.
$colorRed : red;
body {
    background : $colorRed;
}


//Nesting and Structuring
// '&' Will refer to the Parent element which is class '.section'
.section  {
    h3 {
        font-size: 1.6rem;    
        color : black;
    }
    p {      }
    &-A {
        background-color: rgba(48, 245, 196, 0.329);
        padding : 10px 20px;
    }
    &-B {
        background-color: rgba(91, 194, 60, 0.329);
        padding : 0 20px;
    }
    &-C {
        background-color: rgba(98, 137, 245, 0.774);
        padding : 10px 20px;
    }
}

a {
    text-decoration: none;
    color : blue;
    &:hover {
        color : red;
        cursor: pointer;
    }
    &:active {
     color : goldenrod;
    }
}

//Inheritance & Contrast.
%btn-shared {
    text-decoration: none;
    color : blue;
    display: block;
    text-align: center;
}

a {
    @extend %btn-shared;
    //All the styling from 'btn-shared' Will be applied.
    &:hover {
        color : red;
        cursor: pointer;
    }
  
}

//Functions , Mixins.
 //It's Good idead to have functions and variables on a separate Partials ( separate File, Import to current file )
@function set-text-color($color){
    @if(lightness($color) > 50){
        @return #000;
    }@else {
        @return #fff;
    }
}
header {
 background-color: black;
 color : set-text-color(red);
 font-size: 2.0rem;
 line-height: 1.5;
}
    //Mixin
@mixin transformScss($propertyName){
    transform: $propertyName;
}

h1 {
    @include transformScss(rotate(20deg));
}
                      /* --------------------------- */
// New Css tags.
.items { vertical-align : middle;  }
.selector {
  min-width : 100px;
  max-width : 200px;
 }
                      /* --------------------------- */

@media screen (max-width : 60rem) and (orientation : portrait){ 
 ... 
}
// To Specify devices with "Portrait" Orientation. Like "Ipads/Tablets".
                      /* --------------------------- */


//Spacing of the element.
element {
 position : fixed;
  width : 50%;
} 
 /*  If the element's 'position' is 'fixed'.
 Then % styled  apllied on the element works in respect to the VH or VW.
 */
                      /* --------------------------- */
//Font.
form > input[type='text'] {
 font : inherit; 
}
/* If we don't Inherit the properties, Then it use browser's style.
We want to use style(font size/family )as the rest of the web pages */
                      /* --------------------------- */

//Disbled buttons.
.btn.disabled {
 cursor : no-pointer;
  background : red;
}
/* This way we can desing UI, like a disabled Input.  
Were it does not allow to type in anything.
*/
                      /* --------------------------- */

// Meta Tag.
<meta name='viewport' content='width=device-width, initial-scale=1.0, 
 maximum-scale=2.0,minimum-scale=1.2'>
//Meta Information In the Head Tag.
//Some of them are optional.
                      /* --------------------------- */
//To hover and show some content.
  .elem p {
  color : transparent   ;
  }
.elem:hover p {
 color : green;
 }
                      /* --------------------------- */

  //To change kind of opacity.
div.box {
 filter : brightness(0);
 }  
div.box:hover {
 filter : brightness(100%);
 }  
    
                      /* --------------------------- */
  .btn { 
   transition-property: color , background-color;
   transition: .2s ease;
   }
                      /* --------------------------- */
.elem {
	width : fit-content;
 }
                      /* --------------------------- */
  .img {
  	object-fit: cover; 
  }

                      /* --------------------------- */
#footer .social-item img {
	filter: grayscale(1);
}// Will Make it black and white.
#footer .social-item img:hover {
	filter: grayscale(0);
}//Hovering will show original color of the img.

                      /* --------------------------- */
 /* To get Text on the hovered a Tag  */
//HTML
<li><a data-after-abc="Home" href="#">Home</a></li>
<li><a data-after-abc="Services" href="#">Services</a></li>
<li><a data-after-abc="Projects" href="#">Projects</a></li>
  //CSS
#header  ul a::after {
	content: attr(data-after-abc);
	position: absolute;
	font-size: 15rem;
	top: 50%;
	left: 50%;
	z-index: -1;
	color : rgba(128, 128, 128, 0.253);
	transform: translate(-50%, -50%) scale(0);
}

#header  ul li:hover a::after {
	cursor: pointer;
	transform: translate(-50%, -50%) scale(1);
}

                      /* --------------------------- */
/* Hamburger Animation */
.bar {
	height : 3px;
	width : 25px;
	background : black;
	position: relative;
}
.bar::before, 
 .bar::after {
	 content : '';
	 position: absolute;
	 left : 0 ;
	 height : inherit;
	 width : 25px;
	 background : black;
	 transition: .3s ease-in-out transform;
}
.bar::before {
	top : -8px;
}
.bar::after {
	bottom : -8px;
}
//Animate 01
.hamburger.close .bar::before {
	top: 0;
}
.hamburger.close .bar::after {
  bottom : 0;
}


//Hamburger is parent
 //Animate 02

.hamburger.close .bar {
	background : transparent;
}
.hamburger.close .bar::before {
	top:0;
	transform : rotate(45deg);
}
.hamburger.close .bar::after {
	transform : rotate(-45deg);
	top : 0;
}
// And will need to Toggle class 'close' via Js.

                      /* --------------------------- */
//Menu is alway Flahing ( white Round on the borders ).
.hamburger {
	position: relative;
	height: 60px;
	width: 60px;
	display: inline-block;
	border: 3px solid white;
	z-index: 1000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transform: scale(0.8);
	margin : 15px;
}

.hamburger::before {
	content: '';
	position: absolute;
	border: 3px solid white;
	height: inherit;
	width: inherit;
	border-radius: 50%;
	animation: hamburger_puls 2s infinite;
}
@keyframes hamburger_puls  {
  0% {
	opacity: 1;
	transform: scale(1);
  }
  100% {
   opacity: 0;
   transform: scale(1.3);
  }
}

                      /* --------------------------- */

.select {
  user-select : none;
  //User can not select any thing for this selector.
}

Similiar Collections

Python strftime reference pandas.Period.strftime python - Formatting Quarter time in pandas columns - Stack Overflow python - Pandas: Change day - Stack Overflow python - Check if multiple columns exist in a df - Stack Overflow Pandas DataFrame apply() - sending arguments examples python - How to filter a dataframe of dates by a particular month/day? - Stack Overflow python - replace a value in the entire pandas data frame - Stack Overflow python - Replacing blank values (white space) with NaN in pandas - Stack Overflow python - get list from pandas dataframe column - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to lowercase a pandas dataframe string column if it has missing values? - Stack Overflow How to Convert Integers to Strings in Pandas DataFrame - Data to Fish How to Convert Integers to Strings in Pandas DataFrame - Data to Fish create a dictionary of two pandas Dataframe columns? - Stack Overflow python - ValueError: No axis named node2 for object type <class 'pandas.core.frame.DataFrame'> - Stack Overflow Python Pandas iterate over rows and access column names - Stack Overflow python - Creating dataframe from a dictionary where entries have different lengths - Stack Overflow python - Deleting DataFrame row in Pandas based on column value - Stack Overflow python - How to check if a column exists in Pandas - Stack Overflow python - Import pandas dataframe column as string not int - Stack Overflow python - What is the most efficient way to create a dictionary of two pandas Dataframe columns? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow python - How do I get the row count of a Pandas DataFrame? - Stack Overflow python - How to save a new sheet in an existing excel file, using Pandas? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow How do I select a subset of a DataFrame? — pandas 1.2.4 documentation python - Delete column from pandas DataFrame - Stack Overflow