.gform_wrapper.gravity-theme .gfield-choice-input {
    opacity: 0;
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);

    &:checked+label {
      background: green;
      color: $white;
    }
  }

  .gchoice {
    input:checked+label {
      &:before {
        filter: brightness(5);
      }
    }
  }

  .gform_wrapper.gravity-theme .gchoice {
    max-width: 423px;
    margin-right: 0;
    margin-bottom: 1rem;

    @media (min-width: $xl) {
      margin-right: 10px;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .gform_wrapper.gravity-theme .gchoice {
    label {
      background: lightgray;
      border-radius: 80px;
      padding: 15px 30px;
      display: inline-block;
      width: auto;
      position: relative;
      color: $black;
      font-size: 20px;
      line-height: 28px;
      display: flex;
      align-items: center;
      max-width: 100%;

      @media (min-width: $xl) {
        padding: 15px 20px;
      }

      @media (min-width: $xxl) {
        padding: 15px 30px;
      }

      &:before {
        position: relative;
        content: '';
        z-index: 1;
        width: 24px;
        height: 20px;
        margin-right: 12px;
        display: block;
        background-repeat: no-repeat !important;
      }
    }
  }

.header {
  padding: 1.5rem 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: $white;
  z-index: 99;
  @include transition(300ms);

  @media (min-width: $lg) {
    padding: 3rem 0;
  }

  &.sticky {
    background: $white !important;
    padding: 2rem 0;
  }

  &--transperant {
    background: transparent;
  }

  &__logo-link {

    img,
    svg {
      float: left;
      height: auto;
      // height: 100%;
      width: 100%;
      width: auto;

      @media (min-width: $sm) {
        height: 50px;
      }

      @media (min-width: $xl) {
        height: 60px;
      }
    }
  }

  &-btn {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    position: relative;

    @media (min-width:$lg) {
      margin-top: 0;
      display: inline-block;
    }

    @media (min-width:$lg) {
      margin-left: 4.5rem !important;
    }

    a {
      border-radius: 0 15px 0 15px;
      width: auto !important;
      padding: 7px 25px !important;
      font-size: 1.5rem !important;
      line-height: 2.2rem !important;

      @media (min-width: $xl) {
        padding: 5px 43px 5px 30px !important;
        line-height: 3rem !important;
      }
    }
  }

  &__burger {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
    float: right;
    position: relative;
    z-index: 10;

    @media (min-width: $lg) {
      display: none;
    }

    .line {
      fill: none;
      stroke: $primary;
      stroke-width: 6;
      transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .line1 {
      stroke-dasharray: 60 207;
      stroke-width: 6;
    }

    .line2 {
      stroke-dasharray: 60 60;
      stroke-width: 6;
    }

    .line3 {
      stroke-dasharray: 60 207;
      stroke-width: 6;
    }

    &.opened .line1 {
      stroke-dasharray: 90 207;
      stroke-dashoffset: -134;
      stroke-width: 6;
    }

    &.opened .line2 {
      stroke-dasharray: 1 60;
      stroke-dashoffset: -30;
      stroke-width: 6;
    }

    &.opened .line3 {
      stroke-dasharray: 90 207;
      stroke-dashoffset: -134;
      stroke-width: 6;
    }
  }

  .col-lg-10 {
    position: static;
  }

  .nav-main {
    float: right;
    display: none;
    position: absolute;
    right: 0;
    padding: 50px 15px;
    width: 100%;
    top: calc(100% + 0px);
    background: $white;
    height: calc(100vh - 80px);

    @media (min-width: $lg) {
      height: auto;
      position: static;
      background: none;
      padding: 0;
      max-width: none;
      width: auto;
      display: flex !important;
      align-items: center;
    }

    @media (max-width: 991px) {
      overflow: auto;
    }

    .primary {
      display: block;
      float: left;
      margin: 0;
      padding: 0;
      width: 100%;
      text-align: center;

      @media (min-width: $lg) {
        text-align: left;
        display: flex;
        align-items: center;
      }
    }

    .menu {
      display: block;
      float: left;
      margin: 0;
      padding: 0;

      &-item {
        float: left;
        padding: 0;
        width: 100%;

        @media (min-width: $lg) {
          margin: 0 5px;
          width: auto;
        }

        i.dropdown-arv {
          position: absolute;
          right: 15px;
          width: 12px;
          height: 12px;
          text-align: center;
          top: 43%;
          z-index: 5;
          border-top: 2px solid $dark;
          border-right: 2px solid $dark;
          transform: translateY(-50%) rotate(135deg);

          &.active {
            transform: rotate(-45deg);
            content: "-";
          }
        }

        .dropdown-arv-cont {
          position: absolute;
          top: 4px;
          right: 18%;
          z-index: 5;
          width: 44px;
          height: 100%;
          @include transition(300ms);

          @media (min-width: $sm) {
            right: 35%;
          }

          @media (min-width: $md) {
            right: 40%;
          }

          @media (min-width: $lg) {
            display: none;
          }

          &.active {
            transform: rotate(180deg);
            @include transition(300ms);
          }
        }

        &:before {
          display: none;
        }

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }

        a {
          position: relative;
          font-family: $Quicksand;
          font-weight: $normal;
          float: left;
          color: $dark;
          width: 100%;
          padding: 5px 15px;
          font-size: 2.5rem;
          line-height: 3.5rem;

          @media (min-width: $lg) {
            width: auto;
            padding: 7px 10px;
            border-radius: 10px;
            font-size: 1.7rem;
            line-height: 2.7rem;
          }

          @media (min-width: $xl) {
            padding: 7px 10px;
          }

          @media (min-width: $xxl) {
            padding: 10px 19px;
          }

          &:hover,
          &.active {
            color: $primary;

            .dropdown-arv {
              border-color: $primary;
            }
          }
        }

        &.current-menu-item a,
        &.current-menu-parent>a {
          color: $primary;
          font-weight: $bold;

          .dropdown-arv {
            border-color: $primary;
          }
        }

        .sub-menu {
          display: none;
          width: 100%;
          // padding-bottom: 10px;

          @media (min-width: $lg) {
            width: 240px;
            position: absolute;
            top: 100%;
            left: 0;
            background: $white;
            border-top: 2px solid $blue;
            padding: 10px 0;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4);
          }

          &.active {
            @media (max-width: 991px) {
              display: block;
              float: left;
              width: 100%;
            }
          }

          .menu-item {
            margin: 0;

            a {
              color: $gray;
              width: 100%;
              padding: 3px 15px;
              font-weight: $normal;
              font-size: 1.6rem;
              line-height: 2.2rem;

              @media (min-width: $lg) {
                padding: 5px 15px;
              }

              &:hover {
                color: $blue;
                background: transparent;
              }

              &:before {
                content: '';
                display: none;
                padding-right: 5px;

                @media (max-width: 991px) {
                  display: inline-block;
                }
              }
            }

            &.current-menu-item a {
              color: $blue;
              background: transparent;
            }
          }
        }

        &:hover {
          .sub-menu {
            @media (min-width: $lg) {
              display: block;
            }
          }
        }

        &-has-children {
          // display: flex;
          // justify-content: center;

          a {
            // display: inline-block;
            // width: auto;
          }
        }
      }
    }
  }

  &__nav-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

body {

  &.home {
    .main-wrapper {
      padding-top: 0;
    }
  }

  .main-wrapper {
    padding-top: 8rem;

    @media (min-width:$lg) {
      padding-top: 12rem;
    }
  }
}

//Once React project is made with TypeScript do the following:

//install main dependency of jest
npm i jest --save-dev

//Install react-testing-library packages:

npm i @testing-library/jest-dom @testing-library/react @testing-library/user-event --save-dev

//If using CSS Modules
npm i jest-css-modules-transform

// If using Jest 28 or higher
npm i jest-environment-jsdom

//You will then need: 
//1. jest.config.cjs
module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": ["@swc/jest"],
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.css$": "jest-css-modules-transform",
  },
  testEnvironment: "jest-environment-jsdom",
  setupFilesAfterEnv: ["./jest.setup.tsx"],
  preset: "ts-jest",
  testMatch: ["<rootDir>/src/**/*.test.(ts|tsx)"],
  // If SVG needs to be mocked
  moduleNameMapper: {
    "\\.svg$": "<rootDir>/svgMock.tsx",
  },
};

//2. jest.setup.tsx
import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';

declare global {
  namespace NodeJS {
    interface Global {
      fetch: jest.Mock;
    }
  }
}

//3. (OPTIONAL) for svg mock; svgMock.tsx:
module.exports = '';

//Excerpt from Bing search:
//It seems like you are trying to import an SVG file as a React component in your test file. This causes Jest to throw an error because it cannot parse the SVG file as JavaScript. You need to mock the SVG file so that Jest can ignore it during testing. You can do this by using the moduleNameMapper option in your Jest configuration and mapping the SVG files to a mock file that returns an empty string or a dummy component

//Therefore, ideally package.json should look like:
{
  "name": "vite-react-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "jest --watch"
  },
  "dependencies": {
    "@swc/jest": "^0.2.26",
    "firebase": "^9.17.2",
    "jest-css-modules-transform": "^4.4.2",
    "jest-environment-jsdom": "^29.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.1",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.0.1",
    "jest": "^29.5.0",
    "ts-jest": "^29.1.0",
    "typescript": "^4.9.5",
    "vite": "^4.0.4"
  }
}

import { useState } from "react";
import Image from "next/image";
import logo from "";

import Hamburger from "./Hamburger";
import NavItem from "./NavItem";

export default function NavBar() {
  const [toggle, setToggle] = useState(false);

  function toggleHamburgerMenu() {
    setToggle((prevToggle) => !prevToggle);
  }

  const navItems = ["", "", "", ""];

  return (
    <header className="header">
      <nav className="nav">
        //<Image className="logo" alt="personal logo" src={logo} />
        //<h4 className="logo-title"></h4>
        <ul className="links">
          {navItems.map((item, index) => (
            <NavItem
              key={index}
              onClick={() => setToggle(false)}
              href={item}
              className="link"
            >
              {item}
            </NavItem>
          ))}
        </ul>
        <Hamburger toggleHamburgerMenu={toggleHamburgerMenu} toggle={toggle} />
      </nav>

      {toggle && (
        <ul className="mobile-links">
          {navItems.map((item, index) => (
            <NavItem
              key={index}
              onClick={() => setToggle(false)}
              href={item}
              className="mobile-link"
            >
              {item}
            </NavItem>
          ))}
        </ul>
      )}
    </header>
  );
}

//Hamburger

function Hamburger({ toggleHamburgerMenu, toggle }) {
  return (
    <button
      id="hamburger-button"
      aria-label="Mobile Menu Button"
      onClick={toggleHamburgerMenu}
      className="hamburger-menu"
    >
      <span className={`${toggle && "open"} hamburger-top`}></span>
      <span className={`${toggle && "open"} hamburger-middle`}></span>
      <span className={`${toggle && "open"} hamburger-bottom`}></span>
    </button>
  );
}

export default Hamburger;

//NavItem component

function NavItem({ onClick, href, className, children }) {
  return (
    <li>
      <a onClick={onClick} href={`#${href}`} className={className} aria-label="menu links">
        {children}
      </a>
    </li>
  );
}
export default NavItem;

// E.g. Colours living in the variables.scss file:
// color palette
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "error": $error,
  "info": $info,
  "blue": #1919e6,
  "red": #e61919,
  "yellow": #e6e619,
  "green": #19e635,
  "orange": #ffa600,
  "purple": #9900ff,
  "gray": #808080,
  "black": black,
  "white": white,
);

//colors being looped in _colors.scss:
@each $key, $val in $colors {
  .text-#{$key} {
    color: $val;
  }
  .bg-#{$key} {
    background-color: $val;
  }

  // light variations
  @for $i from 1 through 9 {
    .text-#{$key}-light-#{$i} {
      color: mix(white, $val, $i * 10);
    }
    .bg-#{$key}-light-#{$i} {
      background-color: mix(white, $val, $i * 10);
    }
  }

  // dark variations
  @for $i from 1 through 9 {
    .text-#{$key}-dark-#{$i} {
      color: mix(black, $val, $i * 10);
    }
    .bg-#{$key}-dark-#{$i} {
      background-color: mix(black, $val, $i * 10);
    }
  }
}

sass/
|
|– abstracts/
|   |– _index.scss    # index file
|   |– _variables.scss    # Sass Variables
|   |– _mixins.scss       # Sass Mixins
|
|– vendors/
|   |– _index.scss    # index file
|   |– _bootstrap.scss    # Bootstrap
|
|– base/
|   |– _index.scss    # index file
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|
|– layout/
|   |– _index.scss    # index file
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|
|– components/
|   |– _index.scss    # index file
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|
|– pages/
|   |– _index.scss    # index file
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|
|– themes/
|   |– _index.scss    # index file
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|
 – main.scss              # Main Sass input file


main.scss should have 

@use "base";
@use "components";
@use "layout";
@use "utilities";
@use "variables";

package.json should have 
https://thinkdobecreate.com/articles/minimum-static-site-sass-setup/

/*
sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   ...                  # Etc…
|
|– layout/
|   |– _navigation.scss  # Navigation
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _sidebar.scss     # Sidebar
|   |– _forms.scss       # Forms
|   ...                  # Etc…
|
|– pages/
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   ...                  # Etc…
|
|– abstracts/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # Etc…
|
|
`– style.scss            # Primary Sass file

*/

#textexample {
  background: -webkit-linear-gradient(203.89deg, #FF0000 15.35%, #FF9900 99.34%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

const reduceData = (data: any[], property: string) => {
  const result = data.reduce((acc, amount) => {
    return acc + Number(amount[property]);
  }, 0);
  return result;
};

/* 
	https://www.youtube.com/watch?v=q0E1hbcj-NI
    Browsersync + Sass + Gulp in 15 minutes
    
	install as devDependencies:
	npm install browser-sync cssnano gulp gulp-cli gulp-postcss gulp-sass gulp-terser sass -D    
*/

// run gulp by typing on terminal : gulp
// error: gulp-sass no longer has a default Sass compiler; please set one yourself.

const { src, dest, watch, series } = require("gulp");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const cssnano = require("cssnano");
const terser = require("gulp-terser");
const browsersync = require("browser-sync").create();

// sass task
function sassTask() {
  return src("./sass/style.scss", { sourcemaps: true })
    .pipe(sass())
    .pipe(postcss([cssnano()]))
    .pipe(dest("dist/css", { sourcemaps: "." }));
}

// javascript task
function jsTask() {
  return src("./js/index.js", { sourcemaps: true })
    .pipe(terser())
    .pipe(dest("dist/js", { sourcemaps: "." }));
}

// browsersync
function browserSyncServer(callback) {
  browsersync.init({
    server: {
      baseDir: ".",
    },
  });
  callback();
}

function browserSyncReload(callback) {
  browsersync.reload();
  callback();
}

// watch task
function watchTask() {
  watch("*.html", browserSyncReload);
  watch(
    ["./sass/**/*.scss", ".js/**/*.js"],
    series(sassTask, jsTask, browserSyncReload)
  );
}

// gulp workflow
exports.default = series(sassTask, jsTask, browserSyncServer, watchTask);

Ya sabemos que transition no tiene "animación" porque no tiene intervalo de acción
-- esto condiciona a que todas la propiedades existen despues de que el elemento aparesca
-- si le ponemos transition: color 3s; no surgira la animación porque en el display none
   aun no exite el color, luego , en el display block ya existe y no se da la niamción por que
   no logra tener un intervalo donde cambia su valor, sino que no existe y luego exite
   (sinintervalo)

la unidad 1fr en css grid tiene un comportamiento maximo 
yaque si solo se lo pones a un elemento sera el maximo y si le pones a 3
sera 1/3 que es el maximo; por eso no puede ir en el minimo de minmax(30%, 1fr) eso es lo correcto.

__NOTA__
minmax(min,max):es solo de grid y en su parte min no se le pone 1fr porque tiene comportamiento max
-min(): es de css no de grid, y dentro de sus valores no especifica que permite 1fr(no es valido)
-max(): es de css no de grid, y dentro de sus valores no especifica que permite 1fr(no es valido)

.feed-item {
  border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML table Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid red;
    }
</style>
</head>
<body>
    <table>
        <caption>User Details</caption>
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alura</td>
                <td>alura@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>John</td>
                <td>john@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Milinda</td>
                <td>milida@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>




	

<!DOCTYPE html>
<html>
<head>
    <title>HTML style tag</title>
    <style type="text/css">
        h1 { color: red; }
        p { color: yellow; }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML input tag</title>
</head>
<body>
    <form action="yourfile" method="post">
        <label for="first-name">First name:</label>
        <input type="text" name="first-name" id="first-name">
        <input type="submit" value="Submit">
        <input type="reset" name="Reset">
    </form>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML img tag</title>
</head>
<body>
    <div>
   		<img src="/img/example.png" alt="html">
    	
    </div>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML iframe tag</title>
</head>
<body>
    <iframe src="/index.html" width="400" height="300" scrolling="auto">
        <p>[Your browser does not support frames or is currently configured not to display frames. However, you may visit <a href="https://www.elementtutorials.com/">the related document.</a>]</p>
    </iframe>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML i tag</title>
</head>
<body>
    <p>Here is some <i>italic</i> text.</p>
	<p>Here is some <i>more italic</i> text.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>A Complete HTML document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML hr tag</title>
</head>
<body>
    <p>This is the first paragraph of text.</p>
    <hr>
    <p>This is second paragraph of text.</p>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML headings tag</title>
</head>
<body>
    <h1>Heading  1</h1>
    <h2>Heading  2</h2>
    <h3>Heading  3</h3>
    <h4>Heading  4</h4>
    <h5>Heading  5</h5>
    <h6>Heading  6</h6>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML header Tag</title>
</head>
<body>
    <header>
		<h1>Top Browsers</h1>
		<nav>
			<p>
                <a href="https://www.google.com">google</a> | 
                <a href="https://www.yahhoo.com">yahoo</a> | 
                <a href="https://www.bing.com">bing</a>
            </p>
		</nav>
	</header>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML head tag</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML form tag</title>
</head>
<body>
    <form>
        <p>
            First name: <input type="text" name="first-name">
            <button type="submit" value="Submit">Submit</button>
            <button type="reset" value="Reset">Reset</button>
        </p>
    </form>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML footer Tag</title>
</head>
<body>
    <footer>
		<nav>
			<p>
				<a href="https://www.google.com/">Terms of Use</a> |
				<a href="https://www.google.com/">Privacy Policy</a>
			</p>
		</nav>
		<p>Copyright &copy; 1998 </p>
	</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML figure Tag</title>
</head>
<body>
    <figure>
		<img src="image.jpg" alt="Space Shuttle">
		
	</figure>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML fieldset tag</title>
</head>
<body>
    <form action="http://www.google.com/" method="post">
        <fieldset>
            <legend>Gender</legend>
            <input type="radio" name="gender" value="male" id="male">
            <label for="male">Male</label>
            <input type="radio" name="gender" value="female" id="female">
            <label for="female">Female</label>
        </fieldset>
    </form>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML embed Tag</title>
</head>
<body>
    <embed src="/index.html" width="500" height="500">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML em tag</title>
</head>
<body>
    <p>This is an <em>important point</em> to consider.</p>
	<p>This is one more <em>important point</em> to consider.</p>
</body>
</html>

	<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML dt tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line2</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML dl tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML div tag</title>
    <style type="text/css">
        .welcome-box{
            background:lightblue;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="welcome-box">
        <h1>Welcome</h1>
        <p>Hi, welcome to our website.</p>
    </div>
    <p><strong>Note:</strong> To learn more about style rules please study tutorials on <a href="">CSS</a>.</p>
</body>
</html> 

<!DOCTYPE>
<html>  
<body>  
 
<dialog> <p>This is an HTML dialog popup</p> <button id="close">Close Dialog</button>
  </dialog> 
  <button id="show">Show Me the Dialog</button> 

  <script>  
    
    var dialog = document.querySelector('dialog'); 
    document.querySelector('#show').onclick = function() { 
      dialog.show(); }; document.querySelector('#close').onclick = 
        function() { dialog.close(); }; 
  </script>
  

</body>
</html>  

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML dfn tag</title>
</head>
<body>
    <p>The <dfn title="Hyper Text Markup Language">HTML</dfn> is the publishing language of the World Wide Web.</p>
</body>
</html> 

<html>
<head>
<title>Example of HTML details Tag</title>
<style type="text/css">
    details{
    	margin: 10px;
    }
</style>
</head>
<body>
<details>
    <summary>What is HTML?</summary>
    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of web pages.</p>
</details>
<details>
    <summary>What is Twitter Bootstrap?</summary>
    <p>Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. </p>
</details>
<details>
    <summary>What is CSS?</summary>
    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. </p>
</details>
<p><strong>Note:</strong> The details tag currently not supported in Firefox and Internet Explorer.</p>
</body>
</html>                                		

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML del tag</title>
</head>
<body>
    <h1>To Do</h1>
    <ul>
        <li>$2000</li>
        <li>$3000</li>
        <li><del>$4000</del></li>
        <li>$5000</li>
    </ul>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML dd tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line2</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of HTML data Tag</title>
<style>
    data:hover::after {
        content: ' (ID ' attr(value) ')';
        font-size: .7em;
    }
</style>
</head>
<body>
    <p>New Movie Makers</p>
    <ul>
        <li><data value="204">Alson</data></li>
        <li><data value="205">Corner</data></li>
        <li><data value="206">John</data></li>
    </ul>
	<p><strong>Note:</strong> Place the mouse pointer over the list item to see how it actually works.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML col Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <table>
        <colgroup>
            <col style="background-color:red">
            <col span="2" style="background-color:yellow">
        </colgroup>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Alson</td>
            <td>Alson@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Corner</td>
            <td>Corner@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John doe</td>
            <td>John@mail.com</td>
        </tr>
    </table>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML code tag</title>
</head>
<body>
    <p>This is paragraph <code>computer code</code> another line.</p>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML cite Tag</title>
</head>
<body>
    <p>My favorite movie is <cite>Avengers</cite>.</p>
	<p>My another favorite movie is <cite>Bloodshoot</cite>.</p>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML caption Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid gray;
    }
</style>
</head>
<body>
    <table>
        <caption>User Details</caption>
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alson</td>
                <td>Alson@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Conner</td>
                <td>Conner@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John Doe</td>
                <td>John@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>



  

<!DOCTYPE html>
  <html>
  <body>
  
  <canvas id="firstcanvas" width="500" height="500" style="border:1px solid red;">
  Your browser does not support the HTML canvas tag.
  </canvas>
  
  </body>
  </html>

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML button tag</title>
</head>
<body>
    <form>
        <p>
            First name: <input type="text" name="first-name">
            <button type="submit" value="Submit">Submit</button>
            <button type="reset" value="Reset">Reset</button>
        </p>
    </form>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML br tag</title>
</head>
<body>
    <p>This paragraph contains<br>a line break.</p>
	<p>This paragraph contains <br>multiple <br>line breaks.</p>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML body tag</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML blockquote tag</title>
</head>
<body>
    <blockquote>
        <p>This is an example of a long quotation.</p>
    </blockquote>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML bdo tag</title>
</head>
<body>
    <p>The sequence "1-2-3-4-5" was reversed as: <bdo dir="rtl">1-2-3-4-5</bdo></p>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML bdi Tag</title>
</head>
<body>
  <p>If the bdi element is not supported in the browser, the username of the Arabic user would confuse the text</p>
    <p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML base tag</title>
    <base href="https://www.elementtutorials.com/">
</head>
<body>
	<p>Learn <a href="https://www.elementtutorials.com/">CSS</a>.</p>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML b Tag</title>
</head>
<body>
    <p>This <b>sentence</b> contains some <b>bold</b> words.</p>
	<p>Here are <b>some</b> more <b>bold</b> words.</p>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML audio Tag</title>
</head>
<body>
	<audio controls="controls" src="/audio.mp3">
        Your browser does not support the HTML5 audio element.
    </audio>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML aside Tag</title>
</head>
<body>
	<h1>Apollo 13 Mission</h1>
	<p>This is paragraph</p>
	<p>[...]</p>
    <aside>
		<h1>Apollo 13 Facts</h1>
		<p>The aside element represents a section of the web page that encloses content which is tangentially related to the content around it.</p>
	</aside>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML article Tag</title>
</head>
<body>
    <article>
		<h1>Introduction to HTML</h1>
		<p>HTML is a markup language that is used for creating web pages.</p>
	</article>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="/img/favicon.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML address tag </title>
</head>
<body>
    <address>
        Written by <a href="mailto:hello@example.com">Alson</a>.<br> 
        Contact us at:<br>
        street NO:, Hollywood<br>
        USA
    </address>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML a tag</title>
</head>
<body>
<a href="https://www.elementtutorials.com/">ElementTutorials</a>
</body>
</html> 

/*
Sass offers a long list of built-in functions. They serve all kinds of purposes including string manipulation, color related operations, and some handy math methods such as random() and round().

To exhibit one of the more simple Sass functions, we will create a quick snippet that utilizes darken($color, $amount) to make an on-hover effect.
*/

$awesome-blue: #2196F3;

a {
  padding: 10px 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}

/* 
Although vanilla CSS now also offers this feature in the form of calc(), the Sass alternative is quicker to write, has the modulo % operation, and can be applied to a wider range of data-types (e.g. colors and strings). 
*/

$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}

.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}

@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

@function rem-calc($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}