Snippets Collections
#id {
  min-height: 650px;
  _height: 650px;  /* ie6 專用 */
}
ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}
.flip-container {
  background: transparent;
  display: inline-block;
}

.flip-this {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-container:hover .flip-this {
  transition: 0.9s;
  transform: rotateY(180deg);
}
/*  Big O  */

  let performance = performance.now();
  //This can be used to measure the Performance of the code.
  // Use this before the code and after code, It will show the 'performace'


/* XXXXXXXX--XXXXXX */

/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}
.flex-container {

  /* We first create a flex layout context */

  display: flex;

  

  /* Then we define the flow direction 

     and if we allow the items to wrap 

   * Remember this is the same as:

   * flex-direction: row;

   * flex-wrap: wrap;

   */

  flex-flow: row wrap;

  

  /* Then we define how is distributed the remaining space */

  justify-content: space-around;

  

  padding: 0;

  margin: 0;

  list-style: none;
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

<div class="sr-only">This text is hidden.</div> 
const Nav = styled.div`
    div > a.active > div {
        color: ${props => props.color}
     }
`
function Header() {
    const {DefaultColor} = useContext(GlobalContext)
    return <Nav color={DefaultColor?.success} />
}
.LikeButton button {
  margin: 1rem;
  transition: all 0.5s ease;
  transform: scale(1);
}

.LikeButton button:hover {
  cursor: pointer;
  transform: scale(1.25);
  filter: brightness(120%);
}
.button {
  color: #ff0000;
}

/* note: 100% is baseline 70% would be darker */
.button:hover {
  filter: brightness(125%);
}
//Using Inline Styles
import React from 'react';

function App() {
  return (
    <div
      style={{
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      }}
    />
  );
}

export default App;

//Conditional Changing the Background Color in React
import React from 'react';

function App() {
  const isBackgroundRed = true;

  return (
    <div
      style={{
        backgroundColor: isBackgroundRed ? 'red' : 'blue',
      }}
    />
  );
}

export default App;

//OR

//App.js
import React from 'react';
import './App.css';

function App() {
  const isBackgroundRed = true;
  
  return (
    <div className={isBackgroundRed ? 'background-red' : 'background-blue'} />
  );
}

export default App;
//App.css
.background-red {
  background-color: red;
}

.background-blue {
  background-color: blue;
}
.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}
/* Lesson 01 : HTML-CSS */

  //Blockquotes
  <blockquote cite="mention Source Link Here">
  <p>Ruh-roh--RAGGY!!!</p>
  <footer>—Scooby Doo, <cite>Mystery Incorporated</cite>         </footer>
  </blockquote>

  //List: Description  ( lists with name/value pairs )
  <dl>
    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
   </dl>
  
                  /*   CSS   */

   //Selecting using attributes
    [attr] { }
    [attr=val] { }
    tag[attr] { }
    tag[attr='val'] { }
    [attr~=val] { }


    -----------------XX------------------------
    
                /*  Javascript  */
    
//Spread Operator.
let nums = [4,5,45,235,523,54,314]
console.log(...nums); //It will only show the numbers, It won't show an array.

//Rest Operator.
const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(total, subtotal, tax, items);


 // DOM */

// .innerText: 
It will set/get the  inner text inside the element, But the format will be as shown on the element ( line breaks, spaces will identical to html file.) . It will take CSS into consideration and will return the text that is visibily rendered on the Page. 

//.textContent:
It will set/Get the whole text inside the selected element and it will won't include the line breaks or spaces. 


//Create | Add Text | Append.
let newElem = document.createElement('p');
let data = document.createTextNode("Some Infor..");

newElem.appendChild(data); //Data added to new element.
$("body").appendChild(newElem); // New element added to 'body'

newElem.textContent = 'We can also add text like this...';
----------------------

//insertAdjacentHTML()
: "appendChild()" will always add the data at the end of the element, To resolve this we use 'insertAdjacentHTML()'. It will take 2 arguments. First is the location( one of the 4 method ) and 2nd is the HTML content(text).

Methods:
beforebegin | afterbegin | beforeneed | afterend.

<!--- beforebegin  ---->
  <p>
    <!---  afterbegin ---->
        Existing Text/html content
    <!--- beforeneed  ---->
 </p>
<!---afterend   ---->

**
selectedElem.insertAdjacentElement(methodHere, newElementToAdd);          
          
------------------------

Eg: 
const mainHeading = document.querySelector('#main-heading');
const htmlTextToAdd = '<h2>Skydiving is fun!</h2>';
mainHeading.insertAdjacentHTML('afterend', htmlTextToAdd)

- parentElem.removeChild(childElement); //Pass the element to be deleted in the agument . We can pass the parent element in argument to remove the Parent elem.
- Elem.remove()  //We don't have to mention any arguments.

- Elem.firstElementChild();
- Elem.parentChild();

 // Styling in Javascript */
First Way: 
element.style.property1 = "css stuff";
element.style.property2 = "css stuff";
** Ex:
element.style.width = "50%";
element.style.height = "400px";
**
  
Second Way: ( Better )
element.style.cssText = "width: 50%;padding: 10px 50px;";
Note: "cssText" will overwrite anything that's already in the style attribute  
  
  
 //    Attributes    

element.setAttribute('attribute', attributeValue);

**
aTag.setAttribute('target','_blank');


 //   Classes
Properties:
add() | remove() | toggle() | contains();


elem.className; //It will list all the classes an Combined String.(old way)
or
elem.classList; //It will list all the classes in an ( DOMTokenList ) object.(new way)

elem.classList.add('class-1','class-2',....);//We can assign  single/Multiple classes to the element.

elem.classList.remove('class-1','class-2'); //We can unassign single/multiple classes from the element. 

elemem.classList = 'class-1'; //This will replace all the existing classes assigned to the Element. 

elem.classList.toggle('class1');//to add the class if it doesn't exists or remove it from the list if it does already exist ( other classes are not affected. )

elem.contains('class1'); //returns a boolean based on if the class exists in the list or not


// Events

mouseEvents(document); //It will monitor all the events on docuemnt ( Just for test/practise/fun )

Methods:
addEventListener() | removeEventListener() | dispatchEvent()

addEventListener() and removeEventListener() // Works similarly. ( similar syntax )

//Phases of an Event.
  : Some times events are there on parent and there children. So using Phase events we can change the order ( To fire parent first or the child )

1. Capturing Phase ( parent to child )
  //:It the first phase, Moving from Parent(top) to the selected elem.
 2. At Target Phase  
  // It's the the selected element on which event is attached.
3. Bubbling Phase ( child to parent )
 // It's opposite of capturing, Once the handler is run, It will go back from selected element to the parent element

**
elem.addEventListener('click',()=>{},true)

- By default, It will run in Bubble phase(child first and then parent) .If we pass 3rd argument to 'true' in parentElem.addEventListener()? Then It will run the event in Capturing Phase( Parent will be working first ).


//Node-Name
  //How to know the target element.
if(event.target.nodeName == 'SPAN'){
   //The node name will be always in uppercase.
  takeAction();
}

//To load the HTML content before using the DOM.
document.addEventListener('DOMContentLoaded', function () {
    console.log('the DOM is ready to be interacted with!');
});



**
   {  scrollTo(x, y); }
**  

 /* 
 Lesson 2: Node and Express Environment
 */
  
  > npm list express
  // Return the list of express 'version'. or just check the 'package.json'
  
  
  //Installing packages
  > npm install express
  
  // Express to run server and routes
const express = require('express');

// Start up an instance of app
const app = express();
  

// method '.listen'
const port = 8080;
const server = app.listen(port, listening); //Listening is callback function. 
function listening(){
  console.log("Server runing on Port",port)
}



Methods:
get | post | put | delete

**
  const express = require('express');
  const app = express(); //Creating Instance

  app.get('/', function(req, res ){
    // '/' is the URL Path on the browser. '/' is the           home/root folder on the project.
    // 'request'( Client to server)
    // 'response' ( Server to client )
    res.send("<h1>Jaskaran Singh</h1>");
   })

  app.get('/karan', function(req, res ){
      res.send("<h1>Hi Karan Singh</h1>");
  })
   //It will work for url 'http://localhost:8080/karan'
  
// POST method route
app.post('/', function (req, res) {
  res.send('POST received')
})  

app.listen(8080, ()=>{
    console.log("Runnung....")
   });
**
  // TODO-ROUTES!
app.post('/add', callBack1 )

function callBack1(req, res){
    res.send('Post Received')
  //create a POST route that uses the url /add and sends the response POST received when used to make a request.
}
**
  const data = [];
  app.post('/flavor', addFlavor);

 function addFlavor (req, res) {
  data.push(req.body);
   // A way to store the data
};
**
  let data = []
 app.post('/animal', callBack2 );
 function callBack2(req, res){
  data.push( req.body )   
   //Add a POST route for adding a favorite animal via the path ’/animal’ to an array named data. You will need to create the array as well.
}
**
   /* ------------------------ ------------------*/ 
  
                    /* Async Js */
 : The keyword async before a function makes the function return a promise
  
**
 aync function test(){
   return "Some results...";
   // Since we are using 'aync', test() will be a            asynchrounous function.
 }   
> test(); //It will return a 'pending' Promise
> test().then((res)=>{},(rej)=>{})
**   
**
  const retrieveData = async (url='') =>{ 
  const request = await fetch(url);
  try {
  // Transform into JSON
  const allData = await request.json()
  }
  catch(error) {
    console.log("error", error);
    // appropriately handle the error
  }
}
**
  
//Server and Client side.
//Async Js.
  
  
 
   /* ------------------------ ------------------*/ 
   /* ------------------------ ------------------*/ 
 
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}
/* the navbar-brand has two <span> children. The first contains the 'C'. The second contains the 'utespot' */
/* target the siblings of the first span in .navbar-brand */
.navbar-brand span + span {
	margin-left: 5px;
	/* we change the letter spacing to negative, so that the letters bunch up on top of each other. We use 'em' so that the spacing is relative to the element's font-size */
	letter-spacing: -0.52em;
	/* make it disappear */
	opacity: 0;
	/* we want it to animate -- just means move. when a css attribute changes, it will 'tween' between its old value and its new */
	/* we could target the transition to just work on opacity and letter-spacing, but 'all' is quick here*/
	transition: all 0.3s ease-out;
}

.navbar-brand:hover span + span {
	/* on hover, we spread the letters out again */
	/* since we set the transition (animate) to apply to all attributes, this change in letter-spacing will be animated (from its old value of -0.52em to its new of 0.1em) */
	letter-spacing: 0.1em;
	/* make it visible -- the transition:all will also apply to the opacity, so the opacity will also animate between its old value (0 - transparent) and its new (1 - opaque)*/
	opacity: 1;
}
element::after {
	/* ::before and ::after are pseudo-elements, and require a content attribute to exist. Often, we make it empty, because we are using these pseudo-elements to do funky little visual UI tricks, that have no content within. Also, mixing content and style feels wrong. */
	content: "";
	/* border on the bottom */
	border-bottom: 1px solid black;

	/* All the following is positioning stuff. It is absolute, so it is out of the flow, and we can put it wherever we want. We are putting it at the bottom of its (relative) parent, and we position its left-side 50% across the width of its parent (from the left). */
	position: absolute;
	width: 60%;
	bottom: 0;
	left: 50%;
	/* THEN we use the transform:translate to move it back to the left, but this time, just 50% of its OWN width. The effect of moving it right 50% of its parent, and left 50% of its own width, centers it in its parent. magic! */
	transform: translate(-50%, 0);
}
img {
	transition: all ease 500ms;
}

img:hover {
	transform: scale(1.25);
	opacity: 0.7;
}
//SIMPLE SANS SERIF FONT
body {
 font-family: 'Lato', sans-serif;
 font-weight: 300;
}
//https://fonts.google.com/specimen/Lato?query=lato
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Prata&display=swap" rel="stylesheet"> 

// CLASSIC SERIF VERY DIGNIFIED
h1, h2, h3, h4, h5, h6 {
 font-family: 'Prata', serif;
}
//https://fonts.google.com/specimen/Prata
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet"> 
transition: width .2s ease-in-out;
-webkit-font-smoothing: antialiased;
idを付けたelementが出てくる前に、<script src="app.js"></script>が先に来ているから。

<div id="test"></div>
のあとに
<script src="app.js"></script>
を持ってこないとJavaScriptは何を言わているか分からない。
一番良いのは</body>の直前。
/* A href that contains “example.com” */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}
[data-type='primary' s] {
  color: red;
}

.item:not(:last-child) {
  margin-left: 2rem;
}
document.addEventListener('mouseover', addBorder)

function addBorder(e) {
  document.querySelectorAll('*').forEach(el => el.style.border = '')
  e.target.style.border = '10px solid lime'
}
 animation: 12s rotate .1s infinite linear;

0% {
    transform: rotate(0deg)  translateX(16px) rotate(0deg);
}
100% {
    transform: rotate(360deg)  translateX(16px) rotate(-360deg);
}
// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link
// for parent div
      style="display: flex; align-items: center; justify-content: center"
.container {
  display: flex; /* or inline-flex */
}
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-family: "Open Sans", sans-serif;
  background: var(--color-grey);
}

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-item {
  position: relative;
  margin: 5px 0;
}

.fas {
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  cursor: pointer;
}
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            
    &:hover {
        filter: brightness(0.6);
    }
    display: flex;
    justify-content: center;
<input type = "image" src = "@ Url.Content (topRated.Value)" onclick = "this.form.submit" class = "resize" width = "175" height = "250">

img.resize {
    width: 175 pixels;
    height: 250 pixels;
}
.knap {
    position: relative;
    width: 203px;
    height: 42px;
    padding: 11px;
    padding-left: 30px;
    padding-right: 54px;
    outline: none;
    cursor: pointer;
    font-weight: 700 !important;
    background-color: #AD8350;
    color: white !important;
    font-weight: 700;
    line-height: 42px !important;
    font-size: 16px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
    border-radius: 5px;


    &:hover {
        color: white;
        background-color: #9B7547;

        &:before {
            margin-left: 5px;
            -moz-transition: 200ms all ease-in-out;
            -o-transition: 200ms all ease-in-out;
            -webkit-transition: 200ms all ease-in-out;
            transition: 200ms all ease-in-out;
        }
    }

    &:before {
        content: '\f178';
        font-family: 'Font Awesome 5 Pro';
        font-weight: 400;
        font-size: 16px;
        position: absolute;
        float: right;
        padding-left: 132px;
        z-index: 1;
        -moz-transition: 200ms all ease-in-out;
        -o-transition: 200ms all ease-in-out;
        -webkit-transition: 200ms all ease-in-out;
        transition: 200ms all ease-in-out;
    }

    &:focus {
        outline: none;
    }
}
        span {
            font-size: 0;

            &:before {
                font-family: 'Font Awesome 5 Pro';
                font-size: 18px;
                display: inline-block;
                content: '\f178';
                font-weight:300;
            }
        }
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="page">
        <div class="menu">MENU</div>
            <div class="clearfix">
                <div class="sidebar">SIDEBAR</div>
                <div class="content">CONTENT</div>
            </div>    
        <div class="footer">FOOTEER</div>
    </div>

   

</body>
</html>

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

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.menu {
    background-color:#B2D6FF;
    height: 100px;        
}

.sidebar {    
    float: left;
    background-color:#F09A9D;
    height: 300px;
    width: 30%;
}

.content {
    float:right;
    width: 70%;
    background-color:#F5CF8E;
    height:300px;
}

.footer {
    background-color: #D6E9FE;
    height: 200px;
}

.clearfix::before, .clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

.clearfix {
    clear: both;
    *zoom:1;
}
<style>
.heading {
  font-family: sans-serif;
  font-weight: 700;
}
.warning {
  color: yellow;
}
.danger {
  color: red;
}
.info {
  color: blue;
}
</style>

<body>
<h1 class="heading warning">...</h1>
<h2 class="heading danger">...</h2>
<h3 class="heading info">...</h3>
</body>
.xxx.yyy {
  color: darkgreen;
}

.xxx {
  color: red;
}
body, html {
    height: 100%;
    margin: 0;
}

.hero-image {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://unsplash.it/1800/1600');
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
}

.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
}

.hero-button {
    width: 150px;
    height: 50px;
    font-size: 30px;
    font-weight: bold;
    background-color:tomato;
    border-radius:30% 10% 30%;
    border:none;
    outline:none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.hero-button:hover {
    background-color:red;
    color: #fff
}
  position: absolute;
  top: 50%; right: 50%;
  transform: translate(50%,-50%);
 position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);    
.owl-dots {
    display: block;
    height: 0px !important;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    margin-top: -45px;
    outline-style: none;

 

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

 

.owl-dot {
    width: 10px;
    height: 10px;
    background-color: #bbb !important;
    border-radius: 50%;
    display: inline-block !important;
    margin: 2.5px;
    outline-style: none;

 

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

 

button.owl-dot.active {
    background-color: #ffbc00 !important;
    outline-style: none;

 

    &:focus {
        outline: none;
        box-shadow: none;
    }
}
/* Changes color of menu links */
a.menu-link{
	color: white !Important;
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
}
a.menu-link:hover{
	color: #d0e1d6 !important;
}

/* Brings site header to front of page and makes if full width */
#site-header{
	z-index: 10 !Important;
	width: 100vw !important;
}

/* Page title*/
/* Disable page title on landing page */
.page-id-131 .page-header{
	display: none;
}
/* Puts long strands of text on multiple lines */
.page-header div.container{
	max-width: 50%;
}

/* Text styling throughout site */
h1, h2, h3, h4, h5, h6{
	font-family:"Raleway", sans-serif;
	font-weight: 500 !Important;
};
p{
	font-family: "Open Sans", sans-serif !important;
	color: #404040 !Important;
}
p a{
	text-decoration: underline !important;
}
p a:hover{
	color: #7C4DFF;
}

/* Styling the "Our Team" section on the About page. */
.team-container{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 .5em;
	display: flex;
	flex-flow: row wrap !Important;
	justify-content: space-around !important;
}
.team-box{
	width: 47%; !Important;
	min-width: 300px;
	margin-bottom: 1em;
}
.team-box h3{
	background-color: #9CBFA7;
	font-weight: 600;
	color: white;
	padding-top: 10px;
	margin-bottom: 0;
	text-align: center;
}
.team-box p{
	padding: 1em;
	border: 10px solid #9CBFA7;
}

/* Sticky sidebar! */
.elementor-element-7f915bb, .elementor-element-7f915bb .elementor-widget-container, .elementor-element-076b6c7, .elementor-element-076b6c7 .elementor-widget-container, .elementor-element-f1064db, .elementor-element-f1064db .elementor-widget-container  {
	height: 100%;
}
div#sticky-sidebar{
	z-index: 0; 
  top: 105px;
	box-sizing: border-box;
  position: relative;
  position: -webkit-sticky;
  position: sticky !important;
}
#sticky-sidebar h2{
	color: white;
	background-color: #9CBFA7;
	padding: 10px;
	margin-bottom: 0;
}
#sticky-sidebar a{
	color: #351431;
	font-family: "Raleway", sans-serif;
	font-weight: 500;
	font-size: 1.2em;
}
.page-links{
	background-color: white;
	text-align: left;
	padding-left: 10px;
	border: 5px solid #9CBFA7;
	margin-top: 0;
}
aside{
	position: default;
	padding-left: 1em;
	height: 100% !Important;
	border-left: 5px solid #D0E1D6;
	box-sizing: border-box;
	height: 100% !important;
}
.sticky-element-placeholder{
	height: inherit;
}

/* Footer content styling*/
#footer h4{
	border-left: none;
	padding-left: 0;
	font-family: "Raleway", Sans-serif;
	font-size: 1.2em;
}
#footer p a{
	color: #D0e1d6 !important;
}
#footer p{
	font-family: "Open Sans", sans-serif;
	font-size: 1em;
	color: whitesmoke;
}
/* Makes site header sticky */
#site-header{
	position: -webkit-sticky;
	top: 0;
	position: sticky;
}
.subheading{
	font-size: 1.1em;
	font-style: italic;
	color: #9cbfa7;
}
/* RESPONSIVE Space added on wider desktop/laptop views */
#site-logo{
	padding-left: 10vw;
}
@media only screen and (max-width: 1200px){
	#site-logo{
		padding-left: 0;
	}
}
@media only screen and (max-width: 700px){
	.page-header .container{
		margin-left: 1em;
	}
	.page-header-title{
		text-align: left;
	}
	.subheading{
		text-align: left;
		font-size: 1em;
	}
	.page-header{
		background-position: bottom center !important; 
	}
}
img.responsive-logo{
	max-width: 160px !important;
}

/*Adds hanging indent for citation items*/
.citation{
	padding-left: 25px;
	text-indent: -25px;
}
cssbuttons/index.html
​ ​<p>​
​   ​<input​ class=​"button"​ type=​"button"​ value=​"A Button!"​​>​
​   ​<a​ class=​"button"​ href=​"http://pragprog.com"​​>​A Link!​</a>​
​ ​</p>​
body {
  background: rgb(48, 52, 52)
}
.container {
  margin: 0 auto;
  width: 200px;
  position: relative;
}
.leaves {
  width: 7px;
  height: 70px;
  background: #339B00;
  border-radius: 0 0 10px 10px;
  position: absolute;
  left: 50%;
  margin-left: -4px;
  z-index: 1;
}
.leaves:after {
  content: '';
  width: 80px;
  height: 80px;
  background: #339B00;
  position: absolute;
  border-radius: 0% 50%;
  transform: rotate(96deg) skew(21deg, 11deg);
  transform-origin: left top;
  top: 32px;
}
.leaves:before {
  content: '';
  width: 70px;
  left: 8px;
  height: 70px;
  background: #339B00;
  position: absolute;
  border-radius: 0% 50%;
  transform: rotate(-16deg) skew(21deg, 11deg);
  transform-origin: left top;
  top: 32px;
}
.lemon {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: yellow;
  position: absolute;
  transform: rotate(48deg) skew(6deg, 6deg);
  top: 69px;
  left: 50%;
  margin-left: -80px;
}
.lemon:after {
  content: '';
  width: 50px;
  height: 50px;
  background: yellow;
  top: 64%;
  left: 50%;
  position: absolute;
  margin-left: 24px;
  border-radius: 19px;
}
.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
p {
    text-decoration: underline;
}
// i custom.js

    $('.sliderBig').owlCarousel({
        loop: true,
        stagePadding: 0,
        margin: 0,
        autoWidth: false,
        lazyLoad: true,
        autoplay: true,
        nav: true,
        navContainer: '.customNav',
        navText: ["<i class='fal fa-long-arrow-left'></i>", "<i class='fal fa-long-arrow-right'></i>"],
        dots: true,
        dotsContainer: '.customDots',
        autoplayHoverPause: true,
        smartSpeed: 1000,
        onLoadLazy: lazySrcset,
        onInitialize: showSlider,
        responsive: {
            0: {
                items: 1
            }
        }
    });

// slut

// Slider dots i bunden

.owl-dots {
    display: block;
    height: 0px !important;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    margin-top: -45px;
    outline-style: none;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

.owl-dot {
    width: 10px;
    height: 10px;
    background-color: #bbb !important;
    border-radius: 50%;
    display: inline-block !important;
    margin: 2.5px;
    outline-style: none;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

button.owl-dot.active {
    background-color: #ffbc00 !important;
    outline-style: none;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

//slut

// SliderDots i højre side
.slider .customDots {
    position: absolute;
    bottom: 30px;
    z-index: 5;
    counter-reset: dots;
    height: 10px;
    width: 10px;
    color: #f00;
    right: 66px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
//

//Streger i højre side.

    .customDots {
        position: absolute;
        bottom: 30px;
        z-index: 5;
        counter-reset: dots;
        height: 114px;
        width: 10px;
        color: #f00;
        right: 46px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);

        &.hidden {
            display: none;
        }

        button {
            position: relative;
            background-color: transparent;
            background-image: none;
            border: none;
            box-shadow: none;
            outline: none;

            &:after {
                -moz-transition: 200ms all ease-in-out;
                -o-transition: 200ms all ease-in-out;
                -webkit-transition: 200ms all ease-in-out;
                transition: 200ms all ease-in-out;
                -moz-transition-property: all;
                -o-transition-property: all;
                -webkit-transition-property: all;
                transition-property: all;
                content: "";
                width: 3px;
                height: 30px;
                background-color: rgba(255,255,255, 0.5);
                display: inline-block !important;
                outline-style: none;
            }
            /*        &:before {
                @include transition();
                counter-increment: dots;
                content: "0" counter(dots);
                @include fontStyle(16px, $color-fontlight, 600);
                opacity: 0.7;
            }*/
            &.active, &:hover {
                &:after {
                    -moz-transition: 200ms all ease-in-out;
                    -o-transition: 200ms all ease-in-out;
                    -webkit-transition: 200ms all ease-in-out;
                    transition: 200ms all ease-in-out;
                    -moz-transition-property: all;
                    -o-transition-property: all;
                    -webkit-transition-property: all;
                    transition-property: all;
                    content: "";
                    width: 3px;
                    height: 30px;
                    background-color: white !important;
                    display: inline-block !important;
                    outline-style: none;
                }
            }
        }
    }
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://kadenbrockman.github.io/font/stylesheet.css">
    </head>
    <body>
       <h1><i class="icon-verified"></i></h1>
       
       <style>
           .icon-verified {
               color: rgb(87, 198, 241);
               font-size: 18px; }
       </style>
    </body>
</html>
/* v2.0 | 20110126
http://meyerweb.com/eric/tools/css/reset/
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, 
  mark, 
  audio, 
  video {
	margin:;
	padding:;
	border:;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height:;
}
ol, 
  ul {
	list-style: none;
}
blockquote, 
  q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, 
  q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing:;
}
	body {
		margin:0;
		padding:0;
		font:14px / 1.5 寰蒋闆呴粦,瀹嬩綋,"Times New Roman";
		background-color:#dde6e7;
		color:#000
	}
	ul,
	ol,
	li,
	dl,
	dd,
	dt,
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	form,
	input,
	button,
	select {
		margin:0;
		padding:0
	}
	li {
		list-style-type:none;
	}
	div {
		margin:0;
		padding:0;
	}
	img {
		border-width:0;
		vertical-align:top;
	}
	a:link,
	a:visited {
		color:#036;
		text-decoration:none
	}
	a:hover,
	a:active {
		color:#c33;
		text-decoration:underline;
	}
	.siteblock {
		width:960px;
		padding:0 10px;
		margin:0 auto;
		background-color:#f0f0f0;
		height:100%;
		overflow:hidden;
	}
	.top {
		background-color:#ccc;
		color:#000;
		height:25px;
		line-height:25px;
		margin:0 -10px;
		padding:0 10px;
	}
	.top span {
		display:block;
		float:left;
		width:auto;
	}
	.top span.r {
		float:right;
	}
	.top span.r a {
		display:inline-block;
		margin-left:12px;
	}
	.logo {
		height:60px;
		margin:5px 0;
	}
	.logo h5 {
		float:left;
		width:260px;
		background:url("logo.png") left center no-repeat;
		height:60px;
	}
	.logo h5 a {
		display:block;
		text-indent:-999px;
		overflow:hidden;
		width:260px;
		height:60px;
	}
	.logo.banner {
		float:right;
		width:670px;
		height:60px;
		overflow:hidden;
	}
	.menu {
		height:35px;
		line-height:35px;
		background-color:#036;
		padding:5px;
		margin-bottom:0;
		font-weight:bold;
	}
	.menu a:link {
		color:#ccc;
	}
	.menu a:visited {
		color:#ccc;
	}
	.menu a:hover {
		color:#e2eff9;
		text-decoration:underline;
	}
	.menu a:active {
		color:#e2eff9;
		text-decoration:underline;
	}
	.menu li {
		float:left;
		border-left:1px solid #ccc;
		padding:0 9px 0 10px;
		font-weight:normal;
	}
	.menu li.sy {
		border-left-width:0;
	}
	.menu li.pingshu,
	.menu li.pingshu a {
		background-color:#fff;
		color:#c33;
		font-weight:bold;
	}
	.search {
		padding:5px;
		background-color:#ccc;
		height:25px;
		width:950px;
		overflow:hidden;
		margin-bottom:5px;
		color:#5d4905;
	}
	.search p {
		float:left;
		width:auto;
	}
	.search p.text {
		border:1px solid #3f3f3f;
		height:18px;
		line-height:18px;
		margin-right:5px;
	}
	.search p.text input {
		border:0;
		background-color:#fff;
		height:16px;
		line-height:16px;
		padding:0 3px;
		width:130px;
	}
	.search p.button input {
		background:url("search.gif") left top no-repeat;
		width:64px;
		height:20px;
		border:0;
	}
	.hot {
		float:right;
		margin:0 15px 0 0;
		padding:0 0 5px;
		width:520px;
		line-height:20px;
	}
	.hot li {
		padding:0 5px;
		margin:0;
		float:left;
		border-left:1px solid #c5c3c3;
	}
	.hot li a {
		color:#036;
		font-size:13px;
		font-weight:bold;
	}
	.hot li a.jiemu {
		color:#036;
	}
	.hot li a:visited {
		color:#036;
	}
	.hot li a:hover {
		color:#c33;
		text-decoration:underline;
	}
	.hot li a:active {
		color:#c33;
		text-decoration:underline;
	}
	.ggall {
		margin-bottom:5px;
	}
	.ad505 {
		margin-bottom:5px;
		background-color:#fff;
	}
	.ad250 {
		width:248px;
		float:right;
	}
	.block {
		height:100%;
		overflow:hidden;
	}
	.block .blockleft {
		float:left;
		width:250px;
	}
	.block .blockright {
		float:right;
		width:700px;
	}
	.box {
		background-color:#fff;
		padding:1px;
		width:100%;
		height:100%;
		overflow:hidden;
		margin-bottom:5px;
	}
	.box .tit1 {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
		overflow:hidden;
		color:#ccc;
	}
	.box .tit2 {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
		overflow:hidden;
		color:#ccc;
	}
	.box .tit2 a {
		color:#ccc;
	}
	.box .titall {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
		color:#ccc;
	}
	.box .titall a {
		color:#ccc;
		text-decoration:underline;
	}
	.box .titall a:hover {
		color:#dcecf6;
		text-decoration:underline;
	}
	.box .tit2 span {
		float:right;
		width:auto;
	}
	.box .tit2 span.more {
		width:33px;
		height:11px;
		background:url("more.gif") left top no-repeat;
		margin-top:8px;
	}
	.box .tit2 span.more a {
		display:block;
		overflow:hidden;
		text-indent:-999px;
		width:33px;
		height:11px;
	}
	.box b.new {
		display:inline-block;
		width:160px;
		float:left;
		line-height:35px;
		background:url("new.gif") right center no-repeat;p
		adding-left:1px;
		color:#ccc;
	}
	.box b.hot {
		display:inline-block;
		width:160px;
		float:left;
		line-height:35px;
		background:url("hot.gif") right center no-repeat;
		padding-left:1px;
		color:#ccc;
	}
	.box .lists {
		padding:5px;
	}
	.box .lists li {
		background:url("li_dot.gif") left center no-repeat;
		padding:0 5px 0 24px;
		height:25px;
		line-height:25px;
		overflow:hidden;
	}
	.box .lists li span {
		float:right;
		width:auto;
	}
	.box .hotlist {
		padding:5px;
	}
	.box .hotlist li {
		line-height:20px;
		height:20px;
		padding:4px 5px 4px 0;
	}
	.box .hotlist li span {
		display:inline-block;
		width:19px;
		height:12px;
		line-height:12px;
		background-color:#c33;
		font-size:10px;
		text-align:center;
		font-weight:bold;
		color:#fff;
		margin-right:5px;
	}
	.box .hotlist li.no1 span,
	.box .hotlist li.no2 span,
	.box .hotlist li.no3 span {
		color:#036;
	}
	.box .hotlist li i {
		float:right;
		width:auto;
		font-style:normal;
		font-weight:bold;
		font-size:10px;
		color:#ccc;
	}
	.box .piclist {
		padding:10px 0 0 5px;
	}
	.box .piclist li {
		float:left;
		width:137px;
		text-align:center;
		margin-bottom:1px;
	}
	.box .piclist li img {
		width:120px;
		height:160px;
		margin:0 auto;
		padding:1px;
		border:2px solid #666;
		display:block;
	}
	.box .piclist li p {
		height:24px;
		line-height:25px;
	}
	.box .clist {
		height:100%;
		overflow:hidden;
		padding:5px 4px;
	}
	.box .clist li {
		background:url("line.gif") left bottom repeat-x;
		line-height:30px;
		width:340px;
		float:left;
		margin-right:1px;
	}
	.box .clist li a {
		background:url("d.gif") left center no-repeat;
		padding:0;
		text-decoration:underline;
	}
	.box .xzlist {
		overflow:hidden;
		margin:0 5px;
		height:auto;
		padding:0;
	}
	.box .xzlist li {
		float:left;
		width:685px;
		padding:5px 0;
		border-bottom:1px dashed #444;
		line-height:20px;
	}
	.box .xzlist li em {
		float:right;
		width:100px;
		color:#666;
		font-size:13px;
		text-align:right;
		font-style:normal;
	}
	.box .vlist {
		height:100%;
		overflow:hidden;
		padding:0 4px;
	}
	.box .vlist li {
		float:left;
		width:330px;
		padding:10px 5px;
		border-bottom:1px solid #ccc;
	}
	.box .vlist li a.pic img {
		display:block;
		float:left;
		width:150px;
		height:180px;
		border:1px solid #ccc;
		padding:1px;
		margin-right:6px;
	}
	.box .vlist li dl {
		line-height:25px;
		float:right;
		width:165px;
	}
	.box .vlist li dt {
		font-weight:bold;
		height:50px;
		width:165px;
		overflow:hidden;
	}
	.box .vlist li dt a:link,
	.box .vlist li dt a:visited {
		color:#036;
		font-size:13px;
	}
	.box .vlist li dt a:hover,
	.box .vlist li dt a:active {
		color:#c33;
	}
	.box .vlist li dd {
		width:163px;
		white-space:nowrap;
		overflow:hidden;
		color:#000;
		height:22px;
	}
	.box .vlist li dd a {
		display:inline-block;
		margin-right:5px;
	}
	.box .vshow {
		padding:9px;
		height:260px;
		overflow:hidden;
	}
	.box .vshow a.pic img {
		display:block;
		float:left;
		width:200px;
		height:260px;
		border:1px solid #333;
		padding:1px;
		margin-right:10px;
	}
	.box .vshow dl h1 {
		font-size:14px;
		color:#c33;
	}
	.box .vshow dl h1 a {
		font-size:14px;
		color:#c33;
	}
	.box .vshow dd {
		line-height:30px;
		color:#000;
	}
	.box .vshow dd a {
		display:inline-block;
		margin-right:5px;
	}
	.box .playlist {
		height:auto;
		overflow:hidden auto;
		line-height:150%;
	}
	.box .playlist li {
		float:left;
		width:121px;
		margin:3px 5px;
		display:inline;
		text-align:center;
		height:28px;
		overflow:hidden;
	}
	.box .playlist li a {
		display:block;
		width:117px;
		height:24px;
		border:1px solid;
		padding:1px;
		line-height:22px;
	}
	.box .playlist li a:link {
		color:#ccc;
		border-color:#ccc;
		background-color:#036;
	}
	.box .playlist li a:hover,
	.box .playlist li a:active {
		color:#ccc;
		border-color:#ccc;
		background-color:#c33;
	}
	.box .playlist li a:visited {
		color:#036;
		border-color:#ccc;
		background-color:#ccc;
	}
	.box .playlist span {
		float:right;
		width:auto;
	}
	.box .xllist {
		height:auto;
		overflow:hidden auto;
		line-height:150%;
	}
	ul.downurl li {
		line-height:44px;
		overflow:hidden;
		padding:0 10px;
		border-bottom:1px solid #eaeaea;
		width:670px;
		margin:3px auto;
	}
	ul.downurl li a {
		font-size:13px;
	}
	ul.downurl li div {
		float:left;
	}
	ul.downurl li .adds {
		line-height:18px;
		width:474px;
		overflow:hidden;
		padding-top:16px;
		color:#738d9e;
	}
	ul.downurl li .dwon_tx {
		width:70px;
		height:26px;
		padding-top:11px;
	}
	ul.downurl li .dwon_tx a {
		display:block;
		background:#ff6c00;
		width:70px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	ul.downurl li .dwon_x {
		width:40px;
		height:26px;
		padding-top:11px;
	}
	ul.downurl li .dwon_x  {
		display:block;
		background:#ff6c00;
		width:40px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	ul.downurl li .dwon_y {
		width:40px;
		height:26px;
		padding-top:11px;
		padding-left:8px;
	}
	ul.downurl li .dwon_y a {
		display:block;
		background:#309dcf;
		width:40px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	ul.downurl li .down_z {
		width:60px;
		height:26px;
		padding-top:11px;
		padding-left:8px;
	}
	ul.downurl li .down_z a {
		display:block;
		background:#066;
		width:60px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	.ckall {
		height:26px;
		padding:16px 10px 10px;
		width:676px;
	}
	.ckall p,
	.ckall span {
		float:left;
	}
	.ckall span {
		display:block;
		padding-top:4px;
		height:18px;
		color:#464646;
	}
	.ckall span em {
		padding-left:6px;
		padding-right:20px;
	}
	.ckall p a {
		display:block;
		background:url("subtit.png") -565px -48px no-repeat;
		width:133px;
		height:26px;
		overflow:hidden;
		margin-right:8px;
		text-align:center;
		line-height:26px;
		float:left;
		color:#464646;
	}
	.box .vcontent {
		padding:9px;
		line-height:30px;
		font-size:16px;
		color:#000;
	}
	.box .vcontent p {
		padding-bottom:10px;
		text-indent:24px;
	}
	.box .vcontent a {
		color:#036;
		text-decoration:underline;
	}
	.box .vcontent a:hover {
		color:#c33;
		text-decoration:underline;
	}
	.box .vcontent h2 {
		width:97%;
		height:auto;
		background:#ccc;
		color:#333;
		font-weight:normal;
		padding:5px;
		border:1px solid #7b6859;
	}
	.box .vcontent h3 {
		width:97%;
		height:auto;
		background:#ccc;
		color:#333;
		font-weight:bold;
		padding:5px;
		border-bottom:1px solid #7b6859;
	}
	.box .vcontent .next-pre {
		width:97%;
		height:30px;
		background:#ccc;
		color:#333;
		overflow:hidden;
	}
	.box .vcontent .next-pre span {
		width:50%;
		height:30px;
		overflow:hidden;
		float:left;
		margin:0;
		padding:0;
	}
	.play-box {
		width:960px;
		height:565px;
		margin:0 auto;
		padding:10px;
		background:#fff;
		overflow:hidden;
	}
	.play-box .titall {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
	}
	.play {
		float:right;
		width:700px;
		height:605px;
	}
	.a300 {
		width:auto;
		float:right;
	}
	.a250 {
		width:auto;
		float:right;
		margin-top:10px;
	}
	.playtxtgg {
		width:auto;
		height:auto;
		float:left;
		margin:5px 0;
		padding:0;
		overflow:hidden;
	}
	.playnewgg {
		width:336px;
		height:600px;
		float:left;
		margin-bottom:0;
		padding:0;
		overflow:hidden;
	}
	.map {
		border:1px solid #333;
		background-color:#fff;
		padding:1px;
		height:100%;
		overflow:hidden;
		margin-bottom:5px;
	}
	.map .tit {
		background:url("all_tit.gif") left top repeat;
		height:30px;
		line-height:28px;
		padding:0 22px;
	}
	.map .tit span.more {
		float:right;
		width:33px;
		height:11px;
		background:url("more.gif") left top no-repeat;
		margin-top:8px;
	}
	.map .tit span.more a {
		display:block;
		overflow:hidden;
		text-indent:-999px;
		width:33px;
		height:11px;
	}
	.map .maplist li {
		float:left;
		width:140px;
		display:inline;
		line-height:30px;
		margin:0 5px;
		overflow:hidden;
		white-space:nowrap;
	}
	.friendlink {
		border:1px solid #ccc;
		background-color:#fff;
		padding:1px;
		height:100%;
		overflow:hidden;
		margin-bottom:5px;
	}
	.friendlink .tit {
		background-color:#036;
		height:35px;
		line-height:35px;
		text-indent:22px;
		color:#fff;
	}
	.friendlink .links {
		padding:3px;
		height:100%;
		overflow:hidden;
	}
	.friendlink .links li {
		float:left;
		width:auto;
		text-align:center;
		line-height:22px;
		margin:0 5px;
	}
	.friendlink .tit span {
		float:right;
		width:auto;
	}
	.friendlink .tit span.more a {
		display:block;
		overflow:hidden;
		text-indent:-999px;
		width:33px;
		height:11px;
	}
	.box .pages {
		padding:5px 8px;
	}
	.box .pages span,
	.box .pages em,
	.box .pages a {
		display:inline-block;
		font-style:normal;
		margin-right:10px;
	}
	.bottom {
		padding:10px 0;
		text-align:center;
	}
	.updown {
		width:620px;
		height:25px;
		line-height:25px;
		float:left;
		text-align:center;
		background:#fff;
	}
	.updown a {
		width:80px;
		height:22px;
		line-height:22px;
		text-align:center;
		font-size:13px;
		margin:0 5px;
		border:1px solid #444;
		background-color:#000;
		color:#fff;
	}
	.newspg {
		width:100%;
		height:auto;
		line-height:35px;
		text-align:center;
		font-size:14px;
	}
	.newspg em,
	.newspg em.nolink,
	.newspg a,
	.newspg span {
		font-size:14px;
		margin:0 5px;
	}
	.toolbar-item,
	.toolbar-layer {
		background:url("/img/toolbar.png") no-repeat;
	}
	.toolbar {
		position:fixed;
		left:0;
		bottom:50px;
	}
	.toolbar-item {
		display:block;
		width:52px;
		height:52px;
		margin-top:1px;
		position:relative;
		transition:background-position 1s ease 0s;
	}
	.toolbar-item:hover .toolbar-layer {
		opacity:1;
		transform:scale(1);
	}
	.toolbar-item-weixin {
		background-position:0 -798px;
	}
	.toolbar-item-weixin:hover {
		background-position:0 -860px;
	}
	.toolbar-item-app .toolbar-layer {
		height:212px;
		background-position:0 0;
	}
	.toolbar-item-feedback {
		background-position:0 -426px;
	}
	.toolbar-item-feedback:hover {
		background-position:0 -488px;
	}
	.toolbar-item-app {
		background-position:0 -550px;
	}
	.toolbar-item-app:hover {
		background-position:0 -612px;
	}
	.toolbar-item-weixin .toolbar-layer {
		height:194px;
		background-position:0 -222px;
	}
	.toolbar-item-top {
		background-position:0 -674px;
	}
	.toolbar-item-top:hover {
		background-position:0 -736px;
	}
	.toolbar-layer {
		position:absolute;
		left:46px;
		bottom:-10px;
		width:172px;
		opacity:0;
		transform-origin:95% 95%;
		transform:scale(0.01);
		transition:all 1s ease 0s;
	}
	.simpread-theme-root {
		font-size:62.5% !important;
	}
	sr-rd-content,
	sr-rd-desc,
	sr-rd-title {
		width:100%;
	}
	sr-rd-title {
		display:-webkit-box;
		margin:1em 0 .5em;
		overflow:hidden;
		text-overflow:ellipsis;
		text-rendering:optimizelegibility;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
	}
	sr-rd-content {
		text-align:left;
		word-break:break-word;
	}
	sr-rd-desc {
		text-align:justify;
		line-height:2.4;
		margin:0 0 1.2em;
		box-sizing:border-box;
	}
	sr-rd-content {
		font-size:1.6rem;
		line-height:1.6;
	}
	sr-rd-content h1,
	sr-rd-content h1 *,
	sr-rd-content h2,
	sr-rd-content h2 *,
	sr-rd-content h3,
	sr-rd-content h3 *,
	sr-rd-content h4,
	sr-rd-content h4 *,
	sr-rd-content h5,
	sr-rd-content h5 *,
	sr-rd-content h6,
	sr-rd-content h6 * {
		word-break:break-all;
	}
	sr-rd-content div,
	sr-rd-content p {
		display:block;
		float:inherit;
		line-height:1.6;
		font-size:1.6rem;
	}
	sr-rd-content div,
	sr-rd-content p,
	sr-rd-content pre,
	sr-rd-content sr-blockquote {
		margin:0 0 1.2em;
		word-break:break-word;
	}
	sr-rd-content a {
		padding:0 5px;
		vertical-align:initial;
	}
	sr-rd-content a,
	sr-rd-content a:link {
		color:inherit;
		font-size:inherit;
		font-weight:inherit;
		border:0;
	}
	sr-rd-content a:hover {
		background:transparent;
	}
	sr-rd-content img {
		margin:10px;
		padding:5px;
		max-width:100%;
		background:#fff;
		border:1px solid #bbb;
		box-shadow:#d4d4d4 1px 1px 3px;
	}
	sr-rd-content figcaption {
		text-align:center;
		font-size:14px;
	}
	sr-rd-content sr-blockquote {
		display:block;
		position:relative;
		padding:15px 25px;
		text-align:left;
		line-height:inherit;
	}
	sr-rd-content sr-blockquote::before {
		position:absolute;
	}
	sr-rd-content sr-blockquote * {
		margin:0;
		font-size:inherit;
	}
	sr-rd-content table {
		width:100%;
		margin:0 0 1.2em;
		word-break:normal;
		overflow:auto;
		border:0;
	}
	sr-rd-content table td,
	sr-rd-content table th {
		border:0;
	}
	sr-rd-content ul {
		margin:0 0 1.2em 1.3em;
		padding:0;
		list-style:disc;
	}
	sr-rd-content ol {
		list-style:decimal;
		margin:0;
		padding:0;
	}
	sr-rd-content ol li,
	sr-rd-content ul li {
		font-size:inherit;
		list-style:disc;
		margin:0 0 1.2em;
	}
	sr-rd-content ol li {
		list-style:decimal;
		margin-left:1.3em;
	}
	sr-rd-content ol li *,
	sr-rd-content ul li * {
		margin:0;
		text-align:initial;
	}
	sr-rd-content li ol,
	sr-rd-content li ul {
		margin-bottom:.8em;
		margin-left:2em;
	}
	sr-rd-content li ul {
		list-style:circle;
	}
	sr-rd-content pre {
		font-family:Consolas,Monaco,"Andale Mono","Source Code Pro","Liberation Mono",Courier,monospace;
		display:block;
		padding:15px;
		line-height:1.5;
		word-break:break-all;
		overflow-wrap:break-word;
		white-space:pre;
		overflow:auto;
	}
	sr-rd-content pre,
	sr-rd-content pre *,
	sr-rd-content pre div {
		font-size:1.1rem;
	}
	sr-rd-content li pre code,
	sr-rd-content p pre code,
	sr-rd-content pre {
		background-color:transparent;
		border:0;
	}
	sr-rd-content pre code {
		margin:0;
		padding:0;
	}
	sr-rd-content pre code,
	sr-rd-content pre code * {
		font-size:1.1rem;
	}
	sr-rd-content pre p {
		margin:0;
		padding:0;
		color:inherit;
		font-size:inherit;
		line-height:inherit;
	}
	sr-rd-content li code,
	sr-rd-content p code {
		margin:0 4px;
		padding:2px 4px;
		font-size:1.1rem;
	}
	sr-rd-content mark {
		margin:0 5px;
		padding:2px;
		background:#fffdd1;
		border-bottom:1px solid #ffedce;
	}
	.sr-rd-content-img {
		width:90%;
		height:auto;
	}
	.sr-rd-content-img-load {
		width:48px;
		height:48px;
		margin:0;
		padding:0;
		border-style:none;
		border-width:0;
		background-repeat:no-repeat;
		rd-content sr-blockquote {
			border-left:4px solid #ddd;
		}
		.simpread-theme-root {
			background-color:#fff;
			color:#333;
		}
		sr-rd-title {
			font-family:"PT Sans","SF UI Display",".PingFang SC","PingFang SC","Neue Haas Grotesk Text Pro","Arial Nova","Segoe UI","Microsoft YaHei","Microsoft JhengHei","Helvetica Neue","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","Hiragino Sans GB",sans-serif;
			font-size:3.4rem;
			font-weight:700;
			line-height:1.3;
		}
	}
@media (max-width: 960px) {
  .container {
    width: 700px;
  }
}
@media (max-width: 720px) {
  .container {
    width: 500px;
  }
}
@media (max-width: 540px) {
  .container {
    width: 300px;
  }
}
.iframe-container {
      // overflow: hidden;
      // /* 16:9 aspect ratio */
      // padding-top: 56.25%;
      // position: relative;
      width: 100%;
      padding-top: 100%;
      position: relative;
      iframe {
         // border: 0;
         // height: 100%;
         // left: 0;
         // position: absolute;
         // top: 0;
         // width: 100%;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
    }
/* Default values */
:root {
    --text-color: #222;
}
/* Values in alt-color */
.alt-color {
    --text-color: green;
}
/* Vercschachtelung muss beibehalten werden, damit IE Fallback greift */
.alt-color p {
    color: green; /* fuer IE */
    color: var(--text-color);
}

/* 
ohne IE Support waere das für einen Farbwechsel ausreichend:

p {
    color: var(--text-color);
}
*/
@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
	flex-direction: column-reverse;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}
 
}
<div class="slider">
    <div class="owl-carousel owl-theme sliderLogo">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>


    $('.sliderLogo').owlCarousel({​​​​​​​
        loop: true,
        stagePadding: 0,
        margin: 0,
        autoWidth: false,
        lazyLoad: true,
        autoplay: true,
        nav: true,
        navContainer: '.customNav',
        navText: ["<i class='fal fa-long-arrow-left'></i>", "<i class='fal fa-long-arrow-right'></i>"],
        dots: true,
        autoplayHoverPause: true,
        smartSpeed: 1000,
        onLoadLazy: lazySrcset,
        onInitialize: showSlider,
        responsive: {​​​​​​​
            0: {​​​​​​​
                items: 3
            }​​​​​​​
        }​​​​​​​
    }​​​​​​​);
 
//big shadow
    -webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.06);
    -moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.06);
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.06);

//small shadow
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.06);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.06);
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.06);

//Transparent images
	-webkit-filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.06));
	filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.06));
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
@font-face {
  font-family: Hetilica;
  src: url(Hetilica.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@media (max-width: 996px) {

    body > main > div.slider__raekke > div > div > div:nth-child(2) > div > div > div > div > div.owl-carousel.owl-theme.sliderBig.owl-loaded.owl-drag > div.owl-stage-outer > div > div.owl-item.active > div:after {
        width: 100%;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(to right, rgba(247,247,49,1) 0%,rgba(255,255,255,0) 69%);
        height: 100%;
    }
}
    -webkit-filter: brightness(80%);
@media (min-width: 1199.98px)  {
    .normal2 {
        position: sticky !important;
        width: 100% !important;
        top:103px;
    }

    .normal {
        position: sticky !important;
        width: 100% !important;
        top:0;

    }
}
 box-shadow: inset 0 0 0 1000px rgba(45, 48, 71, 0.86);
.vertical-align {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    &:after {
        content: '';
        display: block;
        border-bottom: 1px solid rgba(112, 112, 112, 0.1);
        margin-top:0;
        margin-bottom:-8px;
    }
<header class="@(rootId.GetPropertyValue<bool>("fixed") ? "fixed" : "normal2")">
    <div class="mobileMenuHeightSpacer"></div>
    <div class="@(rootId.GetPropertyValue<bool>("container") ? "container" : "container-fluid")">
        <div class="headerContent">
            <div class="row">

                <div class="col-xl-12 megamenuHolder">
                    <div class="menuHolder">
                        @Html.Partial("Menu", Model, new ViewDataDictionary { { "logo", logoUrl } })
                        @Html.Partial("MenuMobile", Model, new ViewDataDictionary { { "logo", logoUrl } })
                    </div>
                    <div class="megaMenu">
                        @foreach (var page in Umbraco.TypedContent(1075).Children)
                        {
                            <p>@page.Name</p>
                            <span>
                                @foreach (var subpage in page.Children)
                                {
                                    <p>@subpage.Name</p>
                                }
                            </span>
                        }


                    </div>

                </div>

                @if (rootId.HasValue("knapper"))
                {
                    <div class="col-xl-2">



                        <div class="buttonHolder">

                            @{
                                var headerLinks = rootId.GetPropertyValue<RelatedLinks>
                                    ("knapper");

                                if (headerLinks.Any())
                                {
                                    foreach (var item in headerLinks)
                                    {
                                        var linkTarget = (item.NewWindow) ? "_blank" : null;
                                        <a href="@item.Link" target="@linkTarget">@item.Caption</a>
                                    }
                                }
                            }
                            <a href="tel:@rootId.GetPropertyValue("telefon")"><i class="fas fa-phone"></i> @rootId.GetPropertyValue("telefon")</a>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</header>
body > main > div:nth-child(4) > div > div > div > div > div > table > thead:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; /* <-- put left edge in the middle */
    margin-left: -20%; /* <-- shift to the left by half of the width */
    width: 40%;
    height: 1px;
    background: #000;
}

    <div class="custom__wrapper">
        <video src="/media/1011/filmtegner-1.mp4" class="custom__slider" autoplay loop muted controls></video>

        <ul>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
        </ul>
    </div>
<script>
    function videoslider(links) {
        document.querySelector(".slider").src = links;
    }
</script>

.custom__wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom__wrapper .custom__slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.custom__wrapper ul {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.custom__wrapper ul li {
    list-style: none;
    cursor: pointer;
    margin: 10px;
}


.custom__wrapper ul li video {
    width: 200px;
    transition: all 0.3s;
}

.custom__wrapper ul li video:hover {
    transform: scale(1.1);
}

video {
    width: 100%;
    height: 100%;
}
.bgVideo {
	position: absolute;
	pointer-events: none;
	width: 100%;
	height: 100%;
	background: none;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;

	video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: none;
	}
}

@media(min-aspect-ratio: 16/9) {
	.videoBg  video {
		width: 100%;
		height: auto;
	}
}

@media(max-aspect-ratio: 16/9) {
	.videoBg  video {
		width: auto;
		height: 100%;
	}
}
{(() => {
        if (условие1)
          return (
            <button>
              <Loader stroke="white" style={{ marginRight: '10px' }} />
                Waiting for token allowance
            </button>
          )
        if (условие 2)
          return (
            <button>
              <Loader stroke="white" style={{ marginRight: '10px' }} />
                Submitting loan
            </button>
          )
        else {
          return (
            <button>
              Borrow
            </button>
          )
        }
      })()}
ul li:not(:first-of-type) {
  color: red;
}
ul li:not(:last-of-type) {
margin-bottom: 20px;
}
//Css
$('elem').css('prop','val')

//classes
$('elem').addClass();
$('elem').removeClass();
$('elem').toggleClass();


$('.galleryBox').css('width');
//It will display 'width in pixels' properties of selector.

$('.galleryBox').width();
//It will display the width only in numbers ( no units )
//It will display the height only in numbers ( no units )
$('.galleryBox').height();

//chechbox toggle/update/check
let checkBox = $('input:checkbox').is(":checked");
console.log(checkBox)
//It will True if it's checked, False if unchecked.
// GRID to List For Mobile Start //
/* if( isset($_GET['s'])){ */
function product_grid_list_mod()
{  ?>
<style>
	Your styles here
</style>
<?php /* } */
add_action('wp_head', 'product_grid_list_mod', 100);
}
// GRID to List For Mobile End //
        /*   Effect Animations     */

//Methods :fadeOut, fadeIn, fadeTo, fadeToggle

$('elem').fadeOut(1000);
//fadeOut adds property 'display: none'

$('elem').fadeIn(1000)

$('elem').fadeTo(1000, 0.5);
// 0.5 will be the opacity.

$('elem').fadeToggle();
//Will Toggle between fadeOut and fadeIn. If it's already Faded out, It will fadeIn and vice-versa ( It will remeber opacity mentioned in line 6 and will provide same opacity.

$('elem').fadeTo(1000, 0);
// Opacity will be zero, But element will be there (Blank Space )

// Methods : hide , show, toggle
$('elem').hide();

// It will add prop "Display : none".
 $('elem').hide(2000);

$('elem').show();
// It will add prop 'display : block'.
 $('elem').show(2000);

$('elem').toggle();
//It will switch between none/block.

// Methods slideUp, slideDown, slideToggle
$('elem').slideUp();
 $('elem').slideUp(2000);

//There will be cool animation, And it will add 'display:none'.
$('elem').slideUp();

 $('elem').slideDown(3000);
// It will reverse the slideUp or it will pop up the element by adding prop 'display:block'.

 $('elem').slideToggle(2000);
//It will switch between slideUp/slideDown.


//Animate ( Values have to be numerical )
$('div.blue-box').animate({
    'margin-left' : '20px',
    'margin-top':'18px'
}, 1000 )
// 1st way, It will set the margins and override the defauls ones,

// 2nd way, This is better as it will add/remove margins to the current provided
$('div.blue-box').animate({
    'margin-left' : '+=20px',
    'margin-top':'-=18px',
  'opacity' : '0'
}, 1000 )

//We can also do camel casing in properties.
$('div.blue-box').animate({
    'margin-left' : '+=200px',
    'opacity' : '0.8',
    'height' : '50px',
     width : '50px',
    'margin-top' : '10px',
     borderRadius : '9px' 
}, 1000 )

//Delaying and Chaining Examples.
$('elem').delay( time ).method( property )

$('p').delay(2000).slideToggle();
$('.box').delay(2000).fadeOut(1000,0.5).fadeOut().fadeIn();
//slideToggle() will work after 2 seconds.


//Timing the functinos according to the Time ( As a call back functions )
$('div#content .red-box').slideUp( 2000, 0, function(){
    $('div#content .green-box').slideUp( 2000, 0 ,function(){
        $('div#content .blue-box').slideUp(2000, 0 )
           //All the call back functions are nested with each other.
    }) 
})

// Or 1:  using Arrow functions.
$('div#content .red-box').slideUp( 2000, 0 , () => {
    $('div#content .green-box').slideUp( 2000, 0 , () => {
        $('div#content .blue-box').slideUp(2000 , 0)
    })
})

// Or 2:  using Arrow functions + Chaining + using different methods in one program.
$('div#content .red-box').slideUp( 2000, 0 , () => {
    $('div#content .green-box').animate({
        marginTop : '20px',
        'opacity' : '0.6',
     }, 2000 , ()=>{
         $('.blue-box').hide();
     })
})

          /*  -----------------------XX ---------------------------- */


            /*               Selectors.         */
$('.elem:first');
$('.elem:last');
$('.elem:even');
$('.elem:odd');

$('input:text,input:email');
$('input:checked');
$('input:selected');

$('body').children().not('.one').css('border' , '2px solid red');
$('.parent').children().not('.one').css("border","30px solid blue");


$('div.content').find('h1').css('text-align','center');
//or
$('ul').find('li').slideUp(2000);
//or
$('ul').children('li.spec').slideUp(2000); //Direct children 'li.spec' of 'ul'
//or
$('ul').find('li.spec').slideUp(2000);

$('ul').parent('body').css('color','red');
$('li').parents('ul').css('border', '2px solid red');
$('ul').children('ol').css('font-weight', 'bolder');
$('li').siblings('li').css('border', '2px solid red');

 $('h1').next().css('border', '2px solid red');
 $('h1').prev().css('border', '2px solid red');

 
 $('li').filter(":odd").css('border', '2px solid red');
 $('ul').find('li').filter(":even").css('border', '2px solid red');

$('ul').first().css('background-color', 'red');
$('ul').last().css('background-color', 'red')

$('li').eq( numberHere ).css('background-color', 'red');
$('li').eq( -numberHereFromBackToFront ).css('background-color', 'red');

   /*  -----------------------XX ----------------------*/  


                    /*  DOM  */
//Adding
$('ol').append('<li> Will be last item on OL </li>');
$('<li> Seven </li>').appendTo(('ol'));

$('ol').prepend('<li> Will be Top Item on OL </li>');
$('<li> From Top Seven </li>').prependTo(('ol'));

$('div.one').after("<div class='box bg-info m -4'> after </div>");
$('div.one').before("<div class='box bg-secondary m -4'> before </div>")

$('div.one').before(()=>{
  return "<div class='box bg-secondary m -4'> before </div>";
})
//We can do like this for all the above mentioned methods.


//replacing
$('li:even').replaceWith('<li>  All the Even li will be replaced </li>');
$('li:even').replaceWith(()=>{
  return 'Works same way, But we are returning using an function';
});
$('li:even').replaceAll('<li>  All the Even li will be replaced </li>');


//Removing elements
 $('li').remove();

$('p').empty(); //Will only remove the content inside the 'p', Will not remove the 'p' element itself. ( it basically empty it)


//Manipulating attributes.
$('a').attr('href');
$('img').attr('src');
$('div').attr('height');

//It will change the value;
$('a').attr('href','https://www.youtube.ca/');

//It will work as "checked" works in HTML. ( by default it will be checked )
$('input:checkbox').prop('checked');

//To get an value from the element. ( eleme.value  ( vanilla script ))
$('eleme').val();


            // classes
//Add class.
$('.select').addClass('classNameToBeAdd');
$('.select').addClass('classNameToBeAdd classNameToBeAdd2 classNameToBeAdd5'); //multiple classes.
$('div').addClass(function(index, currentClass){
  if(currentClass === 'dummy01'){
    return 'classNameOneToBeAdded'  //Example : To add class using index or checking if the class prexisted or not.
  }
})

//Remove classe.
$('.select').removeClass('classNameToBeRemoved');
$('.select').removeClass('classNameToBeRemoved classNameToBeRemoved2 classNameToBeRemoved4 ');

$('.select').addClass('class1').removeClasss('class3').addClass('blah blah2...') //Chaining it.

-------------------------------------
    // data

let valuesArr = [10, 20, 30, 40, 50];

$('.element').data('keyHere', "valueHere");
console.log( $('.element').data('keyHere') );

$('.output').data('dataSet1', valuesArr);
$('.output').data('ds2', "Jaskaran");

console.log( $('.output').data('dataSet1')); //It will return the whole array('valuesArr')
console.log( $('.output').data('ds2') );

console.log($(".output").data()); //It will return all the data linked to the '.output' element.

$('.output').removeData("dataName"); // How to remove the data.


<p data-sampData1='Something to be stored'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio.  
</p>

<script>
  $('p').data();
//or
  $('p').data('sampData1');

</script>  
-----------------------------------------
 
  //content
.text();
.html();
      /*  -----------------------XX ---------------------------- */

             /*      Event Handlers      */ 
  
//Syntax
$('.elemt').methodName(function(){  });

$('eleme').click();
$('eleme').dblclick();

$('eleme').mouseenter();
$('eleme').mouseleave();

//hover(handlerIn, handerOut);
$('.elem').hover();
$('elem').hover( function(){console.log('code written from handlerIn')}, function(){console.log('code written from handlerOut')}) // We can use 'mouseenter' and 'mouseleave', But just another way to code.


//Adding multiple handlers on single "element" using "ON" method.
$('.elem').on("click dblclick mouseenter",function(){ 
 console.log('Active : ')
});

               //Delegated events, 
//In case we add some dynamic elements( from js/external src). Events handlers are not added to the Dynamic content so we need to use 'Delegated events'.
$('.parent').on( "click", "p"  ,function(){
$(this).slideUp();
});//In this case we have added 'p' tag from JS, So in order to access/select, We need to use such syntax.


//Data
    <li data-item1='Item One Data Here...'>Write your own destiny</li>
    <li data-item2="item Two Data here">Fate is what choices you make</li>
  
     console.log($('li:first').data());
       //{item1: "Item One Data Here..."}

     console.log($('li:first').data('item1'));
       //Item One Data Here

//KeyDown && keyup
$('elem').keydown(()=>{});
$('elem').keyup(()=>{});

$('elem').keydown((e)=>{console.log(e.which)});

//Focus, Change and blur
$('input').focus(function(){
 $(this).css('box-shadow',"2px 2px 14px grey");
});

$('input').change(function(){
 $(this).css('box-shadow',"2px 2px 14px grey");
})

$('input').blur(function(){
 $(this).css('box-shadow',"2px 2px 14px grey");
})
.email {
  opacity: .75;
  text-overflow: ellipsis;
  overflow: hidden;
}
background-image: url(/src/assets/icons/image.png)
nav#menu li:nth-child(n+2):nth-child(-n+5) a:before {
    content: "\f078";
    font-size: 8px;
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    right: 2px;
    top: 15px;
}
::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}
@media (max-width: 960px) {
  /* For a screen < 960px, this CSS will be read */
  .container {
    width: 700px;
  }
}
@media (max-width: 720px) {
  /* For a screen < 720px, this CSS will be read */
  .container {
    width: 500px;
  }
}
@media (max-width: 540px) {
  /* For a screen < 540px, this CSS will be read */
  .container {
    width: 300px;
  }
}
/* Carousel   */
 <!--###################START HERE####################-->
  <div class="container">
    <div class="row">
      <div class="col-sm-8 m-auto">

        <!-- SIMPLE SLIDER -->
        <div id="slider1" class="carousel slide mb-5" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>
        </div>

        <!-- SLIDER WITH CONTROLS -->
        <div id="slider2" class="carousel slide mb-5" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>

          <!-- CONTROLS -->
          <a href="#slider2" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>

          <a href="#slider2" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>

        <!-- SLIDER WITH INDICATORS -->
        <div id="slider3" class="carousel slide mb-5" data-ride="carousel">
          <ol class="carousel-indicators">
            <li class="active" data-target="#slider3" data-slide-to="0"></li>
            <li data-target="#slider3" data-slide-to="1"></li>
            <li data-target="#slider3" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>

          <!-- CONTROLS -->
          <a href="#slider3" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>

          <a href="#slider3" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>

        <!-- SLIDER WITH CAPTIONS -->
        <div id="slider4" class="carousel slide mb-5" data-ride="carousel">
          <ol class="carousel-indicators">
            <li class="active" data-target="#slider4" data-slide-to="0"></li>
            <li data-target="#slider4" data-slide-to="1"></li>
            <li data-target="#slider4" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
              <div class="carousel-caption d-none d-md-block">
                <h3>Slide One</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
              <div class="carousel-caption d-none d-md-block">
                <h3>Slide Two</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
              <div class="carousel-caption d-none d-md-block">
                <h3>Slide Three</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
              </div>
            </div>
          </div>

          <!-- CONTROLS -->
          <a href="#slider4" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>

          <a href="#slider4" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
/* ------------------ XX ------------------- */

/*  collapse  */
/* ------------------ XX ------------------- */

/*  Tooltips  */
/* ------------------ XX ------------------- */


/*  Popovers  */
/* ------------------ XX ------------------- */


/*  Modals  */
/* ------------------ XX ------------------- */


/*  ScrollSpy  */
/* ------------------ XX ------------------- */
           /*    Grid System      */
    <!-- RESPONSIVE GRID -->
    <div class="row">
      <div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>8 column on medium screen</li>
          <li>9 column on large screen</li>
          <li>10 column on xlarge screen</li>
        </ul>
      </div>
      <div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>4 column on medium screen</li>
          <li>3 column on large screen</li>
          <li>2 column on xlarge screen</li>
        </ul>
      </div>
    </div>

    <!-- EQUAL WIDTH -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
    </div>

    <!-- EQUAL WIDTH MULTI ROW -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="w-100" style="border:1px solid #333"></div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
    </div>

    <!-- AUTO LAYOUT -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Auto Layout</div>
      <div class="col-6" style="border:1px solid #333">Auto Layout</div>
      <div class="col-4" style="border:1px solid #333">Auto Layout</div>
    </div>

    <!-- EQUAL WIDTH STACKED -->
    <div class="row">
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
    </div>

    <!-- ORDERING -->
    <div class="row">
      <div class="col order-3" style="border:1px solid #333">
        First
      </div>
      <div class="col order-2" style="border:1px solid #333">
        Second
      </div>
      <div class="col order-1" style="border:1px solid #333">
        Third
      </div>
    </div>

    <!-- OFFSETTING -->
    <div class="row">
      <!-- 6 column div offset by 3 -->
      <div class="col-md-6 offset-md-3" style="border:1px solid #333">.col-md-6 .offset-md-3</div>
    </div>
    <div class="row">
      <!-- 2 4 column divs, the second offset by 4 -->
      <div class="col-md-4" style="border:1px solid #333">.col-md-4</div>
      <div class="col-md-4 offset-md-4" style="border:1px solid #333">.col-md-4 .offset-md-4</div>
    </div>

    <div class="row">
      <!-- 2 3 column divs, both offset by 3 -->
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
    </div>

    <!-- NESTING -->
    <div class="row">
      <div class="col-sm-9" style="border:1px solid blue">
        Level 1: .col-sm-9
        <div>
          <div class="col-8 col-sm-6" style="border:1px solid red">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6" style="border:1px solid red">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>

  /* ------------------ XX --------------- */


          /*   Grid Alignment       */
        <!-- VERTICAL ALIGNMENT -->
        <div class="container">
            <div class="row align-items-start" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Top Aligned Text
                </div>
                <div class="col">
                    Top Aligned Text
                </div>
                <div class="col">
                    Top Aligned Text
                </div>
            </div>
            <div class="row  align-items-center" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Middle Aligned Text
                </div>
                <div class="col">
                    Middle Aligned Text
                </div>
                <div class="col">
                    Middle Aligned Text
                </div>
            </div>
            <div class="row  align-items-end" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Bottom Aligned Text
                </div>
                <div class="col">
                    Bottom Aligned Text
                </div>
                <div class="col">
                    Bottom Aligned Text
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- VERTICAL ALIGN INDIVIDUAL COLS -->
        <div class="container">
            <div class="row" style="height:200px;border:1px #333 solid">
                <div class="col  align-self-start">
                    Top Aligned
                </div>
                <div class="col  align-self-center">
                    Middle Aligned
                </div>
                <div class="col  align-self-end">
                    Bottom Aligned
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- HORIZONTAL ALIGNED COLS -->
        <div class="container">
            <div class="row justify-content-start" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Left Aligned Text
                </div>
                <div class="col-4">
                    Left Aligned Text
                </div>
            </div>
            <div class="row justify-content-center" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Center Aligned Text
                </div>
                <div class="col-4">
                    Center Aligned Text
                </div>
            </div>
            <div class="row justify-content-end" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Right Aligned Text
                </div>
                <div class="col-4">
                    Right Aligned Text
                </div>
            </div>
            <div class="row justify-content-around" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Content Around
                </div>
                <div class="col-4">
                    Content Around
                </div>
            </div>
            <div class="row justify-content-between" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Content Between
                </div>
                <div class="col-4">
                    Content Between
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- COLUMN WRAPPING & NO GUTTERS-->
        <div class="row no-gutters">
            <div class="col-9">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


   /* ------------------ XX --------------- */

            /*   Flex   */

    <!-- FLEX ROW & FLEX ITEMS -->
    <div class="d-flex flex-row row-hl">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX ROW REVERSE -->
    <div class="d-flex flex-row-reverse row-hl">
      <div class="p-4 item-hl">Flex Item 1</div>
      <div class="p-4 item-hl">Flex Item 2</div>
      <div class="p-4 item-hl">Flex Item 3</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT START -->
    <div class="d-flex row-hl justify-content-start">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT CENTER -->
    <div  class="d-flex row-hl justify-content-center">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT END -->
    <div class="d-flex row-hl justify-content-end">
      <div class="p-4 item-hl">Flex Item end</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT AROUND -->
    <div class="d-flex row-hl justify-content-around">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT BETWEEN -->
    <div  class="d-flex row-hl justify-content-between">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX COLUMN -->
    <div class="row-hl d-flex flex-column">
      <div class="p-4 item-hl">Flex Item 11</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX COLUMN REVERSE -->
    <div class="d-flex flex-column-reverse row-hl">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - START -->
    <div class="row-hl d-flex align-items-start">
      <div class="p-4 item-hl">Flex Item Start</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - CENTER -->
    <div class="row-hl d-flex align-items-center">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - END -->
    <div class="row-hl d-flex align-items-end">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - BASELINE -->
    <div class="row-hl d-flex align-items-baseline">
      <div class="p-4 item-hl">Flex Item BASELINE</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - STRETCH -->
    <div class="row-hl d-flex align-items-stretch">
      <div class="p-4 item-hl">Flex Item STRETCH</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- ALIGN SELF -->
    <div class="row-hl d-flex">
      <div class="p-4 item-hl align-self-end">Flex Item End</div>
      <div class="p-4 item-hl align-self-center">Flex Item</div>
      <div class="p-4 item-hl align-self-start">Flex Item</div>
      <div class="p-4 item-hl align-self-baseline">Flex baseline</div>
      <div class="p-4 item-hl align-self-stretch">Flex stretch</div>
    </div>
   /* ------------------ XX --------------- */

          /*  Auto Margins & Wrap     */



        <!-- MR-AUTO -->
        <div class="d-flex row-hl">
            <div class="mr-auto p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- ML-AUTO -->
        <div class="d-flex row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="ml-auto p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- MB-AUTO -->
        <div class="d-flex flex-column row-hl">
            <div class="mb-auto p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- MT-AUTO -->
        <div class="d-flex flex-column row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 mt-auto item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- NO WRAP -->
        <div class="d-flex row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>

        </div>

        <br>
        <br>

        <!-- WRAP -->
        <div class="d-flex flex-wrap row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- ORDERING -->
        <div class="d-flex row-hl">
            <div class="p-2 order-3 item-hl">First flex item</div>
            <div class="p-2  item-hl">Second flex item</div>
            <div class="p-2 order-1 item-hl">Third flex item</div>
        </div>

     /* ------------------ XX --------------- */
.module .content .items .item .poster a .see,
.module .content .items .item .poster img{
	-webkit-transition: none;
    transition: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background & Borders</title>
</head>
<style>
  .hasnai {
    text-align: center;
  }

  #box-1 {
    background-color: red;
    /* border-width: 5px;
    border-style: dotted;
    border-color: black; */
    border: double 5px black;
    border-radius: 15px;
  }

  #box-2 {
    background-color: chartreuse;
    border: 5px solid blue;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  #box-3{
    /* If you all properties togather than don't use background-image just use background */
    /* background-image: url("img/hrhasnai.jpg")*/
    background: url("img/hrhasnai.jpg") no-repeat center center/cover;
    /* background-repeat: no-repeat;*/
    /* background-position:100px 0px; */
    /* background-position:center center; */
    /* background-position:center top; */
    /*background-size: cover; */

    height: 300px;
    width: 600px;
    color: white;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  #box-4{
    background: url("img/flutter.png") no-repeat center center;
    background-attachment:fixed;
  }
</style>

<body>
  <H1 class="hasnai">
    Hasnain
  </H1>
  <div id="box-1">
    <h1>Box One</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <br>
  <div id="box-2">
    <h1>Box Two</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <div id="box-3">
    <h1>Box Three</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <div id="box-4">
    <h1>Box Four</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <div id="box-5">
    <h1>Box Five</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>

</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colors in CSS</title>

  <style>
    /*Hex value*/
    h1{
      color: rgb(red, green, blue) ;
    }
    /*Color Name*/
    h2{
      color: blue;
    }
    /*Color RGB*/
    h3{
      color: #00000;
    }
  </style>

</head>
<body>

<h1>Color By Hex value</h1>  
<h2>Color By Color Name</h2>
<h3>Color by Color RGB</h3>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fonts in CSS</title>

  <style>
    body{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 1.6em;
    }
    #welcome p span{
      font-weight: bold;
    }
    #about p span{
      font-style: italic;
    }
    
  </style>
</head>
<body>
  
  <div id="welcome">
    <h2 class="primary-heading">Welcome</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <span> Eius praesentium laboriosam ratione molestiae nobis, nisi quod laudantium aliquid accusamus</span> expedita!</p>
  </div>
  <div id="about">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span> Cumque enim natus ad? Mollitia alias repudiandae </span>iusto molestias voluptatum, dolores eius.</p>
  </div>
  
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Selector's</title>

  <style>
    /*Elements Selector's*/
    body{
      background-color: rgb(75, 56, 56);
    }

    /*# Sign is for ID's*/
    #welcome{
      background-color: rgb(31, 151, 57);
    }
    /* . sign is for class */
    .primary-heading{
      color: crimson;
    }
    .about{
      color:darkgoldenrod;
    }
    /*Multiple selectors 
    Multiple selectors is divided by "," coma*/
    #welcome,#about{
      border: 1px solid black;
      padding: 10px;
      margin-bottom: 10px;
    }

    /* Nasted selector's */
    #welcome p{
      background-color:oldlace;
      font-size: 20px;0
    }
    #about{
      background-color: blanchedalmond;
    }
    
  </style>

</head>
<body>
  
  <div id="welcome">
    <h2 class="primary-heading">Welcome to Our Course </h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non odit sed impedit rem tempore labore quasi veritatis laborum quae quo?</p>
  </div>

  <div id="about">
    <h2 class="about">About</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque debitis esse expedita quo sit. Praesentium ea ipsum numquam voluptas exercitationem?</p>
  </div>



</body>
</html>
                     /*        "Components"                */



/*    Buttons        */

 
        <!-- BUTTONS -->
        <button class="btn btn-primary" type="button">Primary</button>
        <button class="btn btn-secondary" type="button">Secondary</button>
        <button class="btn btn-success" type="button">Success</button>
        <button class="btn btn-info" type="button">Info</button>
        <button class="btn btn-warning" type="button">Warning</button>
        <button class="btn btn-danger" type="button">Danger</button>
        <button class="btn btn-light" type="button">Light</button>
        <button class="btn btn-dark" type="button">Dark</button>
        <button class="btn btn-link" type="button">Link</button>

        <br>
        <br>

        <!-- BUTTON TAGS/TYPES -->
        <a class="btn btn-primary" href="#" role="button">Link</a>
        <button  class="btn btn-light" type="submit">Button</button>
        <input class="btn btn-dark" type="button" value="Input">
        <input  class="btn btn-warning" type="submit" value="Submit">
        <input  class="btn btn-success" type="reset" value="Reset">

        <br>
        <br>

        <!-- OUTLINE BUTTONS -->
        <button class="btn btn-outline-primary" type="button">Primary Outline</button>
        <button  class="btn btn-outline-secondary" type="button">Secondary Outline</button>
        <button  class="btn btn-outline-success" type="button">Success Outline</button>
        <button  class="btn btn-outline-success" type="button">Info Outline</button>
        <button  class="btn btn-outline-warning" type="button">Warning Outline</button>
        <button  class="btn btn-outline-danger" type="button">Danger Outline</button>
        <button  class="btn btn-outline-light" type="button">Light Outline</button>
        <button  class="btn btn-outline-dark" type="button">Dark Outline</button>

        <br>
        <br>

        <!-- BUTTON SIZES -->
        <button class="btn btn-lg" type="button">
            <i class="fa fa-user"></i> Large button</button>
        <button class="btn btn-sm" type="button">Small button</button>
        <br>
        <br>
        <button class="btn btn-block btn-outline-dark" type="button">Block level button</button>

        <br>
        <br>

        <!-- STATES -->
        <button class="btn btn-primary" type="button">Regular Button</button>
        <button class="btn btn-primary active" type="button">Active Button</button>
        <button class="btn btn-primary disabled" type="button">Disabled Button</button>

        <button class="btn btn-primary" data-toggle='button' type="button">
            Toggle State
        </button>

        <br>
        <br>

        <!-- BUTTON GROUPS -->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Left</button>
            <button class="btn btn-success" type="button">Middle</button>
            <button class="btn btn-primary" type="button">Right</button>
        </div>

        <br></br>

        <!-- BUTTON TOOLBAR -->
        <div class="btn-toolbar">
            <div class="btn-group  mr-2">
                <button class="btn btn-primary"  type="button">1</button>
                <button class="btn btn-primary"  type="button">2</button>
                <button class="btn btn-primary"  type="button">3</button>
                <button class="btn btn-primary"  type="button">4</button>
            </div>
            <div class="btn-group mr-2">
                <button class="btn btn-primary"  type="button">5</button>
                <button class="btn btn-primary"  type="button">6</button>
                <button class="btn btn-primary"  type="button">7</button>
            </div>
            <div>
                <button class="btn btn-primary"  type="button">8</button>
            </div>
        </div>

        <br>
        <br>

        <!-- VERTICAL GROUP -->
        <div class="btn-group-vertical">
            <button class="btn bg-primary" type="button">Left</button>
            <button class="btn btn-dark" type="button">Middle</button>
            <button class="btn bg-primary" type="button">Right</button>
        </div>

        <br>
        <br>

        <!-- BUTTON DROPDOWNS -->
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
                My Dropdown
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link One</a>
                <a class="dropdown-item" href="#">Link Two</a>
                <a class="dropdown-item" href="#">Link Three</a>
            </div>
        </div>

        <br>
        <br>

        <!-- SPLIT DROPDOWNS -->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">My Button</button>
            <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
                <span>Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link One</a>
                <a class="dropdown-item" href="#">Link Two</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Link Three</a>
            </div>
        </div>
          /*   ---------------------- XX ------------------    */


                          /*     Navbar   */
 <!-- SIMPLE NAVBAR -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    

    <!-- NAVBAR WITH RESPONSIVE TOGGLE -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" data-toggle="collapse" data-target='#navbarNav'>
                <span class="navbar-toggler-icon"> </span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
         </div>
        </div>
    </nav>
    

    <!-- NAVBAR WITH FORM -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" data-toggle="collapse" data-target='#navbarNav'>
                <span class="navbar-toggler-icon"> </span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>

            <form class="form-inline ml-auto">
                <input class="form-control mr-2" placeholder="Search" type="text">
               <button class="btn btn-outline-success ml-2">Search</button>
            </form>
         </div>
        </div>
    </nav>

    <!-- NAVBAR WITH DROPDOWN -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-5">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"> Dropdown </a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item"> Link 1 </a>
                        <a href="#" class="dropdown-item"> Link 2 </a>
                        <a href="#" class="dropdown-item"> Link 3 </a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- COLORS -->
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <br>
    <br>

    <!-- FIXED TOP -->
    <nav style='z-index : 1;' class="navbar navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#" > Navbar Fixed Top </a>
    </nav>

    <!-- FIXED BOTTOM -->
    <!-- FIXED TOP -->
    <nav class="navbar navbar-dark bg-dark fixed-bottom">
        <a class="navbar-brand" href="#" > Navbar Fixed Bottom </a>
    </nav>



    <!-- sticky TOP -->
    <nav style='z-index:2;' class="navbar navbar-dark bg-dark sticky-top">
        <a class="navbar-brand" href="#" > Navbar sticky Top </a>
    </nav>


    <br>
    <br>

    <div class="container">

        <!-- NAVS -->
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <!-- HORIZONTAL ALIGN -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 justify-content-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>



        <!-- RIGHT ALIGN -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <br>
        <br>

        <!-- VERTICAL -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <br>
        <br>

        <!-- FILL & JUSTIFY -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 nav-fill">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 4</a>
            </li>
        </ul>
           /*   ---------------------- XX ------------------    */

               /*   List Groups & Badges       */


        <!-- LIST GROUP -->
        <ul class="list-group mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item">My List Item Three</li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>

        <!-- LIST GROUP WITH LINKS -->
        <ul  class="list-group mb-3">
            <a class="list-group-item" href="#">My List Item One</a>
            <a class="list-group-item" href="#">My List Item Two</a>
            <a class="list-group-item active" href="#">My List Item Three</a>
            <a class="list-group-item" href="#">My List Item Four</a>
            <a class="list-group-item" href="#">My List Item Five</a>
        </ul>


        <!-- CONTEXTUAL CLASSES -->
        <ul class="list-group mb-3">
            <li class="list-group-item">Regular List Item</li>
            <li class="list-group-item list-group-item-primary">Primary List Item</li>
            <li class="list-group-item list-group-item-secondary">Secondary List Item</li>
            <li class="list-group-item list-group-item-success">Success List Item</li>
            <li class="list-group-item list-group-item-info">Info List Item</li>
            <li class="list-group-item list-group-item-warning">Warning List Item</li>
            <li class="list-group-item list-group-item-danger">Danger List Item</li>
            <li class="list-group-item list-group-item-light">Light List Item</li>
            <li class="list-group-item list-group-item-dark">Dark List Item</li>
        </ul>

        <!-- FLUSH LIST GROUP -->
        <ul class="list-group list-group-flush mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item active">My List Item Three</li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>


        <!-- BADGE -->
        <ul class="list-group mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                My List Item Three
            <span class="badge badge-primary">30</span>
            </li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>

        <!-- BREADCRUMB -->
        <ol class="breadcrumb">
            <li class="breadcrumb-item active">Home</li>
        </ol>
        <ol class="breadcrumb">
            <li  class="breadcrumb-item">
                <a href="#">Home</a>
            </li>
            <li  class="breadcrumb-item" >Users</li>
        </ol>
        <ol class="breadcrumb">
            <li  class="breadcrumb-item">
                <a href="#">Home</a>
            </li>
            <li  class="breadcrumb-item">
                <a href="#">Users</a>
            </li>
            <li  class="breadcrumb-item" >Brad</li>
        </ol>

           /*   ---------------------- XX ------------------    */

                  /*    Forms         */

 <!-- FORM -->
        <form>
            <!-- TEXT FIELD GROUPS -->
            <div class="form-group">
                <label for="name">Name</label>
                <input class="form-control" type="text" id="name" placeholder="Enter name">
            </div>
            <div class="form-group">
                <label for="email">Email address</label>
                <input class="form-control form-control-lg" type="email" id="email" placeholder="Enter email">
                <small class="form-text text-muted">
                    Your email will not ever be shared
                </small>
            </div>
            <div class="form-group">
                <label for="company">Company</label>
                <input class="form-control form-control-sm" type="text" id="company" placeholder="Enter company name">
            </div>
            <div class="form-group">
                <label for="company">Company 2 : </label>
                <input class="form-control form-control-sm" type="text" id="company" placeholder="Read only Example" readonly>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input class="form-control" type="password" id="password" placeholder="Password">
            </div>
            <!-- SELECT -->
            <div class="form-group">
                <label for="gender">Gender</label>
                <select  class="form-control"  id="gender">
                    <option>Male</option>
                    <option>Female</option>
                </select>
            </div>
            <!-- TEXTAREA -->
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" rows="3"></textarea>
            </div>
            <!-- FILE INPUT -->
            <div class="form-group">
                <label for="file">File input</label>
                <input class="form-control-file" type="file" id="file">
                <small class="form-text text-muted" id="fileHelp">Max 3mb size</small>
            </div>
            <!-- CUSTOM FILE INPUT -->
            <div class="custom-file">
                <input class="custom-file-input" type="file" id="myfile">
                <label class="custom-file-label" for="myfile">Choose file</label>
            </div>
            <br>
            <br>
            <!-- RANGE -->
            <div class="form-group">
                <label for="membership">Membership Level</label>
                <input class="custom-range" type="range" step="1" value='5' min="1" max="5">
            </div>

            <br>

            <button class="btn btn-block btn-primary" type="submit">Submit</button>
        </form>

        <br>
        <br>

        <!-- INLINE FORM -->
        <form class="form-inline">
            <input class="form-control mr-2" type="text" id="username" placeholder="Enter username">
            <input class="form-control mr-2" type="text" id="password" placeholder="Password">
            <div class="form-check">
                <label class="form-check-label mr-2">
                    <input class="form-check-input" type="checkbox"> Remember me
                </label>
            </div>

            <button class="btn btn-light" type="submit">Submit</button>
        </form>

        <br>
        <br>

        <!-- FORM ROW -->
        <form>
            <div class="form-row">
                <div class="col">
                    <input class="form-control" type="text" placeholder="First name">
                </div>
                <div>
                    <input class="form-control" type="text" placeholder="Last name">
                </div>
            </div>
        </form>

        <br>
        <br>

        <!-- VALIDATION -->
        <div class="form-group">
            <label for="username">Username</label>
            <input class="form-control is-valid" type="text" id="username" placeholder="Validation example ( if it's valid )" >
        </div>
        <div class="form-group">
            <label for="username">Username 2 </label>
            <input class="form-control is-invalid" type="text" id="username" placeholder="Validation example ( if Not valid )" >
        </div>
        <div>
            <label for="password">Password</label>
            <input class="form-control is-invalid" type="text" id="password" placeholder="Feedback example  ( below details )">
            <div class="invalid-feedback">
                Password not strong enough
            </div>
        </div>
        <div>
            <label for="password2">Confirm Password</label>
            <input class="form-control" type="text" id="password2">
            <div>
                Password does not match
            </div>
        </div>
/*   ---------------------- XX ------------------    */


         /*   Input Groups & Addons     */

 <!-- BASIC INPUT GROUPS -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">@</span>
            </div>
            <input class="form-control" type="text" placeholder="Username">
        </div>

        <br>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Username">
            <div class="input-group-append">
                <span class="input-group-text">@something.com</span>
            </div>
        </div>

        <br>

        <label for="basic-url">Custom URL</label>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">https://something.com/member/</span>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input class="form-control" type="text">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>

        <br>

        <!-- CHECKBOX -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <input type="checkbox">
                </div>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <!-- RADIO -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <input type="radio">
                </div>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <!-- MULTIPLE INPUTS -->
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="">Name & Email</span>
            </div>
            <input class="form-control" type="text" placeholder="Full Name">
            <input class="form-control" type="email" placeholder="Email">
        </div>

        <br>

        <!-- BUTTON ADDONS -->
        <div class="input-group mb-3">
            <input class="form-control" type="text" placeholder="Find By Name...">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button">Search</button>
            </div>
        </div>
/*   ---------------------- XX ------------------    */

         /*    Alerts & Progress Bars     */


        <!-- ALERTS -->
        <div class="alert alert-primary">
            <strong>Primary</strong> Blog post added
        </div>

        <div class="alert alert-secondary">
            <strong>Secondary</strong> Blog post added
        </div>

        <div class="alert alert-success">
            <strong>Success</strong> Blog post added
        </div>

        <div class="alert alert-danger">
            <strong>Danger</strong> Please check the log files
        </div>

        <div class="alert alert-info">
            <strong>Info</strong> You have a new message
        </div>

        <div class="alert alert-warning">
            <strong>Warning</strong> Please check the log files
        </div>

        <div class="alert alert-light">
            <strong>Light</strong> Please check the log files
        </div>

        <div class="alert alert-dark">
            <strong>Dark</strong> Please check the log files
        </div>


        <!-- DISMISSABLE ALERT -->
        <div class="alert alert-success alert-dismissible">
            <button class="close" type="button" data-dismiss="alert">
                <span>&times;</span>
            </button>
            <strong>Dismissable</strong> Blog post added
        </div>

        <!-- EXTRA CONTENT -->
        <div class="alert alert-success">
            <h4 class="alert-heading">Congrats!</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit dignissimos eius, sit quo assumenda totam commodi
                ipsum saepe molestias eligendi exercitationem repudiandae qui facilis deserunt non, harum ab quam? Cumque</p>
            <hr>
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, odio?</p>
        </div>

        <br>
        <br>

        <!-- PROGRESS BARS -->
        <div class="progress">
            <div class="progress-bar" style='width:35%'></div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar" style='width:80%'>80%</div>
        </div>
        <br>
        <!-- STRIPED -->
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-striped" style='width : 70%;'></div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped" style='width : 90%'>90%</div>
        </div>

        <!-- HEIGHT -->
        <div class="progress my-3" style="height:2px">
            <div class="progress-bar bg-success" style='width : 60%'></div>
        </div>
        <br>
        <!-- ANIMATED -->
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style='width:60%;'></div>
        </div>
        <div class="progress mt-3">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style='width:90%;'>90%</div>
        </div>

        <br>
        <!-- MULTIPLE BARS -->
        <div class="progress">
            <div class="progress-bar bg-warning" style='width:15%;'></div>
            <div class="progress-bar bg-success" style='width:25%;'>25%</div>
            <div class="progress-bar bg-primary  progress-bar-striped progress-bar-animated" style='width:10%;'>Loading Amigo</div>
        </div>
/*   ---------------------- XX ----------------
--    */

                
                /*  Tables & Pagination          */
                
        <!-- TABLE -->
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>John</td>
                    <td>Doe</td>
                    <td>jdoe@gmail.com</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Will</td>
                    <td>Johnson</td>
                    <td>will@yahoo.com</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Shannon</td>
                    <td>Williams</td>
                    <td>shannon@yahoo.com</td>
                </tr>
            </tbody>
        </table>

        <br>

        <!-- INVERSE/DARK TABLE -->
        <table class="table table-dark">
        </table>

        <br>

        <!-- TABLE HEAD INVERSE -->
        <table class="table">
            <thead class="thead-dark">
            </thead>
        </table>

        <br>

        <!-- STRIPED TABLE -->
        <table class="table table-striped">
        </table>

        <!-- BORDERED TABLE -->
        <table class="table table-bordered">
        </table>

        <br>

        <!-- BORDERLESS TABLE -->
        <table class="table table-borderless">
        </table>

        <br>

        <!-- HOVERABLE -->
        <table class="table table-hover">
        </table>

        <br>

        <!-- CONTEXTUAL CLASSES -->
        <table class="table">
        </table>

        <br>

        <!-- SMALL TABLE -->
        <table class="table table-sm table-hover table-striped">
        </table>

        <br>

        <!-- RESPONSIVE TABLE - Scrollbars -->
        <div class="table-responsive">
            <table class="table">
            </table>
        </div>

        <br>
        <br>

        <!-- PAGINATION -->
        <nav>
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link" href="#">Previous</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>

        <!-- PAGINATION CENTERED -->
        <nav>
            <ul class="pagination justify-content-center">
            </ul>
        </nav>


        <!-- PAGINATION RIGHT -->
        <nav>
            <ul class="pagination justify-content-end">
                </li>
            </ul>
        </nav>



        <!-- PAGINATION LARGE -->
        <nav>
            <ul class="pagination pagination-lg">
            </ul>
        </nav>



        <!-- PAGINATION SMALL -->
        <nav>
            <ul class="pagination pagination-sm">
            </ul>
        </nav>


        <!-- WITH ARROWS -->
        <nav>
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link" href="#">  
                     <span>&laquo;</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">
                    <span>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>                
                
/*   ---------------------- XX ------------------    */
/*   Cards  */
        <!-- BLOCK -->
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, voluptate.
            </div>
        </div>

        <br>
        <br>

        <!-- SIMPLE CARD -->
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <h6 class="card-subtitle text-muted">Card subtitle</h6>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                <a class="btn btn-outline-primary" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH IMAGE -->
        <div class="card">
            <img class="card-img-top" src="https://source.unsplash.com/random/300x200" alt="">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                <a class="btn btn-success btn-block" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH HEADER -->
        <div class="card">
            <div class="card-header">
                My Card
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-danger" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- HEADER, FOOTER, CENTERED -->
        <div class="card text-center">
            <div class="card-header">
                My Card
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-dark" href="#">Read More</a>
            </div>
            <div class="card-footer text-muted">
                2 Days Ago
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH NAV -->
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-primary" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- IMAGE OVERLAYS -->
        <div class="text-white card">
            <img class="card-img" src="https://source.unsplash.com/random/1000x300" alt="">
            <div class="card-img-overlay">
                <h4 class="card-text">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                    content. This content
                    is a little bit longer.</p>
                <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </p>
            </div>
        </div>


        <br>
        <br>

        <!-- BACKGROUND COLOR -->
        <div class="card bg-primary text-white mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card bg-danger text-white mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>


        <br>
        <br>

        <!-- CARD OUTLINE -->
        <div class="card border-primary mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card border-danger mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card border-info mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>
        <br>
        <br>

        <!-- CARD GROUP -->
        <div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
        </div>


        <br>
        <br>

        <!-- CARD DECK -->
        <div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD COLUMNS -->
        <!-- CARD COLUMNS -->
        <div class="card-columns">
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/300x200" alt="">
                <div class="card-body">
                    <h4 class="card-title">Card title that wraps to a new line</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content
                        is a little bit longer.</p>
                </div>
            </div>
            <div class="card p-3">
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer>
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/301x200" alt="">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.
                    </p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card bg-dark text-white p-3">
                <blockquote class="card-bodyquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                    <footer class="blockquote-footer">
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card text-center">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.
                    </p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/302x200" alt="">
            </div>
            <div class="card p-3 text-right">
                <blockquote class="card-bodyquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This card
                        has even longer content than the first to show that equal height action.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
        </div>
                
/*   ---------------------- XX ------------------    */

                
         /*   Media Object   */
                
        <!-- MEDIA OBJECT -->
        <div class="media">
            <img class="mr-3 mt-3" src="https://source.unsplash.com/random/90x90">
            <div class="media-body">
                <h5>Media heading</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
                felis in faucibus.
            </div>
        </div>

        <br>
        <br>

        <!-- NESTING MEDIA OBJECTS -->
        <div class="media">
            <img class="mr-3" src="https://source.unsplash.com/random/90x91">
            <div class="media-body">
                <h5>Media heading</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
                felis in faucibus.

                <div class="media mt-4">
                    <a href="#" class="pr-4">
                        <img src="https://source.unsplash.com/random/90x92">
                    </a>
                    <div class="media-body">
                        <h5>Nested Media</h5>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                        vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                        congue felis in faucibus.
                    </div>
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- TOP ALIGNED (DEFAULT) -->
        <div class="media">
            <img class="mr-3 align-self-start" src="https://source.unsplash.com/random/90x93">
            <div class="media-body">
                <h5>Top aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>

        <!-- CENTER ALIGNED -->
        <div class="media">
            <img  class="mr-3 align-self-center" src="https://source.unsplash.com/random/90x94">
            <div class="media-body">
                <h5>Center aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>

        <!-- BOTTOM ALIGNED -->
        <div class="media">
            <img  class="mr-3 align-self-end" src="https://source.unsplash.com/random/90x95">
            <div class="media-body">
                <h5>Bottom aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>
<hr>
        <!-- MEDIA LIST -->
        <ul class="list-unstyled">
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x96">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x97">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x98">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
        </ul>


     /* --------------- XX ----------- */

       /*     Jumbotron        */


    <!-- JUMBOTRON -->
    <div class="jumbotron text-center">
      <h1 class="display-4">Welcome To My Website!</h1>
      <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum necessitatibus perspiciatis cum vitae, modi hic?</p>
      <hr>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, quibusdam.</p>
      <a class="btn btn-primary btn-lg" href="#" role="button">Read More</a>
    </div>

    <br>


  </div>
  <!-- ./container -->

  <!-- FLUID JUMBOTRON -->
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Fluid Jumbotron</h1>
      <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas recusandae voluptatibus, natus architecto asperiores
        a.
      </p>
    </div>
  </div>


     /* --------------- XX ----------- */
.some-class {
    background-image: linear-gradient(to bottom, rgba(6, 7, 7, 0.52), rgba(22, 20, 22, 0.73)), url(/assets/images/mainbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
             /*      Utilities             */

/* Break points for Grid */          

Extra small  <576px	
Small        ≥576px
Medium       ≥ 768px	
Large        ≥992px	
Extra large  ≥1200px

/* Basic Typography  */
/* HEADINGS */
<h4>Heading Four</h4>
<h5 class="h1">Heading Five</h5>  /* Biggest size  */
<h6>Heading Six</h6>

/* DISPLAY CLASSES */ 
<h1 class="display-1">Display 1</h1>
<h1>Display 2</h1>
<h1>Display 3</h1>
<h1 class="display-4">Display 4</h1>


/* PARAGRAPHS */ 
<!-- LEAD -->
<p class="lead">Loremdita eum,quaerat, vitae dolorum, dolor autem reiciendis                 sapiente.</p>
<!-- MONOSPACE PARAGRAPH -->
<p class="text-monospace">My monospace paragraph</p>


/* STYLE CLASSES */
<p class="font-weight-bold">Bold Text</p>
<p class="font-weight-normal">Normal Text</p>
<p class="font-italic">Italic Text</pA>

/* TEXT TRANSFORMS */
<p class="text-lowercase">MAKE LOWERCASE</p>
<p class="text-uppercase">make uppercase</p>
<p class="text-capitalize">make capitalized</p>

/* BLOCKQUOTES */ 
<blockquote class="blockquote">
<p>This is a blockquote</p>
</blockquote>

<!-- BLOCKQUOTE RIGHT ALIGNED -->
<blockquote class="blockquote text-right">
<p>This is a blockquote aligned right</p>
</blockquote>

<!-- BLOCKQUOTE WITH FOOTER -->
<blockquote>
<footer class="blockquote-footer">Someone famous here.
</footer>


/* LISTS */ 
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>

<!-- INLINE LIST -->
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Lorem ipsum</li>
</ul>
/* -----------------------------XX---------------- */

    /*      Text-align and display    */

<!-- ALIGNMENT -->
<p class="text-left">Text aligned left</p>
<p class="text-center">Text aligned center</p>
<p class="text-right">Text aligned right</p>

<!-- RESPONSIVE ALIGN -->
<p class="text-sm-right">Right aligned on small or larger</p>
<p class="text-lg-right">Right aligned on large or larger</p>
<p class="text-xl-right">Right aligned on xl or larger</p>

<p class="text-sm-left">Left aligned text on small or larger</p>
<p class="text-md-left">Left aligned text on medium or larger</p>
<p class="text-lg-left">Left aligned text on large or wider</p>
<p class="text-xl-left">Left aligned text on extra large or wider</p>

<p class="text-sm-center">Center aligned text on small or larger</p>
<p class="text-md-center">Center aligned text on medium or larger</p>
<p class="text-lg-center">Center aligned text on large or wider</p>
<p class="text-xl-center">Center aligned text on extra large or wider</p>

<!-- VERTICAL ALIGNMENT -->
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-bottom">bottom</span>
<span class="align-middle">middle</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

<!-- TURN BLOCK TO INLINE -->
<h1 class="d-inline">Hello</h1>
<h1 class="d-inline">Goodbye</h1>

<!-- TURN INLINE TO BLOCK -->
<span class="d-block bg-primary">Block</span>

<!-- INLINE BLOCK -->
<div class="d-inline-block bg-primary">
<h3 class=''>Hello</h3>
This is inline
</div>
<div  class="d-inline-block bg-warning">
<h3 class=''>Hello</h3>
This is inline
</div>
/* -----------------------------XX--------------------- */

/*       Floats & Fixed Positions   */

<!-- FLOATS -->
<div class="float-left">Float left</div>
<br>
<div class="float-right">Float right</div>
<br>
<div class="float-none">Float none</div>
<br>

<!-- RESPONSIVE FLOATS -->
<div class="float-sm-right">Float right on small or wider</div>
<br>
<div class="float-md-right">Float right on medium or wider</div>
<br>
<div class="float-lg-right">Float right on large or wider</div>
<br>
<div class="float-xl-right">Float right on extra large or wider</div>
<br>

<div class="float-sm-left">Float left on small or wider</div>
<br>
<div class="float-md-left">Float left on medium or wider</div>
<br>
<div class="float-lg-left">Float left on large or wider</div>
<br>
<div class="float-xl-left">Float left on extra large or wider</div>
<br>

<div class="float-sm-none">Float none on small or wider</div>
<br>
<div class="float-md-none">Float none on medium or wider</div>
<br>
<div class="float-lg-none">Float none on large or wider</div>
<br>
<div class="float-xl-none">Float none on extra large or wider</div>
<br>

<br>
<br>

<!-- CLEARFIX -->
<div class="bg-success clearfix">
<button class="float-left">Float Left</button>
<button class="float-right">Float Right</button>
</div>

<!-- FIXED TOP -->
<h3 class="fixed-top">Fixed Top</h3>

<!-- FIXED STICKY -->
<h3 class="sticky-top bg-success">Sticky</h3>

<!-- FIXED BOTTOM -->
<h3 class="fixed-bottom">Fixed Bottom</h3>


     /* Colors & Background */

<!-- TEXT COLORS -->
<p class="text-primary">Text Primary Color</p>
<p class="text-secondary">Text Secondary Color</p>
<p class="text-success">Text Success Color</p>
<p class="text-info">Text Info Color</p>
<p class="text-warning">Text Warning Color</p>
<p class="text-danger">Text Danger Color</p>
<p class="text-light">Text Light Color</p>
<p class="text-dark">Text Dark Color</p>
<p class="text-white">Text White Color</p>
<p class="text-muted">Text Muted</p>
<p class="text-black-50">Text Black 50</p>
<p class="text-white-50 bg-primary">Text White 50</p>

<br>
<br>

<!-- BACKGROUND COLORS -->
<div class="bg-primary">Background Primary Color</div>
<div class="bg-secondary">Background Secondary Color</div>
<div class="bg-success">Background Success Color</div>
<div class="bg-info">Background Info Color</div>
<div class="bg-warning">Background Warning Color</div>
<div class="bg-danger">Background Danger Color</div>
<div class="bg-light">Background Light Color</div>
<div class="bg-dark">Background Dark Color</div>
<div class="bg-white">Background White Color</div>
<div class="bg-transparent">Background Transparent</div>

<!-- INVISIBLE -->
<p class="invisible">Hello</p>
/* -----------------------------XX--------------------- */
     /*      Spacing               */

Size and Values ( rem ):
0 : 0
1 : .25rem
2 : .5rem
3 : 1rem
4 : 1.25rem
5 : 3rem

x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom


  <!-- MB MARGIN BOTTOM -->
        <h1 class="bg-success mb-0">Margin Bottom 0</h1>
        <h1 class="bg-success mb-1">Margin Bottom 1</h1>
        <h1 class="bg-success mb-2">Margin Bottom 2</h1>
        <h1 class="bg-success mb-3">Margin Bottom 3</h1>
        <h1 class="bg-success mb-4">Margin Bottom 4</h1>
        <h1 class="bg-success mb-5">Margin Bottom 5</h1>

        <br>
        <br>

        <!-- MT MARGIN TOP -->
        <h1 class="bg-success mt-0">Margin Top 0</h1>
        <h1 class="bg-success mt-1">Margin Top 1</h1>
        <h1 class="bg-success mt-2">Margin Top 2</h1>
        <h1 class="bg-success mt-3">Margin Top 3</h1>
        <h1 class="bg-success mt-4">Margin Top 4</h1>
        <h1 class="bg-success mt-5">Margin Top 5</h1>

        <br>
        <br>

        <!-- ML & MR -->
        <p>
            <span class="bg-success mr-5">Margin Right 5</span> dolor sit amet,
            <span class="bg-success ml-3">Margin Left 3 </span> 
        </p>

        <br>
        <br>

        <!-- MX MARGIN LEFT RIGHT -->
        <p>Lorem ipsum
            <span class="bg-success mx-5">Margin Left & Right 5</span>
        </p>

        <br>
        <br>

        <!-- MY  MARGIN TOP BOTTOM -->
        <p class="bg-success my-5">Margin Top & Bottom 5</p>

        <br>
        <br>

        <!-- BLANK - ALL SIDES -->
        <p class="bg-success m-5">Margin All Sides 5</p>

        <br>
        <br>

        <!-- PB PADDING BOTTOM -->
        <h1 class="bg-warning p-0">Padding Bottom 0</h1>
        <h1 class="bg-warning pb-1">Padding Bottom 1</h1>
        <h1 class="bg-warning pb-2">Padding Bottom 2</h1>
        <h1 class="bg-warning pb-3">Padding Bottom 3</h1>
        <h1 class="bg-warning pb-4">Padding Bottom 4</h1>
        <h1 class="bg-warning pb-5">Padding Bottom 5</h1>

        <br>
        <br>

        <!-- PT PADDING TOP -->
        <h1 class="bg-warning pt-0">Padding Top 0</h1>
        <h1 class="bg-warning pt-1">Padding Top 1</h1>
        <h1 class="bg-warning pt-2">Padding Top 2</h1>
        <h1 class="bg-warning pt-3">Padding Top 3</h1>
        <h1 class="bg-warning pt-4">Padding Top 4</h1>
        <h1 class="bg-warning pt-5">Padding Top 5</h1>

        <br>
        <br>

        <!-- PL & PR -->
        <p>
            <span class="bg-warning pr-5">Padding Right 5</span>                              <span class="bg-warning pl-3">Padding Left 3 </span>
        </p>

        <br>
        <br>

        <!-- PX PADDING LEFT RIGHT -->
        <p>Lorem ipsum
            <span class="bg-warning pl-5 pr-5">Padding Left & Right 5</span>
        </p>

        <br>
        <br>

        <!-- PY  PADDING TOP BOTTOM -->
        <p class="bg-warning pt-5 pb-5">Padding Top & Bottom 5</p>

        <br>
        <br>

        <!-- ALL SIDES -->
        <p class="bg-warning p-5">Padding All Sides 5</p>

        <!-- HORIZONTAL CENTERING -->
        <div class="bg-info mx-auto" style="width: 200px;">
            Horizontal Centering
        </div>
          /* -----------------------------XX----------------- */
              
                       /*        Sizing & Borders         */
 <!-- WIDTH CLASSES -->
        <div class="w-25    bg-success  p-3">Width 25%</div>
        <div class="w-50    bg-success  p-3">Width 50%</div>
        <div class="w-75    bg-success  p-3">Width 75%</div>
        <div class="w-100   bg-success  p-3">Width 100%</div>
        <div class="w-auto  bg-success  p-3">Width Auto</div>

        <br>
        <br>

        <!-- HEIGHT CLASSES -->
        <div style="height: 200px;border : 1px solid black">
            <div class="h-25 bg-primary d-inline-block">Height 25%</div>
            <div class="h-50 bg-primary d-inline-block">Height 50%</div>
            <div class="h-75 bg-primary d-inline-block">Height 75%</div>
            <div class="h-100 bg-primary d-inline-block">Height 100%</div>
            <div class="h-auto bg-primary d-inline-block">Height Auto</div>
        </div>

        <br>
        <br>

        <!-- BORDERS -->
        <div class="border p-3 mb-2 bg-light">Regular</div>
        <div class="border-top b1 p-3 mb-2 bg-light">Border Top</div>
        <div class="border-bottom p-3 mb-2 bg-light">Border Bottom</div>
        <div class="border-right p-3 mb-2 bg-light">Border Right</div>
        <div class="border-left p-3 mb-2 bg-light">Border Left</div>

        <br>
        <br>

        <!-- BORDER COLORS -->
        <div class="border border-primary p-3 mb-2 bg-light">Primary</div>
        <div class="border border-secondary p-3 mb-2 bg-light">Secondary</div>
        <div class="border border-success p-3 mb-2 bg-light">Success</div>
        <div class="border border-info p-3 mb-2 bg-light">Info</div>
        <div class="border border-warning p-3 mb-2 bg-light">Warning</div>
        <div class="border border-danger p-3 mb-2 bg-light">Danger</div>
        <div class="border border-light p-3 mb-2 bg-light">Light</div>
        <div class="border border-dark p-3 mb-2 bg-light">Dark</div>
        <div class="border border-white p-3 mb-2 bg-light">White</div>

        <br>
        <br>

        <!-- BORDER RADIUS -->
        <div class="border rounded p-3 mb-2 bg-light">Rounded</div>
        <div class="border rounded-top p-3 mb-2 bg-light">Rounded Top</div>
        <div class="border rounded-bottom p-3 mb-2 bg-light">Rounded Bottom</div>
        <div class="border rounded-right p-3 mb-2 bg-light">Rounded Right</div>
        <div class="border rounded-left p-3 mb-2 bg-light">Rounded Left</div>
        <div class="border rounded-circle w-25 p-3 mb-2 bg-light">Rounded Circle</div>
        <div class="border rounded-0 p-3 mb-2 bg-light">Dark</div>

       /* -----------------------------XX---------------------- */
                  /*      Custom Breakpoints           */



  .example{
          height: auto;
          position: absolute;
          bottom: 45px;
          width: 100%;
          max-width: 80rem;
          left:50%;
          transform: translate(-50%, 0);
  }
img:not([alt]) {
  outline: 2px solid red;
}
<div class="layout-grid">
 <p>  Aurora UI: Blurred shapes</p>
 <div class="wrapper__aurora-ui-shape">
  <div class="base one"></div>
  <div class="base two"></div>
  <div class="base three"></div>
</div>
 <p>Aurora UI: Blurred gradients</p>
 <div class="wrapper__aurora-ui-gradient">
 </div>
 </div>
<style>
.layout-grid{
  display: gird;
  grid-template-columns: auto;
}

.wrapper__aurora-ui-shape {
  width: 400px;
  height: 400px;
  background: #fff;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}
.base {
  position: absolute;
  filter: blur(60px);
  opacity: 0.8;
}
.one {
  border-radius: 100%;
  width: 600px;
  height: 600px;
  background-color: #373372;
  left:-50px;
  top:-300px;
  z-index: 3;
}
.two {
  width: 500px;
  height: 800px;
  background-color: #7C336C;
  bottom:-30px;
  left:-80px;
}
.three {
  border-radius: 100%;
  width: 450px;
  height: 450px;
  bottom:-80px;
  right:-100px;
  background-color: #B3588A;
}

.wrapper__aurora-ui-gradient {
  width: 400px;
  height: 400px;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
  background-color: #fff;
  background-image: 
    radial-gradient(at top left, #F0ACE0, transparent),
    radial-gradient(at top right, #FFA4B2, transparent),
    radial-gradient(at bottom left, #A7D3F2, transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
javascript:(d=>{var css=`:root{background-color:#f1f1f1;filter:invert(1) hue-rotate(180deg)}img:not([src*=".svg"]),picture,video{filter: invert(1) hue-rotate(180deg)}`,style,id="dark-mode",ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else {style = d.createElement('style');style.type="text/css";style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)
/* Hide lazyload images when JS fails (noscript will kick in then)  */
.no-js img.lazyload {
    display: none;
}

/* Prevent flash of broken image when src is not yet swapped by lazysizes */
img[src=""],
img:not([src]) {
  visibility: hidden;
}
<template>
  <table>
  	<tr>
  		<th>Checkbox</th>
      	<th>File</th>
      	<th>Name</th>
      </tr>
      <tr v-for="(row, i) in accountsToAssign" :key="row[i]">
        <td><v-checkbox @change="checkBoxes(row.id)" /></td>
		<td>{{ row.filenumber }}</td>
		<td>{{ row.name }}</td>
      </tr>
	</table>
</template>
<script>

export default {

data() {
  return {
	selectedAccounts: [],
	}
}
  
methods: {
  
  checkBoxes(value) {
      console.log(value);
      if (this.selectedAccounts.includes(value)) {
        console.log("remove " + value);
        this.selectedAccounts = this.selectedAccounts.filter((item) => {
          return item !== value;
        });
      } else {
        console.log("add " + value);
        this.selectedAccounts.push(value);
      }
      console.log(this.selectedAccounts);
    },
      
  }
}
</script>
<table>
  <tr>
    <th>a1</th>
    <th>a2</th>
    <th>a3</th>
    <th>a4</th>
    <th>a5</th>
  </tr>
  <tr>
    <td>b1</td>
    <td>b2</td>
    <td>b3</td>
    <td>b4</td>
    <td>b5</td>
  </tr>
</table>


<style>
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #ddd;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #333;
  color: #ddd;
}
tr:nth-child(odd) {
  background-color: #222;
  color: #ddd;
}

tr:hover {
  background-color: #444;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #1e1e1e;
  color: white;
}
</style>
add_filter( 'style_loader_src',  'sdt_remove_ver_css_js', 9999, 2 );
add_filter( 'script_loader_src', 'sdt_remove_ver_css_js', 9999, 2 );

function sdt_remove_ver_css_js( $src, $handle ) 
{
    $handles_with_version = [ 'style','general' ]; // <-- Adjust to your needs!
    if ( strpos( $src, 'ver=' ) && ! in_array( $handle, $handles_with_version, true ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
wp_enqueue_style('main-styles', get_template_directory_uri() . '/css/style.css', array(), filemtime(get_template_directory() . '/css/style.css'), false);
@import "compass/css";

​
3
*, *:before, *:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html, body {

  font-size: 62.5%;

  height: 100%;

  overflow: hidden;

}

​

$openSans: 'Open Sans', Helvetica, Arial, sans-serif;

$bg1: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sls-1.jpg';

$bg2: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sls-2.jpg';

$bg3: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sls-3.jpg';

$bg4: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sls-4.jpg';

$bg5: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sls-5.jpg';
*, *:before, *:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

​

html, body {

  height: 0%;

}
10
​

$lightBlue: darken(#EAFBFF, 50%);

$darkBlue: #208FF9;

​

body {

  &:before,

  &:after {

    content: "";

    display: block;

    height: 50%;
*, *:before, *:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

​

body {

  background: #006cc7;

  font-family: 'Roboto', Helvetica, Arial, sans-serif;

}

​

$circleSize: 0px;

$dlPad: 20px;

$dlWidth: 320px + $dlPad * 2;

$dlHeight: $circleSize + 50px + $dlPad*2;
16
$strokeW: 6px;

​

.dl-box {
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
//1 : Basic web development training.

// To selecto to certain section of different web page.
<a href='dummy.html#section-4'> Link to dummy page ( section 4 ) </a>

//Create account with AWS ( s3 ).
Hosted http://jpannu.s3-website.ca-central-1.amazonaws.com/ 

<mark> This will highlight text </mark>
<del> This will delete/stike the text </del>

          ----------------------------XX--------------------------
//CSS
               //css selectors
a[href='url'] { /*Selecting using attribute*/  }
a[target='_blank'] { /*Another Example */ }

p::first-letter {  }
p::first-line { }

p.word_wrap {
  word-wrap : break-word;
}

//Javascript

    //Generating Random number between a, b;
    let randomNumber = Math.floor(Math.random()* ( b-a ) + a);
    
    //Prompt & //confirm.
     /* Promopt provide two values, Either actual value( If ok is pushed) , or 'null'( if cancel button is pushed ). We can program it according to that */

let name = prompt('Please Enter First Name');
name == 'jaskaran' ? console.log('log in success') : console.log('Error');
name == 'null' ? console.log('Need to select ok button') : console.log('This is not good example');

let confirmName = confirm("Are you sure you want do this?");
if(confirmName) { doTheJob() }else{
  dontDoTheJob();
}


 //Bootstrap 3 ( Twitter )

<input class='btn btn-default' value='click here'> </input>

<button class='btn'> Mail <span class='badge'> 12000 </button>

<img src='' class='img-circle' />
<img src='' class='img-thumbnail' />
<img src='' class='img-rounded' />
.shape-separator {
  position: relative;
  height: 48px;
  background: #333;
}
.shape-separator::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}
// Thanks to https://dtransforms.desandro.com/box

​
3
body {

  display: flex;

  height: 0vh;

  justify-content: center;

  align-items: center;

  background: #f2f2f2;

}
10
​

.icon-list {

  display: flex;

  list-style-type: none;

  transform-style: preserve-3d;

  transform: rotateX(50deg) rotateZ(50deg);

​

  .icon-list__item {

    a {
body {

  background: #909f;

  padding: 3rem 0 0 3rem;

  font-size: px;

  height: 0vh;

  margin: 0;

  overflow: hidden;
8
}
9
​
10
.site-wrap {

  display: grid;
12
  grid-template-columns: 280px 1fr;

}

​

.site-nav {

  background: #0b121b;

  color: white;

  border-top-left-radius: 2rem;

  display: flex;
.neumorphism-toggle {

    position: relative;

    transition: transform .3s;

    transform: scale(var(--scale, 1)) translateZ(0);

    &:active {

        --scale: .6;

    }

    input {
9
        display: none;

        & + label {

            background: #fff;

            border-radius: 9px;

            padding: px 0 16px 20px;

            min-width: 208px;

            display: block;
16
            cursor: pointer;

            position: relative;

            box-shadow: -12px -12px 24px var(--light-shadow, transparent), 12px 12px 24px var(--shadow, transparent);
body {

  /* feel free to change height */

  height: 000px;

  background: linear-gradient(
5
    to bottom,

    orange,

    darkblue

  );

}

​

h1 {

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 

  font-weight: 300;

  color: white;

  text-transform: uppercase;

  text-align: center;

  font-size: 22px;

  letter-spacing: 5px;

  font-weight: 100;
HTML
<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>
  
CSS
.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 100px;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #333;
  color: white;
  padding: 15px;
}
.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
  visibility: visible;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
<div class=zoom>
 <div class=image>
 <img src="http://isarta.com/infos/wp-content/uploads/2017/05/couleurs_Fotolia_118879445_S-1.jpg" alt=Text de remplacement width="500" height=""/>
 </div>
</div>

<style>
.zoom {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
/* L'image est grossie de 25% */
-webkit-transform:scale(1.25); /* Safari et Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* Internet Explorer 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
</style>
.border { 
    width: 400px;
    padding: 20px;
    border-top: 10px solid #FFFF00;
    border-bottom:10px solid #FF0000;
    background-image: 
        linear-gradient(#FFFF00, #FF0000),
        linear-gradient(#FFFF00, #FF0000)
    ;
    background-size:10px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
.clase {
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}
.ejemplo1 {
  white-space: nowrap;
}
.ejemplo2 {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
       
    </style>
</head>
<body>
    <table>
        <tr><th>Nombre</th></tr>
        <tr>
            <td class="clase ejemplo2 "  style='width:50%'>[POLISACARIDO
                MENINGOCOCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO A
                4µg&POLISACARIDO
                MENINGOCOCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO C
                4µg&POLISACARIDO
                MENINGOCOCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO Y
                4µg&POLISACARIDO
                MENINGOCÓCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO W-135
                4µg&PROTEINA DE
                TOXOIDE DIFTERICO
                48µg] 1Dosis/0,5ml</td>
        </tr>
        
    </table>
</body>
</html>
box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
Squarespace sectionID {
  	@media screen and (min-width: 640px) {
      	.sqs-row{
      	display: flex;
      	align-items: center;
      	box-sizing: border-box;
      	justify-content: center;
  	}
 	}	
"husky": { "hooks": { "pre-commit": "pretty-quick --staged" } }
/*                   Project : Natour  : - Jonas    */

.element {
  //Will always keep in top
       background-position : top;
     }

                     //Center the data using old school way.
.parent { position : relative; } 
.text-box {
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%,-50%);
    text-align : center;
}
.heading {
    animation-name: from-left;
    animation-duration: 2s;
   animation-iteration-count:3
  //How many times the animation should iterate.
}

//3D feel for button click.
a:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
a:active{
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
  }

                                  // Button affect.
.btn:link, .btn:visited {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    background: white;
    border-radius: 128px;
    padding: 12px 40px;
    transition: all .2 s ease-in;
    position: relative;
}

.btn::after {
   //Adding at the back of the original button.
    content : "";
    position: absolute;
    display: inline-block;
    top:0;
    right : 0;
    border-radius: 128px;
    background-color: grey;

    height: 100%;
    width : 100%;
    opacity: .5;
    z-index: -1;
    transition: all .4s;
}

.btn:hover::after {
  //When hovered it should show can box shadow going on.
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}


//Inheritance.
* { 
      box-sizing: inherit;
  //For all the elements will inherit from 'body'.
}
html { font-size : 62.5% /* (62.5% of the size of user's browser's font size.) */ }

body {
      box-sizing : border-box;
}
      
    /* ********************************************************** */
      
/*
 Title : Build a Responsive Website | HTML, CSS Grid, Flexbox & More. ( Youtube )
 By : Travery Media 
*/  
    
      
        
    /* ********************************************************** */
    
      
      
selector {
    display: inline;
    background: white;
    padding: 3px;
    
}

selector {
    position: relative;
    left: 10px;
    padding-left: 0;
    box-shadow: 10px 0px 0 #ffffff, -10px 0 0 #ffffff;
}
.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
  grid-gap: 1rem;
}
                      /* --------------------------- */
// 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.
}
                      /* --------------------------- */

//Pseudo.
.selector >  li:last-child { 
                    // Will select "Last" li for the "selector" Element.
                    }          
             
/* Width and Height properties will not work with the inline properties,
 In order to make width/height changes, We need to add "inline-block"
 or "block" properties to the 
 provided Element. */

// Project Hotel Website,

//Focus.
#selector:focus {  outline : none; }
//It will Remove the 'outline' from the required selector.


//Linking Specific "Devices" For Responsive design.
<link rel='stylesheet' media='screen and (max-width: 768px )' href='name.css'>
  //This Css will only load when the Screen size is less than '768px'.

  /* --------------------------- */
  //SNAP: It will automatically adjust the 'section' with View Port. We use this when we w         ant the user to see the Full view port of 1 section.  
  
  container{
    scroll-snap-type: y mandatory;
  }
  section {
    scroll-snap-align: center;  
  }

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


  
  
              

  
  
/*** box sizing border-box for all elements ***/
*,
*::before,
*::after{box-sizing:border-box;}
a{text-decoration:none; color:inherit; cursor:pointer;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;}
figure{margin:0;}
input::-moz-focus-inner {border:0; padding:0; margin:0;}
ul, ol, dd{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;}
p{margin:0;}
cite {font-style:normal;}
fieldset{border-width:0; padding:0; margin:0;}
@import "resets/normalize.scss";
@import "resets/reset.local.scss";
@import "resets/typography.scss";
html{ 
   font-size: 1px;/*for using REM units*/
}
body{
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   font-size: 16rem;
   font-weight: 400;
   line-height: 1.3;
   color: #222;
}
box-shadow: inset 0 -0.475em 0 rgba(163,218,227,0.5);
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; font-size: 62.5% }

body,
input,
button,
select,
textarea { font: 600 1rem Poppins; color: #222222; }

a { text-decoration: none; }
a:link { color: #6A26CD; }
a:hover { color: #431488; }
a:active { color: #6A26CD; }
a:visited { color: #6A26CD; }

html, body, #root { height: 100%; }

ul, ol { margin: 0 0 1rem; padding: 0 0 0 1rem; }
table { border-collapse: collapse; }
th { text-align: left; }   
td { vertical-align: middle; }
:root {
    --space-unit: 1em;
    --space-xxs:  calc(0.25 * var(--space-unit));
    --space-xs:   calc(0.5 * var(--space-unit));
    --space-sm:   calc(0.75 * var(--space-unit));
    --space-md:   calc(1.25 * var(--space-unit));
    --space-lg:   calc(2 * var(--space-unit));
    --space-xl:   calc(3.25 * var(--space-unit));
    --space-xxl:  calc(5.25 * var(--space-unit));
}
HEIGHT : 1% ~ 1vh
WIDTH  : 1% ~ 1vw
.container {
  flex-flow: column wrap;
}
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
/* CSS HEX */
--safety-yellow: #f5d400ff;
--eerie-black: #141414ff;
--bottle-green: #006655ff;
--green-crayola: #00b881ff;
--shadow: #82785eff;
--auburn: #a72525ff;
--orange-pantone: #ff600aff;
--alabaster: #f4f4edff;

/* CSS HSL */
--safety-yellow: hsla(52, 100%, 48%, 1);
--eerie-black: hsla(0, 0%, 8%, 1);
--bottle-green: hsla(170, 100%, 20%, 1);
--green-crayola: hsla(162, 100%, 36%, 1);
--shadow: hsla(43, 16%, 44%, 1);
--auburn: hsla(0, 64%, 40%, 1);
--orange-pantone: hsla(21, 100%, 52%, 1);
--alabaster: hsla(60, 24%, 94%, 1);

/* SCSS HEX */
$safety-yellow: #f5d400ff;
$eerie-black: #141414ff;
$bottle-green: #006655ff;
$green-crayola: #00b881ff;
$shadow: #82785eff;
$auburn: #a72525ff;
$orange-pantone: #ff600aff;
$alabaster: #f4f4edff;

/* SCSS HSL */
$safety-yellow: hsla(52, 100%, 48%, 1);
$eerie-black: hsla(0, 0%, 8%, 1);
$bottle-green: hsla(170, 100%, 20%, 1);
$green-crayola: hsla(162, 100%, 36%, 1);
$shadow: hsla(43, 16%, 44%, 1);
$auburn: hsla(0, 64%, 40%, 1);
$orange-pantone: hsla(21, 100%, 52%, 1);
$alabaster: hsla(60, 24%, 94%, 1);

/* SCSS RGB */
$safety-yellow: rgba(245, 212, 0, 1);
$eerie-black: rgba(20, 20, 20, 1);
$bottle-green: rgba(0, 102, 85, 1);
$green-crayola: rgba(0, 184, 129, 1);
$shadow: rgba(130, 120, 94, 1);
$auburn: rgba(167, 37, 37, 1);
$orange-pantone: rgba(255, 96, 10, 1);
$alabaster: rgba(244, 244, 237, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-right: linear-gradient(90deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-bottom: linear-gradient(180deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-left: linear-gradient(270deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-top-right: linear-gradient(45deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-bottom-right: linear-gradient(135deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-top-left: linear-gradient(225deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-bottom-left: linear-gradient(315deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-radial: radial-gradient(#f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
ROBOTO fonts

.myfonts {
Roboto Black
font-family: roboto, sans-serif;
font-weight: 900;
font-style: normal;


Roboto Black Italic
font-family: roboto, sans-serif;
font-weight: 900;
font-style: italic;

Roboto Bold
font-family: roboto, sans-serif;
font-weight: 700;
font-style: normal;


Roboto Bold Italic
font-family: roboto, sans-serif;
font-weight: 700;
font-style: italic;


Roboto Italic
font-family: roboto, sans-serif;
font-weight: 400;
font-style: italic;


Roboto Light
font-family: roboto, sans-serif;
font-weight: 300;
font-style: normal;


Roboto Light Italic
font-family: roboto, sans-serif;
font-weight: 300;
font-style: italic;


Roboto Medium
font-family: roboto, sans-serif;
font-weight: 500;
font-style: normal;


Roboto Medium Italic
font-family: roboto, sans-serif;
font-weight: 500;
font-style: italic;


Roboto Regular
font-family: roboto, sans-serif;
font-weight: 400;
font-style: normal;

Roboto Thin
font-family: roboto, sans-serif;
font-weight: 200;
font-style: normal;

Roboto Thin Italic
font-family: roboto, sans-serif;
font-weight: 200;
font-style: italic;

Roboto Condensed Italic
font-family: roboto-condensed, sans-serif;
font-weight: 400;
font-style: italic;

Roboto Condensed Regular
font-family: roboto-condensed, sans-serif;
font-weight: 400;
font-style: normal;

Roboto Condensed Bold Italic
font-family: roboto-condensed, sans-serif;
font-weight: 700;
font-style: italic;

Roboto Condensed Bold
font-family: roboto-condensed, sans-serif;
font-weight: 700;
font-style: normal;

Roboto Mono Thin Italic
font-family: roboto-mono, monospace;
font-weight: 200;
font-style: italic;

Roboto Mono Thin
font-family: roboto-mono, monospace;
font-weight: 200;
font-style: normal;

Roboto Mono Light Italic
font-family: roboto-mono, monospace;
font-weight: 300;
font-style: italic;

Roboto Mono Light
font-family: roboto-mono, monospace;
font-weight: 300;
font-style: normal;

Roboto Mono Italic
font-family: roboto-mono, monospace;
font-weight: 400;
font-style: italic;

Roboto Mono Regular
font-family: roboto-mono, monospace;
font-weight: 400;
font-style: normal;

Roboto Mono Medium
font-family: roboto-mono, monospace;
font-weight: 500;
font-style: normal;

Roboto Mono Medium Italic
font-family: roboto-mono, monospace;
font-weight: 500;
font-style: italic;

Roboto Mono Bold Italic
font-family: roboto-mono, monospace;
font-weight: 700;
font-style: italic;

Roboto Mono Bold
font-family: roboto-mono, monospace;
font-weight: 700;
font-style: normal;
}


#nav {
    border-radius: 10px 0px 10px 0px;
    background-color: white;
}
box-shadow: rgb(0 0 0 / 12%) 0px 5px 10px;
transition: box-shadow 200ms ease 0ms;

//onhover
box-shadow: rgb(0 0 0 / 12%) 0px 30px 60px;
    
//HMTL

<div class="container">

 <div id="a" class="box">Div A</div>
<div id="b" class="box">Div B</div>
<div id="c" class="box">Div C</div>
<div id="d" class="box">Div D</div>
<div id="e" class="box">Div E</div>
<div id="f" class="box">Div F</div>

</div>


//CSS
body {
  font-family: arial;
  font-weight: 600;
  color: white;
  font-size: 2em;
}
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10%;
  text-align: center;
  grid-gap: 40px;
}

.box {
   background-color: green;
   padding: 20px;
  
}

#a {


}

#a:hover {
     grid-column: 1 / 4;
     grid-row: 1/6;
}

#a:hover ~ #b {
    background: #ccc;
        grid-column: 4;
}

#a:hover ~ #c {
    background: #ccc;
        grid-column: 4;
}

#a:hover ~ #d {
    background: #ccc;
            grid-column: 4;

}

#a:hover ~ #e {
    background: #ccc;
            grid-column: 4;

}

#a:hover ~ #f {
    background: #ccc;
            grid-column: 4;

}

#b:hover {
     grid-column: 1 / 4;
     grid-row: 1/6;
}

#b:hover ~ #a {
    background: #ccc;
        grid-column: 4;
}

#b:hover ~ #c {
    background: #ccc;
        grid-column: 4;
}

#b:hover ~ #d {
    background: #ccc;
            grid-column: 4;

}

#b:hover ~ #e {
    background: #ccc;
            grid-column: 4;

}

#b:hover ~ #f {
    background: #ccc;
            grid-column: 4;

}
//store colors and fonts
:root {
--clr-name-name: #;
--ff-name:
}

*,
*::before,
*::after {
    box-sizing: border-box;
  }

//application

font-family: var(--ff-name);
/*
Title:     Oxygen Code Editor Theme
Type:      CSS > Compile SCSS Code
Location:  Custom Hooks
Hook name: oxygen_enqueue_ui_scripts
Priority:  10
*/

#oxygen-ui {
    .cm-s-default {
        &.CodeMirror {
            background-color: #263238 !important;
            color: rgba(233, 237, 237, 1) !important;
            font-size:15px !important;
        }
        .CodeMirror-gutters {
            background: #263238 !important;
            color: rgb(83, 127, 126) !important;
            border: none !important;
        }
        .CodeMirror-guttermarker,
        .CodeMirror-guttermarker-subtle,
        .CodeMirror-linenumber {
            color: rgb(83, 127, 126);
        }
        .CodeMirror-cursor {
            border-left: 1px solid #f8f8f0;
        }
        div.CodeMirror-selected,
        &.CodeMirror-focused div.CodeMirror-selected,
        .CodeMirror-line::selection,
        .CodeMirror-line::-moz-selection,
        .CodeMirror-line > span::selection,
        .CodeMirror-line > span::-moz-selection,
        .CodeMirror-line > span > span::selection,
        .CodeMirror-line > span > span::-moz-selection {
            background: rgba(255, 255, 255, 0.15) !important;
        }
        .CodeMirror-activeline-background {
            background: rgba(0, 0, 0, 0.2);
        }
        .cm-keyword {
            color: rgba(199, 146, 234, 1);
        }
        .cm-operator {
            color: rgba(233, 237, 237, 1);
        }
        .cm-variable-2 {
            color: #80cbc4;
        }
        .cm-variable-3,
        .cm-type {
            color: #82b1ff;
        }
        .cm-builtin {
            color: #decb6b;
        }
        .cm-atom {
            color: #f77669;
        }
        .cm-number {
            color: #f77669;
        }
        .cm-def {
            color: rgba(233, 237, 237, 1);
        }
        .cm-string {
            color: #c3e88d;
        }
        .cm-string-2 {
            color: #80cbc4;
        }
        .cm-comment {
            color: #dcedc8;
        }
        .cm-variable {
            color: #82b1ff;
        }
        .cm-tag {
            color: #80cbc4;
        }
        .cm-meta {
            color: #80cbc4;
        }
        .cm-attribute {
            color: #ffcb6b;
        }
        .cm-property {
            color: #80cbae;
        }
        .cm-qualifier {
            color: #decb6b;
        }
        .cm-variable-3,
        .cm-type {
            color: #decb6b;
        }
        .cm-tag {
            color: rgba(255, 83, 112, 1);
        }
        .cm-error {
            color: rgba(255, 255, 255, 1);
            background-color: #ec5f67;
        }
    }
}
<button accesskey="b">Important Button</button>

// Animate scrolling only if users don’t prefer reduced motion
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
  
	// Add some spacing between the target and the top of the viewport
	:target {
		scroll-margin-top: 0.8em;
	}
}
.animated-content {
	animation: 3s linear 1s infinite alternate slidein; 
}

@media screen and (prefers-reduced-motion: reduce) {
	.animated-content {
		animation: fade 0.5s ease-in both;
	}
}
.gentle-flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1ch;
}
<style>
.divider_wrapper {
    padding-bottom: 30px;
    padding-top: 60px;
}
.divider {
    position: relative;
    margin-top: 0px;
    height: 1px;
}
.div-transparent:before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    width: 90%;
    height: 1px;
    background-image: linear-gradient(to right,transparent,#aaa,transparent);
}
.div-arrow-down:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -7px;
    left: calc(50% - 7px);
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background-color: white;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
</style>
<div class="divider_wrapper">
  <div class="divider div-transparent div-arrow-down">
  </div>
</div>
<!-- Tab links -->
		<div class="tab">
			<button class="tablinks tab-font" onclick="openCity(event, 'footer')">Footer</button>
			<button class="tablinks tab-font" onclick="openCity(event, 'projects')">Projects</button>
			<button class="tablinks tab-font" onclick="openCity(event, 'disclaimer')">disclaimer</button>
		</div>

		<!-- Tab content -->
		<div id="projects" class="tabcontent">
			<h2>Projects</h2>
			<h3>Hey, If your reading this you obviously wanna find out about more of my projects</h3>
		</div>

		<div id="footer" class="tabcontent">
			<h3><a href="./index.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Home</strong></a></h3>
            <h3><a href="./pages/about.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>About</strong></a></h3>
			<h3><a href="./pages/projects.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Projects</strong></a></h3>
            <h3><a href="#" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Contact</strong></a></h3>
            <p class="copyright">&copy;2020 WHY?</p>
		</div>

		<div id="disclaimer" class="tabcontent">
			<h2>Disclaimer</h2>
			<p><strong>THIS IS JUST A JOKE!
                <br>
                <br>
                I dont truely think this of python, I think python is a great language and would love to learn,<br>
                all of the acusations above are comepletely false and should not be followed.<br>
                Please respect what i am doing and dont hate on the joke.</strong>
			</p>
		</div>
            
 <!-- CSS -->
 		<style>
              .-link {
    color: rgb(0, 0, 0);
    text-decoration: none;
}
  
.-link-title {
    color: #000000;
    text-decoration: none;
    padding-left: 5rem;
}

.tablinl {
    padding: 5px
}

.tab-font {
    font-weight: bold;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }
		</style>
React
Vue 3
Svelte
Angular

modern css frameworks:
------------------------
tailwind 
bootstrap
materialize
material design lite
bulma
skeleton (most minimal)
pure css (min)
iu kit
p {
  animation: translate-down 1s infinite alternate linear;
}
@keyframes margin-down {
  from {
    margin-top: 0;
  }
  to {
    margin-top: 30px;
  }
}
@keyframes margin-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(300px);
  }
}
<div class='parent'>
  <div class='child'></div>
</div>

.parent {
  width: 400px;
  height: 400px;
  background-color: blue;
}
.child {
  width: 50%;
  height: 50%;
  background-color: red;
  animation: left-to-right 1s ease-in forwards infinite alternate;
}
.parent:hover .child {
  /*animation: left-to-right 1s ease-in forwards 3 alternate 3s;*/
  animation-play-state: paused;
}
@keyframes left-to-right {
  0 {
    transform: translateX(0);
    background-color: red;
  }
 33% {
    transform: translateY(100%);
  }
  50% {
     background-color: blue;
  }
  66% {
    transform: translateX(100%) translateY(100%);
  }
  100% {
    transform: translateX(100%);
     background-color: green;
  }
}
table {width:100%; table-layout: fixed;}
table td {word-wrap:break-word;}
border-radius: ArI ArD AbD AbI;
a {
  font-size: 2em;
  transition: transform .3s ease-out;
  display: inline-block;
}
a:hover {
  transform: translate(0, -5px);
}
image.src = 'http://placekitten.com/200/300';
image.width = 250;
image.classList.add('cute');
image.alt = 'Cute Kitten';
/*EX:.container {
    padding: 0 15px;
// 576px window width and more
    @include sm {
        padding: 0 20px;
    }
// 992px window width and more
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    } */

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;


// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
       @content;
   }
}

// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
       @content;
   }
}

// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
       @content;
   }
}

// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
       @content;
   }
}
ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
}
ul {
  max-width: 400px;
  margin: 0 auto;
  list-style-type: none;
  counter-reset: steps;
  margin: 0;
  font-family: sans-serif;
}
ul li {
  padding: 0 0 20px 50px;
  position: relative;
  margin: 0;
}
ul li:after {
  position: absolute;
  top: 0;
  left: 0;
  content: counter(steps);
  counter-increment: steps;
  border: 2px solid #000;
  border-radius: 50%;
  display: inline-block;
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
  background: #fff;
}
ul li:before {
  position: absolute;
  left: 13px;
  top: 0;
  content: "";
  height: 100%;
  width: 0;
  border-left: 2px dashed #000;
}
ul li:last-of-type:before {
  border: none;
}
<!DOCTYPE html>
<html>
<head>
<style>
p::before { 
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>
​
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
​
</body>
</html>
​
Pixels are static values which may work for certain dimensions but will cause problems and hinder design at different dimensions/views(mobile-desktop)

For responsive web design it is a must to follow certain design practices :

1- No Pinch Zoom: Solved by applying viewport correctly.
2- No Horizontal Scrolling: Solved by using relative sizing and positioning and instead of absolute positioning.
3- Font-size Handling: Use em and rems instead of pixels.
4- Layout: Use Media Queries,Flexboxes, Bootstrap etc.
img {
  shape-outside: polygon(0.23% 2px, 17.11% 0.84%, 61.14% 21.01%, 69.91% 20.17%, 86.88% 27.73%, 90.64% 36.09%, 86.53% 50.56%, 80.07% 79.29%, 86.55% 99.48%, 0px 100%);
  shape-margin: 20px;
  float: left;
  display: inline-block;
}
<style>
th, td {
    padding: 22px;}
    h2 {color:orange}
      body {background-color:White }
    legend   {color:orange}
    fieldset   {border: 2px solid green;}
    /*input {background-color: orange}*/
    /*input{ color: green }*/
    #place_order{
        float: right;
        background-color: orange;
        color: #ffffff;
        border-color: green;
    }
</style>

<table style="width:100%"></table>
	  <h2>Dado tea lunch special</h2>
	 <rt>
	  	<th>Monday to friday</th>
	</rt>	
	  <br>11am - 2pm
	 <br>$9.95 plus tax<br>
	 <rt>
	 	<th></th>
	 </rt>
	 <br>Include sandwich,snack,and drink<br>
	<fieldset>
        <legend>Order Information:</legend>
        Name:<input type="text"name="order_name"> <br>
        Here<input type="radio" name="order_option"><br>
        To go<input type="radio"name="order_option"><br>
  </fieldset>

  <fieldset>
            <legend>Sandwiches:</legend>
             <b>Monday</b>
             <br>
            Tommato<input type="radio" name="option1">
            <br>
             Chicken salad<input type="radio"name="option1">
             <br>
             <b>Tuesday</b>
             <br>
            Greak salad wrap<input type="radio" name="option2">
            <br>
            Toto wrap<input type="radio"name="option2">
            <br>
            <b>wednesday</b>
            <br>
            Red pepper hummas<input type="radio" name="option3">
            <br>
            Rosted turkey<input type="radio"name="option3">
            <br>
             <b>Thusday</b>
             <br>
            Carrot-ginger hummas wrap<input type="radio" name="option4">
            <br>
            Chicken salad<input type="radio"name="option4">
            <br>
            <b>Friday</b>
            <br>
             Dado Wrap<input type="radio" name="option5"> <br>
             Tuna salad<input type="radio"name="option5"> <br>
  </fieldset>


  <fieldset>
  	<legend>Snack:</legend>
    <b>Snack</b><br>
    Apple<input type="radio" name="order_option1"><br>
    Bannana<input type="radio"name="order_option1"><br>
    Potato chips<input type="radio"name="order_option1"><br>
  </fieldset>
<fieldset>
	<legend>Drinks:</legend>
	<b>Drinks</b><br>
	<select name="items" id="items">
	  <option value="Hot black tea-keemun">Hot black tea-keemun</option>
	  <option value="salad">salad</option>
	  <option value="burgar">burgar</option>
	  <option value="pizza">pizza</option>
	</select><br>
<input type="submit" id="place_order" value="Place Order"> 
body{
	margin-top: 50px;
	background-color: #0191C8;
}
.comment-main{
	background-color: #74C2E1;
	box-shadow: 1px 2px 6px 2px #005B9A;
}
.comment-main ul{
	list-style: none;
}
.sub-cmt-img{
	width: 55px !important;
    height: 55px !important;
    border-radius: 50%;
} 
.main-cmt-img{
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
}
.border-bottom{
	font-size: 13px;
	border-bottom: 1px solid #d3d3d3;
}
.user-comment{
	background-color: #f3f3f3 !important;
    box-shadow: 0px 5px 8px -4px #c1c1c1;
}
.user-comment-desc, .user-comment span{
	color: #a0a0a0;
}
.user-comment-desc p{
	font-size: 12px;
	display: inline-block;
	float: left;
}
.send-icon i{
	font-size: 20px;
	background: #f3f3f3;
	padding: 6px 5px;
	border-radius: 50%;
	color: #74C2E1;
	height: 35px;
	width: 35px;
}
.user-comment:before{
    content: "";
    height: 0;
    width: 0;
    top: 0;
    left: -10px;
    position: absolute;
    border-style: solid;
    border-width: 13px 0 0 13px;
	border-color: #f3f3f3 transparent transparent transparent; 
}
#leftCol {
    position: fixed;
    width: 150px;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
}
<html lang="en">
	<head>
		<!--using external files-->
		<?php require('import.html') ?>
		
		<title>U Chen Daily | Home</title>
	</head>
	<style>
		@media only screen and (min-width: 893px) {
		.card-img-top{
		width: 100%;
		height: 15vw; 
		object-fit: cover;
		}
		}
		
		.card-body{
		background: #1f52a3;
		}
		
		.card-footer{
		background: #1f52a3;
		}
		
		.h5{
		color: #1f52a3;
		}
		
		.card-text{
		font-size: 12px;
		}
	</style>
	<body class="bg-light">
		<!--using external files-->
		<?php require('header.php'); ?>
		<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>First slide label</h5>
						<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Second slide label</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Third slide label</h5>
						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
					</div>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--4 latest news START-->
		<div class="container-fluid bg-light" style="padding: 40px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-6">
					<h5 style="color: #1f52a3;">Latest News</h5>
				</div>
				
				<div class="col-6 d-flex justify-content-end">
					<a href="" class="btn btn-link font-weight-bold" style="color: #1f52a3;">MORE NEWS <i class="fas fa-angle-double-right" style="font-size: 18px;"></i></a>
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 latest news END-->
		<!--4 nation news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Nation News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Nation" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php	
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 nation news END-->
		<!--4 world news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">World News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="World" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 world news END-->
		<!--4 entertainment news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0; margin-bottom: 40px;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Entertainment News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Entertainment" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 entertainment news END-->
		<!--using external files-->
		<?php require('footer.html'); ?>
	</body>
</html>				
<picture>
<source media='(max-width: 1024px)' srcset='<?php echo get_template_directory_uri()?>/images/demo/work-image-bg--mobile.jpg' class="project__bg--mobile" alt="">
<img src="<?php echo get_template_directory_uri()?>/images/demo/work-image-bg.jpg" class="project__bg--desktop" alt="" />
</picture>
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}
​
div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>
​
<h2>Padding and element width - with box-sizing</h2>
​
<div class="ex1">This div is 300px wide.</div>
<br>
​
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>
​
</body>
</html>
​
input[type="text"]:focus {
  outline: none;
}
.wrapper:after {
    content: '';
    display: block;
    clear: both;
}
@media only screen and (min-width: 768px){
    .img-banner{
        display: block;
        width: 100%;
    }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
<div class="login-wrap">

  <div class="login-html">

    <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>

    <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>

    <div class="login-form">

      <div class="sign-in-htm">

        <div class="group">

          <label for="user" class="label">Username</label>

          <input id="user" type="text" class="input">

        </div>

        <div class="group">

          <label for="pass" class="label">Password</label>

          <input id="pass" type="password" class="input" data-type="password">

        </div>

        <div class="group">

          <input id="check" type="checkbox" class="check" checked>

          <label for="check"><span class="icon"></span> Keep me Signed in</label>

        </div>

        <div class="group">
        
        
        
        
        
        
        <style="css">
        body{
	margin:0;
	color:#6a6f8c;
	background:#c8c8c8;
	font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:670px;
	position:relative;
	background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#1161ee;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}
        </style>
// template.html
<link rel="stylesheet" href="{% static '/bulma-css/bulma-divider.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static '/bulma-css/bulma-switch.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/bulma-css/bulma.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/css/main.css' %}" type="text/css"> 


// settings.py

STATIC_URL = '/static/'

STATIC_ROOT = 'avon/static'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

// views.py

def template(request, self):
	return render(request, "template.html")
    
//  urls.py

urlpatterns [] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

    
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}
 .center-me {
  margin: 0 auto;
}
<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>​
<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>
<h1 class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>
body::before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
  z-index: 100;
}
.fieldset {
  position: relative;
  border: 1px solid #ddd;
  padding: 10px;
}

.fieldset h1 {
  position: absolute;
  top: 0;
  font-size: 18px;
  line-height: 1;
  margin: -9px 0 0; /* half of font-size */
  background: #fff;
  padding: 0 3px;
}
/*MC subscribe button styling*/
#mc-embedded-subscribe {
    padding: 10px;
    font-family: Montserrat;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #ffffff;
    background: #5ebb48;
    border: 1px solid #bdd749;
    margin-top: 10px;
}
.category-header {

  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  blur-radius: 0;
  spread-radius: 0;
  text-decoration: none;
  font-family: open-sans, lato;
  font-weight: lighter;
  font-size: 38px;
  text-align: center
  align-contents: center;
  
}
<ol><li><a href="#return">I want to return my purchase! What do I do?</a></li><li><a href="#return-a-gift">I would like to return a gift that was sent to me. How do I do that?</a></li><li><a href="#exchange">Can I exchange my order instead of returning it?</a></li><li><a href="#label-and-misplaced">I printed out my label and misplaced it. How can I retrieve it again?</a></li><li><a href="#does-it-take">How long does it take for me to get a refund?</a></li><li><a href="#international-returns">Do your pre-paid labels cover international returns?</a></li><li><a href="#gift-card-cert-return">I am returning an item purchased with a Gift Certificate or Gift Card, how does that work?</a></li><li><a href="#I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?">I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?</a></li></ol>
 .lower-canvas {
                width: 100% !important;
                height: 100% !important;
                position: relative !important;  
            }
            .upper-canvas {
                width: 100% !important;
                height: 100% !important;
                position: absolute !important;
            }
            .canvas-container {
                width: 100% !important;
                height: auto !important;
                border-radius: 20px;
            }
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
<?php
    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
?>

body { color: red; }
p { text-shadow: 1px 1px 1px #000; }
function print_r(o) {
  return JSON.stringify(o,null,'\t').replace(/\n/g,'<br>').replace(/\t/g,'&nbsp;&nbsp;&nbsp;'); 
}
body {
  font-size: 62.5%  /* 1em = 10px */
}
@media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
.dynamic-shadow {

  position: relative;

  width: rem;

  height: 10rem;

  background: linear-gradient(5deg, #d7ff, #00ffb8);
6
  z-index: 1;
7
}
8
.dynamic-shadow::after {

  content: '';
10
  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  top: 0.5rem;

  filter: blur(0.4rem);

  opacity: 0.7;

  z-index: -1;

}

​
.container {
  display: flex; /* or inline-flex */
}
<style>
.wrapper {
  display: flex;
  flex-direction: column
}

@media only screen and (max-width: 767px) {
  .wrapper1 {
    order: 2
  }
  .wrapper2 {
    order: 1
  }
}
</style>

<body>
  <div class="wrapper">
    <div class="wrapper1">
      <div class="col s12 l6">
        some text
      </div>
    </div>
    <div class="wrapper2">
      <div class="col s12 l6">
        some more text
      </div>
    </div>
  </div>
</body>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
 add_filter( 'jetpack_sharing_counts', '__return_false', 99 );
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );
                                
 .rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don
                                
::selection {
  background-color: #FFA;
  color: #000;
}
                                
                                @media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
                                
                                html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}
                                
<style>
@import url('https://fonts.googleapis.com/css?family=Teko&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Teko', sans-serif;
  background: #000;
}

a {
  text-decoration: none;
  color: inherit;
  font-size: 4vmin;
}

p {
  position: relative;
  text-align: center;
  font-size: 8vmin;
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: .8;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 80% 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s linear infinite;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }
  
  100% {
    background-position-x: 500%;
  }
}
</style>

<p>Welcome to my codepen profile:<br><a href="https://codepen.io/cssparadise">codepen.io/cssparadise</a></p>
const button = document.getElementById("superCoolButton");

// 1 - setting the property
// properties are in camel.Case
button.style.backgroundColor = "black"; 
button.style.color = "white";

// 2 - by using keys to set the property 
// keys are in the kebab-case
button.style["background-color"] = "black"; 
button.style["color"] = "white";

// 3 - setting the css Text property will parse it as normal css. 
button.style.cssText = "background-color:black; color:white;";
 .conic-gradient {
  background: conic-gradient(from 90deg, #fff, #000);
}                               
                                
 const arr = ["This", "Little", "Piggy"];
const first = arr.slice(0, 1);
const the_rest = arr.slice(1);console.log(first); // ["This"]
console.log(the_rest); // ["Little", "Piggy"]                               
                                
<style>

 .circle:before {
                    content: ' \25CF';
                    font-size: 50px;
                    color: black;
                }
</style>

<span class="circle"></span>
ol li {
	 list-style-type: none;
     }
     
// OR

li {
	list-style-type: none;
}
.box-one {
	width: 100px;
	margin: 0 auto;
}

.box-two {
	width: 100px;
	margin-left: auto;
    margin-right: auto;
}
.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );
}
/* Linear gradient pattern */

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
}

/* Radial gradient pattern */

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}
.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      blue,
      yellow, 
      green
    );
}
.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<h2 style="text-align:center">Modal Image Gallery</h2>
<div class="row">
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(1)" alt="Sample image 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(2)" alt="Sample image 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(3)" alt="Sample image 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(4)" alt="Sample image 4">
    </div>
  </div>
</div>
> More steps
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
> More steps
body {
	width: 100%;
	margin: 0;
	display: flex;
	min-height: 100vh; /*always have atleast the height of viewport*/
}

.main {
	display: flex;
	flex-direction: column;
}
.main__section {
	flex-grow: 1; /*magical line*/
}
.main__footer {
	margin-top: auto;
}



.block {
    &__element 				{color: red;
	    $self : &;
        #{$self}__element 	{color: green}
    }   
}

/*
	.block__element 			{color: red}
	.block__element__element 	{color: green}

*/
/* if the primary input mechanism system of the device CANNOT hover */
@media (hover: none) { }

/* if the primary input mechanism system of the device can hover */
@media (hover: hover) { }
img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
} 
body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
star

Wed Aug 04 2021 02:06:45 GMT+0000 (UTC)

#css
star

Sun Aug 01 2021 20:51:19 GMT+0000 (UTC)

#css
star

Thu Jul 29 2021 05:35:28 GMT+0000 (UTC) https://yashaswipatil.hashnode.dev/10-most-used-css-frameworks-by-web-developers

#css #framework
star

Tue Jul 27 2021 01:35:38 GMT+0000 (UTC) https://stackoverflow.com/questions/23695090/spin-or-rotate-an-image-on-hover

#css #hover #rotation
star

Fri Jul 23 2021 14:06:04 GMT+0000 (UTC)

#css
star

Thu Jul 22 2021 23:17:06 GMT+0000 (UTC) https://flexbox.malven.co/

#css #display #container