 <html dir="ltr" lang="en" class=""><head>
    <meta charset="utf-8">
    <title>New Tab</title>
    <style>
      body {
        background: #FFFFFF;
        margin: 0;
      }

      #oneGoogleBar {
        height: 56px;
      }

      #backgroundImage {
        border: none;
        height: 100%;
        pointer-events: none;
        position: fixed;
        top: 0;
        visibility: hidden;
        width: 100%;
      }

      [show-background-image] #backgroundImage {
        visibility: visible;
      }
    </style>
  <custom-style>
  <style is="custom-style" css-build="shadow">html {
  --google-red-100-rgb: 244, 199, 195;  
      --google-red-100: rgb(var(--google-red-100-rgb));
      --google-red-300-rgb: 230, 124, 115;  
      --google-red-300: rgb(var(--google-red-300-rgb));
      --google-red-500-rgb: 219, 68, 55;  
      --google-red-500: rgb(var(--google-red-500-rgb));
      --google-red-700-rgb: 197, 57, 41;  
      --google-red-700: rgb(var(--google-red-700-rgb));

      --google-blue-100-rgb: 198, 218, 252;  
      --google-blue-100: rgb(var(--google-blue-100-rgb));
      --google-blue-300-rgb: 123, 170, 247;  
      --google-blue-300: rgb(var(--google-blue-300-rgb));
      --google-blue-500-rgb: 66, 133, 244;  
      --google-blue-500: rgb(var(--google-blue-500-rgb));
      --google-blue-700-rgb: 51, 103, 214;  
      --google-blue-700: rgb(var(--google-blue-700-rgb));

      --google-green-100-rgb: 183, 225, 205;  
      --google-green-100: rgb(var(--google-green-100-rgb));
      --google-green-300-rgb: 87, 187, 138;  
      --google-green-300: rgb(var(--google-green-300-rgb));
      --google-green-500-rgb: 15, 157, 88;  
      --google-green-500: rgb(var(--google-green-500-rgb));
      --google-green-700-rgb: 11, 128, 67;  
      --google-green-700: rgb(var(--google-green-700-rgb));

      --google-yellow-100-rgb: 252, 232, 178;  
      --google-yellow-100: rgb(var(--google-yellow-100-rgb));
      --google-yellow-300-rgb: 247, 203, 77;  
      --google-yellow-300: rgb(var(--google-yellow-300-rgb));
      --google-yellow-500-rgb: 244, 180, 0;  
      --google-yellow-500: rgb(var(--google-yellow-500-rgb));
      --google-yellow-700-rgb: 240, 147, 0;  
      --google-yellow-700: rgb(var(--google-yellow-700-rgb));

      --google-grey-100-rgb: 245, 245, 245;  
      --google-grey-100: rgb(var(--google-grey-100-rgb));
      --google-grey-300-rgb: 224, 224, 224;  
      --google-grey-300: rgb(var(--google-grey-300-rgb));
      --google-grey-500-rgb: 158, 158, 158;  
      --google-grey-500: rgb(var(--google-grey-500-rgb));
      --google-grey-700-rgb: 97, 97, 97;  
      --google-grey-700: rgb(var(--google-grey-700-rgb));

      

      --paper-red-50: #ffebee;
      --paper-red-100: #ffcdd2;
      --paper-red-200: #ef9a9a;
      --paper-red-300: #e57373;
      --paper-red-400: #ef5350;
      --paper-red-500: #f44336;
      --paper-red-600: #e53935;
      --paper-red-700: #d32f2f;
      --paper-red-800: #c62828;
      --paper-red-900: #b71c1c;
      --paper-red-a100: #ff8a80;
      --paper-red-a200: #ff5252;
      --paper-red-a400: #ff1744;
      --paper-red-a700: #d50000;

      --paper-light-blue-50: #e1f5fe;
      --paper-light-blue-100: #b3e5fc;
      --paper-light-blue-200: #81d4fa;
      --paper-light-blue-300: #4fc3f7;
      --paper-light-blue-400: #29b6f6;
      --paper-light-blue-500: #03a9f4;
      --paper-light-blue-600: #039be5;
      --paper-light-blue-700: #0288d1;
      --paper-light-blue-800: #0277bd;
      --paper-light-blue-900: #01579b;
      --paper-light-blue-a100: #80d8ff;
      --paper-light-blue-a200: #40c4ff;
      --paper-light-blue-a400: #00b0ff;
      --paper-light-blue-a700: #0091ea;

      --paper-yellow-50: #fffde7;
      --paper-yellow-100: #fff9c4;
      --paper-yellow-200: #fff59d;
      --paper-yellow-300: #fff176;
      --paper-yellow-400: #ffee58;
      --paper-yellow-500: #ffeb3b;
      --paper-yellow-600: #fdd835;
      --paper-yellow-700: #fbc02d;
      --paper-yellow-800: #f9a825;
      --paper-yellow-900: #f57f17;
      --paper-yellow-a100: #ffff8d;
      --paper-yellow-a200: #ffff00;
      --paper-yellow-a400: #ffea00;
      --paper-yellow-a700: #ffd600;

      --paper-orange-50: #fff3e0;
      --paper-orange-100: #ffe0b2;
      --paper-orange-200: #ffcc80;
      --paper-orange-300: #ffb74d;
      --paper-orange-400: #ffa726;
      --paper-orange-500: #ff9800;
      --paper-orange-600: #fb8c00;
      --paper-orange-700: #f57c00;
      --paper-orange-800: #ef6c00;
      --paper-orange-900: #e65100;
      --paper-orange-a100: #ffd180;
      --paper-orange-a200: #ffab40;
      --paper-orange-a400: #ff9100;
      --paper-orange-a700: #ff6500;

      --paper-grey-50: #fafafa;
      --paper-grey-100: #f5f5f5;
      --paper-grey-200: #eeeeee;
      --paper-grey-300: #e0e0e0;
      --paper-grey-400: #bdbdbd;
      --paper-grey-500: #9e9e9e;
      --paper-grey-600: #757575;
      --paper-grey-700: #616161;
      --paper-grey-800: #424242;
      --paper-grey-900: #212121;

      --paper-blue-grey-50: #eceff1;
      --paper-blue-grey-100: #cfd8dc;
      --paper-blue-grey-200: #b0bec5;
      --paper-blue-grey-300: #90a4ae;
      --paper-blue-grey-400: #78909c;
      --paper-blue-grey-500: #607d8b;
      --paper-blue-grey-600: #546e7a;
      --paper-blue-grey-700: #455a64;
      --paper-blue-grey-800: #37474f;
      --paper-blue-grey-900: #263238;

      
      --dark-divider-opacity: 0.12;
      --dark-disabled-opacity: 0.38; 
      --dark-secondary-opacity: 0.54;
      --dark-primary-opacity: 0.87;

      
      --light-divider-opacity: 0.12;
      --light-disabled-opacity: 0.3; 
      --light-secondary-opacity: 0.7;
      --light-primary-opacity: 1.0;
}

</style>
</custom-style>
<custom-style>
<style is="custom-style" css-build="shadow">html {
  --google-blue-50-rgb: 232, 240, 254;  
    --google-blue-50: rgb(var(--google-blue-50-rgb));
    --google-blue-200-rgb: 174, 203, 250;  
    --google-blue-200: rgb(var(--google-blue-200-rgb));
    --google-blue-600-rgb: 26, 115, 232;  
    --google-blue-600: rgb(var(--google-blue-600-rgb));

    --google-grey-50-rgb: 248, 249, 250;  
    --google-grey-50: rgb(var(--google-grey-50-rgb));
    --google-grey-200-rgb: 232, 234, 237;  
    --google-grey-200: rgb(var(--google-grey-200-rgb));
    --google-grey-400-rgb: 189, 193, 198;  
    --google-grey-400: rgb(var(--google-grey-400-rgb));
    --google-grey-600-rgb: 128, 134, 139;  
    --google-grey-600: rgb(var(--google-grey-600-rgb));
    --google-grey-800-rgb: 60, 64, 67;  
    --google-grey-800: rgb(var(--google-grey-800-rgb));
    --google-grey-900-rgb: 32, 33, 36;  
    --google-grey-900: rgb(var(--google-grey-900-rgb));
    
    --google-grey-900-white-4-percent: #292a2d;

    --google-red-600-rgb: 217, 48, 37;  
    --google-red-600: rgb(var(--google-red-600-rgb));

    --google-yellow-50-rgb: 254, 247, 224;  
    --google-yellow-50: rgb(var(--google-yellow-50-rgb));

    
    --google-blue-refresh-100-rgb: 210, 227, 252;  
    --google-blue-refresh-100: rgb(var(--google-blue-refresh-100-rgb));
    --google-blue-refresh-300-rgb: 138, 180, 248;  
    --google-blue-refresh-300: rgb(var(--google-blue-refresh-300-rgb));
    --google-blue-refresh-500-rgb: 66, 133, 244;  
    --google-blue-refresh-500: rgb(var(--google-blue-refresh-500-rgb));
    --google-blue-refresh-700-rgb: 25, 103, 210;  
    --google-blue-refresh-700: rgb(var(--google-blue-refresh-700-rgb));

    --google-green-refresh-300-rgb: 129, 201, 149;  
    --google-green-refresh-300: rgb(var(--google-green-refresh-300-rgb));
    --google-green-refresh-700-rgb: 24, 128, 56;  
    --google-green-refresh-700: rgb(var(--google-green-refresh-700-rgb));

    --google-grey-refresh-100-rgb: 241, 243, 244;  
    --google-grey-refresh-100: rgb(var(--google-grey-refresh-100-rgb));
    --google-grey-refresh-300-rgb: 218, 220, 224;  
    --google-grey-refresh-300: rgb(var(--google-grey-refresh-300-rgb));
    --google-grey-refresh-500-rgb: 154, 160, 166;  
    --google-grey-refresh-500: rgb(var(--google-grey-refresh-500-rgb));
    --google-grey-refresh-700-rgb: 95, 99, 104;  
    --google-grey-refresh-700: rgb(var(--google-grey-refresh-700-rgb));

    --google-red-refresh-300-rgb: 242, 139, 130;  
    --google-red-refresh-300: rgb(var(--google-red-refresh-300-rgb));
    --google-red-refresh-500-rgb: 234, 67, 53;  
    --google-red-refresh-500: rgb(var(--google-red-refresh-500-rgb));

    --google-yellow-refresh-300-rgb: 253, 214, 51;  
    --google-yellow-refresh-300: rgb(var(--google-yellow-refresh-300-rgb));

    --cr-primary-text-color: var(--google-grey-900);
    --cr-secondary-text-color: var(--google-grey-refresh-700);

    --cr-card-background-color: white;
    --cr-card-shadow-color-rgb: var(--google-grey-800-rgb);

    --cr-elevation-1: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 1px 3px 1px;
    --cr-elevation-2: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 2px 6px 2px;
    --cr-elevation-3: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 3px 0,
                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 4px 8px 3px;
    --cr-elevation-4: rgba(var(--cr-card-shadow-color-rgb), .3) 0 2px 3px 0,
                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 6px 10px 4px;
    --cr-elevation-5: rgba(var(--cr-card-shadow-color-rgb), .3) 0 4px 4px 0,
                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 8px 12px 6px;

    --cr-card-shadow: var(--cr-elevation-1);

    --cr-checked-color: var(--google-blue-600);
    --cr-focused-item-color: var(--google-grey-300);
    --cr-form-field-label-color: var(--google-grey-refresh-700);
    --cr-hairline-rgb: 0, 0, 0;
    --cr-link-color: var(--google-blue-700);
    --cr-menu-background-color: white;
    --cr-menu-background-focus-color: var(--google-grey-400);
    --cr-menu-shadow: 0 2px 6px var(--paper-grey-500);
    --cr-separator-color: rgba(0, 0, 0, .06);
    --cr-title-text-color: rgb(90, 90, 90);
    --cr-toggle-color: var(--google-blue-500);
    --cr-toolbar-background-color: var(--google-blue-700);
}

@media (prefers-color-scheme: dark) {
html {
  --cr-primary-text-color: var(--google-grey-200);
      --cr-secondary-text-color: var(--google-grey-refresh-500);

      --cr-card-background-color: var(--google-grey-900-white-4-percent);
      --cr-card-shadow-color-rgb: 0, 0, 0;

      --cr-checked-color: var(--google-blue-refresh-300);
      --cr-form-field-label-color: var(--dark-secondary-color);
      --cr-hairline-rgb: 255, 255, 255;
      --cr-link-color: var(--google-blue-refresh-300);
      --cr-menu-background-color: var(--google-grey-900);
      --cr-menu-background-focus-color: var(--google-grey-refresh-700);
      --cr-menu-background-sheen: rgba(255, 255, 255, .06);  
      --cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
                        rgba(0, 0, 0, .15) 0 3px 6px 2px;
      --cr-separator-color: rgba(255, 255, 255, .1);
      
      --cr-title-text-color: var(--cr-primary-text-color);
      --cr-toolbar-background-color: var(--google-grey-900-white-4-percent);
}

}

html {
  --cr-button-edge-spacing: 12px;
    --cr-button-height: 32px;

    
    --cr-controlled-by-spacing: 24px;

    
    --cr-default-input-max-width: 264px;

    
    --cr-icon-ripple-size: 36px;
    --cr-icon-ripple-padding: 8px;

    --cr-icon-size: 20px;

    --cr-icon-button-margin-start: 16px;

    
    --cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1);

    
    
    --cr-section-min-height: 48px;
    --cr-section-two-line-min-height: 64px;
    --cr-section-three-line-min-height: 84px;

    --cr-section-padding: 20px;
    --cr-section-vertical-padding: 12px;
    --cr-section-indent-width: 40px;
    --cr-section-indent-padding: calc(
        var(--cr-section-padding) + var(--cr-section-indent-width));

    --cr-section-vertical-margin: 21px;

    --cr-centered-card-max-width: 680px;
    --cr-centered-card-width-percentage: 0.96;

    --cr-hairline: 1px solid rgba(var(--cr-hairline-rgb), .14);

    --cr-separator-height: 1px;
    --cr-separator-line: var(--cr-separator-height) solid
        var(--cr-separator-color);

    --cr-toolbar-overlay-animation-duration: 150ms;
    --cr-toolbar-height: 56px;

    --cr-container-shadow-height: 6px;
    --cr-container-shadow-margin: calc(-1 * var(--cr-container-shadow-height));

    --cr-container-shadow-max-opacity: 1;

    
    --cr-card-border-radius: 4px;
    --cr-disabled-opacity: .38;
    --cr-form-field-bottom-spacing: 16px;
    --cr-form-field-label-font-size: .625rem;
    --cr-form-field-label-height: 1em;
    --cr-form-field-label-line-height: 1em;
}

</style>
</custom-style>
<custom-style>
  <style is="custom-style" css-build="shadow">[hidden] {
  display: none !important;
}

</style>
</custom-style>
<custom-style>
  <style is="custom-style" css-build="shadow">html {
  --layout_-_display:  flex;;

      --layout-inline_-_display:  inline-flex;;

      --layout-horizontal_-_display:  var(--layout_-_display); --layout-horizontal_-_flex-direction:  row;;

      --layout-horizontal-reverse_-_display:  var(--layout_-_display); --layout-horizontal-reverse_-_flex-direction:  row-reverse;;

      --layout-vertical_-_display:  var(--layout_-_display); --layout-vertical_-_flex-direction:  column;;

      --layout-vertical-reverse_-_display:  var(--layout_-_display); --layout-vertical-reverse_-_flex-direction:  column-reverse;;

      --layout-wrap_-_flex-wrap:  wrap;;

      --layout-wrap-reverse_-_flex-wrap:  wrap-reverse;;

      --layout-flex-auto_-_flex:  1 1 auto;;

      --layout-flex-none_-_flex:  none;;

      --layout-flex_-_flex:  1; --layout-flex_-_flex-basis:  0.000000001px;;

      --layout-flex-2_-_flex:  2;;

      --layout-flex-3_-_flex:  3;;

      --layout-flex-4_-_flex:  4;;

      --layout-flex-5_-_flex:  5;;

      --layout-flex-6_-_flex:  6;;

      --layout-flex-7_-_flex:  7;;

      --layout-flex-8_-_flex:  8;;

      --layout-flex-9_-_flex:  9;;

      --layout-flex-10_-_flex:  10;;

      --layout-flex-11_-_flex:  11;;

      --layout-flex-12_-_flex:  12;;

      

      --layout-start_-_align-items:  flex-start;;

      --layout-center_-_align-items:  center;;

      --layout-end_-_align-items:  flex-end;;

      --layout-baseline_-_align-items:  baseline;;

      

      --layout-start-justified_-_justify-content:  flex-start;;

      --layout-center-justified_-_justify-content:  center;;

      --layout-end-justified_-_justify-content:  flex-end;;

      --layout-around-justified_-_justify-content:  space-around;;

      --layout-justified_-_justify-content:  space-between;;

      --layout-center-center_-_align-items:  var(--layout-center_-_align-items); --layout-center-center_-_justify-content:  var(--layout-center-justified_-_justify-content);;

      

      --layout-self-start_-_align-self:  flex-start;;

      --layout-self-center_-_align-self:  center;;

      --layout-self-end_-_align-self:  flex-end;;

      --layout-self-stretch_-_align-self:  stretch;;

      --layout-self-baseline_-_align-self:  baseline;;

      

      --layout-start-aligned_-_align-content:  flex-start;;

      --layout-end-aligned_-_align-content:  flex-end;;

      --layout-center-aligned_-_align-content:  center;;

      --layout-between-aligned_-_align-content:  space-between;;

      --layout-around-aligned_-_align-content:  space-around;;

      

      --layout-block_-_display:  block;;

      --layout-invisible_-_visibility:  hidden !important;;

      --layout-relative_-_position:  relative;;

      --layout-fit_-_position:  absolute; --layout-fit_-_top:  0; --layout-fit_-_right:  0; --layout-fit_-_bottom:  0; --layout-fit_-_left:  0;;

      --layout-scroll_-_-webkit-overflow-scrolling:  touch; --layout-scroll_-_overflow:  auto;;

      --layout-fullbleed_-_margin:  0; --layout-fullbleed_-_height:  100vh;;

      

      --layout-fixed-top_-_position:  fixed; --layout-fixed-top_-_top:  0; --layout-fixed-top_-_left:  0; --layout-fixed-top_-_right:  0;;

      --layout-fixed-right_-_position:  fixed; --layout-fixed-right_-_top:  0; --layout-fixed-right_-_right:  0; --layout-fixed-right_-_bottom:  0;;

      --layout-fixed-bottom_-_position:  fixed; --layout-fixed-bottom_-_right:  0; --layout-fixed-bottom_-_bottom:  0; --layout-fixed-bottom_-_left:  0;;

      --layout-fixed-left_-_position:  fixed; --layout-fixed-left_-_top:  0; --layout-fixed-left_-_bottom:  0; --layout-fixed-left_-_left:  0;;
}

</style>
</custom-style><style>[hidden] { display: none !important; }</style></head>
  <body style="background-color: rgb(255, 255, 255);">
    
    <iframe id="backgroundImage" src="chrome-untrusted://new-tab-page/custom_background_image?url=">
    </iframe>
    <ntp-app iframe-one-google-bar-enabled_="" modules-visible_="" promo-and-modules-loaded_=""></ntp-app>
    <script type="module" src="new_tab_page.js"></script>
    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
    <link rel="stylesheet" href="shared_vars.css">
    <div id="oneGoogleBarEndOfBody"></div>
  

<dom-module id="cr-hidden-style" assetpath="chrome://resources/">
  <template>
    <style scope="cr-hidden-style">[hidden], :host([hidden]) {
  display: none !important;
}

</style>
  </template>
</dom-module>
<dom-module id="cr-icons" assetpath="chrome://resources/">
  <template>
    <style scope="cr-icons">.icon-arrow-back {
  --cr-icon-image: url('chrome://resources/images/icon_arrow_back.svg');
}

.icon-arrow-dropdown {
  --cr-icon-image: url('chrome://resources/images/icon_arrow_dropdown.svg');
}

.icon-cancel {
  --cr-icon-image: url('chrome://resources/images/icon_cancel.svg');
}

.icon-clear {
  --cr-icon-image: url('chrome://resources/images/icon_clear.svg');
}

.icon-copy-content {
  --cr-icon-image: url('chrome://resources/images/icon_copy_content.svg');
}

.icon-delete-gray {
  --cr-icon-image: url('chrome://resources/images/icon_delete_gray.svg');
}

.icon-picture-delete {
  --cr-icon-image: url('chrome://resources/images/icon_picture_delete.svg');
}

.icon-expand-less {
  --cr-icon-image: url('chrome://resources/images/icon_expand_less.svg');
}

.icon-expand-more {
  --cr-icon-image: url('chrome://resources/images/icon_expand_more.svg');
}

.icon-external {
  --cr-icon-image: url('chrome://resources/images/open_in_new.svg');
}

.icon-more-vert {
  --cr-icon-image: url('chrome://resources/images/icon_more_vert.svg');
}

.icon-refresh {
  --cr-icon-image: url('chrome://resources/images/icon_refresh.svg');
}

.icon-search {
  --cr-icon-image: url('chrome://resources/images/icon_search.svg');
}

.icon-settings {
  --cr-icon-image: url('chrome://resources/images/icon_settings.svg');
}

.icon-visibility {
  --cr-icon-image: url('chrome://resources/images/icon_visibility.svg');
}

.icon-visibility-off {
  --cr-icon-image: url('chrome://resources/images/icon_visibility_off.svg');
}

.subpage-arrow {
  --cr-icon-image: url('chrome://resources/images/arrow_right.svg');
}

.cr-icon {
  -webkit-mask-image: var(--cr-icon-image);
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: var(--cr-icon-size);
        background-color: var(--google-grey-refresh-700);
        flex-shrink: 0;
        height: var(--cr-icon-ripple-size);
        margin-inline-end: var(--cr-icon-ripple-margin);
        margin-inline-start: var(--cr-icon-button-margin-start);
        user-select: none;
        width: var(--cr-icon-ripple-size);
}

:host-context([dir=rtl]) .cr-icon {
  transform: scaleX(-1);
}

.cr-icon.no-overlap {
  margin-inline-end: 0;
        margin-inline-start: 0;
}

@media (prefers-color-scheme: dark) {
.cr-icon {
  background-color: var(--google-grey-refresh-500);
}

}

</style>
  </template>
</dom-module>
<dom-module id="cr-shared-style" assetpath="chrome://resources/">
  <template>
    <style include="cr-hidden-style cr-icons" scope="cr-shared-style">html, :host {
  --scrollable-border-color: var(--google-grey-refresh-300);
}

@media (prefers-color-scheme: dark) {
html, :host {
  --scrollable-border-color: var(--google-grey-refresh-700);
}

}

[actionable] {
  cursor: pointer;
}

.hr {
  border-top: var(--cr-separator-line);
}

iron-list.cr-separators > *:not([first]) {
  border-top: var(--cr-separator-line);
}

[scrollable] {
  border-color: transparent;
        border-style: solid;
        border-width: 1px 0;
        overflow-y: auto;
}

[scrollable].is-scrolled {
  border-top-color: var(--scrollable-border-color);
}

[scrollable].can-scroll:not(.scrolled-to-bottom) {
  border-bottom-color: var(--scrollable-border-color);
}

[scrollable] iron-list > :not(.no-outline):focus, [selectable]:focus, [selectable] > :focus {
  background-color: var(--cr-focused-item-color);
        outline: none;
}

.scroll-container {
  display: flex;
        flex-direction: column;
        min-height: 1px;
}

[selectable] > * {
  cursor: pointer;
}

.cr-centered-card-container {
  box-sizing: border-box;
        display: block;
        height: inherit;
        margin: 0 auto;
        max-width: var(--cr-centered-card-max-width);
        min-width: 550px;
        position: relative;
        width: calc(100% * var(--cr-centered-card-width-percentage));
}

.cr-container-shadow {
  box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, .4);
        height: var(--cr-container-shadow-height);
        left: 0;
        margin: 0 0 var(--cr-container-shadow-margin);
        opacity: 0;
        pointer-events: none;
        position: relative;
        right: 0;
        top: 0;
        transition: opacity 500ms;
        z-index: 1;
}

#cr-container-shadow-bottom {
  margin-bottom: 0;
        margin-top: var(--cr-container-shadow-margin);
        transform: scaleY(-1);
}

#cr-container-shadow-top.has-shadow, #cr-container-shadow-bottom.has-shadow {
  opacity: var(--cr-container-shadow-max-opacity);
}

.cr-row {
  align-items: center;
        border-top: var(--cr-separator-line);
        display: flex;
        min-height: var(--cr-section-min-height);
        padding: 0 var(--cr-section-padding);
}

.cr-row.first, .cr-row.continuation {
  border-top: none;
}

.cr-row-gap {
  padding-inline-start: 16px;
}

.cr-button-gap {
  margin-inline-start: 8px;
}

paper-tooltip {
  --paper-tooltip_-_font-size:  92.31%; --paper-tooltip_-_font-weight:  500; --paper-tooltip_-_max-width:  330px; --paper-tooltip_-_min-width:  var(--paper-tooltip-min-width, 200px); --paper-tooltip_-_padding:  var(--paper-tooltip-padding, 10px 8px);
}

.cr-padded-text {
  padding-block-end: var(--cr-section-vertical-padding);
        padding-block-start: var(--cr-section-vertical-padding);
}

.cr-title-text {
  color: var(--cr-title-text-color);
        font-size: 107.6923%; 
        font-weight: 500;
}

.cr-secondary-text {
  color: var(--cr-secondary-text-color);
        font-weight: 400;
}

.cr-form-field-label {
  color: var(--cr-form-field-label-color);
        display: block;
        font-size: var(--cr-form-field-label-font-size);
        font-weight: 500;
        letter-spacing: .4px;
        line-height: var(--cr-form-field-label-line-height);
        margin-bottom: 8px;
}

</style>
  </template>
</dom-module>
<dom-module id="cr-input-style" assetpath="chrome://resources/">
  <template>
    <style scope="cr-input-style">:host {
  --cr-input-background-color: var(--google-grey-refresh-100);
        --cr-input-color: var(--cr-primary-text-color);
        --cr-input-error-color: var(--google-red-600);
        --cr-input-focus-color: var(--google-blue-600);
        --cr-input-placeholder-color: var(--cr-secondary-text-color);
        display: block;
        
        outline: none;
}

@media (prefers-color-scheme: dark) {
:host {
  --cr-input-background-color: rgba(0, 0, 0, .3);
          --cr-input-error-color: var(--google-red-refresh-300);
          --cr-input-focus-color: var(--google-blue-refresh-300);
}

}

:host([focused_]:not([readonly]):not([invalid])) #label {
  color: var(--cr-input-focus-color);
}

#input-container {
  border-radius: var(--cr-input-border-radius, 4px);
        overflow: hidden;
        position: relative;
        width: var(--cr-input-width, 100%);
}

#inner-input-container {
  background-color: var(--cr-input-background-color);
        box-sizing: border-box;
        padding: 0;
}

#input {
  -webkit-appearance: none;
        
        background-color: transparent;
        border: none;
        box-sizing: border-box;
        caret-color: var(--cr-input-focus-color);
        color: var(--cr-input-color);
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        min-height: var(--cr-input-min-height, auto);
        outline: none;

        
        padding-bottom: var(--cr-input-padding-bottom, 6px);
        padding-inline-end: var(--cr-input-padding-end, 8px);
        padding-inline-start: var(--cr-input-padding-start, 8px);
        padding-top: var(--cr-input-padding-top, 6px);

        text-align: inherit;
        text-overflow: ellipsis;
        width: 100%;
}

#underline {
  border-bottom: 2px solid var(--cr-input-focus-color);
        border-radius: var(--cr-input-underline-border-radius, 0);
        bottom: 0;
        box-sizing: border-box;
        height: var(--cr-input-underline-height, 0);
        left: 0;
        margin: auto;
        opacity: 0;
        position: absolute;
        right: 0;
        transition: opacity 120ms ease-out, width 0s linear 180ms;
        width: 0;
}

:host([invalid]) #underline, :host([force-underline]) #underline, :host([focused_]:not([readonly])) #underline {
  opacity: 1;
        transition: opacity 120ms ease-in, width 180ms ease-out;
        width: 100%;
}

</style>
  </template>
</dom-module>
</body></html>

created 4 years ago

HTML Online Editor & Compiler

Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.

About HTML

HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.

Syntax help

Fundamentals

Any HTML document must start with document declaration <!DOCTYPE html>
HTML documents begin with <html> and ends with </html>
Headings are defined with <h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.
Paragrahs are defined in <p>..</p> tag.

Links are defined in <a> tag.

Example:

<a href="https://onecompiler.com/html">HTML online compiler</a>

Images are defined in <img> tag, where src attribute consists of image name.
Buttons are defined in <button>..</button> tag
Lists are defined in <ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.

HTML Elements and Attributes

HTML element is everything present from start tag to end tag.
The text present between start and end tag is called HTML element content.
Anything can be a tagname but it's preferred to put the meaningful title to the content present as tag name.
Do not forget the end tag.
Elements with no content are called empty elements.
Elements can have attributes which provides additional information about the element.
In the below example, href is an attribute and a is the tag name.
Example:
```
<a href="https://onecompiler.com/html">HTML online compiler</a>
```

CSS

CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.

Example:

Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.

body{
  padding: 25px;
}
.title {
	color: #228B22;
	font-family: Candara;
}

HTML Tables

HTML Tables are defined in <table> tag.
Table row should be defined in <tr> tag
Table header should be defined in <th> tag
Table data should be defined in <td> tag
Table caption should be defined in <caption> tag

HTML-Javascript

Javascript is used in HTML pages to make them more interactive.
<script> is the tag used to write scripts in HTML
You can either reference a external script or write script code in this tag.

Example

<script src="script.js"></script>