thiscodeWorks - Organizing the best of code online

body {
  background-image: url('https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=1600');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

#html #css #404 #error #redirect

Git 404 Page - A Pen by A.I. Dev

<!DOCTYPE html>

<html>



<head>

    <style>

        <title>404 - Page Not Found</title><link rel="stylesheet"type="text/css"href="styles.css"/>CSS: body,

        html {

            height: 0%;

            margin: 0;
10
            padding: 0;

        }



        .container {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.25);

        }



        img {

            max-width: 100%;

#react.js #css #javascript

Personal Information Form Submission - POST Request

const handlePersonalInfo = (data: any, e: any) => {
    e.preventDefault();
    console.log('entered info::', data);
    let hasEmiratesId: boolean;
    if (selectedOption === 'Yes') hasEmiratesId = true;
    else hasEmiratesId = false;
    let isMirrorWill: boolean;
    if (singleWillCheck) isMirrorWill = false;
    else isMirrorWill = true;
    const allData = {
      ...data,
      maritalStatusGUID,
      dateOfBirth,
      referralQuestionGUID,
      hasEmiratesId,
      isMirrorWill,
      isdCodeGUID1: countryGUID,
      isdCodeGUID2: countryGUID,
      nationalityGuid,
      countryGUID,
    };
    console.log('allData test', allData);
    axios.post(personalInformationAPI, allData).then((res) => {
      console.log('res post', res);
    });

#react.js #css #javascript

Next Step Button Code Snippet

<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> <button type="submit" className="next-btn"> Next Step </button> {/* {singleWillCheck ? ( <button type="submit" className="next-btn"> Next Step </button> ) : ( <button type="button" className="next-btn" onClick={handleMirrorWill}> Enter Spouse Information </button> )} */}
    <Box sx={{ flex: '1 1 auto' }} /> <Button color="inherit">Skip</Button> <Button color="inherit" onClick={handleBack}> Back </Button>
</Box>

#react.js #css #javascript

Update the activeStep based on pages we want to view

{!(activeStep === 7) && (
if we set active step to 7, then we can view Upload Documents page.

#react.js #css #javascript

Document Uploader Component Snippet

/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

import { AiOutlineClose } from 'react-icons/ai';

import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';

function DocumentManager() {
  const [activeElement, setActiveElement] = useState('top');
  const [uploadedFiles, setUploadedFiles] = useState([]);

  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (element: string) => {
    setActiveElement(element);
  };

  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: string) => ({
    backgroundColor: activeElement === element ? '#023979' : '#FFFFFF',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: string) => ({
    color: activeElement === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: string) => (activeElement === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: string) => (activeElement === element ? TickMarkIconGreen : TickMarkIconGrey);

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
 * Handles the file input change event.
 *
 * @param {any} e - the event object
 * @return {void}
 */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */
  const checkFileValidity = (files: any) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    const validFiles = files.filter((file: any) => {
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    const invalidFiles = files.filter((file: any) => !validFiles.includes(file));
    if (invalidFiles.length > 0) {
      const invalidFileNames = invalidFiles.map((file: any) => file.name).join(', ');
      alert(`Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`);
    } else {
      setUploadedFiles((prevFiles) => [...prevFiles, ...validFiles]);
      alert('Files uploaded successfully');
    }
  };

  /**
   * Removes a file from the uploaded files list.
   *
   * @param {any} file - The file to be removed.
   */
  const removeFile = (file: any) => {
    setUploadedFiles((prevFiles) => prevFiles.filter((f) => f !== file));
  };

  const {
    getRootProps,
    getInputProps,
  } = useDropzone({
    onDrop: handleFileDrop,
  });

  return (
    <main>
      <section>
        <header className="header">Upload Documents</header>
        <p className="description">Upload the documents in PDF or JPEG format. Click on next to save the files once all the documents have been uploaded</p>
      </section>
      <div className="row document-upload-container">

        <div className="col-lg-6 container">
          <div
            className={`top${activeElement === 'top' ? ' active' : ''}`}
            style={getBackgroundStyle('top')}
            onClick={() => handleElementClick('top')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('top')} alt="File Uploader Icon" />
              </div>
              <div
                className="document-title"
                style={getTitleStyle('top')}
              >
                Testator Passport

              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('top')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`middle${activeElement === 'middle' ? ' active' : ''}`}
            style={getBackgroundStyle('middle')}
            onClick={() => handleElementClick('middle')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('middle')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('middle')}
              >
                Additional Document
              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('middle')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`bottom${activeElement === 'bottom' ? ' active' : ''}`}
            style={getBackgroundStyle('bottom')}
            onClick={() => handleElementClick('bottom')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('bottom')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('bottom')}
              >
                Executor Passport
              </div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={getTickMarkicon('bottom')} alt="Tick Mark" />
            </div>
            <div />
          </div>
        </div>

        <div className="col-lg-6 row-item" {...getRootProps()} onClick={handleRowItemClick}>
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={handleAddFileClick}>Add File</button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedFiles.length > 0 && (
          <div className="file-list">
            <ul>
              {uploadedFiles.map((file: any, index) => (
                <li key={index}>
                  {file.name}
                  <AiOutlineClose
                    className="close-icon"
                    onClick={() => removeFile(file)}
                  />
                </li>
              ))}
            </ul>
          </div>
          )}
        </div>
      </div>
    </main>
  );
}

export default DocumentManager;

#react.js #css #javascript

remove the behavior of opening the folder to select files when clicking on the row-item div element

const handleRowItemClick = (e) => {
  e.stopPropagation();
};

// ...

<div className="col-lg-6 row-item" {...getRootProps()} onClick={handleRowItemClick}>
  {/* Remaining code */}
</div>

#react.js #css #javascript

Add a close icon - ChatGPT Prompt

You are a React and frontend expert.

I want to achieve below changes to my current version of code.

Constraints:

1. Add a AiOutlineClose react icon on right side of each file which is listed.
2. On Clicking this icon, that uploaded file is removed from list and from UI as well.
3. Attached current code for reference.


```
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';

function DocumentManager() {
  const [activeElement, setActiveElement] = useState('top');
  const [uploadedFiles, setUploadedFiles] = useState([]);

  const handleElementClick = (element: string) => {
    setActiveElement(element);
    console.log(activeElement);
  };

  const getBackgroundStyle = (element: string) => ({
    backgroundColor: activeElement === element ? '#023979' : '#FFFFFF',
  });

  const getTitleStyle = (element: string) => ({
    color: activeElement === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: string) => (activeElement === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: string) => (activeElement === element ? TickMarkIconGreen : TickMarkIconGrey);

  const handleAddFileClick = () => {
    document.getElementById('file-upload-input')?.click();
  };

  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    console.log(newFiles);
    checkFileValidity(newFiles);
    setUploadedFiles((prevFiles) => [...prevFiles, ...newFiles]);
  };

  const handleFileDrop = (acceptedFiles: any) => {
    console.log(acceptedFiles);
    checkFileValidity(acceptedFiles);
    setUploadedFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
  };

  const checkFileValidity = (files: any) => {
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const validExtensions = ['.pdf', 'jpeg', 'jpg', '.bmp', '.doc', '.docx'];
      const maxFileSize = 20 * 1024 * 1024;

      if (!validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext))) {
        alert(`Invalid File: ${file.name}. Please use A4-size PDF, JPEG, BMP, DOC or DOCX files`);
      } else if (file.size > maxFileSize) {
        alert(`File size exceeds the limit: ${file.name}. Maximum file size is 20MB.`);
      } else {
        alert('File uploaded successfully');
      }
    }
  };

  const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragAccept,
    isDragReject,
  } = useDropzone({
    onDrop: handleFileDrop,
  });

  return (
    <main>
      <section>
        <header className="header">Upload Documents</header>
        <p className="description">Upload the documents in PDF or JPEG format. Click on next to save the files once all the documents have been uploaded</p>
      </section>
      <div className="row">

        <div className="col-lg-6 container">
          <div
            className={`top${activeElement === 'top' ? ' active' : ''}`}
            style={getBackgroundStyle('top')}
            onClick={() => handleElementClick('top')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('top')} alt="File Uploader Icon" />
              </div>
              <div
                className="document-title"
                style={getTitleStyle('top')}
              >
                Testator Passport

              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('top')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`middle${activeElement === 'middle' ? ' active' : ''}`}
            style={getBackgroundStyle('middle')}
            onClick={() => handleElementClick('middle')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('middle')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('middle')}
              >
                Additional Document
              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('middle')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`bottom${activeElement === 'bottom' ? ' active' : ''}`}
            style={getBackgroundStyle('bottom')}
            onClick={() => handleElementClick('bottom')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('bottom')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('bottom')}
              >
                Executor Passport
              </div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={getTickMarkicon('bottom')} alt="Tick Mark" />
            </div>
            <div />
          </div>
        </div>

        <div className="col-lg-6 row-item" {...getRootProps()}>
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={handleAddFileClick}>Add File</button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
        </div>
        {uploadedFiles.length > 0 && (
          <div className="file-list">
            <ul>
              {uploadedFiles.map((file: any, index) => (
                <li key={index}>{file.name}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </main>
  );
}

export default DocumentManager;

```

#react.js #css #javascript

File Upload Feature - ChatGPT Prompt

''' 
 <div className="col-lg-6 row-item">
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={addFileHandler}>Add File</button>
          </div>
        </div>
   '''
 
 Your are a senior react developer.
 
 I want you to implement a functionality to upload files on button click event and drag and drop.
 
 Contrainst:
 
1. function should be implemented on `addFileHandler` event given above.
2. File can also be uploaded by drag and drop into row-item div element.
3. instructions for file upload is given `file-attach-instructions` div element.
4. You can use packages like `react-uploader` to implement this.
5. Finally return the updated version of code. Current code is above for reference.

#react.js #css #javascript

Center div element having 4 child elements - ChatGPT PROMPT

<div className="col-lg-6 row-item">
   <div className="file-upload-arrow">
     <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
   </div>
   <div className="file-upload-text">
     Drag and drop document here to upload
   </div>
   <div className="file-attach-instructions">
     Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
   </div>
   <div className="file-add-button">
     <button>Add File</button>
   </div>
 </div>
 
 
 Consider you are a CSS expert. Above is the code you have to update and make neccessary styling based on below constraints
 
 Constraints:
 
 1. Center the child elements of row-item div element horizonatally & vertically.
 2. Each child element is aligned center.
 3. Update backgournd of Add File button to #023979.
 4. Set border radious of button to 5px and font color to #FFFFFF.
 5. Fibnally return the updated version of code with change in styles.

#react.js #css #javascript

Background change based on active and inactive elements - ChatGPT Prompt

"""
<div className="top">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIcon} alt="File Uploader Icon" />
              </div>
              <div className="document-title">Testator Passport</div>
            </div>
            <div className="tick-icon">
              <img src={TickMarkIconGreen} alt="Tick Mark" />
            </div>
          </div>

          <div className="middle">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
              </div>
              <div className="document-title text-black">Additional Document</div>
            </div>
            <div className="tick-icon">
              <img src={TickMarkIconGrey} alt="Tick Mark" />
            </div>
          </div>

          <div className="bottom">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
              </div>
              <div className="document-title text-black">Executor Passport</div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={TickMarkIconGrey} alt="Tick Mark" />
            </div>
            <div />
         </div>
"""


You are an experienced React Developer.

I want to implement a UI change.

On clicking top, middle or bottom div elements, 
  1. its backgound should be changed to #023979. 
  2. Its document-title element color should be changed to #FFFFFF.
For example. middle div element is clicked, it is active and the backgound changes to #023979.
While background of Inactive elements changes to default color #f4f4f4.
Initially when component loads, top element background is #023979, and bottom 2 element background is #f4f4f4.
you can use react hooks and state if needed. 
Help me to achieve this change by modiyfinh current version of code

I will give styles for reference below.

.container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top, .middle, .bottom {
    display: flex;
    justify-content: space-between;
    background-color: #f4f4f4;
    border-radius: 5px 0px 0px 5px;
}

.top {
    display: flex;
    align-items: center;
    background-color: #023979;
}

.container div {
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.document-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 14px;
    color: #FFFFFF;
}

.left-container {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.file-upload-icon,
.document-title {
    margin-right: 12px;
}

.tick-icon {
    margin-left: auto;
    margin-right: 12px;
}

.document-title {
    flex-grow: 1;
}

.tick-icon-last {
    margin-right: 2px !important;
}

#css

תוויות מרחפות בטופס אלמנטור - סקוליינר

.elementor-form .elementor-field-label {
    position: absolute;
    right: 18px;
    transition-duration: .2s;
}

.elementor-field-label.active-field-label{
    transform: translateY(-20px);
    font-size: 16px !important;
}

.elementor-field{
    box-shadow: none !important;
}

#css

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362)

<ColorlibStepIcon
                            currentIndex={label.stepID - 1}
                            icon={label.stepID}
                            stepNumber={stepNumber}
                            completed={checkCompletedSteps.includes(
                              label.stepID,
                            )}
                            active={activeStep + 1 === label.stepID}
                            data={[]}
                          />

Help me to solve below error:

1. The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362)
(parameter) label: StepData.


Solution:

The error is occurring because the icon prop of the ColorlibStepIcon component is expecting a number, but the label.stepID value is not being converted to a number before being passed as the icon prop.

To fix this error, you can convert the label.stepID value to a number before passing it as the icon prop. Here's an example of how you can do this:


Resolved Code:

<ColorlibStepIcon
  currentIndex={label.stepID - 1}
  icon={Number(label.stepID)}
  stepNumber={stepNumber}
  completed={checkCompletedSteps.includes(label.stepID)}
  active={activeStep + 1 === label.stepID}
  data={[]}
/>

#css

Print PDF Footer

-webkit-print-color-adjust: exact
.t-foot {height: 50px;}
@media print {
  tfoot {display: table-footer-group;}
}

#css

Modal Close Button at top right corner of page.

.modal-close-button {
    border-radius: 50%;
    background-color: #f1f1f1;
    border: none;
    outline: none;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    top: 8px;
    position: absolute;
    right: 16px;
}

#react.js #css #prompts

PROMPT TO CENTER THE MODAL IN OUR PAGE

<Modal show={showModal}>
  <Modal.Header>
    <div className="modal-header-content">
      <div className="modal-header-left">
        <div className="modal-header-title mt-4">Add Substitute</div>
        <div className="modal-header-subtitle">
          List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
        </div>
      </div>
    </div>
    <button
      className="modal-close-button"
      onClick={handleCloseModal}
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </Modal.Header>
  <Modal.Body>
    <AddSubstituteForm onSubmit={handleSubmit} />
  </Modal.Body>
  <Modal.Footer>
    <Button
      variant="primary"
      onClick={handleCloseModal}
    >
      Add Substitute
    </Button>
  </Modal.Footer>
</Modal>




You are a CSS expert.

Constraints:
1. I want to show this modal center of our screen
2. Help me to add styles for element to achieve this.
3. Modal should be at center of whole window.

#css

bde1_style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

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

body {
    font-family: 'Poppins', sans-serif;
}

.top_left {
    width: 50%;
}

.top_left p {
    font-size: 2rem;
    font-weight: 600;
    color: #0094FF;
}

a {
    font-size: 14px;
    color: #0094FF;
    height: 40px;
    border: 1px solid #0094FF;
    border-radius: 8px;

    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

    text-decoration: none;
}

.scan_icon {
    fill: currentColor;
    width: 24px;
    height: 24px;
}

.exit {
    font-size: 16px;
    float: right;
    color: #0094FF;
    height: 40px;
    border-radius: 8px;
    margin-top: 10px;
    pointer-events: auto;
    width: 50%;
}

.exit a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5px;
}

.exit a:link,
.exit a:visited {
    color: #0094FF;
    text-decoration: none;
}

.exit a:hover,
.exit a:active {
    color: #0094FF;
}

.exit a:active .link-text {
    color: #0094FF
}


.exit img {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-right: 1px;
}

.objekt {
    height: 200px;
    width: 35.625rem;
    font-size: 16px;
}

.objekt th,
.objekt td {
    border: 2px solid #0094ff;
    padding: 6px 0px 0px 10px;
    text-align: left;
}

.objekt th {
    background-color: #0094ff;
    border-radius: 8px 0 0 8px;
    color: #ffffff;

    width: 11.25rem;
    font-weight: normal;
}

.objekt td {
    font-weight: normal;
    width: 18.125rem;
    border-radius: 0 8px 8px 0;
}


.meldung {
    height: 100px;
    width: 35.625rem;
    font-size: 16px;
}

.meldung th,
.meldung td {
    font-size: 16px;
    border: 2px solid #0094ff;
    text-align: left;
    padding: 8px;

}

.meldung th {
    background-color: #0094ff;
    color: #ffffff;
    width: 11.25rem;
    font-weight: normal;
    border-radius: 8px 0 0 8px;
}

.meldung td {
    width: 18.125rem;
    font-weight: normal;
    border-radius: 0 8px 8px 0;
}

.fertigmeldungen {
    width: 35.375rem;
    margin-top: 1vw;
    height: 100px;
    border-radius: 0 0 8px 8px;
}

.fertigmeldungen caption {
    font-weight: normal;
    font-size: 16px;
    border-radius: 8px 8px 0 0;
    height: 48px;
    text-align: left;
    background-color: #0094ff;
    color: #ffffff;
    padding-left: 16px;
    padding-top: 12px;
    margin-bottom: 2px;
}

.fertigmeldungen td {
    width: 200px;
    padding: 5px;
    text-align: left;
    color: #222222;
    font-size: 14px;

}

.fertigungsgange {
    float: right;
    height: 420px;
    width: 16.875rem;
    border: 2px solid #0094ff;
    border-radius: 0 0 8px 8px;
}

.fertigungsgange caption {
    font-weight: normal;
    font-size: 16px;
    text-align: left;
    background-color: #0094ff;
    color: #ffffff;
    padding: 10px;
    margin-bottom: 2px;

    border-radius: 8px 8px 0 0;
}

.container {
    padding: 20px 35px
}

.header {
    display: flex;
    width: 100%;
    margin-bottom: 20px
}

.qr_scan {
    width: 16.75rem;
}

#exit-button {
    width: 7.5rem;
    float: right;
}

.container-table {
    width: 100%;
    display: flex;
}
.table-left{
    width: 70%;
}
.table-right{
    width: 30%
}

@media only screen and (max-width: 930px) {
    .container-table{
        display: block;
    }
    .fertigungsgange{
        margin-top: 20px;
        float: none;
    }
}

#javascript #html #css #typescript #react.js

Modal Close Button - Make button Rounded Shape Prompt

<button
   className="modal-close-button"
   onClick={handleCloseModal}
 >
   <span aria-hidden="true">&times;</span>
 </button>
 
 You are a CSS expert
 
 I want you to do following changes in styling.
 
 1. Rounded shape. Apply border radius to 50pc.
 2. Background to "#f1f1f1".
 3. No outer border color.
 3. border of child element span should be 2px solid #494A53.

#javascript #html #css #typescript #react.js

Create a rounded shape for initials_avatar div.

.initials-avatar {
    background-color: #023979;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    width: 38px;
    height: 38px;
}

#css

Border degradados (opcion 2). No admite border-radius.

.box {
  border: 10px solid;
  border-image: linear-gradient(45deg,red,blue) 10;
}

#css

WP_Query POST last

// WP_Query arguments
$args = array(
	'post_type'              => array( 'post' ),
	'post_status'            => array( 'pubblic' ),
 	 'post_per_page' => 6,
	'order'                  => 'DESC',
	'orderby'                => 'date',
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
	while ( $query->have_posts() ) {
		$query->the_post();
		// do something
	}
} else {
	// no posts found
}

// Restore original Post Data
wp_reset_postdata();

#css

Footer bottom widget

© Copyright [year] All Rights Reserved - <a href="/privacy-policy/">Privacy Policy</a> - <a href="/mappa-sito/">Mappa del sito</a> - <a href="https://scintille.net/" target="_blank" rel="noopener">Scintille web agency</a>

#javascript #css

Make Your CSS Dynamic with CSS Custom Properties

Changing the Value of a Custom Property Using JavaScript
I’ve been mentioning throughout this whole article that variables can be updated using JavaScript, so let’s get into that.

Say you have a light theme and want to switch it to a dark theme, assuming you have some CSS like the following:

```css
:root {
  --text-color: black;
  --background-color: white;
}

body {
  color: var(--text-color);
  background: var(--background-color);
}
```

You can update the `--text-color` and `--background-color` custom properties by doing the following:

```js
var bodyStyles = document.body.style;
bodyStyles.setProperty('--text-color', 'white');
bodyStyles.setProperty('--background-color', 'black');
```

#html #css

Leuchtstift (pre)

<span class="leuchtstift">

#css

CSS Snippets

- aspect-ratio (to make squares evenly.)

- position: fixed;   inset: 0 0 0 20%; (top,right,bottom,left)

- background: hsl( var(--clr-white) / 0.05);  backdrop-filter: blur(1.5rem); (make frosted glass look)

- margin-block

- aria-hidden=“true” for screen readers

Aria-selected styles

HTML
          <div style="margin-bottom: 50vh">
                        <!-- Tabs -->
                        <div class="tab-list underline-indicators flex">
                            <button aria-selected="true" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Moon</button>
                            <button aria-selected="false" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Mars</button>
                            <button aria-selected="false" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Europa</button>
                        </div>
                        
CSS
.underline-indicators > .active,
.underline-indicators > [aria-selected="true"] {
    color: hsl( var(--clr-white) / 1);
    border-color: hsl( var(--clr-white) / 1);
}

GRID
Responsive(?) Grid columns:      .grid-container {
        text-align: left;
        column-gap: var(--container-gap, 2rem);
        grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(2rem, 1fr);
    }

- .grid-container * {  max-width: 45ch;}

- place-items/place-content (grid property)

#css

Flexbox child property: ORDER

.item {
  order: 5; /* default is 0 */
}

#css #sass #react.js

Setting up jest & react-testing-library with React TypeScript Vite project

//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"
  }
}

#css #javascript

tailwind config

module.exports = {
  content: ['./src/**/*.{html,js,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primaryColor: '#E17446',
        primaryColorHover: '#db5b24',
        primaryText: '#111130',
        primaryBlue: '#2b5a9c',
        textLight: '#9e9ebc',
        Gray: '#8f9bad',
        f6f9fd: '#f6f9fd',
        dddddd: '#dddddd',
        inputborder: '#e8e8e8',
        borderColor: '#ebebeb',
        green: '#008f02',
        lightGreen: '#e2f2e2',
        orange: '#f05c00',
        orangeLight: '#fcede4',
        redLight: '#fde5e5',
        red: '#f00000',
        border1: '#ebebeb',

        themecolor: '#E17446',
        hoverthemecolor: '#db5b24',
      },
      backgroundImage: {
        close: 'url(/public/images/colse.png)',
        trendBG1: 'url(../../public/images/blog-img.jpg)',
      },
      boxShadow: {
        inputFocus:
          'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px',
        headerFix: 'rgba(0, 0, 0, 0.1) 0px 10px 50px',
        sibarToggle: '-4px 5px 5px #0000000d',
        sibarToggleRTL: '5px -4px 6px #0000000d',
      },
      spacing: {
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '18px': '18px',
        '20px': '20px',
        '25px': '25px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        '106px': '106px',
        '120px': '120px',
        unset: 'unset',
      },
      fontFamily: {
        charter: 'var(--charterFont)',
        sohne: 'var(--sohneFont)',
        poppins: 'var(--poppins)',
        gloock: 'var(--gloock)',
      },
      fontSize: {
        0: '0',
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '16px': '16px',
        '17px': '17px',
        '20px': '20px',
        '22px': '22px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
      },
      lineHeight: {
        1: '1',
        '5px': '5px',
        '10x': '10px',
        '15px': '15px',
        '19px': '19px',
        '22px': '22px',
        '20px': '20px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '32px': '32px',
        '35px': '35px',
        '36px': '36px',
        '40px': '40px',
        '42px': '42px',
        '46px': '46px',
        '45px': '45px',
        '50px': '50px',
        '52px': '52px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
        Normal: 'normal',
      },
      zIndex: {
        1: '9',
        2: '99',
        3: '999',
        4: '9999',
        5: '99999',
        6: '999999',
      },
      borderRadius: {
        '5px': '5px',
        '10px': '10px',
        '15px': '15px',
      },
      screens: {
        768: '768px',
        992: '992px',
        1200: '1200px',
        1300: '1300px',
        1400: '1400px',
        1500: '1500px',
        1600: '1600px',
        1700: '1700px',
      },
      animation: {
        slow: 'wiggle 2s linear',
      },
      keyframes: {
        wiggle: {
          '0%': { transform: 'transform(164.25px)' },
          '100%': { transform: 'rotate(0px)' },
        },
      },
    },
  },
}

#css #sass #react.js

Navbar Component

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;

#css

Pink Creamier

.modern-gradient {
  background-image: 
    linear-gradient(
      360deg in oklab, 
      oklch(92% 0.05 340) 27% 27%, oklch(90% 0.03 300) 100%
    )
  ;
}

.classic-gradient {
  background-image: 
    linear-gradient(360deg, #fdd8ef 27% 27%, #e1daf0 100%)
  ;
}

#css

Pink (Modern & Classic)

.modern-gradient {
  background-image: 
    linear-gradient(
      326deg in oklab, 
      oklch(70% 0.20 340) 27% 27%, oklch(90% 0.03 300) 100%
    )
  ;
}

.classic-gradient {
  background-image: 
    linear-gradient(326deg, #eb63c5 27% 27%, #e1daf0 100%)
  ;
}

#css #sass

Sass Example of Maps & Loops

// 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);
    }
  }
}

#css

html - Hide scroll bar, but while still being able to scroll - Stack Overflow

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

#css #ui #links

Styling Links with Real Underlines

a {
  text-decoration-color: #EA215A;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}

#html #css

Home-page design

<!--This is html code. Plz. use it as html file. -->
 
<!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <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=Roboto+Slab:wght@600;900&display=swap" rel="stylesheet"> -->
    <title>Upgrader Boy</title>
    <link rel="stylesheet" href="web.css">
</head>
 
<body>
    <header>
        <section class="navsection">
            <div class="logo">
                <h1>Upgrader Boy</h1>
            </div>
            <nav>
                <a href="https://upgraderboy.blogspot.com/" target="_blank">Home</a>
                <a href="https://www.youtube.com/channel/UCEJnv8TaSl0i1nUMm-fGBnA?sub_confirmation=1" target="_blank">Youtube</a>
                <a href="#" target="_blank">Social Media</a>
                <a href="#" target="_blank">Services</a>
                <a href="https://upgraderboy.blogspot.com/p/about-us.html" target="_blank">About us</a>
                <a href="https://upgraderboy.blogspot.com/p/contact-us.html" target="_blank">Contact us</a>
            </nav>
        </section>
        <main>
            <div class="leftside">
                <h3>Hello</h3>
                <h1>I am Upgrader</h1>
                <h2>Web developer, Youtuber and CEO of Upgrader Boy</h2>
                <a href="#" class="button1">Website</a>
                <a href="#" class="button2">Youtube</a>
            </div>
            <div class="rightside">
                <img src="/Image/ezgif.com-gif-maker.gif" alt="Svg image by Upgrader Boy">
            </div>
        </main>
 
    </header>
</body>
 
</html>
 
<!-- This is css code. Plz. use it as css file. -->
  
*{
    margin: 0px;
    padding: 0px;
    /* @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap'); */
    /* font-family: 'Roboto Slab', serif; */
}
 
header{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left,#ffff 85%, #c3f5ff 20%);
}
 
.navsection{
    width: 100%;
    height: 20vh;
    display: flex;
    justify-content: space-around;
    background-image: linear-gradient(to top, #fff 80%, #c3f5ff 20%);
    align-items: center;
}
 
.logo{
    width: 40%;
    color: #fff;
    background-image: linear-gradient(#8d98e3 40%, #854fee 60%);
    padding-left: 100px;
    box-sizing: border-box;
}
 
.logo h1{
    text-transform: uppercase;
    font-size: 1.6rem;
    animation: aagepiche 1s linear infinite;
    animation-direction: alternate;
}
 
@keyframes aagepiche{
    from{padding-left: 40px;}
    to {padding-right: 40px;}
}
 
nav{
    width: 60%;
    display: flex;
    justify-content: space-around;
}
 
nav a{
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    font-weight: 900;
    font-size: 17px;
    position: relative;
}
 
nav a:first-child{
    color: #4458dc;
}
 
nav a:before{
    content: "";
    position: absolute;
    top: 110%;
    left: 0;
    height: 2px;
    width: 0;
    border-bottom: 5px solid #4458dc;
    transition: 0.5s;
}
 
nav a:hover:before{
    width: 100%;
}
 
main{
    height: 80vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
.rightside{
    border-radius: 30% 70% 53% 47% / 30% 30% 70% 70%;
    background-color: #c8fbff;
}
 
.rightside img{
    max-width: 500px;
    height: 80%;
}
 
.leftside{
    color: #000;
    text-transform: uppercase;
}
 
.leftside h3{
    font-size: 40px;
    margin-bottom: 20px;
    position: relative;
}
 
.leftside h3:after{
    content: "";
    width: 450px;
    height: 3px;
    position: absolute;
    top: 43%;
    left: 23.4%;
    background-color: #000;
}
 
.leftside h1{
    margin-top: 20px;
    font-size: 70px;
    margin-bottom: 25px;
}
 
.leftside h2{
    margin-bottom: 35px;
    font-weight: 500;
    word-spacing: 4px;
}
 
.leftside .button1{
    color: #fff;
    letter-spacing: 0;
    background-image: linear-gradient(to right, #4458dc 0%, #854fee 100%);
    border: double 2px transparent;
    box-shadow: 0 10px 30px rgba(118, 85, 225, 3);
    /* radial-gradient(circle at top left,#4458dc,#854fee); */
}
 
.leftside .button2{
    border: 2px solid #4458dc;
    color: #222;
    background-color: #fff;
    box-shadow: none;
}
 
.leftside .button1 , .button2{
    display: inline-block;
    margin-right: 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    text-align: center;
    padding: 12px 25px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 5px;
}
 
.leftside .button1:hover{
    border: 2px solid #4458dc;
    color: #222;
    box-shadow: none;
    background-color: #fff;
    background-image: none;
}

#css

Pure CSS Tooltips - CodeinWP

a[data-tooltip]:link, a[data-tooltip]:visited {
  position: relative;
  text-decoration: none;
  border-bottom: solid 1px;
}

a[data-tooltip]:before {
  content: "";
  position: absolute;
  border-top: 1em solid #0090ff;
  border-left: 1.5em solid transparent;
  border-right: 1.5em solid transparent;
  display: none;
  top: -1em;
}

a[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  color: white;
  top: -2.5em;
  left: -1em;
  background: #0090ff;
  padding: .25em .75em;
  border-radius: .5em;
  white-space: nowrap;
  display: none;
}

a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
  display: inline;
}

Code language: CSS (css)

##php ##wordpress #css #html

Custom Animation For Sections/Columns In Elementor

.scale {
    transition: all 0.3s ease-in-out;
}

.scale:hover {
    transform: scale(1.1);
}

@media only screen and (max-width: 767px) {
    .scale:hover {
        transform: none;
    }
}


/ rotate /

.rotate {
    transition: all 0.3s ease-in-out;
}

.rotate:hover {
    transform: rotate(-5deg);
}

@media only screen and (max-width: 767px) {
    .rotate:hover {
        transform: none;
    }
}


/ position /

.position {
    transition: all 0.3s ease-in-out;
}

.position:hover {
    transform: translate(0, -100px);
}

@media only screen and (max-width: 767px) {
    .position:hover {
        transform: none;
    }
}


/ opacity /

.opacity {
    transition: all 0.3s ease-in-out;
    opacity: 0.5;
}

.opacity:hover {
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    .opacity:hover {
        transform: none;
    }
}


/ jiggle /

.jiggle {
    transition: all 0.3s cubic-bezier(0.475, 0.985, 0.12, 1.975);
}

.jiggle:hover {
    transform: scale(1.1);
}

@media only screen and (max-width: 767px) {
    .jiggle:hover {
        transform: none;
    }
}

#javascript #html #css

JS Mouse Move Background

<div id="header"></div>
<style>
    #header {
    	height: 200px;
        background-image: url('https://i.postimg.cc/BbRm96cn/daniel-mirlea-u5-Qzs-Kvu7-YA-unsplash.jpg');
    }
</style>

<script>
    document.addEventListener('mousemove', function (event) {
      if (window.event) { // IE fix
          event = window.event;
      }
    
      // Grab the mouse's X-position.
      var mousex = event.clientX;
      var mousey = event.clientY;
      var header = document.getElementById('header');
      header.style.backgroundPosition = '-' + mousex/3 + 'px -' + mousey/2 + 'px';
    }, false);
    
</script>

#css

A Modern CSS Reset

/* 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;
  }
}

#javascript #css

Changer la couleur lors de la sélection d'un élément

p::selection {
  color : #000;
  background-color : #2CD9FF;
}

#css #media #breakpoints

How to use CSS Breakpoints & Media Query Breakpoints | BrowserStack

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

#css

Flexbox item wrap to new line

// If you look at [this great answer](https://stackoverflow.com/a/29733127/1548895) you'll notice that the only cross-browser way (without 2 line break limit) is inserting `100%`\-width empty blocks ("line-breaks"). So for similar markup this will look like

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.line-break {
  width: 100%;
}

#css

Centering images/elements

// Margins - For centering elements with margins IF NOT INSIDE A DEV ESP WITH BG STYLING
// Vertically center elements via margins
.vcenter-margin {
   display: block;
   margin-top: auto;
   margin-bottom: auto;
}


// Horizontally center elements via margins
// NOTE: if using Foundation Sites, use "float-center".  This is should be used for @mixin only
.hcenter-margin {
   display: block;
   margin-left: auto;
   margin-right: auto;
}



// Padding - For centering elements with paddings IF INSIDE A DIV
// Vertically center elements with paddings IF INSIDE A DIV
$value: 1em;    // example value
.vcenter-padding {
   height: $value;
   padding-top: calc($value/2);
   padding-bottom: calc($value/2);

   // .clearfix hack to keep elements inside div or else they will float
   content: "";
   clear: both;
   display: table;
}


// Horizontally coming soon

// Horizontally center group of elements
$gap-value: 1.5em;
.hcenter-group {
  display: flex;
  justify-content: center;
  gap: $gap-value;
}

#css

Cropping thumbnails

.round {
    object-fit: cover;          // prevent image from stretching
    object-position: 0% 25%;    // move the crop around, [left/right] [up/down]
    aspect-ratio: 1/1;          // crops to a square
    border-radius: 50%;         // round corners
    width: 17em;                // size of image
}

#css

General Type CSS

/* General Type CSS - Starts*/

#footer .menu a {
    font-size: 16px;
}

.single .standard-content strong,
.avia_textblock b,
.avia_textblock strong {
    color: #333;
}

span.post-meta-infos,
.error404 .title_container,
.search .title_container,
.archive .title_container,
.single .title_container {
    display: none !important;
}

/* General Type CSS - Ends*/

#css #squarespace

Changes The "Continue Shopping" Text in Cart (Squarespace)

[aria-label="Continue Shopping"] {
  color: transparent !important;
  position: relative;
}

[aria-label="Continue Shopping"]:after {
  color: #000;
  content: 'Shop';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  padding-left: 0%;
}

#css

Prettier HTML mess up issue

The solution I found is to add this to your settings.json file to tell VS Code to use the default HTML formatter instead of Prettier:

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
}

#typography #css #line-height

Line-height calculator

https://www.thegoodlineheight.com

#css #html

Auto:

<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: auto;
   }
</style>

#css #html

Scroll:

<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: scroll;
   }
</style>

#css #html

Hidden:

<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: hidden;
   }
</style>

#css #html

Visible

<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
   }
</style>

#html #css #button

Isometric-ish Button

<div id="hs_cos_wrapper_widget_1606345913489" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><div class="b-columns b-columns--columns-left b-columns--no-spacing">
    <div class="b-columns__container scheme--darkv2">
        
        <div class="b-columns__columns" data-cols="3">
            
                <div class="b-columns__column">
                    <div class="h-wysiwyg-html">
                        <h6>It's out now</h6>
<h1 style="margin-top: 0;">All new Qt 6</h1>
<a href="/download?hsLang=en" class="c-btn" rel="noopener" target="_blank"><span>Download now</span></a> &nbsp; &nbsp; <a href="https://www.youtube.com/watch?v=TodEc77i4t4" class="c-btn--small" rel="noopener" target="_blank">Watch video</a>
                    </div>
                </div>
            
        </div>
    </div>
</div></div>

#css #layout

visibility: hidden vs display: none

/* Use */ 
visibility: hidden 
/* when you want to hide an element from view but still want it to occupy space on the page. This can be useful when you want to reveal the element later or when you want to maintain the layout of the page. */

/* Use */
display: none 
/* when you want to completely remove an element from the page and don’t want it to occupy any space. This can be useful when you want to completely hide an element and don’t plan to reveal it later. */

#css

Adding a CSS Reset | Create React App

@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */

#css

Mobile-first breakpoints

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }

@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

#css

Make element sit at the bottom of a container

#container {
    position: relative;
}
#inner_item {
    position: absolute;
    bottom: 0;
}

#css

Case File SOQL

SELECT Id, Name, CreatedById, CreatedDate, CEC_Created_By__c, LastModifiedDate, LastModifiedById, cg__Case__c, cg__Content_Type__c, cg__Description__c, cg__File_Name__c, cg__File_Size__c, cg__File_Size_in_Bytes__c, CEC_SendNotification__c, cg__Sync_Id__c, cg__Private__c, cg__WIP__c, cg__Version_Id__c, CEC_Upload_Complete_Timestamp__c, CEC_Event_Notification_Record__c FROM cg__CaseFile__c ORDER BY SystemModStamp DESC LIMIT 10

#scss #css

scss color

/*=========VARIABLES DE COLOR============= - frios - calidos - escala de gris */

$aqua: #7fdbff;
$blue: #0074d9;
$navy: #001f3f;
$teal: #39cccc;
$green: #2ecc40;
$olive: #3d9970;
$lime: #01ff70;

$yellow: #ffdc00;
$orange: #ff851b;
$red: #ff4136;
$fuchsia: #f012be;
$purple: #b10dc9;
$maroon: #85144b;

$white: #ffffff;
$silver: #dddddd;
$gray: #aaaaaa;
$black: #111111;
/*=========FIN VARIABLES DE COLOR============= - frios - calidos - escala de gris */

#css

minireset.css

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select {
  margin: 0;
}

html {
  box-sizing: border-box;
}

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

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

#css

Modern Normalize

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

/**
Use a more readable tab size (opinionated).
*/

html {
	-moz-tab-size: 4;
	tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
	font-family:
		system-ui,
		-apple-system, /* Firefox supports this but not yet `system-ui` */
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
	height: 0; /* 1 */
	color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
	text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	text-indent: 0; /* 1 */
	border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
	text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
	box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}

#scss #css

sunbird css





// variables

    $active-brightness: 0.;
5
    $border-radius: 5px;

    $box-shadow: 2px 2px px;

    $color: #C40861;
8
    $color-accent: #8bee;

    $color-accent-hover: darken($color-accent, 10%);
10
    $color-bg: #fff;
11
    $color-bg-secondary: #e9e9e9; // border color

    $color-link: $color;

    $color-secondary: #663399;

    $color-secondary-accent: #9de90b;

    $color-shadow: #f4f4f4;

    $color-table: $color;

    $color-text: #67737a;

    $color-text-secondary: #353b3f;


20
.demo{padding: 1rem;}

#scss #css

SAKURA

$breakpoints: (

  xs: 0,

  sm: px,

  md: 76px,
5
  lg: 92px,
6
  xl: 00px
7
) !default;
8

9
// Viewports

$viewports: (

  // 'null' disable the viewport on a breakpoint
12
  sm: 510px,

  md: 700px,

  lg: 9px,

  xl: 1130px

) !default;



$color-blossom: #1d7484;

$color-fade: #982c61;
20


$color-bg: #f9f9f9;

#scss #css

Simple flexbox Grid System

// sizes

$columns:  !default;

$maxWidth: 1rem !default;

$gutter: 1rem !default;



*,

*::after,

*::before {

  box-sizing: box;

}


12
.demo {

  box-sizing: border-box;

  background-color: rgba(red, %);
15
  outline: 1px solid crimson;

  padding: 1rem;

  display: grid;

  place-content: center;

  color: red;
20
}



.container {

#css #scss

Lightweight 12 column grid system

// solve css min problem ...



$breakpoints: (

  xs: 0,

  sm: 40px,
6
  md: 24px,

  lg: 00px,

  xl: 40px

);
10


$gap: (
12
  xs: 0,

  sm: 8px,
14
  md: px,

  lg: 24px,
16
  xl: 28px

) !default;



.wrapper {

  width: min(100% - 2rem, 1280px);

  margin-inline: auto;

}

#scss #css

MICROCSS

// Breakpoints

// 'null' disable the breakpoint

$breakpoints: (

  xs: 0,

  sm: 5px,
6
  md: 76px,
7
  lg: 92px,
8
  xl: 00px
9
) !default;



$space-s-l: clamp(1rem, calc(-0.rem + 3.vw), 2.25rem);
12
$space-xl-2xl: clamp(3rem, calc(1.62rem + 3.85vw), 4.5rem);



$grid-max-width: 69.75rem;
15
$grid-gutter: var($space-s-l, clamp(1rem, calc(-0.33rem + 3.7vw), 2.25rem));

$grid-columns: 12;



$grid-12: repeat(12, minmax(0, 1fr));

$grid-page-width: map-get($breakpoints, "xl");

$grid-page-gutter: 5vw;
21
$grid-page-main: 2 / 3;

#scss #css #framework

Lit micro framework

/* Media Queries */

$small: screen and (min-width: 0em);

$medium: screen and (min-width: 40em) and (max-width: 4em);
4
$large: screen and (min-width: em);
5

6
@mixin for-size($size) {
7
  @if $size == small {

    @media screen and (min-width: 40rem) { @content; }

  } @else if $size == medium {

    @media screen and (min-width: 64em) { @content; }

  } @else if $size == large {

    @media screen and (min-width: 75em) { @content; }

  }  

}



/*

// usage

.my-box {

  padding: 10px;

#css

navbar only css

/* Import font */

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");



/* General styles */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  font-family: "Poppins", sans-serif;

  background-color: #090909;

  padding: 50px;

}

/* General styles end */

.container {

  max-width: 1280px;

  margin: 0 auto;

  padding: 15px;

}

#javascript #html #css

Form Validate

<!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>
        body {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;
            background-color: aqua;
            justify-content: center;
            /* text-align: center; */
            height: 100vh;
            background: url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1748&q=80);
            background-position: center;
            background-size: cover;
        
        }
        
        h1 {
            text-align: center;
        }
        
        #form {
            background-color: #c7ab9d;
            border: 2px solid rgb(4, 0, 255);
            border-radius: 10px;
            width: 400px;
            height: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        
        }
        
        
        
        h2 {
            font-size: 30px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 5px;
        }
        
        input {
            height: 30px;
            width: 250px;
            border-radius: 5px;
            padding: 10px;
            margin: 5px;
            /* padding: 10px; */
        }
        
        input[type='submit'] {
            background-color: purple;
            text-align: center;
            align-content: center;
            color: white;
            height: 50px;
            font-size: 30px;
            width: 200px;
            padding-bottom: 20px;
            border: 0px;
        }
        
        .error {
            margin: 10px;
            color: blue;
        }
    </style>
</head>

<body>
    <h1>Form Validation</h1>
    <div id="form">
        <h2>Login Form</h2>
        <form action="" onsubmit="return validateform()">
            <input type="text" class="form" name="" id="username" placeholder="Enter Username">
            <br>
            <span id="usererror" class="error"></span>
            <br>
            <input type="password" class="form" id="password" placeholder="Enter Password">
            <br>
            <span class="error" id="passerror"></span>
            <br>
            <!-- <input type="submit" value="Pls Submit"> -->
            <button type="submit">Pls Submit</button>
        </form>
    </div>
    <script>
        let user = document.getElementById('username');
        let pass = document.getElementById('password');
        let condition1 = 0;
        let condition2 = 0;
        
        flag
        function validateform() {
        
            if (user.value == '') {
                document.getElementById('usererror').innerHTML = "User Name Blank";
                condition1 = 0;
            } else if (user.value.length < 5) {
                document.getElementById('usererror').innerHTML = "Pls Enter more than 4 Charactre"
                condition1 = 0;
        
            } else {
                document.getElementById('usererror').innerHTML = ""
                document.getElementById('usererror').style.color = "Green";
                condition1 = 1;
        
            }
            if (pass.value == '') {
                document.getElementById('passerror').innerHTML = "Password Cannot Blank";
                condition2 = 0;
        
            }
            else if (pass.value.length < 5) {
                document.getElementById('passerror').innerHTML = "Pls Enter more than 4 Charactre";
                condition2 = 0;
        
            } else {
                document.getElementById('passerror').innerHTML = "";
                document.getElementById('passerror').style.color = "Green";
                condition2 = 1;
        
            }
            if (condition1 == 1 & condition2 == 1) {
                return true;
            } else {
                return false;
            }
        }
        
    </script>
</body>

</html>

#css

Belief.css

/* Belief Section */

.beliefCardsContainer{
  display: flex;
  justify-content: space-between;
  overflow: auto;
  height: auto;
  margin-top: 12px;
}

.beliefCard{
  display: flex;
  flex-direction: column;
  cursor: pointer;
  width: 377.5px;
  /* height: 396px; */
  gap: 12px;
}

.beliefCard img{
  height: 280px !important;
  object-fit: cover;
}

.beliefCard img:hover{
  transform: scale(1.02); 
}

.beliefCard h1{
  color: #000;
  font-size: 24px;
}

.beliefCard p{
  font-size: 16px;
  color: rgb(73, 76, 77);
}

#html #css #javascript

VideoPicker

<!DOCTYPE html>
<html>
  <head>
	<title>Video Picker</title>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>
	<h1>Video Picker</h1>
	<form>
	  <input type="text" id="videoUrl" placeholder="Enter video URL...">
	  <button type="button" id="addVideoBtn">Add Video</button>
	</form>
	<hr>
	
	<h3 id="videoCount"></h3>

	
	<div id="videoList"></div>
	
	<script src="script.js">
	alert("If you want you can modify the UI of this project, to adapt on your needs\n" + "\nhave a great and blessed day 🤝🏼😊");

alert("Enter as many YouTube video links as you want to, and see the magic")


window.onload = function() {
const videoList = document.getElementById('videoList');
const addVideoBtn = document.getElementById('addVideoBtn');

// Load videos from LocalStorage on page load
loadVideos();

addVideoBtn.addEventListener('click', addVideo);

function addVideo() {
  const videoUrl = document.getElementById('videoUrl').value;
  const videoId = getVideoId(videoUrl);

  if (videoId) {
	const videoItem = createVideoItem(videoId);
	videoList.appendChild(videoItem);
	
	// Save video to LocalStorage
	saveVideo(videoId);
  }

  document.getElementById('videoUrl').value = '';
}

function getVideoId(url) {
  const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/;
  const match = url.match(regex);

  if (match && match[1]) {
	return match[1];
  } else {
	alert('Invalid video URL');
	return null;
  }
}

function createVideoItem(videoId) {
  const videoItem = document.createElement('div');
  videoItem.className = 'video-item';
  const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
  const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
  videoItem.innerHTML = `
	<a href="${videoUrl}" target="_blank">
	  <img src="${thumbnailUrl}" alt="Video thumbnail">
	  <h2>${videoId}</h2>
	</a>
	<button class="remove-video-btn">Remove</button>
  `;

  // Add event listener to the 'Remove' button
  const removeBtn = videoItem.querySelector('.remove-video-btn');

  removeBtn.addEventListener('click', () => {
	removeVideo(videoId);
	videoItem.remove();
  });

  return videoItem;
}

function removeVideo(videoId) {
  let videos = [];
  if (localStorage.getItem('videos')) {
	videos = JSON.parse(localStorage.getItem('videos'));
  }
  const index = videos.indexOf(videoId);
  if (index !== -1) {
	// Display confirmation dialog box
	const confirmed = confirm("Are you sure you want to remove this video? 😥");
	if (confirmed) {
	  // Remove video from list
	  videos.splice(index, 1);
	  localStorage.setItem('videos', JSON.stringify(videos));
	  const videoItem = document.getElementById(videoId);
	  videoList.removeChild(videoItem);
	}
  }
}


function saveVideo(videoId) {
  let videos = [];
  if (localStorage.getItem('videos')) {
	videos = JSON.parse(localStorage.getItem('videos'));
  }
  if (!videos.includes(videoId)) {
	videos.push(videoId);
	localStorage.setItem('videos', JSON.stringify(videos));
  }
}

function loadVideos() {
  if (localStorage.getItem('videos')) {
	const videos = JSON.parse(localStorage.getItem('videos'));
	const videoCount = document.getElementById('videoCount');
	videoCount.textContent = `You have ${videos.length} videos in the list.`;
	videos.forEach(videoId => {
	  const videoItem = createVideoItem(videoId);
	  videoList.appendChild(videoItem);
	});
  }
}

}
/*
The saveVideo() function takes the video ID and saves it to an array in LocalStorage. The loadVideos() function is called on page load and loads the videos from LocalStorage, creating a videoItem for each one and appending it to the videoList. This way, the user's added videos will persist even if they close and reopen the page.*/
	
	</script>
  </body>
</html>

#css

divi buttons inline side by side

/* inline buttons -> add class at row */
.pa-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}

#html #css

nav bar

<header>
  <nav id="navbar">
      <h1 class="logo">
          <span class="text-primary">
              <i class="fas fa-book-open"></i>Edge
          </span>Ledger
      </h1>
      <ul>
          <li><a href="#home">Home</li>
          <li><a href="#about">About</li>
      </ul>
  <nav>
<header>

#css

HTML-CSS: Hover underline animation - w3resource

<style> 
.w3rcontainer{
   border: 1px solid 
#cccfdb;
   border-radius: 2px;
} 
.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: 
#0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: 
#0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
</style>

#css

TailWind

<script src="https://cdn.tailwindcss.com"></script>

#css

Bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

#css

Simple Responsive Table in CSS

https://codepen.io/AllThingsSmitty/pen/MyqmdM

#css

Média Querry

    // 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;
       }
    }

#css

Utility Classes

.bg-col-1{background-color: var(--color_1);}
.bg-col-2{background-color: var(--color_2);}
.bg-col-3{background-color: var(--color_3);}
.bg-col-4{background-color: var(--color_4);}
.txt-col-1{color: var(--color_1);}
.txt-col-2{color: var(--color_2);}
.txt-col-3{color: var(--color_3);}
.txt-col-4{color: var(--color_4);}
.font-1{font-size: 0.8rem;}
.font-2{font-size: 1.2rem;}
.font-3{font-size: 1.6rem;}
.font-4{font-size: 2rem;}
.font-5{font-size: 3rem;}
.thin{font-weight: 300;}
.normal{font-weight: 500;}
.bold {font-weight: 700;}
.bolder{font-weight: 900;}
.flex {display: flex;}
.row{flex-direction:row;}
.column{flex-direction:column;}
.center{align-items: center;}
.middle{justify-content: center;}
.between {justify-content: space-between;}
.around{justify-content: space-around;}
.gap-1{gap: 1rem;}
.gap-2{gap: 2rem;}
.gap-3{gap: 3rem;}
.block{display: block;}
.grid{display: grid;
      place-items: center;}
.absolute{position: absolute;}
.fixed{position: fixed;}
.relative{position: relative;}
.sticky {position: sticky;}
.top-0 {top: 0;}
.top-50 {top: 50%;}
.left-0{left: 0;}
.left-50{left: 50%;}
.right-0{right: 0;}
.bottom-0{bottom: 0;}
.translate {transform: translate(-50%,-50%);}
.translateX{transform: translateX(-50%);}
.translateY{transform: translateY(-50%);}
.paddingX{padding-inline:var(--padX)}
.paddingY{padding-block:var(--padY)}
.width-100{width: 100%;}
.width-50{width: 50%;}
.width-25{width: 25%;}
.txt-left{text-align: left;}
.txt-center{text-align: center;}
.txt-right{text-align: right;}
.txt-justify{text-align: justify;}
.border{border: none;}
.display{display: none;}
.outline{outline: none;}
.overflow{overflow: hidden;}
.contain{object-fit: contain;}
.cover{object-fit: cover;}
.pointer{cursor: pointer;}
.ratio{aspect-ratio: 1;}
.rounded-5{border-radius:5px;}
.rounded-10{border-radius:10px;}
.rounded-30{border-radius:30px;}
.circle{border-radius:50%;}

#css

Inner Submenu - Mobile

.inner-submenu {
    left: auto;
    max-width: 1920px;
}

@media (max-width: 768px) {
    .inner-submenu li a {
        border: none !important;
        padding: 0 !important;
    }
    
    .inner-submenu li .avia-menu-text {
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        display: inline-block;
        padding: 6px 15px;
    }
    
    .inner-submenu li {
        padding: 0 !important;
    }
    
    .inner-submenu ul {
        margin: 15px 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }
}

#html #css

install webkit ui

<link rel="stylesheet" href="https://webkit-ui.netlify.app/style.css">
 
   /* head */ 
   <head>
    <link rel="stylesheet" href="https://webkit-ui.netlify.app/style.css">
  </head>

#html #css

Toast

/* left snack bar */
<div class="flex justify-around items-center pd-3 position-fixed bottom-5 left-5  rounded-s bg-green-8 text-color-grey-0 gap-1">
      <span>Can't send photo.Retry in 5 second.</span>
     <button class="bg-none text-color-grey-0 text-s" id="toast_left">
             <i class="fas fa-times-circle"></i>
     </button>
</div>

/* center sanckbar*/  
<div class="flex justify-around items-center pd-3 gap-1 position-fixed bottom-5 left-40  rounded-s bg-green-8 text-color-grey-0 ">
      <span>Can't send photo.Retry in 5 second</span>
      <button class="bg-none text-color-grey-0 text-s" id="toast_center">
              <i class="fas fa-times-circle"></i>
      </button>
</div>
/* right snackbar*/
<div class="flex justify-around items-center pd-3 position-fixed rounded-s  bottom-5 right-5 bg-green-8 text-color-grey-0 gap-1">
       <span>Can't send photo.Retry in 5 second</span>
       <button class="bg-none text-color-grey-0 text-s" id="right_center">
             <i class="fas fa-times-circle"></i>
       </button>
</div>

#css

Border auch auf <tr> anwenden

table { 
    border-collapse: collapse; 
}

#css

BrandChamp CSS

/*
*	Menu Icons and Description
*	Please change the variable value below to update 
*	icon and description on the submenu	
*/
// Icons
$analytics:					'/wp-content/uploads/2022/11/solutions-analytics-reporting.svg';
$consumer: 					'/wp-content/uploads/2022/11/solutions-consumer-generated-content.svg';
$content: 					'/wp-content/uploads/2022/11/solutions-content-management.svg';
$segmenting: 				'/wp-content/uploads/2022/11/solutions-segmenting-personalization.svg';
$relationship: 				'/wp-content/uploads/2022/11/solutions-relationship-management.svg';  
$rewards: 					'/wp-content/uploads/2022/11/solutions-reward.svg';
$referral: 					'/wp-content/uploads/2022/11/solutions-referral-tracking.svg';
$payments: 					'/wp-content/uploads/2022/11/solutions-payments.svg';

$affiliate:					'/wp-content/uploads/2022/11/platform-affiliate-program.svg';
$ambassador: 				'/wp-content/uploads/2022/11/platform-ambassador-program.svg';
$creator: 					'/wp-content/uploads/2022/11/platform-creator-management.svg';
$customer: 					'/wp-content/uploads/2022/11/platform-customer-advocacy.svg';
$influencer: 				'/wp-content/uploads/2022/11/platform-influencer-marketing.svg';  
$refprograms: 				'/wp-content/uploads/2022/11/platform-referral-program.svg';
$loyalty: 					'/wp-content/uploads/2022/11/platform-loyalty-program.svg';

$blog:						'/wp-content/uploads/2022/11/resources-blog.svg';
$success: 					'/wp-content/uploads/2022/11/resources-success-stories.svg';
$guides: 					'/wp-content/uploads/2022/11/resources-guides-ebook.svg';
$videos: 					'/wp-content/uploads/2022/11/resources-videos.svg';
$webinars: 					'/wp-content/uploads/2022/11/resources-webinars.svg';  
$comparison: 				'/wp-content/uploads/2022/11/resources-comparison.svg';

// Description
$analytics-desc:			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$consumer-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$content-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';
$segmenting-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$relationship-desc: 		'Lorem ipsum dolor sit amet consetetur sadipscing.';  
$rewards-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';
$referral-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$payments-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';

$affiliate-desc:			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$ambassador-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$creator-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';
$customer-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$influencer-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';  
$refprograms-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$loyalty-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';

$blog-desc:					'Discover practice by our blog.';
$success-desc: 				'Get inspired by our success stories.';
$guides-desc: 				'Enrich knowledge with our guides & e-books.';
$videos-desc: 				'Quality courses from our videos.';
$webinars-desc: 			'Get in touch with our webinars.';  
$comparison-desc: 			'Turn into high-performance sales funnel.';


// Declare Sub-menu Icons
$menu-image: (
	"analytics": 				$analytics, 
	"consumer": 				$consumer, 
	"content": 					$content, 
	"segmenting": 				$segmenting, 
	"relationship": 			$relationship,  
	"rewards": 					$rewards,
	"referral": 				$referral,
	"payments": 				$payments,
	"affiliate":				$affiliate,					
	"ambassador":				$ambassador, 				
	"creator":					$creator, 					
	"customer":					$customer, 					
	"influencer":				$influencer, 				 
	"refprograms":				$refprograms, 				
	"loyalty":					$loyalty,
	"blog":						$blog,	
	"success":					$success, 	
	"guides":					$guides, 	
	"videos":					$videos, 	
	"webinars":					$webinars, 	
	"comparison":				$comparison 
);

// Declare Sub-menu Description
$menu-description: (
	"analytics": 				$analytics-desc, 
	"consumer": 				$consumer-desc, 
	"content": 					$content-desc, 
	"segmenting": 				$segmenting-desc, 
	"relationship": 			$relationship-desc,  
	"rewards": 					$rewards-desc,
	"referral": 				$referral-desc,
	"payments": 				$payments-desc,
	"affiliate":				$affiliate-desc,					
	"ambassador":				$ambassador-desc, 				
	"creator":					$creator-desc, 					
	"customer":					$customer-desc, 					
	"influencer":				$influencer-desc, 				 
	"refprograms":				$refprograms-desc, 				
	"loyalty":					$loyalty-desc,
	"blog":						$blog-desc,	
	"success":					$success-desc, 	
	"guides":					$guides-desc, 	
	"videos":					$videos-desc, 	
	"webinars":					$webinars-desc, 	
	"comparison":				$comparison-desc 
);
// Mixins
@mixin bc-transition{
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
}
// Media Queries
$desktop: 1440px;
$tablet: 1115px;
$mobile: 860px;
$min-tablet: 1116px;
$min-mobile: 861px;
/* General */ 
body:not(.fl-builder-edit){
	a, .fl-button, .fl-button-text, .pp-button, button, input[type="submit"]{
		@include bc-transition;
	}
	@media(min-width: $min-mobile){
		.sticky-sidebar{
			 position: sticky;
			 top: 5rem;
			 align-self: start;
		}
	}
}
.fl-button-has-icon{
	i.fa-long-arrow-right::before{
		content: "";
		width: 13px;
		height: 13px;
		display: block;
		background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat;
		background-size: contain;
	}
} 
.fl-module-pp-logos-grid.fl-visible-desktop{
	.pp-logos-content{
		.pp-logo{
			margin-bottom: 0 !important;
		}
	} 
}
.pp-dual-button-inner{
	a.pp-button{
		transition: all .3s ease-in-out !important;
		border-radius: 24px;
		width: fit-content !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		.fa-long-arrow-right::before{
			content: "";
			width: 13px;
			height: 13px;
			display: block;
			background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat;
			background-size: contain;
		}
	}
	@media(max-width: $mobile){
		width: 100%;
		.pp-dual-button{
			a{
				width: 100% !important;
			}
			&.pp-dual-button-2{
				padding-top: 15px;
			}
		}
	}
} 
.bc-green-arrow{
	.pp-dual-button-inner{
		.pp-dual-button-2{
			a.pp-button{
				.fa-long-arrow-right::before{
					background: url('https://bchampiodev.wpengine.com/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
					background-size: contain !important;
				}
			}
		}
	}
}    
.fl-rich-text{
	p{
		margin-bottom: 0 !important;
		&:not(:first-child){
			margin-top: 22px;
		}
	}
	ul{
		margin-top: 30px;
		& >{
			li{
				&:not(:first-child){
					margin-top: 12px;
				}
			}
		}
	}
}
.gform_wrapper{
	.gform_heading{
		.gform_required_legend{
			display: none !important;
		}
	}
	form{
		.gform_body{
			.gform_fields{
				.gfield{
					&.gfield_error{
						.ginput_container{
							input{
								border-color: #E63946 !important;
							}
						}
						.ginput_container_checkbox + .validation_message{
							margin-top: 10px !important;
						}
						.validation_message{
							font-size: 14px;
							&::before{
								content: "\f06a";
								font-family: "Font Awesome 5 Pro";
								font-weight: 700;
								font-size: 14px;
								margin-right: 5px;
								vertical-align: middle;
							}
						}
					}
				}
			}
		}
	}
}
.bc-footer-form {
	form {
		.gform_body {
			.gform_fields {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: nowrap;
				background-color: #fff;
				border-radius: 25px;
				padding: 2px 4px;
				border: 1px solid #EDEDED;
				.gfield {
					&:first-child {
						flex: 0 0 60%;
					}
					&:last-child {
						flex: 0 0 40%;
						text-align: right;
					}
					label {
						display: none !important;
					}
					.ginput_container {
						input {
							background-color: transparent !important;
							padding: 15px !important;
						}
					}
					.validation_message {
						position: absolute;
						font-size: 14px;
						bottom: -30px;
						left: 24px;
					}
				}
			}
		}
	}
}
.pp-icon-list-items{
	.pp-icon-list-item{
		span.pp-list-item-icon{
			padding-top: 6px !important;
		}
	}
}  
.bc-arrow-button{
	a.fl-button{
		i::before{
			background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
			background-size: contain !important;
			transition: all .3s ease-in-out;
			width: 15px;
		}
	}
}  
/* Header */ 
.bc-white-header{
	background-color: #FFF !important;	
}
.bc-header{
	.fl-row-content-wrap{
		.fl-row-content{
			position: unset !important;
		}
	}
}  
header{
	&.fl-theme-builder-header-scrolled{
		background: linear-gradient(90deg, #E5F6FF 0%, #F3FBFF 100%);
		box-shadow: 0 1px 25px rgb(57 63 72 / 10%);
	}
	&.fl-theme-builder-header-shrink{
		.pp-advanced-menu{
			nav{
				ul.menu >{
					li{
						padding: 25px 0 !important;
					} 
				}
			}
		}
	}
}

@media(min-width: $min-mobile){
	.pp-advanced-menu{
		nav{
			ul.menu >{
				li{
					padding: 38px 0;
					&.menu-hide-desktop{
						@media(min-width: 861px){
							display: none;
						}
					}
					&.pp-has-submenu{
						border-bottom: 2px solid transparent;
						@include bc-transition;
						position: unset !important;
						>{
							.pp-has-submenu-container{
								a{
									.menu-item-text{
										padding-right: 20px;
										.pp-menu-toggle{
											transition: all .3s ease-in-out;
											right: 0;
										}
									}
								}
							}
						}
						&:hover{
							.pp-has-submenu-container{
								a{
									.menu-item-text{
										.pp-menu-toggle{
											transform: rotate(-180deg);
											-webkit-transform: rotate(-180deg);
											-moz-transform: rotate(-180deg);
										}
									}
								}
							}
						}
						&.bc-submenu-open{
							border-bottom-color: #53B7E2 !important;
						}
					} 
					&.pp-has-submenu.bc-submenu-open >{
						position: unset !important;
						ul.sub-menu{
							display: grid !important;
							padding: 0;
							border-top: 1px solid #dedede;
							box-shadow: 0 10px 40px rgb(0 0 0 / 5%);
							width: 100% !important;
							left: 0 !important;
							display: grid !important;
							visibility: visible !important;
							opacity: 1 !important;
							grid-template-columns: 2fr 1fr !important;
							li{
								&.submenu-main{
									padding: 40px 60px 40px 80px;
									.pp-has-submenu-container{
										a{
											padding: 0;
											font-size: 20px;
											font-weight: 600;
											cursor: default !important;
											&:hover{
												  color: #121212 !important; 
											}
										}
									}
									ul.sub-menu{
										padding-top: 5px;
										width: 100%;
										display: grid !important;
										grid-template-columns: 1fr 1fr !important;
										column-gap: 40px;
										li{
											margin-top: 25px;
											&.submenu-child{
												a{
													 padding: 0;
													 display: grid;
													 grid-template-columns: 28px auto;
													 grid-template-rows: auto;
													 column-gap: 15px;
													 grid-template-areas: 
														"icon menu"
														"icon description";  
													 transition: all .3s ease-in-out;
													.menu-item-text{
														grid-area: menu;
														line-height: 1.25;
													}
													.menu-desc{
														font-size: 14px;
														font-weight: 400;
														grid-area: description;
														margin-bottom: 0;
														margin-top: 5px;
														color: #7E7E7E !important;
													}
													.menu-image{
														background-repeat: no-repeat;
														background-size: contain;
														width: 28px;
														height: auto;
														grid-area: icon;
													}
												}
											}
											&.submenu-button{
												width: fit-content;
												padding-top: 40px;
												a{
													padding: 0;
													color: #24B75C;
													font-weight: 600 !important;
													transition: all .3s ease-in-out;
													&::after{
														content: "";
														width: 14px;
														height: 12px;
														display: inline-block;
														background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
														background-size: cover;
														margin-left: 10px;
														transition: all .3s ease-in-out;
													}
													&:hover{
														color: #25A756;
														text-decoration: underline;
														&:after{
															margin-left: 15px;
														}
													}
												}
											}
											@each $name, $glyph in $menu-image {
												&.submenu-child-#{$name}{
													.menu-image{
														background-image: url($glyph);
													}
												}
											}
											@each $name, $glyph in $menu-description {
												&.submenu-child-#{$name}{
													.menu-desc{
														&::before{
														   content: $glyph;
														}
													}
												}
											}
										}
									}
									&.submenu-main-platform{
										ul.sub-menu{
											li{
												&.submenu-button{
													position: absolute !important;
													left: 80px;
													bottom: 40px;
												}
											}
										}
									}
								}
								&.submenu-side{
									background: linear-gradient(180deg, #E5F6FF 0%, #FFFFFF 100%);
									padding: 40px 80px 40px 60px!important;
									.pp-has-submenu-container{
										a{
											font-size: 20px;
											font-weight: 600;
											padding: 0 !important;
											cursor: default !important;
											&:hover{
												  color: #121212 !important; 
											}
										}
									}
									ul.sub-menu{
										background: transparent !important;
										padding-top: 30px !important;
										width: 100%;
										display: block !important;
										li{
											&:not(:first-child){
												margin-top: 25px;
											}
											>{
												a{
													padding: 0 !important;
													transition: all .3s ease-in-out;
													display: flex;
													flex-direction: row;
													align-items: center;
													justify-content: space-between;
													&:hover{
														color: #24B75C !important;
														&:after{
															background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
															background-size: cover;
														}
													}
													&::after{
														content: "";
														display: block;
														width: 14px;
														height: 12px;
														background: url('/wp-content/uploads/2022/11/arrow-black.svg') no-repeat;
														background-size: cover;
														transition: background .3s ease-in-out;
													}
												}
											}
											&.current-menu-item{
												a{
													color: #24B75C !important;
													&::after{
														background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
    													background-size: cover !important;
													}
												}
											}
										}
									}
									&.submenu-side-blank{
										ul.sub-menu{
											padding-top: 0 !important;
											height: 0 !important;
											> {
												li{
													min-height: 110px !important;
													> {
														.fl-builder-content{
															padding: 0 !important;
														}
														a{
															display: none !important;
														}
													}
												}
											}
										}
										.pp-has-submenu-container{
											display: none !important;
										}
									}
								}
								.pp-menu-toggle{
									display: none !important;
								}
								ul.sub-menu{
									visibility: visible !important;
									opacity: 1 !important;
									position: unset !important;
								}
							}
						}	
					}
					&.menu-parent-resources.pp-has-submenu.bc-submenu-open{
						>{
							ul.sub-menu{
								grid-template-columns: 1.5fr 1fr !important;
							}
						}
					}
					&.current-page-parent, &.current-page-ancestor, &.current-menu-ancestor{
						>{
							.pp-has-submenu-container{
								a{
									color: #53B7E2;
									.pp-menu-toggle{
										&::before{
											border-color: #53B7E2;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
 
/* Homepage */
body:not(.fl-builder-edit){
	.bc-custom-accordion-wrapper{
		position: relative;
		.bc-custom-accordion{
			width: 40%;
			padding-right: 20px;
			.pp-accordion{
				.pp-accordion-item{
					&.pp-accordion-item-active{
						.pp-accordion-button{
							border-bottom: unset !important;
							padding-bottom: 12px !important;
							span.pp-accordion-button-label{
								@media(min-width: $min-mobile){
									font-weight: 600 !important;
								}
							}
						}
					}
					.pp-accordion-button{
						span.pp-accordion-icon{
							font-size: 0 !important;
    						width: 24px !important;
							margin-right: 12px !important;
							padding-right: 0 !important;
						}
					}
					&:first-child{
						.pp-accordion-button{
							@media(min-width: $min-mobile){
								padding-top: 0 !important;
							}
						}
					}
					.pp-accordion-content{
						p{
							a{
								font-weight: 600;
								display: block;
								margin-top: 25px;
								&::after{
									content: "";
									display: inline-block;
									width: 15px;
									height: 15px;
									background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
									background-size: contain;
									margin-left: 12px;
									vertical-align: middle;
									transition: all .3s ease-in-out;
								}
								&:hover{
									&:after{
										margin-left: 16px;
									}
								}
							}
						}
						img.alignnone{
							position: absolute;
							top: 0;
							right: 0;
							margin: 0 !important;
							width: 50%; 
						}
					}
				}
			}
			&.bc-custom-accordion--right{
				float: right;
				padding-right: 0 !important;
				padding-left: 20px;
				img.alignnone{
					right: unset !important;
					left: 0;
				}
			}
		}
	}
}
.bc-objective-infobox{
	.pp-infobox-wrap{
		.pp-infobox{
			cursor: pointer;
			.pp-infobox-description{
				.pp-infobox-button{
					text-align: right !important;
					.pp-button{
						font-size: 0 !important;
						i{
							margin-left: 0 !important;
						}
					}
				}
			}
			&:hover{
				.pp-infobox-title{
					text-decoration: underline;
				}
				.pp-infobox-description{
					.pp-infobox-button{
						.pp-button{
							background-color: rgb(37, 167, 86);
						}
					}
				}
			}
		}	
	}
	&.bc-objective-infobox--unlink{
		.pp-infobox-wrap{
			.pp-infobox{
				cursor: default;
				&:hover{
					.pp-infobox-title{
						text-decoration: none;
					}
				}
			}
		}
	}
}  
.bc-testimonial-carousel{
	.pp-testimonials{
		.owl-carousel{
			.owl-stage-outer {
				width: calc(100% + 20px) !important;
				padding: 25px 0;
				.owl-item {
					margin-right: 18px !important;
					margin-left: 16px;
					.pp-content-wrapper{
						margin-bottom: 35px !important;
					}
					.pp-vertical-align{
						display: flex;
						flex-direction: row-reverse;
						justify-content: space-between;
						align-items: center;
						gap: 30px;
						width: 100%;
						.pp-title-wrapper{
							h6{
								margin-top: 0;
							}
							p{
								margin-bottom: 0;
							}
						}
						.pp-testimonials-image{
							margin-right: 0 !important;
							img{
								max-height: 45px !important;
								max-width: 100px !important;
							}
						}
					}
				}
			}
		}
	}
	&.partner-testimonial{
		.owl-carousel{
			.owl-stage-outer {
				.owl-item {
					.pp-vertical-align{
						flex-direction: row !important;
						justify-content: flex-start !important;
						gap: 15px;
					}
				}
			}
		}
	}
}   
/* Solutions */
.bc-clickable-box{
	.fl-col-content{
		cursor: pointer;
		.fl-photo{
			.fl-photo-content{
				border-radius: 16px;
				-webkit-border-radius: 16px;
				-moz-border-radius: 16px;
				-khtml-border-radius: 16px;
				overflow: hidden;
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-webkit-transform: translate3d(0,0,0);
				-moz-transform: translate3d(0,0,0);
				img{
					transition: all .3s ease-in-out;
				}
			}
		}
		.bc-arrow-button{
			a.fl-button i{
				transition: all .3s ease-in-out;
			}
		}
		&:hover{
			.fl-photo-content{
				img{
					transform: scale(1.1);
				}
			}
			.fl-heading{
				text-decoration: underline;
			}
			.bc-arrow-button{
				a.fl-button i{
					margin-left: 12px;
				}
			}
		}
	}
} 
/* Footer */
footer{
	.fl-rich-text{
		a{
			text-decoration: none !important;
		}
	} 
	.pp-social-icons{
		.pp-social-icon{
			i.fa-trello::before{
				content: "";
				width: 20px;
				height: 18px;
				display: block;
				background: url('/wp-content/uploads/2022/11/social-e1669106874120.png') no-repeat;
				background-size: contain;
			}
			i.fa-linux::before{
				content: "";
				width: 20px;
				height: 18px;
				display: block;
				background: url('/wp-content/uploads/2022/11/social-1-e1669106913834.png') no-repeat;
				background-size: contain;
			}
		}
	}
	.fl-rich-text{
		p:not(:first-child){
			margin-top: 15px;
		}
		p:last-child strong{
			font-size: 9px;
			padding: 2px 8px;
			background: #F9C344;
			border-radius: 8px;
			margin-left: 5px;
			display: inline-block;
			vertical-align: middle;
			color: #121212 !important;
		}
	} 
}  
/* Accordion Basic */ 
.bc-accordion-basic{
	.pp-accordion{
		.pp-accordion-item{
			&.pp-accordion-item-active{
				.pp-accordion-button{
					border-bottom: unset !important;
					padding-bottom: 15px;
					.pp-accordion-button-icon{
						color: #53B7E2;
					}
				}
			}
		}
	}
}   
/* Resources */
.bc-resources-filter{
	.fl-rich-text{
		ul{
			padding-left: 0;
			list-style: none;
			margin: 0 !important;
			li{
				display: inline-block;
				padding: 8px 20px;
				border-radius: 24px;
				transition: all .3s ease-in-out;
				background: transparent;
				&:not(:first-child){
					margin-left: 5px;
				}
				a{
					text-decoration: none;
					transition: all .3s ease-in-out;
				}
				&:hover, &.active{
					background: #24B75C;
					a{
						color: #FFFFFF !important;
					}
				}
			}
		}
	}
	@media(max-width: $mobile){
		.fl-rich-text{
			width: 100%;
    		overflow-x: scroll;
			ul{
				width: max-content;
			}
		}
	}
}  
.bc-trans-button{
	.fl-button-has-icon{
		a.fl-button{
			i.fa-long-arrow-right::before{
				background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
				background-size: contain !important;
				transition: all .3s ease-in-out;
			}
			&:hover{
				i.fa-long-arrow-right::before{
					background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat !important;
					background-size: contain !important;
				}
			}
		}
	}
}   
/* Contact */ 
.contact-social{
	.pp-social-icons{
		.pp-social-icon{
			i.fa-rss::before {
				content: "";
				width: 24px;
				height: 18px;
				display: block;
				background: url(/wp-content/uploads/2022/11/social-e1669106874120.png) no-repeat;
				background-size:contain;
			}
		}
	}
}   
.pp-gf-content{
	.gform_wrapper{
		form.contact-form{
			.gform_body{
				.gform_fields{
					.gfield{
						@media(min-width: 861px){
							&.gf_half{
								width: 50% !important;
								display: inline-block !important;
								vertical-align: top !important;
								&.gf_left{
									padding-right: 10px;
								}
								&.gf_right{
									padding-left: 10px;
								}
							}
						}
						&:not(:last-child){
							margin-bottom: 20px;
						}
						label{
							margin-bottom: 12px !important;
						}
						.ginput_container{
							select{
								width: 100%;
								border-radius: 8px;
								appearance: none;
								-webkit-appearance: none;
								-moz-appearance: none;
								background: url('/wp-content/uploads/2022/11/arrow-nav.svg') no-repeat;
								background-size: 16px;
								background-position: 98% center;
								padding: 0 20px !important;
							}
						}
						&.hidden_label{
							legend{
								display: none !important;    
							}
						}
						.gchoice{
							label{
								font-size: 16px;
								font-weight: 400;
								margin-left: 10px;
								margin-bottom: 0 !important;
    							vertical-align: top;
							}
							input{
								margin-top: 0 !important;
								&::before{
									clip-path: polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);
								}
								&:checked{
									background: #53b7e2 !important;
								}
							}
							@media(max-width: $mobile){
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-items: flex-start;
							}
						}
						textarea{
							height: 100px;
						}
					}
				}
			}
			.gform_footer{
				padding-top: 25px;
			}
			.gform_page_footer{
				padding-top: 25px;
				text-align: right;
			}
		}
	}
}  
/* Login */
#modal-peycrqm2s81h{
	.pp-modal-header{
		.pp-modal-title {
			padding-top: 23px;
			padding-bottom: 23px;
		}
	}
	@media(max-width: $mobile){
		.pp-modal-content{
			padding: 0 !important;
			border-bottom-left-radius: 16px;
    		border-bottom-right-radius: 16px;
		}
	}
}  
.login-form-module{
	.form-title{
		font-weight: 700 !important;
	}
}
.login-form{
	.gfield--width-half{
		width: 50% !important;
		display: inline-block !important;
	}
	.bc-link{
		text-align: right;
		a{
			font-size: 14px;
			color: #0A1931;
			font-weight: 400;
		}
	}
	.bcf-account{
		.ginput_container{
			position: relative;
			&::after {
				content: "brandchamp.io";
				padding: 7px 20px;
				background: #F2F8FD;
				border-radius: 34px;
				display: inline-block;
				font-size: 16px;
				position: absolute;
				top: 5px;
				right: 5px;
			}
			input{
				padding: 5px 160px 5px 20px !important;
			}
		}
	}
	input[type="text"]{
		&::placeholder {
			font-weight: 400;
			color: #0A1931;
		}
	}
	div.hidden_label {
		label{
			display: none !important;
		}
	}
	.gchoice{
		label{
			margin-left: 5px !important;
			font-size: 14px !important;
		}
	}
	.gform_footer{
		padding-top: 15px !important;
		input[type="submit"]{
			color: #fff;
			background-color: #24b75c;
			font-family: "Archivo",sans-serif;
			font-weight: 600;
			font-size: 18px;
			line-height: 1.45;
			text-transform: none;
			border-style: none;
			border-width: 1px;
			border-color: #121212;
			border-radius: 24px;
			transition: all .3s ease-in-out;
			&:hover{
				background-color: #25a756;
			}
		}
	}
}

/* Pricing */
.bc-pricing-tabs{
	.pp-tabs{
		.pp-tabs-labels{
			width: max-content !important;
			background: #ffffff;
			padding: 5px;
			border-radius: 25px;
			box-shadow: #00000012 0 0 20px;
			.pp-tabs-label{
				border-radius: 24px;
				padding: 6px 16px;
				&:not(:last-child){
					margin-right: 5px;
				}
				&.pp-tab-active{
					.pp-tab-title{
						font-weight: 600 !important;
					}
				}
			}
		}
	}
	@media(max-width: $mobile){
		.pp-tabs{
			.pp-tabs-labels{
				width: 100% !important;
				display: flex !important;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				flex-wrap: nowrap;
				.pp-tabs-label{
					&:not(:last-child){
						margin-right: 3px;
					}
					padding: 9px 20px;
					flex: 1 1 auto;
					.pp-tab-label-flex{
						justify-content: center;
						.pp-tab-title{
							font-size: 14px !important;
						}
					}
				}
			}
			.pp-tabs-panels{
				.pp-tabs-panel{
					.pp-tabs-label {
						display: none !important;
					}
				}
			}  
		}
	}
}  
.bc-pricing-table{
	.pp-pricing-table{
		.pp-pricing-table-colset{
			display: flex !important;
			flex-direction: row;
			align-items: flex-end;
			justify-content: center;
			.pp-pricing-table-col{
				width: 30% !important;
				&.pp-pricing-table-highlight{
					width: 40% !important;
					.pp-pricing-featured-title{
						@media(min-width: 861px){
							font-size: 35px !important;
						}
						&::after{
							content: "Popular plan";
							font-size: 12px;
							color: #121212;
							padding: 7px 15px;
							background: #F9C344;
							border-radius: 24px;
							float: right;
							margin-top: 10px;
						}
					}
					.pp-pricing-table-inner-wrap{
						@media(min-width: 861px){
							.pp-pricing-table-header{
								.pp-pricing-table-title{
									font-size: 20px !important;
								}
							}
							.pp-pricing-table-features{
								padding: 20px 0;
								margin: 30px 0;
								font-size: 20px;
							}
							.pp-pricing-table-price{
								font-size: 35px !important;
								.pp-pricing-table-duration{
									opacity: 1;
									font-size: 20px !important;
									text-transform: lowercase !important;
								}
							}
						}
					}
				}
				.pp-pricing-featured-title{
					position: unset !important;
					text-align: left !important;
					h2{
						padding: 0 !important;
						font-size: inherit;
						color: inherit;
						display: inline-block;
					}
				}
				.pp-pricing-table-duration{
					text-transform: lowercase !important;
				}
				.pp-pricing-table-inner-wrap{
					padding-top: 10px;
					.pp-pricing-table-header{
						.pp-pricing-table-title{
							height: 28px !important;
						}
					}
					.pp-pricing-table-features{
						padding: 15px 0;
						border-top: 1px solid #dedede;
						border-bottom: 1px solid #dedede;
						margin: 25px 0;
					}
					.fl-button-wrap{
						margin-top: 20px;
					}
				}
			}
		}
		@media(max-width: $mobile){
			width: 100%;
    		overflow-x: scroll;
			.pp-pricing-table-colset{
				width: max-content;
				.pp-pricing-table-col{
					margin-top: 35px !important;
					width: 30% !important;
					min-width: 340px;
					&.pp-pricing-table-highlight{
						min-width: 440px;
					}
				}
			}
		}
	}
}   
.bc-pricing-enterprise{
	ul.pp-icon-list-items{
		li.pp-icon-list-item{
			display: inline-block !important;
			span.pp-list-item-icon{
				padding-top: 3px !important;
			}
			&:not(:first-child){
				margin-left: 20px;
			}
			@media(max-width: $mobile){
				display: flex !important;
				flex-direction: row;
				flex-wrap: nowrap;
				width: 100%;
				span.pp-list-item-icon{
					float: unset !important;
				}
				&:not(:first-child){
					margin-left: 0;
					margin-top: 10px;
				}
			}
		}
	}
}
/* Career Detail */
.career-share{
	.pp-social-share-inner{
		grid-template-columns: repeat(3,auto) !important;
		.pp-share-button{
			&:hover{
				filter: unset !important;
				.pp-share-button-link{
					border-color: #6EB5DE !important;
				}
			}
			.pp-share-button-link{
				width: max-content;
				padding: 10px 16px;
				gap: 8px;
				background: #FFF !important;
				border-color: #fff;
				transition: all .3s ease-in-out;
				.pp-share-button-icon{
					width: auto;
				}
				.pp-share-button-text{
					span{
						color: #121212;
					}
				}
			}
		}
	}
} 
.career-content{
	h2{
		&:first-child{
			margin-top: 0;
		}
		&:not(:first-child){
			margin-top: 60px;
			@media(max-width: $mobile){
				margin-top: 30px;
			}
		}
		margin-bottom: 30px;
		font-size: 35px;
		color: #0A1931;
		@media(max-width: $mobile){
			font-size: 30px;
		}
	}
	ul{
		padding-left: 22px;
	}
} 
.career-form{
	.ginput_container.ginput_container_fileupload{
		 border: 1px solid #dedede;
		 padding: 6px 6px !important;
		 border-radius: 8px;
		 text-align: left;
		 height: 50px;
		 background-color: #fff !important;
		 cursor: pointer;
		 overflow: hidden;
		 .validation_message {
			 display: none !important;
		 }
		input[type=file]::-webkit-file-upload-button {
			 appearance: none !important;
			 -webkit-appearance: none !important;
			 -moz-appearance: none !important;
			 margin-right: 10px;
			 background: #F2F8FD;
			 border: unset;
			 color: #121212;
			 padding: 10px 12px;
			 font-family: "general-sans" !important;
			 font-weight: 500;
			 font-size: 14px;
			 border-radius: 6px;
			 cursor: pointer;
		}
		.gform_fileupload_rules {
			 display: none;
		}
	}
	.form-title{
		font-size: 25px;
		margin: 0;
	}
	.form-description{
		font-size: 16px;
		margin-top: 8px;
		margin-bottom: 30px;
	}
	.gform_footer{
		position: relative;
		&::before{
			content: "";
			width: 13px;
			height: 13px;
			display: block;
			background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat;
			background-size: contain;
			position: absolute;
			top: 50%;
			right: 34%;
			transform: translateY(50%);
			@media(max-width: $mobile){
				right: 31%;
			}
		}
	}
	&.story-form{
		.gform_footer::before{
			right: 33% !important;
		}
	}
	&.webinar-form{
		.gform_footer::before{
			right: 28% !important;
		}
	}
}
.gfield_error .ginput_container.ginput_container_fileupload {
	 border-color: #e63946 !important;
}
/* Comparison */
.bc-vertical-list{
	ul{
		li{
			display: block !important;
			width: 100% !important;
			text-align: center !important;
			float: unset !important;
			&:last-child{
				padding-bottom: 0 !important;
			}
			.pp-infolist-icon-inner{
				margin: 0 auto;
			}
		}
	}
} 
.bc-comparison-wrapper{
	@media(max-width: $mobile){
		.fl-row-content{
			width: 100%;
    		overflow-x: scroll;
			>{
				.fl-col-group{
					width: max-content !important;
				}
			}
		}
	}
}
/* Single Post */
.single-terms{
	ul{
		list-style: none;
		padding-left: 0;
		margin: 0;
		li{
			display: inline-block;
			margin-right: 8px;
			a{
				padding: 8px 14px;
				border: 1px solid #53B7E2;
				border-radius: 24px;
				color: #53B7E2;
				transition: all .3s ease-in-out;
				text-decoration: none;
				&:hover{
					background: #53B7E2;
					color: #FFF;
				}
			}
		}
	}
} 
.single-top-author{
	.pp-infobox{
		.pp-infobox-title{
			margin: 0;
			@media(max-width: $mobile){
				padding-top: 10px;
			}
		}
		.pp-description-wrap{
			display: flex;
			flex-direction: row;
			align-items: center;
			column-gap: 8px;
			padding-top: 5px;
			@media(max-width: $mobile){
				justify-content: center;
			}
			p{
				margin-bottom: 0;
			}
		}
	}
} 
.bc-toc{
	.pp-toc-container{
		.pp-toc-header {
			 padding: 0 0 0 0 !important;
		}
		.pp-toc-body {
			 overflow-y: unset !important;
			ul{
				list-style: none !important;
				li{
					 border-left: 2px solid transparent;
					 padding-left: 15px;
					 line-height: 1;
					&::before{
						display: none;
					}
					&:not(:first-child){
						margin-top: 15px;
					}
					a{
						text-decoration: none !important;
					}
					&.active {
						 border-color: #24B75C !important;
						 text-align: left !important;
						 display: block !important;
						a{
							 color: #24B75C !important;
						}
					}
					@media(max-width: $mobile){
						border-color: #212121 !important;
		 				color: #212121 !important;
					}
				}
			}
		}
	}
} 
.single-share{
	.pp-share-button{
		.pp-share-button-link {
			 border-width: 0 !important;
			&:hover {
				 background: linear-gradient(180deg, #E5F6FF 30%, #FFFFFF 100%);
			}
		}
		&:hover {
			 filter: unset !important;
		}
	}
}  
.single-author{
	.pp-infobox-description{
		.pp-description-wrap{
			p{
				margin-bottom: 15px;
			}
			.author-social{
				display: inline-block;
    			margin-right: 10px;
				@media(max-width: $mobile){
					margin-right: 0;
					margin-bottom: 10px;
				}
				a{
					padding: 6px 15px;
					background-color: transparent;
					color: #121212;
					border-radius: 17px;
					border: 1px solid #DEDEDE;
					font-size: 14px;
					font-weight: 500;
					text-decoration: none;
					transition: all 0.3s ease-in-out;
					display: inline-block;
					&:hover{
						background-color: #324059;
						color: #FFF;
						border-color: #324059;
					}
				}
				& + p{
					display: none!important;
				}
				&.social-twitter{
					a::before{
						content: "\f099";
						font-family: "Font Awesome 5 Brands";
						margin-right: 8px;
						color: #1DA1F2;
						vertical-align: middle;
					}
				}
				&.social-linkedin{
					a::before{
						content: "\f08c";
						font-family: "Font Awesome 5 Brands";
						margin-right: 8px;
						color: #0077b5;
						vertical-align: middle;
					}
				}
			}
		}
	}
	@media(max-width: $mobile){
		.pp-heading-wrapper{
			padding-top: 20px;
		}
	}
} 
.single-readstory{
	.fl-button-has-icon{
		.fl-button{
			&:hover{
				i.fa-long-arrow-right{
					margin-left: 15px;
				}
			}
			i.fa-long-arrow-right{
				transition: all .3s ease-in-out;
				&::before {
					content: "";
					width: 13px;
					height: 13px;
					display: block;
					background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
					background-size: contain;
				}
			}
		}
	}
}  
.single-subscribe-form{
	.gform_footer{
		padding-top: 12px;
		position: relative;
		@media(min-width: 861px){
			&::before{
				content: "";
				width: 13px;
				height: 13px;
				display: block;
				background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat;
				background-size: contain;
				position: absolute;
				top: 40%;
				right: 27%;
				transform: translateY(40%);
			}
		}
	}
	.gform_confirmation_message{
		text-align: center;
		i{
			font-size: 40px;
			color: #24B75C !important;
		}
		h2{
			font-size: 35px;
			margin-top: 20px;
			margin-bottom: 0;
		}
		p{
			margin: 15px 0 0 0;
			font-size: 16px;
		}
	}
}

.single-content{
	h2{
		font-size: 35px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 20px;
		}
	}
	h3{
		font-size: 25px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 20px;
		}
	}
	h4{
		font-size: 22px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 20px;
		}
	}
	ul, ol{
		margin-top: 40px;
    	margin-bottom: 30px;
    	padding-left: 20px;
		li{
			margin-bottom: 15px;
		}
	}
	figure{
		margin-top: 40px;
		margin-bottom: 40px;
		img{
			border-radius: 16px;
		}
		figcaption{
			font-size: 16px;
			font-style: italic;
			margin-top: 20px;
		}
	}
	blockquote{
		margin-top: 40px;
		border-left-color: #53B7E2;
		padding-left: 30px;
		padding-top: 0;
		padding-bottom: 0;
		p{
			font-size: 22px;
			font-style: italic;
		}
		cite{
			margin-top: 20px !important;
			display: block;
		}
	}
} 
/* Privacy Policy, Cookie & Terms */

.legal-content{
	h2{
		font-size: 30px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 30px;
		}
	}
	ul, ol{
		margin-top: 30px;
    	margin-bottom: 30px;
    	padding-left: 20px;
		li{
			margin-bottom: 15px;
		}
	}
	&.legal-content--inside{
		ul,ol{
			padding-left: 50px;
		}
	}
} 
/* Book a Demo */
.gf_progressbar_title{
    margin-bottom: 0;
    text-align: right;
    font-size: 15px;
	@media(max-width: $mobile){
		text-align: left;
	}
}
.partial_entry_warning {
	display: none !important;
}
.book-demo-form{
	.gf_progressbar_title{
		display: none;
	}
	.gf_progressbar{
		background-color: #F3F5F7;
		.gf_progressbar_percentage{
			background: #53B7E2;
			height: 5px;
			span{
				display: none;
			}
		}
	}
	.gform_body{
		@media(min-width: 861px){
			padding-left: 90px;
			padding-right: 90px;
			padding-top: 80px;
		}
		@media(max-width: $mobile){
			padding: 30px 20px 20px 20px;
		}
		.ginput_container_checkbox{
			padding-top: 10px;
			.gfield_checkbox{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				gap: 10px 15px;
			}
		}
		.demo-title{
			margin-bottom: 40px !important;
			h1, h2{
				font-size: 50px;
			}
			p{
				font-weight: 400;
				color: #121212;
			}
		}
	}
	.gform_page_footer{
		.gform_previous_button{
			background-color: #F3F5F8 !important;
			color: #121212 !important;
			margin-right: 10px;
			transition: all .3s ease-in-out;
			&:hover{
				background-color: #24b75c !important;
				color: #FFF !important;
			}
		}
		.gform_next_button{
			background: url('https://bchampiodev.wpengine.com/wp-content/uploads/2022/11/arrow-button.svg') no-repeat !important; 
			background-size: 15px !important;
			background-position: 82% center !important;
			background-color: #24B75C !important;
			padding-right: 50px !important;
			transition: all .3s ease-in-out;
			&:hover{
				background-color: #25a756 !important;
			}
		}
	}
}
/* Partner Program */
.partner-infobox{
	@media(max-width: $mobile){
		.pp-infobox-image{
			text-align: left;
			padding-bottom: 15px;
		}
	}
}
/* Responsive */
@media(max-width: $mobile){
	.pp-hamburger-inner{
		&::before{
			display: none !important;
		}
		&::after{
			bottom: -10px !important;
		}
	}
	.pp-advanced-menu{
		nav{
			ul.pp-advanced-menu-horizontal {
				width: 100% !important;
				top: 0 !important;
				transform: translatey(0) !important;
				padding: 0 20px !important;
				> {
					li.menu-item{
						padding: 20px 0;
						border-bottom: 1px solid #dedede;
						&.menu-parent{
							.pp-has-submenu-container{
								a{
									transition: all .3s ease-in-out;
								}
							}
							&.pp-active{
								padding-bottom: 30px;
								.pp-has-submenu-container{
									a{
										span.pp-menu-toggle{
											&::before{
												border-color: #121212 !important;
											}
										}
									}
									&:hover{
										a{
											span.pp-menu-toggle{
												&::before{
													border-color: #121212 !important;
												}
											}
										}
									}
								}
							}
						}
						>{
							ul.sub-menu{
								padding-left: 15px;
								padding-top: 20px;
								li{
									padding: 0 !important;
									.pp-has-submenu-container{
										a{
											font-size: 16px;
											font-weight: 600;
											span.pp-menu-toggle{
												display: none;
											}
										}
									}
									ul.sub-menu{
										display: block !important;
										padding-top: 0;
										li{
											margin-top: 20px;
											&.submenu-button{
												display: none !important;
											}
											
										}
									}
									&.submenu-main{
										ul.sub-menu{
											li{
												&.submenu-child{
													a{
														 padding: 0;
														 display: grid;
														 grid-template-columns: 24px auto;
														 grid-template-rows: auto;
														 column-gap: 14px;
														 grid-template-areas: 
															"icon menu"
															"icon description";  
														 transition: all .3s ease-in-out;
														.menu-item-text{
															grid-area: menu;
															line-height: 1.25;
														}
														.menu-desc{
															font-size: 14px;
															font-weight: 400;
															grid-area: description;
															margin-bottom: 0;
															margin-top: 5px;
															color: #7E7E7E !important;
														}
														.menu-image{
															background-repeat: no-repeat;
															background-size: contain;
															width: 24px;
															height: auto;
															grid-area: icon;
														}
													}
												}
												@each $name, $glyph in $menu-image {
													&.submenu-child-#{$name}{
														.menu-image{
															background-image: url($glyph);
														}
													}
												}
												@each $name, $glyph in $menu-description {
													&.submenu-child-#{$name}{
														.menu-desc{
															&::before{
															   content: $glyph;
															}
														}
													}
												}
											}
										}
									}
									&.submenu-side{
										display: none !important;
										background: transparent !important;
									}
								}
							}
						}
						&.menu-login{
							border-bottom: unset !important;
							text-align: center;
							padding: 30px 0;
							font-weight: 500;
						}
						&.menu-book{
							border-bottom: unset !important;
							text-align: center;
    						padding: 0;
							a{
								width: fit-content;
								margin: 0 auto;
								padding: 9px 20px;
								background-color: #24B75C;
								color: #FFF;
								font-weight: 600;
								border-radius: 24px;
								font-size: 16px;
								&::after{
									content: "";
									width: 13px;
									height: 13px;
									display: inline-block;
									background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat;
									background-size: contain;
									margin-left: 8px;
    								vertical-align: middle;
								}
							}
						}
					}
				}
			}
		}
		&.menu-open{
			.pp-menu-nav{
				.mobile-upper{
					display: block;
					position: relative;
					width: 100%;
					background-color: #FFFFFF;
					height: 75px;  
					border-bottom: 1px solid #DEDEDE;
					&::before {
							content: "";
							width: 170px;
    						height: 29px;
							background-image: url('/wp-content/uploads/2022/11/brandchamp-logo.png');
							background-size: contain;
							background-repeat: no-repeat;
							background-position: center center;
							display: block;
							position: absolute;
							z-index: 999999;
							top: 20px;
							left: 15px;
					}
					.pp-menu-close-btn{
						right: 20px !important;
						top: 25px !important;
						width: 30px !important;
						height: 30px !important;
						&::before{
							height: 25px !important;
						}
						&::after{
							height: 25px !important;
						}
					}
				}
				ul.menu{
					width: 100%!important;
					top: 0!important;
					transform: translatey(0)!important;
					padding: 0 20px!important;
					position: relative;
				}
			}
		}
	}
	.bc-brand-logo{
		.pp-logos-wrapper{
			justify-content: center;
			.pp-logo{
				img{
					object-fit: contain;
				}
				&:last-child{
					margin-right: 0 !important;
				}
			}
		}
	}
	.pp-content-post-carousel{
		.owl-theme .owl-dots {
			margin-top: 30px !important;
		}	
	} 
	.pp-infobox-wrap{
		.pp-infobox.layout-5{
			.pp-icon-wrapper{
				.pp-infobox-image{
					img{
						width: 40px;
					}
				} 
			}
			.pp-infobox-title-wrapper{
				.pp-infobox-title {
					margin-top: 15px;
				}
			}
			.pp-infobox-description{
				margin-top: 10px;
			}
		}
	}
	.pp-advanced-menu-mobile-toggle.hamburger {
		padding: 0;
	}
	body:not(.fl-builder-edit){
		.bc-custom-accordion-wrapper{
			.bc-custom-accordion{
				width: 100% !important;
				overflow-x: scroll;
				min-height: 550px;
				padding-left: 0 !important;
				padding-right: 0 !important;
				.pp-accordion{
					width: fit-content;
					display: flex;
					flex-direction: row;
					.pp-accordion-item {
						flex: 0 0 auto;
						border-bottom: none !important;
						margin-right: 15px;
						.pp-accordion-button{
							padding: 9px 20px !important;
							border: 1px solid #EDEDED !important;
							background-color: #FFFFFF;
							border-radius: 26px;
							span.pp-accordion-button-label{
								font-size: 16px;
							}
						}
						.pp-accordion-content{
							position: absolute;
							top: 15%;
							left: 0;
							border-bottom: none !important;
							img.alignnone{
								position: unset !important;
								width: 400px !important;
								margin-top: 20px !important;
							}
						}
						&:first-child{
							.pp-accordion-button{
								padding-top: 9px !important;
							}
						}
						&.pp-accordion-item-active{
							.pp-accordion-button{
								padding-top: 9px !important;
								border: 1px solid #EAF8FF !important;
								background-color: #EAF8FF;
								span.pp-accordion-button-label{
									font-weight: 500 !important;
								}
							}
						}
					}
				}
			}
		}
		.bc-objective-infobox{
			overflow-x: scroll;
    		padding-bottom: 50px;
			.objective-wrapper{
				width: fit-content;
				display: flex;
				flex-direction: row;
				.fl-col {
					flex: 1 0 250px;
					&:not(:first-child){
						margin-left: 15px;
					}
					.pp-infobox{
						padding: 16px !important;
						h4.pp-infobox-title{
							font-size: 16px !important;
						}
						.pp-description-wrap{
							p{
								font-size: 14px !important;
							}
						}
					}
				}
			}
		}
		.bc-mobile-scrollable{
			overflow-x: scroll;
    		padding-bottom: 50px;
			.objective-wrapper{
				width: fit-content;
				display: flex;
				flex-direction: row;
				.fl-col {
					flex: 1 0 250px;
					&:not(:first-child){
						margin-left: 15px;
					}
				}
			}
		}
	}
	.bc-privacy-mobile{
		ul{
			list-style: none !important;
			padding-left: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 0 !important;
			margin-bottom: 0 !important;
			li{
				margin-top: 0 !important;
			}
		}
	} 
	.bc-footer-accordion{
		.pp-accordion{
			.pp-accordion-item{
				.pp-accordion-button{
					.pp-accordion-button-label{
						font-weight: 600 !important;
					}
				}
				.pp-accordion-content{
					p:not(:first-child){
						margin-top: 15px;
					}
					p{
						strong{
							font-size: 9px;
							padding: 2px 8px;
							background: #F9C344;
							border-radius: 8px;
							margin-left: 5px;
							display: inline-block;
							vertical-align: middle;
							color: #121212 !important;
						}
					}
				}
				&.pp-accordion-item-active{
					.pp-accordion-button{
						border-bottom: none !important;
					}
				}
			}
		}
	} 
	
} // Media close

#css

css link import

@import url("https://imaginative-tiramisu-08cf25.netlify.app");

#html #css

Underlines

<style>
div {
  font-size: 55px; 
  line-height: 55px; 
  text-decoration-skip-ink: none;
}
.ulsingle {
  text-decoration: underline;
}
.uldouble {
  text-decoration: double underline;
}
.ulwavy {
  text-decoration: wavy underline;
}  
</style>

<div>
  це - <span class="ulsingle">підмет</span>, 
  це - <span class="uldouble">присудок</span>,
  це - <span class="ulwavy">означення</span>
</div>

#html #css

Slider

  <div class="wt-max-100">
       <input type="range" min="0" max="100" class="input-green-800 width-scaled4-8"> 
  </div>

#html #css

rating

 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="far fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="far fa-star"></i></span>
 <span class="text-m  text-color-grey-9"> (3/5 review)</span>

#html #css

Paragraphy

<p class="text-lg">1. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, mollitia!. </p>
<p class=" text-m">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, quis?</p>
<p class="text-xm ">3. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, ipsam.</p>
<p class="text-s">4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic!</p>
<p class="text-xs ">5. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, reprehenderit.</p>

#html #css

alignment

     <div class="text-s text-start pd-x-4 ">Text Start</div>
     <div class="text-s text-center pd-x-4 ">Text-Center</div>
     <div class="text-s text-end pd-x-4 ">Text-Left</div>

#html #css

Heading

  <h1 class="text-xl">H1.Heading</h1>
  <h2 class="text-lg">H2.Heading</h2>
  <h3 class="text-m">H3.Heading</h3>
  <h4 class="text-xm">H4.Heading</h4>
  <h5 class="text-s">H5.Heading</h5>
  <h6 class="text-xs">H6.Heading</h6>

#html #css

icon list

<ul class="style-none box-shadow-2 width-scaled4-8 pd-y-2"> 
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
</ul>

#html #css

Simple list

<ul class="style-none box-shadow-2 width-scaled4-8 pd-y-2">
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
</ul>

#html #css

Link button

 <a href="#" class="text-dec text-color-grey-9  cursor border-bottom-solid border-1 border-black-700">Link</a>

#html #css

simple button

     <button class="bg-green-8 rounded-s cursor  text-color-grey-0 pd-x-5 pd-y-4 text-xm">Primary
                    </button>
    
      <button class="bg-black-5 rounded-s  cursor text-color-grey-0 pd-x-5 pd-y-4 text-xm">Secondary</button>
    
       <button class=" bg-black-0 rounded-s cursor border-green-700 border-solid border-1  text-color-green-7 pd-x-5 pd-y-4 text-xm"> Outline</button>

#html #css

input

<div class=" m-y-8 flex flex-column">
      <label class="m-y-4 ">Email:</label>
      <input type="email" class="width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9 " placeholder="Email Id">
</div>
<div class="m-y-8 flex flex-column">
     <label class="m-y-4">Email:</label>
     <input type="email" class=" width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9" placeholder="Email Id">
     <span class="text-color-red-5 m-y-3">*Invalid Input </span>
</div>
<div class="m-y-8 flex flex-column">
     <label class="m-y-4">Email:</label>
     <input type="email" class=" width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9" placeholder="Email Id">
     <span class="text-color-green-6 m-y-3">*Valid Input </span>
</div>

#html #css

modal

<div class="  width-scaled4-6  wt-max-100 m-auto">
      <div class=" flex flex-column justify-center rounded-s pd-y-3 pd-x-3 bg-black-0 box-shadow-2">
            <div class="flex flex-column m-y-6">
                  <span class="text-xm">Dialog header</span>
                  <small>Lorem ipsum dolor sit amet.</small>
            </div>
            <div class="flex justify-end items-center gap-1 m-t-2">
                 <button  class="pd-y-3 pd-x-3 text-color-grey-0 bg-red-8 cursor">close</button>
                 <button  class="pd-y-3 pd-x-3 text-color-grey-0 bg-green-7">continue</button>
            </div>
     </div>     
</div>

#css

Selectors, Properties, and Values | HTML Dog

body {
    font-size: 14px;
    color: navy;
}

#css

Applying CSS | HTML Dog

p {
    color: red;
}

a {
    color: blue;
}

#html #css

rounded image

<img src="/utilities-css/image/alex.jpg" alt="christopher-responsives-image" class="width-scaled4-6 object-content-center ht-auto rounded-L">

#html #css

image-responsive

<img src="/utilities-css/image/hamed-darzi-Psz62UPYx1E-unsplash.jpg" alt="christopher-responsives-image" class="width-scaled4-6 object-content-center ht-auto">

#html #css

grid auto column

 <div class="grid grid-cols-auto gap-1">
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 3</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 4</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 5</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 6</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 7</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 8</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 9</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 10</div>
 </div>

#html #css

grid with three column

<div class="grid grid-cols-3 gap-1">
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 3</div>
</div>

#html #css

grid two cols

<div class="grid grid-cols-2 gap-1">
          <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
          <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
</div>

#html #css

overlay card

<div class=" position-rel width-scaled-8  m-auto box-shadow-1 ">
     <figure>
       <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2">
     </figure>
     <div class="position-ab flex justify-center items-center top-0 ht-100 bg-overlay z-index-2 wt-100 text-color-grey-0 text-bold text-m">
          <p>Out of Stock</p>
     </div>
   <div class="pd-x-4">
       <div class="flex flex-column m-y-4">
          <h3> Levis black</h3>
          <small class="text-color-grey-2">T-Shirt</small>
       </div>
       <div class="m-y-4">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
       </div>
       <div class="m-y-4">
           <span class="text-bold">₹399.00</span>
       </div>
       <div class="flex flex-column gap-1 m-y-4">
           <button class="bg-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button>
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
       </div>
  </div>
  <div class="position-ab top-0 right-0 text-color-grey-4">
     <i class="fa-solid fa-square-xmark fa-2x"></i>
  </div>

#html #css

horizontal card

<div class=" position-rel flex items-center justify-btw width-scaled4-8 box-shadow-1 ">
           <figure class="flex-1">
                   <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center">
           </figure>
     <div class="pd-x-4 flex-1">
          <div class="flex flex-column m-y-4">
               <h3> Levis black</h3>
               <small class="text-color-grey-2">T-Shirt</small>
          </div>
          <div class="m-y-4">
               <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
          </div>
          <div class="m-y-4">
               <span class="text-bold">₹399.00</span>
          </div>
          <div class="flex flex-column gap-1 m-y-4">
               <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
          </div>
     </div>
     <div class="position-ab top-0 right-0 ">
          <button>
                <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i>
          </button> 
     </div>
</div>

#html #css

card without text

<div class=" position-rel flex items-center width-scaled4-8 box-shadow-1 ">
  <figure class="flex-1">
     <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center">
  </figure>
  <div class="pd-x-4 flex-1  wt-60 justify-even  ">
      <div class="flex flex-column m-y-4">
           <h3> Levis black</h3>
           <small class="text-color-grey-4">T-Shirt</small>
      </div>
      <div class="m-y-4">
           <span class="text-bold text-m">₹399.00</span>
      </div>
      <div class="flex flex-column gap-1 m-y-4">
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
      </div>
   </div>
  <div class="position-ab top-0 right-0 ">
       <button>
            <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i>
       </button> 
  </div>
</div>

#html #css

vertical card

<div class=" position-rel width-scaled-8  m-auto box-shadow-1 ">
     <figure>
       <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2">
     </figure>
   <div class="pd-x-4">
       <div class="flex flex-column m-y-4">
          <h3> Levis black</h3>
          <small class="text-color-grey-2">T-Shirt</small>
       </div>
       <div class="m-y-4">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
       </div>
       <div class="m-y-4">
           <span class="text-bold">₹399.00</span>
       </div>
       <div class="flex flex-column gap-1 m-y-4">
           <button class="bg-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button>
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
       </div>
  </div>
  <div class="position-ab top-0 right-0 text-color-grey-4">
     <i class="fa-solid fa-square-xmark fa-2x"></i>
  </div>
</div>

#html #css

simple card

<div class="box-shadow-1 m-auto pd-5 flex width-scaled-8 flex-column m-y-8 rounded-s position-rel">
 <div class="flex flex-column">
    <h4>Cards Title</h4>
    <small>Text Secondary</small>
 </div>
 <div class="m-y-5"> 
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel, minus recusandae aut est reiciendis voluptates odit veritatis doloribus delectus beatae culpa fugiat eaque eveniet? Cum, voluptas beatae earum quia similique consequuntur minima optio minus animi aliquam impedit placeat dignissimos quod, dolorem facere iusto! Excepturi natus obcaecati doloribus consectetur eveniet ipsum.</p>
 </div>
  <div class="position-ab top-5 right-5">
     <i class="fas fa-heart text-color-red-5 cursor"></i>
  </div>
</div>

#css #html

CSS for Background Change using after

.live-demo-containter {
    background: #004188;
    padding-top: 2.5rem;
    position: relative;
    margin: 0 0 30px 0;
}
.live-demo-containter::after {
    content: "";
    background: #004188;
    position: absolute;
    left: 50%;
    top: 0px;
    width: 100vw;
    transform: translate(-50%,0);
    height: 100%;
    z-index: -1;
}

#html #css

avatar badge

<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-brown-5 width-1 height-1rem rounded-full top-0 right-10">              </span>
</div>
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-green-5 width-1 height-1rem rounded-full top-0 right-10">              </span>
</div>
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/norway.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-red-5 width-1 height-1rem rounded-full top-0 right-10"></span>
</div>

#html #css

badge with icon

<div class="  position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x "> </i>
        <span class="flex justify-center items-center text-color-grey-0 pd-4 width-1 height-1rem  position-ab bg-brown-7 rounded-full  text-s top--50 right--50 text-s  ">4</span>
</div>
<div class=" position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x"> </i>
        <span class=" flex justify-center items-center text-color-grey-0  position-ab  width-2 height-2rem bg-brown-7 rounded-full top--50 right--50 text-s">24</span>
</div>
<div class=" position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x "> </i>
        <span class="flex justify-center items-center text-s bg-brown-7 position-ab rounded-full  width-2 height-2rem top--50 right--50 text-color-grey-0" >124</span>
</div>

#html #css

avatars with letter

 <span class="flex justify-center items-center text-lg width-8 height-8rem bg-green-7 object-fit-cover rounded-full" >M</span>
<span class="flex justify-center items-center text-m width-6 height-6rem bg-green-7 object-fit-cover rounded-full" >G</span>
<span class="flex justify-center items-center text-xm width-4 height-4rem bg-green-7 object-fit-cover rounded-full" >D</span>

#html #css

Avatar

<img class="width-8 height-8rem object-fit-cover rounded-full" src="/utilities css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
<img class="width-6 height-6rem object-fit-cover rounded-full" src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
<img class="width-4 height-4rem object-fit-cover rounded-full" src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">

#css

Levitation CSS

.levitation {
  width: 20%;
  transform: rotate(15deg);
  filter: drop-shadow(22px -15px 5px rgba(0, 0, 0, 0.5));
  animation: bouge 8s infinite alternate-reverse;
}

@keyframes bouge {
  /*starting point and angle (same angle as choosen into .levitation)*/
  from {
    transform: translateY(0px) rotate(15deg);
  }
  /* ending point and angle */
  to {
    transform: translateY(50px) rotate(30deg);
  }
}

#css #javascript

Accordion

$(".acc:first-child h6").addClass('active');
  $(".acc:first-child .answer").addClass('active');
  $(".acc:first-child").addClass('active');
  $(".acc h6").click( function () {
      if ($(this).hasClass('active')) {
        $(this).next().slideUp(function () {
          $(this).parent().find(".active").removeClass('active');
          $(this).parent(".acc.active").removeClass('active');
        });     
      } else {
        $(this).parent().siblings().removeClass('active');
        $(this).parent().siblings().find(".active").removeClass('active');
        $(this).parent().siblings().find(".answer").slideUp(300);
        $(this).parent().siblings().find(".answer").removeClass("open");

        $(this).addClass('active');
        $(this).parent(".acc").addClass('active');
        $(this).next().addClass("open").slideDown(300);
      }
    });

#css

Box shadow from each side

.some-class {
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2);
}

#typography #css #fluid

Line Clamp

p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#css #variables #hsl #customproperties

CSS color functions and custom properties

https://www.matuzo.at/blog/2023/hsl-custom-properties/

#css

Team Search CSS

/* Team Search CSS -  Starts */

.search-team {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px
}

@media (min-width: 768px) {
    .search-team {
        grid-template-columns: 3fr 1fr;
    }
}

.search-team .facetwp-search,
.search-team .facetwp-dropdown {
    margin: 0 !important;
    border: 1px solid var(--yellow) !important;
    width: 100% !important;
    padding: 15px !important;
    border-radius: 8px !important;
    color: #666 !important;
}

.search-team .facetwp-search::placeholder {
    color: #666 !important;
}

span.facetwp-input-wrap {
    width: 100%;
}

.search-team .facetwp-facet {
    margin-bottom: 0;
}

.search-team .facetwp-icon {
    right: 6px !important;
}

.search-team .facetwp-reset {
    border: none;
    background-color: #222;
    display: inline-block;
    color: #fff;
    border-radius: 5px;
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    min-height: 50px;
}

/* Team Search CSS -  End */

#html #css

alert with dismiss

<div class="bg-green-2 text-color-green-9 flex justify-btw items-center rounded-s  pd-x-8 pd-y-5 ">
       <span class=""><i class="fa-solid fa-circle-check pd-r-5"></i>A simple success alert—check it out!</span> 
        <span><i class="fa-solid fa-xmark"></i></span>
 </div>
 <div class="bg-red-2 flex items-center text-color-red-9 justify-btw   rounded-s  pd-x-8 pd-y-5 ">
         <span ><i class="fa-solid fa-triangle-exclamation pd-r-5"></i> A simple danger alert—check it out!</span>   
         <span><i class="fa-solid fa-xmark"></i></span>
 </div>
 <div class="bg-brown-2 flex items-center text-color-brown-9 justify-btw rounded-s pd-x-8 pd-y-5 ">
         <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation pd-r-5"></i>A simple warning alert—check it out!</span> 
         <span><i class="fa-solid fa-xmark"></i></span>
 </div>

#css

Zeilenumbruch in <pre>

pre {white-space: pre-wrap;
     word-wrap: break-word; // für die dahingeschiedenen IE-Versionen
     }

#css

Create A mask for crollable div

copy
.masked-overflow {
    /* scroll bar width, for use in mask calculations */
    --scrollbar-width: 8px;

    /* mask fade distance, for use in mask calculations */
    --mask-height: 32px;

    /* If content exceeds height of container, overflow! */
    overflow-y: auto;

    /* Our height limit */
    height: 300px;

    /* Need to make sure container has bottom space,
  otherwise content at the bottom is always faded out */
    padding-bottom: var(--mask-height);

    /* Keep some space between content and scrollbar */
    padding-right: 20px;

    /* The CSS mask */

    /* The content mask is a linear gradient from top to bottom */
    --mask-image-content: linear-gradient(
        to bottom,
        transparent,
        black var(--mask-height),
        black calc(100% - var(--mask-height)),
        transparent
    );

    /* Here we scale the content gradient to the width of the container 
  minus the scrollbar width. The height is the full container height */
    --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;

    /* The scrollbar mask is a black pixel */
    --mask-image-scrollbar: linear-gradient(black, black);

    /* The width of our black pixel is the width of the scrollbar.
  The height is the full container height */
    --mask-size-scrollbar: var(--scrollbar-width) 100%;

    /* Apply the mask image and mask size variables */
    mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
    mask-size: var(--mask-size-content), var(--mask-size-scrollbar);

    /* Position the content gradient in the top left, and the 
  scroll gradient in the top right */
    mask-position: 0 0, 100% 0;

    /* We don't repeat our mask images */
    mask-repeat: no-repeat, no-repeat;
}

#css #html

flexbox grid html

    <div class="container">
        <div class="inner">test</div>
        <div class="inner">test</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
    </div>

#css #html

flexbox grid css

.container{
    display: flex;
    justify-content: center;
    gap: 2px;
    border: 2px solid black;
    width: 100%;
    flex-wrap: wrap;
}

.inner{
    background-color: aqua;
    width: 24%;
    border: 2px solid black;
}

#html #css

alert icon

<div class="bg-green-2 text-color-green-9 flex items-center rounded-s  pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-circle-check"></i></span>
    A simple success alert—check it out!
</div>

<div class="bg-red-2 flex items-center text-color-red-9  rounded-s  pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-triangle-exclamation"></i></span>
    A simple danger alert—check it out!
</div>

<div class="bg-brown-2 flex items-center text-color-brown-9  rounded-s   pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation"></i></span>
    A simple warning alert—check it out!
</div>

#html #css

Alert

     <div class="bg-green-2 text-color-green-9 rounded-s  pd-x-8 pd-y-5 ">
                    A simple success alert—check it out!
     </div>
      <div class="bg-red-2 text-color-red-9  rounded-s  pd-x-8 pd-y-5 ">
                    A simple danger alert—check it out!
      </div>
      <div class="bg-brown-2 text-color-brown-9  rounded-s   pd-x-8 pd-y-5 ">
                    A simple warning alert—check it out!
      </div>

#html #css

логин анимация неон со змейкой

<!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>
      html {
        height: 100%;
      }
      body {
        margin:0; 
        padding:0;
        font-family: sans-serif;
        background: linear-gradient(#141e30, #243b55);
      }
      .login-box { 
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        padding: 40px;
        transform: translate(-50%, -50%); 
        background: rgba(0,0,0, .5); 
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(0, 0,0, .6);
        border-radius: 10px;
      }

      .login-box h2 { 
        margin: 0 0 30px;
        padding: 0; 
        color:#fff;
        text-align: center;
      }

      .login-box .user-box {
        position: relative;
      }

      .login-box .user-box input { 
        width: 100%;
        padding: 10px 0; 
        font-size: 16px;
        color: #fff;
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #fff; 
        outline: none;
        background: transparent;
      }

      .login-box .user-box label { 
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0; 
        font-size: 16px;
        color: #fff;
        pointer-events: none;
        transition: .55;
      }

      .login-box .user-box input:focus ~ label,
      .login-box .user-box input:valid ~ label {
        top: -20px;
        left: 0;
        color: #03e9f4; 
        font-size: 12px;
      }

      .login-box form a {
        position: relative;
        display: inline-block;
        padding: 10px 20px;
        color: #03e9f4; 
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
        overflow: hidden;
        transition: .5s; 
        margin-top: 40px;
        letter-spacing: 4px
      }

      .login-box a:hover { 
        background: #039ef4;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 5px #03e9f4, 
                    0 0 25px #03e9f4, 
                    0 0 50px #03e9f4, 
                    0 0 100px #03e9f4;
      }

      .login-box a span { 
        position: absolute;
        display: block;
      }

      .login-box a span:nth-child(1) { 
        top: 0;
        left: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #03e9f4);
        animation: btn-anim1 10s linear infinite;
      }

      @keyframes btn-anim1 {
        0% {
          left: -100%;
        }
        50%,100% {
          left: 100%;
        }
      }   
          
      .login-box a span:nth-child(2) { 
        top: -100%;
        right: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(180deg, transparent, #03e9f4);
        animation: btn-anim2 10s linear infinite;
        animation-delay: -7.5s
      }
      
      @keyframes btn-anim2 {
        0% {
          top: -100%;
        }
        50%,100% { 
          top: 100%;
        }
      }

      .login-box a span:nth-child(3) {
        bottom: 0;
        right: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(270deg, transparent, #03e9f4);
        animation: btn-anim3 10s linear infinite;
        animation-delay: -5s
      }

      @keyframes btn-anim3 {
        0% {
          right: -100%;
        }
        50%,100% {
          right: 100%;
        } 
      }

      .login-box a span:nth-child(4) {
        bottom: -100%;
        left: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(360deg, transparent, #03e9f4);
        animation: btn-anim4 10s linear infinite;
        animation-delay: -2.5s
      }

      @keyframes btn-anim4 {
        0% {
          bottom: -100%;
        }
        50%,100% {
          bottom: 100%;
        } 
      }
    </style> 
  </head> 
  <body>
    <div class="login-box"> 
      <h2>Login</h2> 
      <form>
        <div class="user-box">
          <input type-"text" name="" required=""> 
          <label>Username</label> 
        </div> 
        <div class="user-box"> 
          <input type="password" name="" required="">
        <label>Password</label>
        </div>
        <div class="user-box"> 
          <a>
            LOGIN
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </a>
      </form>
    </div>
  </body>
</html>

#html #css

приветствие! текстовая анимация с эффектом волны

<!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>
		.animate-charcter {
      text-transform: uppercase;
      background: linear-gradient(
        -225deg,
        #231557 0%,
        #44107a 29%,
        #ff1361 67%,
        #fff800 100%
      );

      background-size: auto auto; 
      background-clip: border-box; 
      background-size: 200% auto;
        color: #fff;
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textclip 4s linear infinite;
        display: inline-block;
        font-size: 140px; 
    }
    @keyframes textclip {
      to {
        background-position: 200% center;
      }
    }
	</style> 
  </head> 
  <body>
    <div class="container"> 
      <div class="row">
        <div class="col-md-12 text-center">
          <h3 class="animate-charcter"> Hello, Mike!</h3> 
        </div> 	
      </div>
    </div> 
  </body>
</html>

#css

Browserhacks

.selector:not(*:root) {}

#css #howto find second <p> element in a <div>?

How to find second <p> element in a <div>?

p:nth-of-type(2)

#always #css

always Css

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid red;
}

#css #html

Accessible display:none Solutions

/* "The "clip pattern" accomplishes this task for you; hide the content visually, yet provide the content to screen readers." */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* For a, button, and input elements use the following to select on focus */

.visually-hidden:not(:focus):not(:active) {
  /* ... */
}

/* If you need to toggle something with display:none, you can do so with the help of aria-hidden=true */

.my-component[aria-hidden="true"] {
  display: none;
}

#css

Scaling Background Images

body {
  background-image: url('#');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#css

Scaling Images and Videos

.container {
  width: 50%;
  height: 200px;
  overflow: hidden;
}
 
.container img {
  max-width: 100%;
  height: auto;
  display: block;
}

#css #popup

Popup wordpress fix css mobile

.pum-container {
    padding: 0px !important;
}

.pum-content.popmake-content img {
    margin-bottom: 0px;
}

@media (max-width: 780px){
        
         body .pum-container {
		width: 90% !important;
		margin: auto !important;
		left: 0 !important;
		right: 0 !important;
		padding: 0px !important;
	}

	.pum-theme-lightbox {
		text-align: center;
	}

}

#css

Full Page Background Image

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#html #css

Bordes degradados con CSS

/* hmtl */
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>

    <article class="card">
      <div class="card-body">
       @Antonio Robles
      </div>
    </article>
	</body>
</html>


***
/* CSS */
:root {
  --border-color: linear-gradient(to right, tomato 0%, gold 100%);
  --card-color: #222;
}
.card {
  background: var(--border-color);
  aspect-ratio: 10/16;
  width: 200px;
  padding: 5px;
  border-radius: 16px;
  position: relative;
}

.card-body {
  color: wheat;
  background: var(--card-color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

#html #css

codi.link | HTML, CSS, JavaScript Live Editor Playground

https://codi.link/PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCgk8aGVhZD4NCgkJPHRpdGxlPlBhZ2UgVGl0bGU8L3RpdGxlPg0KCTwvaGVhZD4NCgk8Ym9keT4NCg0KICAgIDxhcnRpY2xlIGNsYXNzPSJjYXJkIj4NCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQtYm9keSI+DQogICAgICAgQEFudG9uaW8gUm9ibGVzDQogICAgICA8L2Rpdj4NCiAgICA8L2FydGljbGU+DQoJPC9ib2R5Pg0KPC9odG1sPg

#css

Facet Pager - Load More CSS

.facetwp-type-pager {
    text-align: center;
}

button.facetwp-load-more {
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
    background-color: var(--maroon);
    color: #fff;
    letter-spacing: 0.5px;
}

button.facetwp-load-more:hover {
    opacity: .9;
    cursor: pointer;
}

#css

How to Create a Fixed Navbar with CSS

ul {
  overflow: hidden;
  background-color: #42cde1;
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}
ul li {
  list-style-type: none;
  display: inline-block;
}
ul li a {
  display: block;
  color: #eeeeee;
  text-align: center;
  padding: 15px 30px 15px 20px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  font-family: arial;
}
.navbar a:hover {
  color: #ffffff;
}
.container {
  padding: 18px;
  margin-top: 35px;
  height: 2000px;
}

##php ##wordpress #css #html

Border Radius

border-radius: 50px 0px 50px 0px;

#css #js

For country code.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/js/intlTelInput.min.js"></script>

<div class="input-field">
    <input type="tel" id="intl_phone_number" minlength="10" />
</div>

<script>
    const phoneInputField = document.querySelector("#intl_phone_number");
    const phoneInput = window.intlTelInput(phoneInputField, {
        separateDialCode: true,
        hiddenInput: "phoneno",
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/js/utils.js"
    });
</script>

#css

remnote-css/colored-rem-references.css at main · anishaaa1/remnote-css

:root { /* Try one of these to start with. */
	--plum: plum; /* HEX: #dc9fdd */
	--purple: #9381ff;
	--plumdm: #ffbcff;
	--blue: royalblue;
	--lightcoral: lightcoral;
}
/* Light Mode */
.rem-reference {
/* To use one of the above color variants, replace --purple in var(--purple) with any of the above.
For example, to use the light coral color → color: var(--lightcoral) */
	color: var(--plum);
/* You can also choose other colors by replacing var(--plum) with the hex code of your chosen color.
For example, to use white → color: #fff */
	padding: 0px!important;
}
/* Dark Mode */
.dark .rem-reference {
	color: var(--plumdm);
	padding: 0px!important;
}

#css

boder

p.content-header {
  height: 80px;
  width: 240px;
  border: solid coral;
}

#typography #css #fluid

CSS Clamp

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

#css

important

color: #FFF   !important;

#css

background image

.main-banner {
  background-image: url('https://www.example.com/image.jpg');
}

#css

comingHome | a pure CSS spatial experience

:root 

{

    --dark-color: rgb(0,0,0);

    --glossy-red: rgba(23, 1, , 1);

    --hidden-red: rgba(238, 17, 17, 0);

    --light-red: rgba(238, 17, 17, .5);
7
    --paths-theme: var(--very-light-red) var(--glossy-red);
8
    --planets-theme: var(--light-red) var(--light-red) var(--light-red) var(--glossy-red); 

    --very-light-red: rgba(238, 17, 17, .25);

}

*, *::after, *::before

{

    -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

            box-sizing: border-box;

    padding: 0;
17


    margin: 0;

#css

Daily UI #9 Music Player

@import 'https://fonts.googleapis.com/css?family=Open+Sans:00,00'; 

%reset { margin: 0; padding: 0; }
3
%flex { display: flex; justify-content: center; align-items: center; }
4


@mixin dimensions($width: null, $height: null) { width: $width; min-height: $height; }



    html{height: 0%;}

    body{

      
10
      @extend %flex;

       font-family: 'Open Sans', sans-serif;

      width: 100%;

      min-height: 100%;

      background:linear-gradient(141deg, #0C5B5F 0%, rgba(0, 212, 3, 0.77) 75%);
15
    }

 



    *, *:before, *:after {

#css

Player

html,

body

  min-height: 0%

  

body

  background: radial-gradient(ellipse at center, #ffc0 0%, #e0ad00 100%)



.player

  box-shadow: 0 2px 4px -4px rgba(0, 0, 0, .4), 0 50px 45px -20px rgba(0, 0, 0, .2)
10
  border-radius: 30px

  height: 400px

  margin: 50px auto

  overflow: hidden

  position: relative

  width: 400px

  

  &__meta

    box-sizing: border-box

    font-size: 24px
20
    padding: 50px 20px

#music #player #css

Audio Player HTML5 Wellcome to Rofa Music store

/* Global Reset */

* {

    font-family: 'Allerta', arial, Tahoma;

    box-sizing: border-box;

}

body {

    background: linear-gradient(to left, #7700aa, #800ff);
8
    text-align:center;

    color:#fff;

}

h3{

    text-shadow:1px 1px 1px #fff;

}

/* Start  styling the page */

.container-audio {

    width: 66%;

    height: auto;

    padding: px;

    border-radius: 5px;
20
    background-color: #eee;

    color: #444;

    margin: 20px auto;

#css

opasity

.overlay {
  opacity: 0.5;
}

#css

back and fore

h1 {
  color: red;
  background-color: blue;
  foreground-color: blue
}

#css

font stuff

.caption {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 14px;
  font-weight:bold
  margin-left: 20px;
  padding: 10px;
  position: relative;
  top: 80%;
  width: 60%;
}

#css

how to change font

h1,
h2{
  font-family:Georgia
}
p{
  font-family:Helvetica
}

#css

how to change font

h1 {
  font-family: Garamond;
}

#css

all ways to use css

* {
  border: 1px solid red;
}

p {
  color: green;
}

h1 {
  color: maroon;
}

.title {
  color: teal;
}

.uppercase {
  text-transform: uppercase;
}

#article-title {
  font-family: Tahoma;
}

a[href*='florence'] {
  color: lightgreen;
}

a[href*='beijing'] {
  color: lightblue;
}

a[href*='seoul'] {
  color: lightpink;
}

a:hover {
  color:darkorange;
}

.heading-background {
  background-color: aqua;
}

#publish-time {
  color: lightgray;
}

h5 {
  color: yellow;
}

.author-class {
  color: pink;
}

#author-id {
  color: cornflowerblue;
}

h2.destination {
  font-family: Tahoma;
}

.description h5 {
  color: blueviolet;
}

li h4 {
  color: gold;
}

h4 {
  color: dodgerblue;
}
li,
h5 {
  font-family: monospace;
}

#css

font color

<link href='./style.css' rel='stylesheet'>
 
  
  //this is in css file
 p {
  color: green;
}

#css #js

to show selected file name

$("#file").change(function() {
      filename = this.files[0].name;
      $('.filename').text(filename);
    });

#css

Patterns for Practical CSS Custom Properties Use | CSS-Tricks - CSS-Tricks

.message {
  background-color: var(--student-background, #fff);
  color: var(--student-color, #000);
  font-family: var(--student-font, "Times New Roman", serif);
  margin-bottom: 10px;
  padding: 10px;
}

[data-student-theme="rachel"] {
  --student-background: rgb(43, 25, 61);
  --student-color: rgb(252, 249, 249);
  --student-font: Arial, sans-serif;
}

[data-student-theme="jen"] {
  --student-background: #d55349;
  --student-color: #000;
  --student-font: Avenir, Helvetica, sans-serif;
}

[data-student-theme="tyler"] {
  --student-background: blue;
  --student-color: yellow;
  --student-font: "Comic Sans MS", "Comic Sans", cursive;
}

#css

Default Class CSS

.highlighted {
  --highlighted-size: 30px;
}

.default {
  --default-size: 10px;

  /* Use default-size, except when highlighted-size is provided. */
  font-size: var(--highlighted-size, var(--default-size));
}

#css

Skeleton Pulse

/* Skeleton */

.bubble-element.skeleton .Text, .bubble-element.skeleton .Image, .bubble-element.skeleton.HTML div {

   background:: -webkit-linear-gradient(-90deg, #edeef1 0%, #fcfcfc 50%, #edeef1 100%);

  background: linear-gradient(-90deg, #edeef1 0%, #fcfcfc 50%, #edeef1 100%);

  background-size: 400% 400%;

  -webkit-animation: SkeletonLTD 1s ease-in-out infinite;

          animation: SkeletonLTD 1s ease-in-out infinite;

}

.bubble-element.skeleton img, .bubble-element.skeleton .Button, .bubble-element.skeleton .timeago, .bubble-element.skeleton svg  {

  display: none !important;

}

.bubble-element.skeleton .Text{ 

  color: transparent  !important; 

}

@-webkit-keyframes SkeletonLTD {

0% {

    background-position: 0% 0%;

  }

  100% {

    background-position: -135% 0%;

  }

}

@keyframes SkeletonLTD {

  0% {

    background-position: 0% 0%;

  }

  100% {

    background-position: -135% 0%;

  }

}

#css

ease-out, in; ease-in, out | CSS-Tricks - CSS-Tricks

.examples {

  transition-timing-function: linear;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);

  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

  transition-timing-function: ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

  transition-timing-function: ease-in;
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

  transition-timing-function: ease-out;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

}

#css

Styling parent elements based on the number of children with CSS :has()

/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
	outline: 1px solid red;
}

/* At most 3 (3 or less, including 0) children */
ul:not(:has(> :nth-child(3))) {
	outline: 1px solid red;
}

/* Exactly 5 children */
ul:has(> :nth-child(5):last-child) {
	outline: 2px solid blue;
}

/* At least 10 (10 or more) children */
ul:has(> :nth-child(10)) {
	outline: 2px solid green;
}

/* Between 7 and 9 children (boundaries inclusive) */
ul:has(> :nth-child(7)):has(> :nth-child(-n+9):last-child) {
	outline: 2px solid yellow;
}


/* Non-demo styles below */
@layer base {
	@layer layout {
		html {
			max-width: 84ch;
			padding: 3rem 2rem;
			margin: auto;
			line-height: 1.5;
			font-size: 1.25rem;
		}
		body {
			margin: 0;
			padding: 0;
		}
		a,
		a:visited {
			color: blue;
		}
		
		h2 {
			margin-top: 2em;
		}
	}
	
	@layer code {
		pre {
			border: 1px solid #dedede;
			padding: 1em;
			background: #f7f7f7;
			font-family: "Courier 10 Pitch", Courier, monospace;
			overflow-x: auto;
			border-left: 0.4em solid cornflowerblue;
			tab-size: 4;
		}
	}

	@layer support {
		.no-support,
		.has-support {
			margin: 1em 0;
			padding: 1em;
			border: 1px solid #ccc;
		}

		.no-support {
			background-color: #ff00002b;
			display: block;
		}
		.has-support {
			background-color: #00ff002b;
			display: none;
		}
		:is(.has-support, .no-support) > :first-child {
			margin-top: 0;
		}
		:is(.has-support, .no-support) > :last-child {
			margin-bottom: 0;
		}

		@supports(selector(:has(*))) {
			.no-support[data-support="css-has"] {
				display: none;
			}
			.has-support[data-support="css-has"] {
				display: block;
			}
		}
	}
}

@layer reset {
	
}

#css

At most x children

/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
	outline: 1px solid red;
}

#css

SF-PDF table pagination

https://developer.salesforce.com/forums/?id

#css

Css When Click Select Another Class With Code Examples

// If the cube is directly inside the container:
#container:hover > #cube { background-color: yellow; }
// If cube is next to (after containers closing tag) the container:
#container:hover + #cube { background-color: yellow; }
// If the cube is somewhere inside the container:
#container:hover #cube { background-color: yellow; }
// If the cube is a sibling of the container:
#container:hover ~ #cube { background-color: yellow; }

#css

Css selectors - Match strings na Class do inicio, meio e fim

[class^="Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:red;
}
/*note the space after the class name---------v*/
[class^="Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:blue;
}
/*       v---note the space before the class name*/
[class*=" Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:green;
}
/*       v------space before and after---------v */
[class*=" Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:purple;
}

#css

css - Match all elements having class name starting with a specific string - Stack Overflow

div[class^='myclass'], div[class*=' myclass']{
    color: #F00;
}

#css

The CSS :has Selector (and 4+ Examples) | CSS-Tricks - CSS-Tricks

div:has(p) {
  background: red;
}
/*
  <div> <!-- selected! -->
     <p></p>
  <div>

  <div></div> <!-- not selected -->
  <div> <!-- not selected -->
    <section></section>
  </div>
*/

#b2b #c++ #css #react.js #javascript #mongoshell #mysql #crypto #nft #blockchainfork development

cryptocurrency fork Development

Grab up to 30% off on our blockchain fork development Services limited time Offer ends in November 25.

For the development of many business sectors, blockchain forks are essential. However, depending on the position, the process requires the use of technology. This is why we're going to look at some of the ways that cryptocurrencies can be developed, including forking existing blockchains to create new ones.

Hivelance, a leading blockchain fork development company, creates a customizable Blockchain Fork Development on various blockchain networks such as Ethereum, Tron, and Binance Smart Chain (BSC), allowing innovators to launch their businesses faster.

visit our site for know more-

https://www.hivelance.com/blockchain-forking

#b2b #c++ #css #react.js #javascript #mongoshell #mysql #crypto #nft #nfttoken

NFT Token Development Services

Black Friday sale : Grab up to 30% off on our NFT Token development Services limited time Offer ends in November 25.

Hivelance is a reputable NFT Token development business that works with clients from all over the world and across many industry sectors. We have developed secure, efficient, and revenue-generating NFT development solutions. Hivelance is a leading NFT token development company that offering a  top-notch innovative NFT token development solutions for various businesses across multiple industries. Being the best token development company we create and launch the different types of tokens according to the client’s requirement. We make engaging non-fungible token with transparency, high-end security, and faster delivery.

visit our website for more info-

https://www.hivelance.com/nft-token-development

#erc20 #b2b #c++ #css #react.js #javascript #mongoshell #mysql #crypto

ERC20 Token Development

Grab up to 30% off on our ERC20 Token development Services limited time Offer ends in November 25.

The ERC20 Token contract is the smart contract code logic that executes the fungible token activity. When a contract is put into practise on Ethereum, it can be exchanged for any tokens with a similar value. The ERC20 token standard is used for crypto staking, voting, and the exchange of digital cash as a result. Anyone can generate ERC20 tokens and import them into Ethereum virtual machines.

Hivelance provides ERC20 token development service.  We offer an alot of options as part of our ERC20 Token development package, such as code generation, logo design, an audit of the ERC token contract, deployment to the EVM, ongoing development, security audits at regular intervals, and more. We have supported various ICO projects and helped them scale up their fundraising efforts.

https://www.hivelance.com/erc20-token-development

#css

css code snippet to explain: nth-child() & nth-of-type()

/* Universal Selector */

* {
    margin: 0;
    padding: 0;
    background-color: gray;
}

.container {
    margin: 100px;
    line-height: 50px;
    margin-left: 600px;
    font-size: xx-large;
}

div li:nth-child(2) {
    color: dodgerblue;
}

div li:nth-of-type(3) {
    color: red;
}

#css

Text decoration, control the behaviour of underline and overline

// By default, browsers will “skip” areas where the “ink” of a character crosses an underline. You can change this behavior to force the underline/overline to go through the character by setting text-decoration-skip-ink to none.

a:not([class]) {
	text-decoration-skip-ink: auto; // || none
}

#css

Detect a touch device with only CSS

//if the primary input mechanism system of the device can hover over elements with ease, we use hover
@media (hover: hover) {
    /* ... */
}

//if the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none
@media (hover: none) {
    /* ... */
}

#js #html #css

Watch for System Dark Mode - Light Mode

//Pictures
 <picture>
       <source
    media="(max-width:599px) and (prefers-color-scheme: light)"
    srcset="images/bg-mobile-light.jpg"
    />
      <source
    media="(max-width:599px) and (prefers-color-scheme: dark)"
    srcset="images/bg-mobile-dark.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: light)"
    srcset="images/bg-desktop-light.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: dark)"
    srcset="images/bg-desktop-dark.jpg"
    />
      <img
    src="images/bg-mobile-light.jpg"
    aria-hidden="true"
    class="background-img"
    alt=""
    />
</picture>

//CSS
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #25273c;
    --color-primary-text: #e4e5f1;
    --color-secondary-text: #cacde8;
    --color-deleted-text: #4d5067;
    --color-circle: #777a92;
    --color-background: #161722;
    --color-background-hover: #1c1e35;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-white: #ffffff;
    --color-primary: #ffffff;
    --color-primary-text: #494c6b;
    --color-secondary-text: #9394a5;
    --color-light-text: #d4d4d4;
    --color-active: #3a7cfd;
    --color-circle: #d6d6d6;
    --color-background: #fafafa;
    --color-background-hover: #ebebeb;
    --color-background-modal: rgba(73, 76, 107, 0.6);
    --color-error: #cd1237;
  }
}


//JS
let dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
//Show which prefers-color-scheme user has before the page loads
window.matchMedia('(prefers-color-scheme: dark)');
if (dark) {
  //Do something
} else {
  //Do something
}

#typography #css #fluid

Style Link by URL

a[href="your url here"]{
    background:red;
}

#css

Styling File Inputs — The accessible & semantic way. | Ben Marshall

[type="file"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}
[type="file"] + label {
  /* File upload button styles */
}
[type="file"]:focus + label,
[type="file"] + label:hover {
  /* File upload hover state button styles */
}
[type="file"]:focus + label {
  /* File upload focus state button styles */
}

#css

CSS Aspect Ratio — natively with aspect-ratio. - Ben Marshall

.container {
  aspect-ratio: 16 / 9;
}

#css

Responsive iframes — The Right Way (CSS Only)! | Ben Marshall

.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

#css

More Less

jQuery(".morelink").click(function(){
        if(jQuery(this).hasClass("less")) {
            jQuery(this).removeClass("less");
            jQuery(this).html(moretext);
        } else {
            jQuery(this).addClass("less");
            jQuery(this).html(lesstext);
        }
        jQuery(this).parent().prev().toggle();
        jQuery(this).prev().toggle();
        return false;
    });

#css

jQuery(document).on('click', '#loadMore', function () {
        jQuery('#loading-image').show();
        jQuery(document).find('#load-data').addClass('show-overlay');
        var cat_name = jQuery('.slider-feature-section').find('.current-cat').attr('data-slug');
        data_page = jQuery(this).attr('data_page');
        jQuery(this).parents('.show-more').remove();
        jQuery.ajax({
            type: "post",
            url: TOPNZCASINOPUBLIC.ajaxurl,
            data: {
                action: "load_more",
                page: data_page,
                cat_name: cat_name
            },
            success: function (response) {
                jQuery("#load-data").append(response);
                jQuery('#loading-image').hide();
                jQuery(document).find('#load-data').removeClass('show-overlay');
            }
        });
    });

#css

show slides

if (jQuery('.slide-wrapper').find('.slide-wrap').length > 2) {
      $('.slide-wrapper').append('<div><a href="javascript:;" class="showMore"></a></div>');
  }
  
  // If more than 2 Education items, hide the remaining
    $('.slide-wrapper .slide-wrap').slice(0,4).addClass('shown');
    $('.slide-wrapper .slide-wrap').not('.shown').hide();
    $('.load-more-slide').on('click',function(){
        $('.slide-wrapper .slide-wrap').not('.shown').toggle(300);
        $('.slide-wrapper').toggleClass('showLess');
        $('.load-more-slide').toggleClass('slide-down');
    });

#css

Hide "Hidden Columns" and "Add a group" in Notion

@-moz-document url-prefix("https://www.notion.so/") {

.notion-board-view>div:nth-child(1)>div:nth-child(4),
.notion-board-view>div:nth-child(1)>div:nth-child(1)>div:nth-child(3) {
        display: none !important;
}
.notion-board-view > [data-block-id] > div:last-child,
.notion-board-view > [data-block-id] > div:first-child > div:last-child {
  display: none !important;
}
    
}

#css #html

Smooth scrolling

/**
 * Enable smooth scrolling on the whole document
 */
html {
	scroll-behavior: smooth;
}


/** Animations can cause issues for users who suffer from motion sickness and other conditions.
 * Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

#undefined #html #css

My Profile

- 👋 Hi, I’m @murufi

- 👀 I’m interested in ...

- 🌱 I’m currently learning ...

- 💞️ I’m looking to collaborate on ...

- 📫 How to reach me ...



<!---

murufi/murufi is a ✨ special ✨ repository because its `README.md` (this file) appears on your GitHub profile.

You can click the Preview link to take a look at your changes.

--->

#html #css

select indian state form

<select name="state_name" class="form-control" id="checkout-state" required="">
<option value="">Select State</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Orissa">Orissa</option>
<option value="Pondicherry">Pondicherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="West Bengal">West Bengal</option>



</select>

Andaman and Nicobar Islands
Andhra Pradesh
Arunachal Pradesh
Assam
Bihar
Chandigarh
Chhattisgarh
Dadra and Nagar Haveli
Daman and Diu
Delhi
Goa
Gujarat
Haryana
Himachal Pradesh
Jammu and Kashmir
Jharkhand
Karnataka
Kerala
Lakshadweep
Madhya Pradesh
Maharashtra
Manipur
Meghalaya
Mizoram
Nagaland
Orissa
Pondicherry
Punjab
Rajasthan
Sikkim
Tamil Nadu
Telangana
Tripura
Uttarakhand
Uttar Pradesh
West Bengal

#html #css

Shopify Add to cart Button Html old and new

<form method="post" action="/cart/add" class="col-button">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
            <input type="submit" value="Add to cart" class="btn add-to__cart" />
          </form>

.col-button .btn.add-to__cart {  padding: 8px 10px;
font-size: 14px;
text-transform: capitalize;
letter-spacing: 1px;
margin-left:10px;
/*     margin-right:10px; */
/*     margin-top: 15px; */
}
[data-type_product_capitalize="true"] .grid-product__title {
min-height:50px;
}

@media only screen and (max-width:480px){
[data-type_product_capitalize="true"] .grid-product__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}

<form method="post" action="/cart/add" class="col-button">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
            <input type="submit" value="{% if product.variants.first.available%}Add to cart{% else %}Sold Out{% endif%}" class="btn add-to__cart"" {% unless product.variants.first.available %}disabled{% endunless %} />
          </form>

#css #html

WPIET

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3783.910308083909!2d-97.39088478571517!3d18.487721487428114!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85c5bcd5ee8ba413%3A0x7919bdf4dfd04b6!2sInstituto%20Educares!5e0!3m2!1ses-419!2smx!4v1667271208223!5m2!1ses-419!2smx" width="550" height="1000" style="position:relative; top: -1050px; left: 800px;border-radius: 50px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
/* Se personaliza margenes del mapa */



/* Boton de Enviar
<button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button>

<div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="92"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="16"><button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button><img src="https://educares.edu.mx/wp-content/plugins/wpforms-lite/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Cargando"></div> */

<div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="92"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="16"><button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button><img src="https://educares.edu.mx/wp-content/plugins/wpforms-lite/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" padding: 5px 5px alt="Cargando"></div>


.wpforms-form input[type=submit],  .wpforms-form button[type=submit] {    
  color: #fff !important;
  background-color: #FAF243 !important; 
  border-radius: 50px !important;
  max-width: 95% !important;
	height: 55px !important;
	text-align: center !important;
	Font-size: 25px !important;
	border-radius: 50px !important;
    padding: 15px !important;
    border-style: none !important;
    color: #fff !important;    
    margin: 0px 150px !important;
/* Se personaliza el botón de enviar:  1.- El color se estable en  */ }


.wpf-color-fondo-formulario {
border-radius: 50px !important;
 background: #85a441 !IMPORTANT;
padding: 2.5% 2.5% !IMPORTANT;
margin: 20px 650px 20px 0px !important;
}
 

  /* Se personaliza:  1.- SE REDONDEA LAS ESQUINAS DEL FORMULARIO  A 50PX 
  					  2.- SE ESTABLECE EL COLOR DE FONDO A :#85a441
                      3.- EL ESPACIO ENTRE EL CONTENDER Y SU CONTENIDO
                      4.- El MARGEN IZQUIERDO DEL FORMULARIO SE ESTABLECE 650PX*/ 
  
}

  .wpforms-form .wpforms-field-label {

font-size: 35px !IMPORTANT;
line-height: 2 !important;
margin: 5px 0px 5px 0px !IMPORTANT;

  /* Se personaliza:  1.- EL TAMAÑO DE LAS ETIQUETAS SE ESTABLECEN A 35PX  A 50PX 
  					  2.- LA ALTU...
                      3.- LOS MARGENES DE 12 Y 6 PM*/ 
  /*float: none;
padding: 5%;
display: block;
font-weight: 700;*/
}


.wpforms-form .wpforms-field {
padding: 20px 40PX !IMPORTANT;
clear: both;
 /* Se personaliza:  1.- EL TAMAÑO DE LAS ETIQUETAS SE ESTABLECEN A 35PX  A 50PX 
  					  2.- LA ALTU...
                      3.- LOS MARGENES DE 12 Y 6 PM*/
}

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large {

  	max-width: 100% !important;
	height: 55px !important;
	text-align: center !important;
	Font-size: 20px !important;
	border-radius: 50px !important;

/* Se personaliza:  	1.- ...
  					  	2.- ...
                      	3.- ...*/
}


.wpforms-form .choices__inner {
max-width: 100% !important;
height: 55px !important;
text-align: center !important;
Font-size: 20px !important;
border-radius: 50px !important;

/*display: inline-block;
vertical-align: top;
width: 100%;
background-color: #ffffff;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;*/


}

.wpforms-form .wpforms-valid {
max-width: 100% !important;
height: 55px !important;
text-align: center !important;
Font-size: 20px !important;
border-radius: 50px !important;

/*display: inline-block;
vertical-align: top;
width: 100%;
background-color: #ffffff;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;*/
}


/*.wpforms-form .wpforms-valid {
display: inline-block;
vertical-align: top;
width: 100%;
background-color: #2D4E5E !important;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;
border-radius: 50px !important;
}



.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
border-radius: 100%!important;
padding: 10px 0;
clear: both;
}

*/

#typography #css #fluid

Using calc to figure out optimal line-height

line-height: calc(2px + 2ex + 2px);

#typography #css #fluid

Simplified Fluid Typography

html {
  font-size: min(max(1rem, 4vw), 22px);
}

/* or */

body {
  font-size: clamp(100%, 1rem + 2vw, 24px);
}

/* with variables */

h1 {
  --minFontSize: 32px;
  --maxFontSize: 200px;
  --scaler: 10vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}

#css

Background Gradient Full Page

body {
  background: rgb(34, 193, 195);
  background: linear-gradient(
    0deg,
    rgba(34, 193, 195, 1) 0%,
    rgba(8, 52, 75, 1) 100%
  );
  background-attachment: fixed;
}

#css

Mega Menu with Icon + Description

/*
*	Services Menu Properties
*	Please change the variable value below to update 
*	icon and description on the Services menu	
*/
// Icons
$fractional-cto:			'/wp-content/uploads/2022/10/submenu-fractional.svg';
$app-web: 					'/wp-content/uploads/2022/10/submenu-web.svg';
$software-qa: 				'/wp-content/uploads/2022/10/submenu-software.svg';
$fractional-product: 		'/wp-content/uploads/2022/10/submenu-product.svg';
$outsourced-developer: 		'/wp-content/uploads/2022/10/submenu-developer.svg';  
$talent-recruiting: 		'/wp-content/uploads/2022/10/submenu-staffing.svg';
// Description
$fractional-cto-desc: 			"Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations.";
$app-web-desc:  				"Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes."; 
$software-qa-desc: 				"Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services."; 
$fractional-product-desc: 		"Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules."; 
$outsourced-developer-desc: 	"Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks.";  
$talent-recruiting-desc: 		"Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team.";
/* Header */
header{
	&.fl-theme-builder-header-scrolled{
		background-color: #FFF;
		box-shadow: 0 1px 25px rgb(57 63 72 / 10%);
	}
	&.fl-theme-builder-header-shrink{
		ul.menu >{
			li{
				padding: 25px 0;   
			}
		} 
	} 
	ul.menu >{
		li{
			padding-top: 30px;
    		padding-bottom: 30px;
			&.menu-item-has-children{
				.menu-item-text{
					.pp-menu-toggle{
						right: -7px !important;
						transition: all .3s ease-in-out;
					}
				}
				&:hover{
					.menu-item-text{
						.pp-menu-toggle{
							transform: rotate(180deg);
						}
					}
				}
			} 
			& >{
				
				a{
					
				}
				.pp-has-submenu-container >{
					a{
						
					}
				}
				ul.sub-menu{
					padding: 30px !important;
					transform: translateX(-40%);
					display: grid !important;
					grid-template-columns: 1fr 1fr;
					row-gap: 30px;
					column-gap: 40px;
					& >{
						li{
							& > {
								a{
									 display: grid;
									 grid-template-columns: 26px auto;
									 grid-template-rows: auto;
									 column-gap: 20px;
									 grid-template-areas: 
										"icon menu"
										"icon description";  
									 transition: all .3s ease-in-out;
									.menu-item-text{
										grid-area: menu;
    									line-height: 1.25;
									}
									.menu-desc{
										font-size: 14px;
										font-weight: 300;
										grid-area: description;
										margin-bottom: 0;
										margin-top: 5px;
										color: #7E7E7E !important;
									}
									.menu-image{
										background-repeat: no-repeat;
										background-size: contain;
										width: 27px;
										height: auto;
										grid-area: icon;
									}
								}
							}
							&:hover{
								
							}
// 							&:not(:first-child){
// 								margin-top: 25px;
// 							}
							@each $name, $glyph in $menu-image {
								&.submenu-#{$name}{
									.menu-image{
										background-image: url($glyph);
									}
								}
							}
							@each $name, $glyph in $menu-description {
								&.submenu-#{$name}{
									.menu-desc{
										&::before{
										   content: $glyph;
										}
									}
								}
							}
						}
					}
					@media(min-width: $min-mobile){
						&::before{
							position: absolute;
							width: 0;
							height: 0;
							content: "";
							border-style: solid;
							border-width: 15px 0 15px 15px;
							border-color: transparent transparent transparent #FFF;
							right: unset!important;
							top: -20px !important;
							left: 45% !important;
							transform: rotate(270deg)!important;
						}
					}
					@media(max-width: $tablet){
						transform: translateX(-30%);
						&::before{
							left: 33% !important;
						}
					}
				}
			}
			&.current-page-ancestor >{
				a{
					color: $jt-blue !important;
				}
				ul.sub-menu >{
					li.current-menu-item >{
						a{
							
						}
					} 
				}
				.pp-has-submenu-container >{
					a{
						color: $jt-blue !important;
						.pp-menu-toggle::before{
							border-color: $jt-blue;
						}
					}
				} 
			}
			&.jt-active >{
				a{
					color: #1A8CFF !important;
				}
			}
			&.pp-has-submenu.pp-menu-submenu-right{
				.sub-menu {
					right: unset !important;
				}
			} 
			&.menu-company, &.menu-resources{
				ul.sub-menu{
					width: 386px;
				}
			}
		}
	}	
}
nav.pp-menu-nav{
	.pp-social-icons{
		span.pp-social-icon{
			margin-right: 20px;
			a{
				font-size: 20px;
				@each $name, $glyph in $social-icons {
				  i.fa-#{$name}{
					color: $glyph;
				  }
				}
			}
		}
	}
}

#css #js

To change color on click

$('.green').click(function() {
  $('.timer').css('background', 'green');
});
$('.red').click(function() {
  $('.timer').css('background', 'red');
});

#list #typography #css

break-inside

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

#css #color

Upgrading colors to HD on the web – Bram.us

@supports (background: color(display-p3 1 1 1)) {
  :root {
    --supports-display-p3: ;
  }
}

body {
  --hotterpink: var(--supports-display-p3) color(display-p3 1 0 0.87);
  --hotpink: var(--hotterpink, hotpink);
  background: var(--hotpink);
}

#css #color

Upgrading colors to HD on the web – Bram.us

@supports (background: color(display-p3 1 1 1)) {
  :root {
    --supports-display-p3: ;
  }
}

body {
  --hotterpink: var(--supports-display-p3) color(display-p3 1 0 0.87);
  --hotpink: var(--hotterpink, hotpink);
  background: var(--hotpink);
}

#css #color #fallback

Upgrading colors to HD on the web – Bram.us

@supports(background: color(display-p3 1 1 1)) {
  :root {
    --hotterpink: color(display-p3 1 0 0.87);
  }
}

:root {
  --hotpink: var(--hotterpink, hotpink);
}

#css

Default alignment for Oxygen

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin: 0.5em 1em 0.5em 0;
}

.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1em;
}

#css

News Wrap - CSS

/* News Wrap CSS - Starts */

@media (min-width: 768px) {
    .news-wrap .slide-entry {
        display: flex;
    }
    
    .news-wrap .slide-image {
        width: 30%;
        background-color: transparent !important;
    }
    
    .news-wrap .slide-content {
        width: 70%;
        padding-left: 60px;
    }
    
    .news-wrap .slide-content .entry-title {
        text-align: left !important;
        padding: 0 0 10px;
    }
    
    .news-wrap .more-link {
        margin: 20px 0;
    }
    
    .news-wrap .read-more-link {
        padding: 0 !important;
        display: block;
        overflow: visible;
    }
    
    .news-wrap .av-vertical-delimiter {
        margin: 0;
    }
}

.news-wrap .av-vertical-delimiter {
    border-color: #929292;
    width: 60px;
}

.news-wrap .blog-categories,
.news-wrap .slide-meta {
    display: none !important;
}

.news-wrap .more-link {
    text-transform: capitalize;
    font-size: 17px;
    max-width: 200px;
}

.news-wrap .slide-content .entry-title a {
    text-transform: none;
    letter-spacing: 0.5px;
}

/* News Wrap CSS - Ends */

#css

Title Container Disable - CSS

.error404 .title_container,
.search .title_container,
.archive .title_container,
.single .title_container {
    display: none;
}

#css

Custom Quote - CSS

/* Custom Quote CSS - Starts */

.custom-quote {
    border-bottom: 3px solid var(--primary) !important;
    border-top: 3px solid var(--primary) !important;
    padding: 10px 0;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    font-weight: bold;
}

.custom-quote:before {
    content: '\e833';
    position: absolute;
    font-family: 'entypo-fontello';
    font-size: 40px;
    background: #fff;
    width: 80px;
    left: calc(50% - 40px);
    top: -19px;
    display: inline-block;
    transform: rotate(180deg);
}

.alternate_color .custom-quote:before {
    background: #f8f8f8;
}

/* Custom Quote CSS - Ends */

#css

Flip Box - CSS

/* FLip Area CSS */
.action-card {
    position: relative;
    width: 100%;
    text-align: center;
    padding-bottom: 100%;
}

.action-card .card-front,
.action-card .card-back {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 0.7s;
    border: 1px solid #ebebeb;
    box-shadow: 0 0 5px 0 rgba(239, 239, 239, 0.6);
}

.action-card:hover .card-front {
    transform: rotateY(-180deg);
}

.action-card:hover .card-back {
    transform: rotateY(0);
}

.action-card .card-back {
    overflow: hidden;
    transform: rotateY(-180deg);
    background: #F8F8F8;
}

.flip-icon svg {
    width: auto;
    height: 80px;
}

.flip-icon svg circle,
.flip-icon svg path {
    fill: #ffffff !important;
}

.card-back,
.card-front {
    display: flex;
    flex-wrap: wrap !important;
    padding: 30px;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.card-front {
    background: #fff;
}

.action-content {
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}

.action-button {
    margin-top: 30px;
}

.action-button a {
    padding: 8px 20px;
    color: #fff !important;
    border-radius: 5px;
    transition: .3s;
    border: 2px solid #fff !important;
}

.action-button a:hover {
    background: #ccc !important;
}

.card-front .action-icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: var(--purple-color);
}


h3.action-title {
    font-size: 23px;
    width: 100%;
    color: #666 !important;
    margin-bottom: 0;
}

.card-arrow {
    position: absolute;
    right: 30px;
    bottom: 20px;
    border: 1px solid var(--primary-color) !important;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 100%
}

.card-arrow:before {
    content: '\e88d';
    font-family: entypo-fontello;
    color: var(--primary-color);
    position: absolute;
    left: 6px;
    font-size: 16px;
    line-height: 1.8;
    transition: .6s;
}

@media (min-width: 1251px) {
    .action-card {
        padding-bottom: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1250px) {
    .action-card {
        padding-bottom: 150%;
    }
}

@media (max-width: 989px) {
    .flip-icon svg {
        height: 55px;
    }
}

/* Flip Area CSS Ends*/

#css

Single Solid Area - CSS

.single-solid-area .template-page {
    padding: 35px 0;
}

@media (min-width: 990px) {
    .single-solid-area .flex_column {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    
    .single-solid-area .av-special-heading {
        width: auto !important;
        padding-bottom: 0 !important;
    }
    
    .single-solid-area .avia-button-wrap {
        min-width: max-content !important;
    }
}

#css

Header Area - CSS

/* Header CSS Starts Here */

#header_meta {
    border: none !important;
    background: transparent !important;
}

@media (min-width: 1201px) {
    #header_main .container,
    .av-main-nav .menu-item-top-level > a {
      height: 68px !important;
      line-height: 68px !important;
    }

  #header_main {
      border-top: none !important;
  }

  #main {
      padding-top: 97px !important;
  }

  .logo img {
      max-height: 1000% !important;
  }

  span.logo {
      position: absolute;
      top: -15px;
      height: auto;
  }
}

@media (max-width: 1200px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block !important;
    }

    .menu-item-top-level {
        display: none;
    }

    #av-burger-menu-ul li a {
        height: auto !important;
        line-height: 1.5 !important;
    }
}

@media only screen and (max-width: 767px) {
    .logo img {
      width: 250px !important;
    }

    #header_meta {
      background: var(--alt-color) !important;
    }

    #header_meta * {
      color: #fff;
    }
}
/* Header CSS Ends Here */

#css

Section Title ALT

.section-title .av-special-heading-tag {
    width: auto;
    max-width: max-content;
    padding: 0 30px !important;
    margin: 0 auto !important;
    position: relative;
    font-weight: bold;
}

.section-title {
    text-align: center !important;
}

.section-title .av-special-heading-tag:before {
    content: '';
    position: absolute;
    width: 80px;
    height: 3px;
    top: calc(50% - 1.5px);
    right: -80px;
    background: #0e76bc;
}

.section-title .av-special-heading-tag:after {
    content: '';
    position: absolute;
    width: 80px;
    height: 3px;
    top: calc(50% - 1.5px);
    left: -80px;
    background: #0e76bc;
}

#css

Big Logo Header Meta & Menu Combined

/* Header CSS Starts Here */
#header_meta {
    border: none !important;
    background: transparent !important;
}

#header_meta .sub_menu li a:hover {
    opacity: .8 !important;
}

#header_meta .sub_menu {
  padding-right: 13px;
  top: 0;
}

@media (min-width: 1111px) {
  #header_main .container,
  .av-main-nav .menu-item-top-level > a {
      line-height: 75px !important;
      height: 75px !important;
  }
}

#header_main {
    border-top: none !important;
}

.logo img {
    max-height: 1000% !important;
}

span.logo {
    position: absolute;
    top: -50px;
    height: 180px !important;
}

.menu-item-top-level a:hover {
    color: #4884b7 !important;
}

@media (min-width: 768px) and (max-width: 1110px)  {
  #header_main .container, .main_menu ul:first-child > li a {
      height: 70px !important;
      line-height: 70px !important;
  }
}

@media (max-width: 1110px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block !important;
    }

    .menu-item-top-level {
        display: none;
    }

    #av-burger-menu-ul li a {
        height: auto !important;
        line-height: 1.5 !important;
    }
}

.main_menu {
  border-top: 1px solid #ee3d33 !important;
}

.av_secondary_right .sub_menu li a {
    font-size: 18px !important;
    line-height: 50px !important;
}

#header_meta .container {
    min-height: 50px;
}

#menu-item-search a {
    line-height: 75px;
}

.av_secondary_right .sub_menu li a .contact-icon:before {
  content: '\e805';
  font-family: entypo-fontello;
  padding-right: 8px;
}

.av_secondary_right .sub_menu li a .tel-icon:before {
   content: '\e8ac';
   font-family: entypo-fontello;
   padding-right: 8px;
}

.av_secondary_right .sub_menu li {
  border: none !important;
  padding: 0 0 0 25px !important;
}

/* Header CSS Ends Here */

#css

FAQs CSS

.faq-content .single_toggle {
  margin-top: 25px;
}
.faq-content .toggler {
  border: none;
  border-bottom: 3px solid #096123 !important;
  background: #f1f1f1;
  padding: 15px 10px 15px 35px;
  font-weight: bold;
  font-size: 18px;
}
.faq-content .toggle_icon {
  border: none;
}
.faq-content .vert_icon, .faq-content .hor_icon {
  border-color: #7bb94c;
}
.faq-content .toggle_content {
  border: none;
}

#css

GPS Latest Post CSS

@media (min-width: 1211px) {
    .home-blog-block .slide-content {
        background-color: #fff;
        padding: 20px 25px;
        position: absolute;
        bottom: -30px;
        right: -30px;
        width: 80%;
    }

    .home-blog-block.avia-content-slider, .avia-content-slider-inner {
        overflow: unset;
    }

    .home-blog-block article:hover .slide-image {
        background: transparent;
        transition: all .2s cubic-bezier(0.4, 0, 1, 1);
    }

    .home-blog-block article .slide-content {
        transition: all .3s ease-in;
    }

    .home-blog-block article:hover .slide-content {
        transform: translate(-10px, -10px);
    }

    .home-blog-block article:hover .slide-image {
        transform: translateY(-10px);
    }
}

#css

Envato Token

ZgmSx7jsHc7zEZxxeVRs5yGLT7OTNa1Y

#css

GForm Time Field CSS

.appointment-form .gform_wrapper .clear-multi .ginput_container {
    max-width: 33.33% !important;
}

#top .appointment-form .gform_wrapper .clear-multi .ginput_container select {
    max-width: 100% !important;
}

#top .appointment-form .gform_wrapper .clear-multi .ginput_container input {
    width: 100% !important;
}

.appointment-form .gform_wrapper i {
    display: none;
}

#css

Inner Four Col - Center

/* Inner Four Col - Center */
.inner-four-col .flex_column_table {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.inner-four-col .flex_column {
    margin: 0 !important;
    width: 100% !important;
}
@media (min-width: 768px) {
    .inner-four-col .flex_column {
        width: calc(50% - 15px) !important;
    }
}
@media (min-width: 1201px) {
    .inner-four-col .flex_column {
        width: calc(25% - 22.5px) !important;
    }
}

#css

Testimonial-ALT-CSS

/* Testimonial Area CSS - Starts */
.inner-testimonials .avia-testimonial-meta {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px !important;
}
.inner-testimonials .avia-testimonial-meta-mini {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
}
.avia-testimonial {
    padding: 0 !important;
}
.inner-testimonials .avia-slideshow-arrows.avia-slideshow-controls {
    position: relative;
}
.inner-testimonials .avia-testimonial-subtitle {
    display: block;
    margin-top: 7px;
    font-size: 15px;
}
#top .inner-testimonials.av-large-testimonial-slider .avia-slideshow-arrows a {
    background: var(--alt-color) !important;
    color: #fff !important;
    margin-top: 20px;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    opacity: .7;
}
.inner-testimonials a.prev-slide {
    right: 49%;
}
.inner-testimonials a.next-slide {
    left: 49%;
}
.inner-testimonials .avia-slideshow-arrows a:before {
    line-height: 40px;
    font-weight: bold !important;
}
.inner-testimonials .avia-testimonial-content {
    font-size: 19px !important;
    letter-spacing: 0.3px;
}
@media (min-width: 768px) {
    .inner-testimonials .avia-testimonial_inner {
        box-shadow: 0 0 15px #DDDDDD;
        padding: 40px 40px 50px !important;
        border-radius: 10px !important;
        border: 1px solid #EBEBEB !important;
        max-width: 950px;
        margin: 0 auto !important;
        background-color: #fff;
    }
    .inner-testimonials .avia-testimonial_inner {
        position: relative;
    }
}
.inner-testimonials .avia-testimonial-name {
    position: relative;
    color: #666 !important;
    font-size: 21px !important;
    letter-spacing: 0.5px;
}
.inner-testimonials .avia-testimonial-name:before {
    content: '\e808\e808\e808\e808\e808';
    display: block;
    font-family: 'entypo-fontello';
    letter-spacing: 6px;
    margin-bottom: 10px;
    color: #FF9800;
}
/* Testimonial Area CSS - Ends */

#css

Palles-Intro-CSS

@media (min-width: 990px) {
    .intro-border-col .av_one_fourth {
        border-right: 4px solid var(--primary-color) !important;
        padding-right: 30px;
    }

    .intro-border-col .av_three_fourth {
        padding-left: 50px;
    }
}

@media (max-width: 989px) {
    .intro-border-col .section-heading {
        position: relative;
        padding-bottom: 25px !important;
        margin-bottom: 50px;
        text-align: left !important;
    }

    .intro-border-col .section-heading:after {
        content: '';
        position: absolute;
        width: 120px;
        height: 4px;
        bottom: 0;
        left: 0;
        background-color: var(--primary-color);
    }
}

#css

Inner Submenu - CSS

.inner-submenu .avia-menu-text {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    transition: .5s;
}
.inner-submenu .avia-menu-text:hover {
    color: var(--primary-color) !important;
}
#top .av-subnav-menu > li > a {
    border-color: var(--primary-color);
}

#css

Inner Posts Card - CSS

/* Inner Posts CSS - Starts */
.inner-posts .read-more-link a {
    border: 1px solid var(--primary-color);
    display: inline-block;
    padding: 6px 20px;
    min-width: 180px;
    text-align: center;
    font-weight: bold;
    text-transform: capitalize;
    transition: .5s;
}

.inner-posts .slide-meta-del,
.inner-posts .slide-meta-comments {
    display: none !important;
}

.inner-posts .read-more-link a:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.inner-posts .slide-entry-title {
    letter-spacing: 0.3px;
    position: relative;
    padding-bottom: 15px;
    margin: 15px 0;
}

.inner-posts .slide-entry-title:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: var(--primary-color);
}

.inner-posts .slide-image:hover,
.inner-posts .slide-entry-title:hover {
    opacity: .8;
}

.inner-posts .slide-image img,
.img-border {
    border: 1px solid #e8e8e8 !important;
	padding: 0 !important;
}
/* Inner Posts CSS - Ends */

#css

Top Overlay CSS Area

/* Top Overlay CSS Area - Starts */

.top-overlay {
    position: relative;
}

.inner-header-bg, .title_container:after {
    background: transparent !important;
}

.top-overlay {
    display: inline-block;
    background: rgb(109 0 33 / 0.75);
    margin: 120px 0 ;
    padding: 15px 25px 10px;
}

@media (max-width: 767px) {
    .top-overlay {
        margin: 80px 0;
    }
}

.title_container .container {
    padding-bottom: 0 !important;
}

.title_container h1 {
    letter-spacing: 1px;
}

.title_container .main-title {
    padding: 0 0 15px !important;
}

/* Top Overlay CSS Area - Ends */

#css

Non Link Col

.non-link .av-flex-placeholder {
    position: relative;
}
.non-link .av-flex-placeholder:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    background: #D5D5D5;
}
@media (max-width: 767px) {
    .non-link .flex_column {
        border-top: 1px solid #D8D8D8 !important;
        padding-top: 10px !important;
    }
}

#css

Custom Fonts Enqueue CSS

@font-face {
  font-family: 'GillSans-Medium';
  src: url('GillSans-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GillSans-SemiBold';
  src: url('GillSans-SemiBold.eot?#iefix') format('embedded-opentype'),  url('GillSans-SemiBold.woff') format('woff'), url('GillSans-SemiBold.ttf')  format('truetype'), url('GillSans-SemiBold.svg#GillSans-SemiBold') format('svg');
  font-weight: normal;
  font-style: normal;
}

#css

Enqueue Custom Fonts

@font-face {
  font-family: 'GillSans-Light';
  src: url('GillSans-Light.eot?#iefix') format('embedded-opentype'),  url('GillSans-Light.woff') format('woff'), url('GillSans-Light.ttf')  format('truetype'), url('GillSans-Light.svg#GillSans-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GillSans-Medium';
  src: url('GillSans-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
4:05
// Enqueue Custom Fonts
function enqueue_custom_fonts()
{
    wp_register_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts/custom-fonts.css', array(), '1.0', 'all');
    wp_enqueue_style('custom-fonts');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

#css

Gravity Address CSS

@media (min-width: 990px) {
    .ginput_container_address {
        display: flex;
        flex-wrap: wrap;
    }

    #top .ginput_container_address span {
        width: calc(33.33% - 6.66px) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #top .ginput_container_address .address_line_1 {
        width: 100% !important;
    }

    #top .ginput_container_address .address_state {
        margin: 0 10px !important;
    }
}

#css

Custom Font Initialization

// CSS
@font-face {
  font-family: 'Browallia New';
  src: url('browa.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Expansiva bold';
  src: url('ExpansivaBold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
// Enqueue Custom Fonts
function enqueue_custom_fonts()
{
    wp_register_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts/custom-fonts.css', array(), '1.0', 'all');
    wp_enqueue_style('custom-fonts'); 
    
    
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

#css

Gform Radio Btn CSS

.gfield_radio label {
    margin-left: 3px !important;
    font-size: 16px !important;
    position: relative;
    top: 2px
}

.gfield_radio li:nth-child(n+2) {
    margin-left: 25px !important;
}

#css

Inner Img Col

@media (max-width: 989px) {
    .inner-img-col .flex_column_table {
        display: flex !important;
        flex-wrap: wrap;
    }

    .inner-img-col .flex_column {
        width: 100% !important;
    }

    .inner-img-col .img-col {
        order: -1;
    }
}

#css

Extra Fonts

function wpb_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

#css

faq-content CSS

.faq-content .toggler {
    font-size: 20px;
    border: 1px solid #d8d8d8 !important;
    border-radius: 5px !important;
    font-weight: bold;
    padding: 18px 40px 18px 30px !important;
}

.faq-content .toggle_icon,
.faq-content .vert_icon,
.faq-content .hor_icon {
    border-color: var(--primary-color);
    opacity: 1 !important;
}

.faq-content .av_toggle_section:nth-child(n+2) {
    margin-top: 15px;
}

.faq-content .toggle_content {
    border: none;
    font-size: 16px;
    line-height: 1.7;
}

.faq-content .toggler:focus {
    outline: none;
}

#css

Image Rotate CSS (Townly Kenton)

.team-card {
    padding-bottom: 100%;
    position: relative;
    width: 100%;
}

.team-card img {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    
}

.team-card .card-front,
.team-card .card-back {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 0.3s;
}

.team-card:hover .card-front {
    transform: rotateY(-180deg);
}

.team-card:hover .card-back {
    transform: rotateY(0);
}

.team-card .card-back {
    overflow: hidden;
    transform: rotateY(-180deg);
}

#css

Contact Form CSS

.contact-form li {margin: 0 !important;}

.contact-form .gform_body input,
.contact-form .gform_body textarea {
  padding: 10px 20px !important;
}

.contact-form .gform_footer {
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form .gform_footer input[type=submit] {
  width: 100% !important;
  padding: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

#css

BX Slider CSS

/* <ul class="image-ticker" style="display:none"> */
.slider-logos .bx-wrapper {
    max-width: 100% !important;
}
.slider-logos ul {
    list-style-type: none !important;
    text-align: center;
    margin: 0 !important;
}
.slider-logos ul li {
    text-align: center;
    display: flex !important;
    align-items: center;
    margin: 0;
    padding: 0 20px;
    height: 80px;
    width: auto !important;
}
.slider-logos ul li img {
    height: 80px;
}
.slider-logos {
    height: 80px;
}

#css

Popup CSS

.white-popup {
  position: relative;
  background: #FFF;
  padding: 30px;
  width: auto;
  max-width: 750px;
  margin: 20px auto;
}

#css

Linear Gradient for Text

// Linear Gradient for Text
.text-item {
    background: -webkit-linear-gradient(360deg, #1284ac, #0c009b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

#css #html

HTML <details> <summary>

<details>
  <summary>Example</summary>
  Height needs to be set for this to work. Works on Chrome, haven't tested further.
</details>


//Build in transition smooothly
details {
  transition: height 1s ease;
  overflow: hidden;
}

details:not([open]) {
  height: 1.25em;
}

details[open] {
  height: 2.5em;
}

#css

Overlay combobox in modal

.slds-modal__content{
    overflow: initial;
}

#css

Peerlist like Hover effect

.animate-underline {
    display: inline-block;
    position: relative;
}

.animate-underline:after {
    content: " ";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #00ffff;
    transform-origin: bottom right;
    transition: transform .25s ease-out
}

.animate-underline:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left
}

#css

give text a gradient background

background: linear-gradient(274deg, rgba(68,138,193,1) 0%, rgba(128,200,242,1) 25%, rgba(255,179,0,1) 50%, rgba(232,59,205,1) 75%, rgba(74,122,154,1) 100%);
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

#css #js

to add new line

<div style="overflow-x: auto;">
            <form action="" method="post">
              {% csrf_token %}
            <table class="table table-hover mt-4" id="childTable">
              <thead class="text-color fs-medium fw-bold " style="background-color:#e2edf5;">
                <tr>
                  <th>No</th>
                  <th class="text-center">PLANNED EXPENSES</th>
                  <th class="text-center">JAN</th>
                  <th class="text-center">FEB</th>
                  <th class="text-center">MAR</th>
                  <th class="text-center">APR</th>
                  <th class="text-center">MAY</th>
                  <th class="text-center">JUN</th>
                  <th class="text-center">JUL</th>
                  <th class="text-center">AUG</th>
                  <th class="text-center">SEP</th>
                  <th class="text-center">OCT</th>
                  <th class="text-center">NOV</th>
                  <th class="text-center">DEC</th>
                  <th class="text-center">Action</th>
                </tr>
              </thead>
              <tbody>
                {% for i in LcaBudget %}
                <tr class="trParent">
                  <th class="fs-medium index" scope="row">{{forloop.counter}}</th>
                  <td>{{i.expenses}}</td>
                  <td>{{i.jan}}</td>
                  <td>{{i.feb}}</td>
                  <td>{{i.mar}}</td>
                  <td>{{i.apr}}</td>
                  <td>{{i.may}}</td>
                  <td>{{i.jun}}</td>
                  <td>{{i.jul}}</td>
                  <td>{{i.aug}}</td>
                  <td>{{i.sep}}</td>
                  <td>{{i.oct}}</td>
                  <td>{{i.nov}}</td>
                  <td>{{i.dec}}</td>
                  <td>
                    <a href="/Qapi_Leadership/LcaBudget/{{i.pk}}/update/"><i class="fa-2x bi bi-pencil"></i></a>
                  </td>
                </tr>
                {% endfor %}
                <tr class="trParent">
                  <th class="fs-medium index" scope="row">1</th>
                  <input type="hidden" name="user" value="{{request.user.pk}}">
                  <td>
                    <input type="number" min="0" step="0.01" name="expenses" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jan" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="feb" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="mar" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="apr" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="may" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jun" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jul" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="aug" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="sep" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="oct" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="nov" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="dec" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <i onclick="myFunction(event)" class="fa-2x bi bi-trash-fill"></i>
                  </td>
                </tr>
              </tbody>
            </table>
            <button onclick="childrenRow()" class="btn btn-primary" type="button" id="addrow">Add new line</button>
            <button class="btn btn-primary" type="submit">Save</button>
          </form>
            <script>
              var i = 1;
              function childrenRow() {
                i++;
                $('#childTable').find('tbody').append('<tr class="trParent"><th class="fs-medium index" scope="row">' + i + '</th><input type="hidden" name="user" value="{{request.user.pk}}"><td><input type="number" min="0" step="0.01" name="expenses" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jan" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="feb" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="mar" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="apr" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="may" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jun" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jul" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="aug" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="sep" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="oct" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="nov" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="dec" class="form-control fs-medium" required /></td><td><i onclick="myFunction(event)" class="fa-2x bi bi-trash-fill"></i></td></tr>');
              }
            </script>
            <script>
              function myFunction(e) {
                // document.getElementById("childTable").deleteRow(0);
                e.currentTarget.closest(".trParent").remove();
              }
            </script>
          </div>

#css

Button Animation CSS

   .btn:before { content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.3s ease;
    background: white;
    z-index: -1;}

#css #javascript

Transition height with Javascript

//HTML
<section>
  <div>
  	<p>
  		Some Text
    </p>
  </div>
</section>

<button id="toggle-button">Click Me</button>

//CSS
div {
    overflow:hidden;
    transition:height 0.3s ease-out;
    height:auto;
  }

//JS
function collapseSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;
  
  // temporarily disable all css transitions
  var elementTransition = element.style.transition;
  element.style.transition = '';
  
  // on the next frame (as soon as the previous style change has taken effect),
  // explicitly set the element's height to its current pixel height, so we 
  // aren't transitioning out of 'auto'
  requestAnimationFrame(function() {
    element.style.height = sectionHeight + 'px';
    element.style.transition = elementTransition;
    
    // on the next frame (as soon as the previous style change has taken effect),
    // have the element transition to height: 0
    requestAnimationFrame(function() {
      element.style.height = 0 + 'px';
    });
  });
  
  // mark the section as "currently collapsed"
  element.setAttribute('data-collapsed', 'true');
}

function expandSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;
  
  // have the element transition to the height of its inner content
  element.style.height = sectionHeight + 'px';

  // when the next css transition finishes (which should be the one we just triggered)
  element.addEventListener('transitionend', function(e) {
    // remove this event listener so it only gets triggered once
    element.removeEventListener('transitionend', arguments.callee);
    
    // remove "height" from the element's inline styles, so it can return to its initial value
    element.style.height = null;
  });
  
  // mark the section as "currently not collapsed"
  element.setAttribute('data-collapsed', 'false');
}


document.querySelector('#toggle-button').addEventListener('click', function(e) {
  var section = document.querySelector('div');
  var isCollapsed = section.getAttribute('data-collapsed') === 'true';
    
  if(isCollapsed) {
    expandSection(section)
    section.setAttribute('data-collapsed', 'false')
  } else {
    collapseSection(section)
  }
});

#css

Text gradient

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#css

Bootstrap 5 Author Box Section Component - HTMLCSSFreebies

CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.fs-7 {
  font-size: 0.875rem !important;
}
.w-100px {
  width: 100px !important;
}
.w-150px {
  width: 150px !important;
}
.w-200px {
  width: 200px !important;
}
.h-100px {
  height: 100px !important;
}
.h-150px {
  height: 150px !important;
}
.h-200px {
  height: 200px !important;
}
@media (min-width: 576px) {
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
.hcf-author-1 .hcf-author-img,
.hcf-author-1 .hcf-author-meta {
  transition: transform 350ms cubic-bezier(0.16, 0.32, 0.21, 0.93);
}
.hcf-author-1:hover .hcf-author-img {
  transform: translateX(48px);
}
.hcf-author-1:hover .hcf-author-meta {
  transform: translateX(-8px);
}
Copy

#css

Bootstrap 5 Hero Section Component - HTMLCSSFreebies

CSS
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.mb-7 {
  margin-bottom: 6rem !important;
}
.mb-8 {
  margin-bottom: 7.5rem !important;
}
.mb-9 {
  margin-bottom: 9rem !important;
}
.mb-10 {
  margin-bottom: 10.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.py-7 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.py-8 {
  padding-top: 7.5rem !important;
  padding-bottom: 7.5rem !important;
}
.py-9 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}
.py-10 {
  padding-top: 10.5rem !important;
  padding-bottom: 10.5rem !important;
}
.hcf-bp-center {
  background-position: center !important;
}
.hcf-bs-cover {
  background-size: cover !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-sm-7 {
    margin-bottom: 6rem !important;
  }
  .mb-sm-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-sm-9 {
    margin-bottom: 9rem !important;
  }
  .mb-sm-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-sm-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-sm-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-sm-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-sm-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-md-7 {
    margin-bottom: 6rem !important;
  }
  .mb-md-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-md-9 {
    margin-bottom: 9rem !important;
  }
  .mb-md-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-md-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-md-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-md-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-md-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-lg-7 {
    margin-bottom: 6rem !important;
  }
  .mb-lg-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-lg-9 {
    margin-bottom: 9rem !important;
  }
  .mb-lg-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-lg-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-lg-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-lg-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-lg-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-xl-7 {
    margin-bottom: 6rem !important;
  }
  .mb-xl-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-xl-9 {
    margin-bottom: 9rem !important;
  }
  .mb-xl-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-xl-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-xl-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-xl-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-xl-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-xxl-7 {
    margin-bottom: 6rem !important;
  }
  .mb-xxl-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-xxl-9 {
    margin-bottom: 9rem !important;
  }
  .mb-xxl-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-xxl-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-xxl-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-xxl-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-xxl-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
.hcf-overlay {
  --hcf-overlay-opacity: 0.5;
  --hcf-overlay-bg-color: var(--bs-black-rgb);
  position: relative;
}
.hcf-overlay::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(
    var(--hcf-overlay-bg-color),
    var(--hcf-overlay-opacity)
  );
  z-index: 0;
}
.hcf-overlay > * {
  position: relative;
  z-index: 1;
}
.hcf-transform {
  transform: scale3d(1, 1, 1);
  transform-style: preserve-3d;
  transition: all 0.5s;
}
.hcf-transform:hover {
  transform: scale3d(1.02, 1.02, 1.02);
}
Copy

#css

Bootstrap 5 Masonry Grid Layout Component - HTMLCSSFreebies

CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
@media (min-width: 576px) {
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
.hcf-masonry-card {
  display: block;
  position: relative;
  overflow: hidden;
}
.hcf-masonry-card .card-img {
  object-fit: cover;
  transform: scale(1);
  transition: transform 150ms linear;
}
.hcf-masonry-card .card-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.hcf-masonry-card .card-overlay .card-title {
  display: inline-block;
  transform: translateY(10px);
  opacity: 0;
}
.hcf-masonry-card .card-overlay .card-category {
  transform: translateY(10px);
  opacity: 0;
}
.hcf-masonry-card:hover .card-img {
  transform: scale(1.05);
  transition: transform 150ms linear;
}
.hcf-masonry-card:hover .card-overlay {
  opacity: 1;
  transition: opacity 150ms linear;
}
.hcf-masonry-card:hover .card-overlay .card-title {
  opacity: 1;
  transform: translateY(0);
  transition: transform 150ms linear 0.1s, opacity 150ms linear 0.1s;
}
.hcf-masonry-card:hover .card-overlay .card-category {
  opacity: 1;
  transform: translateY(0);
  transition: transform 150ms linear 0.2s, opacity 150ms linear 0.2s;
}
Copy

#css

Bootstrap 5 About Me Section Component - HTMLCSSFreebies

CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
Copy

#css

Bootstrap 5 Blog Section Template Component - HTMLCSSFreebies

CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.top-5px {
  top: 5px !important;
}
.top-10px {
  top: 10px !important;
}
.bottom-5px {
  bottom: 5px !important;
}
.bottom-10px {
  bottom: 10px !important;
}
.start-5px {
  left: 5px !important;
}
.start-10px {
  left: 10px !important;
}
.end-5px {
  right: 5px !important;
}
.end-10px {
  right: 10px !important;
}
.hcf-of-cover {
  object-fit: cover !important;
}
.hcf-op-center {
  object-position: center !important;
}
.hcf-ih-250 {
  height: 250px !important;
}
.hcf-ih-400 {
  height: 400px !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-sm-250 {
    height: 250px !important;
  }
  .hcf-ih-sm-400 {
    height: 400px !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-md-250 {
    height: 250px !important;
  }
  .hcf-ih-md-400 {
    height: 400px !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-lg-250 {
    height: 250px !important;
  }
  .hcf-ih-lg-400 {
    height: 400px !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-xl-250 {
    height: 250px !important;
  }
  .hcf-ih-xl-400 {
    height: 400px !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-xxl-250 {
    height: 250px !important;
  }
  .hcf-ih-xxl-400 {
    height: 400px !important;
  }
}
.hcf-transform {
  transform: scale3d(1, 1, 1);
  transform-style: preserve-3d;
  transition: all 0.5s;
}
.hcf-transform:hover {
  transform: scale3d(1.02, 1.02, 1.02);
}
Copy

#css

Bootstrap 5 Achievements Section Component - HTMLCSSFreebies

CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.w-100px {
  width: 100px !important;
}
.h-100px {
  height: 100px !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
Copy

#css

CSS Flexbox – Einführung und Überblick - kulturbanause®

.flex-container {
  display:flex;
}

#css

buttton

.button {
 font-size: 30px;
 background-color:#FFCCD1;
 opacity: 1.8;
 transition: 0.3s;
 border-radius:15px;
 box-shadow: 0 9px #FFF2F3;
 border:none;
}
.button:hover {
  background-color: #ff7d8a;
  opacity: 1
}
.button:active {
  background-color: #00511d;
  box-shadow: 0 5px #d9ffe7;
  transform: translateY(4px);
}

#css

CSS: Dark/Theater background

body {
  margin: 0;
  background-attachment: fixed;
  background: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #4e5a66), color-stop(40%, #343b43), color-stop(95%, #22272c), color-stop(100%, #22272c)), #22272c;
  background: -webkit-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  background: -moz-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  background: -o-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  -pie-background: -pie-radial-gradient(unsupported), #22272c;
  background: radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  background: -ms-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  -pie-background: radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c);
  position: relative;
  background-size: 800px 200px;
  background-position: center -50px;
  background-repeat: no-repeat;
}

#css

CSS targeted Selectors

https://www.udemy.com/course/modern-html-css-from-the-beginning/learn/lecture/13285482#overview

#html #css

Hover Text or Tooltip with HTML and or CSS

<body>
  <h1 title="the message">Hello World</h1>
  <h2 title="the sender">From Nathan</h2>
</body>

#css

Specific Range of numbers formula

const randomInt = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min);

#css

CSS Reset

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   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: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
    outline: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

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: 0;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type=search] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    max-width: 100%;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html,
button,
input,
select,
textarea {
    color: #222;
}


::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

#css

Design Weekdays

/* .weekday--content {
    border-top: 1px solid var(--lightgray);
    border-left: 2px solid var(--lightgray);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    min-height: 70px;
} */

.weekviews--container {
    display: grid;
}

.weekday--content:hover {
    cursor: pointer;
    border-top: 1px solid rgba(116, 171, 168, 0.8);
    border-left: 2px solid rgba(116, 171, 168, 0.8);
}

.weekday--content:hover  .block--left {
    background-color: rgba(116, 171, 168, 0.8);
}

.weekday--content:active {
    cursor: pointer;
    border-top: 1px solid rgba(116, 171, 168, 1);
    border-left: 2px solid rgba(116, 171, 168, 1);
}

.weekday--content:active  .block--left {
    background-color: rgba(116, 171, 168, 1);
}

.block--left {  
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* .block--left{
    display: flex;
    flex-direction: column-reverse;
    background-color: var(--lightgray);
    height: 100%;
} 

*/

.block--week {
    margin-top: 40px;
    padding: 0px;
    display: inline;
    color: white;
    /* transform: rotate(270deg); */
    white-space: nowrap;
    width: 100%;
}



.block--event {
    margin: 0px;
    padding-top: 5px;
    padding-left: 5px;
}

/* today */
.day--block {
    border-top: 1px solid white;
    border-left: 2px solid white;
}
.day--block:hover{
    border-top: 1px solid white;
    border-left: 2px solid white;
}

.day--block > .weekview--block > .block--left{
    color: black;
    background-color: white;
}

.day--block > .weekview--block > .block--left > p{
    color: black;
}


.day--block:hover{
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
}

.day--block:hover > .weekview--block > .block--left{
    color: white;
    background-color: rgba(255, 255, 255, 0.8);
}

.day--block:hover > .weekview--block > .block--left > p{
    color: black;
}

.day--block:active{
    border-top: 1px solid black;
    border-left: 2px solid black;
}

.day--block:active > .weekview--block > .block--left{
    background-color: black;
}

.day--block:active > .weekview--block > .block--left > p{
    color: white;
}

/* clicked */
.weekday--clicked:not(.day--block) {
    border-top: 1px solid var(--blue);
    border-left: 2px solid var(--blue);
}

.weekday--clicked:not(.day--block) >.weekview--block >  .block--left {
    background-color: var(--blue);
}

.weekday--clicked:hover:not(.day--block) {
    border-top: 1px solid rgba(116, 171, 168, 0.6);
    border-left: 2px solid rgba(116, 171, 168, 0.6);
}

.weekday--clicked:hover:not(.day--block) >.weekview--block >  .block--left {
    background-color: rgba(116, 171, 168, 0.6);
}

#css #position #sticky

Sticky Position CSS

<html>
    <head>
        <style>
  
  			/* Sticky - position: sticky is a mix of position: relative and position: fixed. It acts like a relatively positioned element until a certain scroll point and then it acts like a fixed element. Have no fear if you don't understand what this means, the example will help you to understand it better. */
  			.main-element {
                  position: sticky;
                  top: 10px;
                  background-color: yellow;
                  padding: 10px;
              }

              .parent-element {
                  position: relative;
                  height: 800px;
                  padding: 50px 10px;
                  background-color: #81adc8;
              }
  		
        </style>
    </head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

#css #position #fixed

Fixed Property CSS

<html>
  	<head>
  		<style>
  
  			/* Fixed position elements are similar to absolutely positioned elements. They are also removed from the normal flow of the document. But unlike absolutely positioned element, they are always positioned relative to the <html> element.
One thing to note is that fixed elements are not affected by scrolling. They always stay in the same position on the screen. */
  			
  			.main-element {
                position: fixed;
                bottom: 10px;
                left: 10px;
                background-color: yellow;
                padding: 10px;
            }

            html {
                height: 800px;
            }
  		</style>
  	</head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

#css #position #absolute

Absolute Property CSS

<html>
  	<head>
  		<style>
  
  			/* Absolute - Elements with position: absolute are positioned relative to their parent elements. In this case, the element is removed from the normal document flow. The other elements will behave as if that element is not in the document. No space is created for the element in the page layout. The values of left, top, bottom and right determine the final position of the element.

One thing to note is that an element with position: absolute is positioned relative to its closest positioned ancestor. That means that the parent element has to have a position value other than position: static.

If the closest parent element is not positioned, it is positioned relative to the next parent element that is positioned. If there's no positioned ancestor element, it is positioned relative to the <html> element.

Let's get back to our example. In this case, we change the position of the main element to position: absolute. We will also give its parent element a relative position so that it does not get positioned relative to the <html> element. */
  			
            .main-element {
            position: absolute;
            left: 10px;
            bottom: 10px;
            background-color: yellow;
            padding: 10px;
        }

            .parent-element {
              position: relative;
              height: 100px;
              padding: 10px;
              background-color: #81adc8;
            }

            .sibling-element {
                background: #f2f2f2;
                padding: 10px;
                border: 1px solid #81adc8;
            } 
  	    </style>
  	</head>
  
  
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

#css #position #relative

Relative Position CSS

<html>
  	<head>
  		<style>
  
  			/* Relative - Elements with position: relative remain in the normal flow of the document. But, unlike static elements, the left, right, top, bottom and z-index properties affect the position of the element. An offset, based on the values of left, right, top and bottom properties, is applied to the element relative to itself. */				
  
  			.main-element {
              position: relative;
              left: 10px;
              bottom: 10px;
              background-color: yellow;
              padding: 10px;
        	}

            .sibling-element {
                padding: 10px;
                background-color: #f2f2f2;
            }
        </style>
    </head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

#css #position #static

Static Property CSS

<html>
  <head>
    <style>
  	/* STATIC - This is the default value for elements. The element is positioned according to the normal flow of the document. The left, right, top, bottom and z-index properties do not affect an element with position: static.*/
      .main-element {
        position: static;
        left: 10px;
        bottom: 10px;
        background-color: yellow;
        padding: 10px;
    }

    .sibling-element {
        padding: 10px;
        background-color: #f2f2f2;
    }
    </style>
  </head>
  	
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

#css

CSS Image Hover Scalling

.pp-content-post .pp-content-grid-post-image{
    overflow: hidden;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}
.pp-content-post .pp-content-grid-post-image img{
    transition: all .3s ease-in-out;
}
.pp-content-post:hover .pp-content-grid-post-image img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

#css #js

zoom in and zoom out using js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Increasing and Decreasing Image Size</title>
<script>
    function zoomin(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 500){
            alert("Maximum zoom-in level reached.");
        } else{
            myImg.style.width = (currWidth + 50) + "px";
        } 
    }
    function