Snippets Collections
   .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;}
//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)
  }
});
h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
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
.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
.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
.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
.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
.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
.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);
}
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;
}
<body>
  <h1 title="the message">Hello World</h1>
  <h2 title="the sender">From Nathan</h2>
</body>
const randomInt = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min);
/* 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;
}
/* .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);
}
<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>
<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>
<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>
<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>
<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>
.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);
}
.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);
}
<!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 zoomout(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 50){
            alert("Maximum zoom-out level reached.");
        } else{
            myImg.style.width = (currWidth - 50) + "px";
        }
    }
</script>
</head>
<body>
    <p>
        <button type="button" onclick="zoomin()">Zoom In</button>
        <button type="button" onclick="zoomout()">Zoom Out</button>
    </p>
    <img src="/pngwing.com.png" id="sky" width="250" alt="Cloudy Sky">
</body>
</html>
/* A few media query to set some font sizes at different screen sizes.
 * This helps automate a bit of responsiveness.
 * The trick is to use the rem unit for size values, margin and padding.
 * Because rem is relative to the document font size
 * when we scale up or down the font size on the document
 * it will affect all properties using rem units for the values.
*/

/* I am using the em unit for breakpoints
 * The calculation is the following
 * screen size divided by browser base font size
 * As an example: a breakpoint at 980px
 * 980px / 16px = 61.25em
*/

/* 1200px / 16px = 75em */
@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}
/* A few media query to set some font sizes at different screen sizes.
 * This helps automate a bit of responsiveness.
 * The trick is to use the rem unit for size values, margin and padding.
 * Because rem is relative to the document font size
 * when we scale up or down the font size on the document
 * it will affect all properties using rem units for the values.
*/

/* I am using the em unit for breakpoints
 * The calculation is the following
 * screen size divided by browser base font size
 * As an example: a breakpoint at 980px
 * 980px / 16px = 61.25em
*/

/* 1200px / 16px = 75em */
@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flexbox Tutorial</title>
    <style>
        .container{
            height: 544px; 
            width: 100%;
            border: 2px solid black;
            display: flex; /* Initialize the container as a flex box */
            
            /* Flex properties for a flex container */

            /* flex-direction: row; (Default value of flex-direction is row) */
            /* flex-direction: column;
            flex-direction: row-reverse;
            flex-direction: column-reverse; */
            

            /* flex-wrap: wrap; (Default value of flex-direction is no-wrap) */
            /* flex-wrap: wrap-reverse; */

            /* This is a shorthand for flex-direction: and flex-wrap: ;; */
            /* flex-flow: row-reverse wrap; */ 

            /* justify-content will justify the content in horizontal direction */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-evenly; */
            /* justify-content: space-around; */

            /* justify-content will justify the content in vertical direction */
            /* align-items: center; */
            /* align-items: flex-end; */
            /* align-items: flex-start; */
            /* align-items: stretch; */ 
        }
        .item{
            width: 200px;
            height: 200px;
            background-color: tomato;
            border: 2px solid green;
            margin: 10px;
            padding: 3px;
        }

        #item-1{
            /* Flex properties for a flex item */
            /* Higher the order, later it shows up in the container */
            /* order: 2; */

            /* flex-grow: 2;
            flex-shrink: 2; */

        }
        #item-2{
            /* flex-grow: 3;
            flex-shrink: 3 ; */
            flex-basis: 160px;
            /* when flex-direction is set to row flex-basis: will control width */
            /* when flex-direction is set to column flex-basis: will control height */
        }
        #item-3{
            /* flex: 2 2 230px; */
            align-self: flex-start;
            align-self: flex-end;
            align-self: center;

            }

    </style>
</head>
<body>
    <h1>This is Flexbox Tutorial</h1>
    <div class="container">
        <div class="item" id="item-1">First Box</div>
        <div class="item" id="item-2">Second Box</div>
        <div class="item" id="item-3">Third Box</div>
        <!-- <div class="item" id="item-4">Fourth Box</div>
        <div class="item" id="item-5">Fifth Box</div>
        <div class="item" id="item-6">Sixth Box</div> -->
    </div>
</body>
</html>
/ CSS /
.reveal{position:relative;transform:translateX(200px);opacity:0;transition:1s all ease;}
.reveal.active{transform:translateX(0);opacity:1;}

/ JavaScript /

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);
<div id="slide-out-widget-area" class="slide-out-from-right" style="padding-top: 71.4px; padding-bottom: 71.4px;">
            <div class="inner-wrap">
                <div class="inner">

                    <div class="off-canvas-menu">
                        <?php
                        wp_nav_menu( array (
                            'theme_location' => 'header',
                            'container'      => '',
                            'menu_class'     => 'menu',
                        ) );
                        ?>
                    </div>
                </div>
            </div>
            <div id="slide-out-widget-area-bg" class="slide-out-from-right solid material-open"></div>
            <!-- <div class="close-btn">
                <span class="close-wrap">
                    <span class="close-line close-line1"></span>
                    <span class="close-line close-line2"></span> 
                </span>
            </div> -->
        </div>
        <div class="occu-health-wrapper">
            <div id="top"><a class="menulinks"><i></i></a></div>
		</div>
                                    
       <style>
		@media (max-width:767px){
    header#header {padding: 20px 0 0;background: transparent;}
    .header-top {border-bottom: none;}
    .head-wrapper {height: 98px;}
    .head-wrapper.fixed-header a.menulinks {top: 30px;right: 20px;}
    .head-wrapper.fixed-header ul.mainmenu {top: 98px;left: 0;width: 100%;}
    .logo-col {flex: 0 0 110px;}
    .head-btn-col {flex: 0 0 calc(100% - 150px);justify-content: flex-end;padding-right: 0px;padding-left: 0;}
    .mobile-open div#slide-out-widget-area {min-width: 78vw;width: 78vw;margin: 0 0 0 auto;padding-left: 50px;padding-right: 50px;display: block;}
    .mobile-open .inner-wrap{position:absolute;top:50%;transform:translate(-50%,-50%);left: 70%;display:flex;align-items:center;justify-content:center;}
    .off-canvas-menu .menu{display:flex;flex-direction:column;justify-content:center;align-items:center;width:200px;margin-bottom:10px;}
    .inner-wrap .off-canvas-menu .nav-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;}
    .mobile-open div#slide-out-widget-area-bg{background:var(--primary-color);opacity:1;height:100vh;width:100vw;z-index:-1;position:absolute;top:0;left:0;}
    .mobile-open .occu-health-wrapper{transform:scale(0.84) translateX(-93vw) translateZ(0)!important;position:absolute;top:0;left:40%;height:100vh;overflow:hidden;transition:transform 0.5s;width:100%;}
    div#top .menulinks{display:none;justify-content:end;height:50px;z-index:99;width:100%;}
    .mobile-open div#top .menulinks {display: flex;}
    div#slide-out-widget-area {display: none;}
    .occu-health-wrapper{transition:transform 0.5s;top:auto;height:100vh;}
    .mobile-open .occu-health-wrapper{transform:scale(0.84) translateX(-93vw) translateZ(0)!important;position:absolute;top:0;left:40%;height:100vh;overflow:hidden;transition:transform 0.5s;width:100%;}
    .mobile-open .occu-health-wrapper {left: 25%;}
    .mobile-open div#top{padding:10px 0;background:white;display:flex;justify-content:end;height:inherit;}
    ul#menu-header-menu li > a{color:var(--white);}
    ul#menu-header-menu {list-style: none;padding: 0;}
    .off-canvas-menu{width:200px;}
    .off-canvas-menu .btn-wrapper{display:flex;align-items:center;justify-content:flex-start;margin-top:10px;}
    .off-canvas-menu a.btn{display:inline-flex;padding:10px;width:50px;height:50px;background:var(--white);margin-right:10px;}
    .off-canvas-menu a.btn svg{color:var(--primary-color);width:30px;height:30px;}
    .off-canvas-menu a.btn:last-child{margin:0;}
    .off-canvas-menu ul#menu-header-menu li{margin-bottom:10px;width: 100%;}

/*Nav*/
    .menulinks{display:block;top:30px;right:20px;z-index:999999;}
    .mobile-open a.menulinks {display: none;}
    ul.mainmenu{text-align:left;position:absolute;top:98px;padding:0;right:0;width:100%;background:#000;display:none !important;z-index:9999999;}
    ul.mainmenu>li>a:after{content:none;}
    ul.mainmenu>li>a:hover:after{content:none;}
    ul.mainmenu>li{float:left;width:100%;padding:0px;margin:0;border-top:1px solid rgba(255,255,255,0.2);position:relative;}
    ul.mainmenu>li:first-child{border:none;}
    ul.mainmenu>li>a:link,ul.mainmenu>li>a:visited{padding:10px 15px;font-size:16px;float:left;width:100%;border:none;text-align:left;color:#fff;}
    ul.mainmenu>li>a:hover{background:rgba(255,255,255,0.2);}
    a.menulinks i{display:inline;position:relative;top: 0;right: 0;margin-left:0;-webkit-transition-duration:0s;-webkit-transition-delay:.2s;-moz-transition-duration:0s;-moz-transition-delay:.2s;transition-duration:0s;transition-delay:.2s;}
    a.menulinks i:before,a.menulinks i:after{position:absolute;content:'';left:0;}
    a.menulinks i,a.menulinks i:before,a.menulinks i:after{width:35px;height:4px;background-color:#000;display:inline-block;}
    a.menulinks i:before{transform: translateY(-10px);-webkit-transition-property:margin,-webkit-transform;-webkit-transition-duration:.2s;-webkit-transition-delay:.2s,0;}
    a.menulinks i:after{transform: translateY(10px);-webkit-transition-property:margin,-webkit-transform;-webkit-transition-duration:.2s;-webkit-transition-delay:.2s,0;}
    .mobile-open a.menulinks i{background-color:rgba(0,0,0,0.0);-webkit-transition-delay:.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    .mobile-open a.menulinks i:before{margin-top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0,.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    .mobile-open a.menulinks i:after{margin-top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0,.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    ul.mainmenu>li>a.current:after{display:none;}
    ul.mainmenu ul{position:relative;top:auto;left:auto;float:left;width:100%;}
    ul.mainmenu ul li{position:relative;}
    ul.mainmenu ul li a{padding:8px 15px 8px 25px;color:#fff;}
    a.child-triggerm{display:block!important;cursor:pointer;position:absolute!important;top:0px;right:0px;width:50px!important;min-width:50px!important;height:38px!important;padding:0!important;border-left:1px dotted rgba(255,255,255,.20);}
    a.child-triggerm:hover{text-decoration:none;color:#f00;}
    a.child-triggerm span{position:relative;top:50%;margin:0 auto!important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm span:after{position:absolute;content:'';}
    a.child-triggerm span,a.child-triggerm span:after{width:10px;height:1px;background-color:#fff;display:block;}
    a.child-triggerm span:after{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm.child-open span:after{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm.child-open span{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm:hover span,a.child-triggerm:hover span:after{background-color:#f00;}
    .logo-col a > img {max-width: 110px;height: 70px;object-fit: contain;}
    .head-btn-col a.btn:last-of-type {margin-right: 0;display: none;}
    .contact-col ul, .keep-col ul {margin: 0 0 0 15px;}
    .footer-logo-col {width: 100%;}
}

@media (max-width: 567px) {
    .head-btn-col {flex: 0 0 calc(100% - 110px);justify-content: end;padding-right: 38px;padding-left: 5px;}
    .head-btn-col .btn {width: 40px;height: 40px;margin-right: 5px;}
    ul.mainmenu {top: 143px;display: none !important;}
    .head-wrapper.fixed-header ul.mainmenu {top: 144px;}
    .services-col {margin-bottom: 15px;margin-top: 15px;}
    .contact-col {margin-bottom: 15px;display: flex;flex-direction: column;align-items: center;width: 100%;}
    .footer .services-col .footer-links ul {text-align: center;margin: 0;}
    .contact-col ul, .keep-col ul {margin: 0 0 0px 0;text-align: center;}
    .keep-col {width: 100%;}
    .footer .services-col span, .footer .contact-col span, .footer .keep-col span {padding-left: 0;padding-bottom: 15px;font-size: 22px;justify-content: center;}
    .footer .row {justify-content: center;}
    .footer-logo-col {width: 100%;text-align: center;}
    .contact-col ul, .keep-col ul {margin: 0 0 0 0;}
    .logo-col a > img {max-width: 90px;}
    .mobile-open .inner-wrap {left: 75%;}
    .head-wrapper.fixed-header a.menulinks{top:30px;right:10px;}
}

@media (max-width: 350px) {
    .logo-col{flex:0 0 90px;}
    .head-btn-col {flex: 0 0 calc(100% - 90px);padding-right: 28px;}
    .menulinks{top:30px;right:20px;}
    .head-wrapper.fixed-header a.menulinks{top:30px;right:5px;}
}
	</style>
                                                      
<script>
      jQuery(document).ready(function (jQuery) {
    jQuery('.mainmenu li:has(ul)').addClass('parent');
    jQuery('.mainmenu').before('<a class="menulinks"><i></i></a>');
    jQuery('a.menulinks').click(function () {
        jQuery(this).next('ul').slideToggle(250);
        jQuery('body').toggleClass('mobile-open');
        jQuery('.mainmenu li.parent ul').slideUp(250);
        jQuery('a.child-triggerm').removeClass('child-open');
        return false;
    });
    jQuery('.mainmenu li.parent > ul').before('<a class="child-triggerm"><span></span></a>');
    jQuery('.mainmenu a.child-triggerm').click(function () {
        jQuery(this).parent().siblings('li').find('a.child-triggerm').removeClass('child-open');
        jQuery(this).parent().siblings('li').find('ul').slideUp(250);
        jQuery(this).next('ul').slideToggle(250);
        jQuery(this).toggleClass('child-open');
        return false;
    });</script>
<!DOCTYPE php>
<?php 
error_reporting(null);
$city = $_POST['get'];
$Url = file_get_contents("http://api.openweathermap.org/data/2.5/weather?q=".$city."&units=metric&appid=73c340f4df1ee2a07dca01d0ce48bf48");
$data=json_decode($Url,true);
// echo "<pre>";
// print_r($data);


$dataurl=file_get_contents("https://pixabay.com/api/?key=29428143-1b7675892c7e12c1f8fdd4157&q=".$_POST['get']."&image_type=photo");
$test=json_decode($dataurl,true);
// echo "<pre>";
// print_r($test);
$flag='flag';
$back=$test['hits'][rand(1,19)]['largeImageURL'];



// echo "<pre>";
// print_r($test);
// $lon=$data['coord']['lon'];
// $lat=$data['coord']['lat'];
// $newtest=file_get_contents('https://api.openweathermap.org/data/2.5/weather?lat='.$lat.'&lon='.$lon.'&appid=73c340f4df1ee2a07dca01d0ce48bf48');
// $test1=json_decode($newtest,true);
$weatherAPI="a595f443b58d4c97962234220222208";
$Weatherlink=file_get_contents('http://api.weatherapi.com/v1/current.json?key='.$weatherAPI.'&q='.$city.'');
$getdata=json_decode($Weatherlink,true);

//   echo "<pre>";
// print_r($getdata);
$cnt=$getdata['location']['country'];
$ctname="a595f443b58d4c97962234220222208";
$getct=file_get_contents("http://api.weatherapi.com/v1/current.json?key=".$ctname."&q=".$_POST['get']);
$gvdata=json_decode($getct,true);
$loc=$gvdata["location"]["country"];
$imurl=$gvdata['current']['condition']['icon'];

// echo "<pre>";
// print_r($dta);
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://kit.fontawesome.com/3ade12e83a.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <title>Weather</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');

       .material-symbols-outlined {
         font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD'0,
        'opsz' 48
}
       .button{
        padding: 10px;
        float: right;
        width: 100px;
        border: none;
        border-radius: 10px;
        background-color: #038cfc;
        color: white;
       }   
       .button:hover{
        background-color: #055ca3;
       }  

       .wmain{
        width:100%;
        display: flex;
        flex-direction: column;
            
            align-items: center;
            justify-content: center;
       }
        body{
           
            padding: 5%;
            font-family: 'DynaPuff', cursive;
            overflow:scroll;
          
        }
      .backg{
        margin: 0%;
        padding: 0%;
        position: absolute;
        width: 100%;
        height: 200%;
        z-index: -1;
        left:0%;
        top: 0%;
      }
      .show{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
      }
      #box{
        display: flex;
        width: 100px;
        height: 100px;
        backdrop-filter: blur(50px);
        border-radius:15px;
        box-shadow: 1px 1px 10px black;
        color: white;
        align-items: center;
        justify-content: center;

      }
      .ico{
        display: flex;
        width: 200px;
        height: 200px;
        backdrop-filter: blur(50px);
        border-radius:15px;
        box-shadow: 1px 1px 10px black;
        color: white;
        align-items: center;
        justify-content: center;
        margin: 30px;
        flex-direction: column;

      }
      .search{
        border: none;
        border-radius: 30px;
        padding: 10px;
      }
      .sbar{
         border: none;
        border-radius: 30px;
        padding: 10px;
        width: 300px;

      }
      .heade{
        width: 200px;
        height:200px;
        backdrop-filter:blur(50px);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
    </style>
</head>
<img class="backg" src="<?=$back ?>">
<body>
    <div class="nav">
      <a href="signup.php">
      <button name="bt" class="button">
        Source Code
      </button>
      </a>
    </div>
    <div class="wmain">

        <form method="POST">
        <div class="search"><input class="sbar" name="get" value="india" type="search"></div>
        </form>
<div class="heade" style="box-shadow:1px 1px 50px black;">
        <div class="name"><h1 style="color: white;"><?=$_POST['get'];?></h1></div>
            <img width="50px" src="https://countryflagsapi.com/png/<?=$cnt?>">
            </div>
       <div class="ico">
       <img  src="<?=$imurl?>" >
        <div class="ne"><h1><?= $data['weather']['0']['main']?></h1></div>

          <div id="bo" class="temp"><i style="color: yellow;" class="fa-solid fa-temperature-full"></i>&nbsp<?=round($data['main']['temp']) ?>deg</div>
        </div>
        <div class="show">
     
            <div id="box" class="hum"><span style="color: skyblue;" class="material-symbols-outlined">
humidity_high
</span><?=$data['main']['humidity'] ?></div>
            <div id="box" class="press"><span style="color: orange;" class="material-symbols-outlined">
compress
</span><?=$data['main']['pressure'] ?></div>
            <div id="box" class="min"><span style="color: green;" class="material-symbols-outlined">
thermometer
</span><?=$data['main']['temp_min'] ?></div>
            <div id="box" class="max"><span style="color: red;" class="material-symbols-outlined">
thermometer
</span><?=$data['main']['temp_max'] ?></div>
            <div id="box" class="wind"><i style="color: green;"  class="fa-solid fa-wind"></i>&nbsp<?=$data['wind']['speed'] ?></div>
        </div>
        
    </div>
    
</body>

</html>

/* Universal Styles */


/* Header */


/* Nav */


/* section */


/* Footer */
selector {
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}
selector .slick-track{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
} 
selector .swiper-wrapper{
  -webkit-transition-timing-function: linear !important; 
  transition-timing-function: linear !important; 
}
.grecaptcha-badge { visibility:hidden;}
@media (max-width:360px) {
	selector br{display: none;}
}
body{
    font-family: Montserrat, "Work Sans", sans-serif;
    font-size: 1.5rem;
    color: rgb(56, 56, 56);
    line-height: 1.6;
}

body{
    font-family: BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-sans;
}
.container {
  width: 500px;
  height: 400px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
}

.container > .child{
  width: 80px;
  height: 80px;
}
header {
    background-color: #fff;
    opacity: 0.6;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.shake {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation-name: shakeMe;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes shakeMe {
    2%, 18% {transform: translate3d(-5px, 0, 0);}
    4%, 16% {transform: translate3d(5px, 0, 0);}
    6%, 10%, 14% {transform: translate3d(-5px, 0, 0);}
    8%, 12% {transform: translate3d(5px, 0, 0);}
    18.1% {transform: translate3d(0px, 0, 0);}
}
.progress-line, .progress-line:before {
  height: 3px;
  width: 100%;
  margin: 0;
}
.progress-line {
  background-color: #58a700;
  display: -webkit-flex;
  display: flex;
}
.progress-line:before {
  background-color: #2f5400;
  content: '';
  -webkit-animation: running-progress 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation: running-progress 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@-webkit-keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
@keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
/*-- put this on ServerModule.CustomCSS property --*/

#loading-mask, #loading-indicator, #loading {
  display: none;
}
/* css: 

.element{
    position: relative; <-- important to place effect span in element to be clicked 
}

.ripple{
    position: absolute;
    background-color:#fff;
    transform: translate(-50%,-50%);
    pointer-events: none;
    border-radius: 50%;
    animation: animate 0.5s linear infinite;   
}

@keyframes animate {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0.5;
    }
    100%{
        width: 800px;
        height: 800px;
        opacity: 0; 
    }
}
*/

element.addEventListener("click", (e)=>{
    var rect = e.target.getBoundingClientRect();
    let x=e.clientX - rect.x;
    let y=e.clientY - rect.y;
    let ripples = document.createElement('span');
    ripples.className="ripple";
    ripples.style.left = x + 'px';
    ripples.style.top = y + 'px';
    e.target.appendChild(ripples);
    setTimeout(()=>{
        ripples.remove();
    }, 500);
})
/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 0.2s;
}
.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
.ripple:active {
  background-color: #000;
  background-size: 100%;
  transition: background 0s;
}

/* Button style */
button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  background-color: #2196f3;
  box-shadow: 0 0 4px #999;
  outline: none;
}

/* <button class="ripple">Test button</button> */
/*<div class="preloader"></div>*/

.preloader::after { 
  position: absolute;
  top: 0;
  bottom: 4%;
  right: 0;
  left: 0;
  
  content: " ";
  display: block;
  
  margin: auto;
  height: 32px;
  width: 32px;
  
  box-sizing: border-box;
  border: solid;
  border-width: 4px;
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.55);
  border-bottom-color: rgba(140, 140, 140, 0.2);
  border-right-color: rgba(140, 140, 140, 0.2);
  border-left-color: rgba(140, 140, 140, 0.2);
  
  animation: rotating 0.3s linear infinite;
}

@keyframes rotating{
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}
//<input type="text" value="B01" id="MYINPUT">

$("#MYINPUT").select(function(e){
    var selSt=$(this)[0].selectionStart;
    var selNd=$(this)[0].selectionEnd;
    
    if (selSt<3) {
        $(this)[0].setSelectionRange(3, selNd);
    }
});

.grow { 
  transition: all .2s ease-in-out; 
}
.grow:hover { 
  transform: scale(1.1); 
}
body {
    background: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3) no-repeat;
    /* Keep the inherited background full size. */
    background-attachment: fixed; 
    background-size: cover;
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container {
    width: 30rem;
    height: 20rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);   
    border-radius: 5px;
    position: relative;
    z-index: 1;
    background: inherit;
    overflow: hidden;
}

.container:before {
    content: "";
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
    margin: -20px;
}
div.transparent-click {
    pointer-events: none;
    background: url('your_transparent.png');
/*IE11 conditional:*/
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
    background: none !important;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dfdfdf;
  -webkit-transition: .1s;
  transition: .1s;
  border: 1px solid #000;
  border-radius: 5px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .1s;
  transition: .1s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(32px);
  -ms-transform: translateX(32px);
  transform: translateX(32px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 5px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

</body>
</html> 
@-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
}
  
@keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
}
  
.spinning {
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
/*<i class="fa fa-battery-charging" aria-hidden="true"></i>*/

@keyframes battery-charging {
  0% { content: "\f244"; }
  20% { content: "\f243"; }
  40% { content: "\f242"; }
  60% { content: "\f241"; }
  80% { content: "\f240"; }
}
.fa-battery-charging:before {
  content: "\f244";
  animation: 2s battery-charging infinite;
}
/*-webkit- (Chrome, Safari, newer versions of Opera):*/
.element::-webkit-scrollbar { width: 0 !important }

/*-moz- (Firefox):*/
.element { overflow: -moz-scrollbars-none; }

/*-ms- (Internet Explorer +10):*/
.element { -ms-overflow-style: none; }
<html>
<head>
    <style type="text/css">
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    height: 75px;
}

main {
    flex: auto;
    background-color: #ccc;
}

footer {
    height: 25px;
}
    </style>
</head>
<body>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
</body>
</html>
<html moznomarginboxes mozdisallowselectionprint>
<head>
<!--style type="text/css">

@page { size: auto;  margin: 0mm; }
@media print {  
  body { margin: 1.6cm; margin-top:0;}
}
.header, .header-space,
.footer, .footer-space {
  height: 50px;
}
.header {
  position: fixed;
  top: 0;
  padding-top:20px;
}
.footer {
  position: fixed;
  bottom: 0;
}
.content{
  width: 7.2in;
}
</style-->
<style type="text/css">
@page { margin: 0 }
body { margin: 2cm; margin-top:0; }
.sheet {
  margin: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
}

/** Paper sizes **/
body.A3               .sheet { width: 297mm; height: 419mm }
body.A3.landscape     .sheet { width: 420mm; height: 296mm }
body.A4               .sheet { width: 210mm; height: 296mm }
body.A4.landscape     .sheet { width: 297mm; height: 209mm }
body.A5               .sheet { width: 148mm; height: 209mm }
body.A5.landscape     .sheet { width: 210mm; height: 147mm }
body.letter           .sheet { width: 216mm; height: 279mm }
body.letter.landscape .sheet { width: 280mm; height: 215mm }
body.legal            .sheet { width: 216mm; height: 356mm }
body.legal.landscape  .sheet { width: 357mm; height: 215mm }

/** Padding area **/
.sheet.padding-10mm { padding: 10mm }
.sheet.padding-15mm { padding: 15mm }
.sheet.padding-20mm { padding: 20mm }
.sheet.padding-25mm { padding: 25mm }

/** For screen preview **/
@media screen {
  body { background: #e0e0e0 }
  .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm auto;
  }
}

/** Fix for Chrome issue #273306 **/
@media print {
           body.A3.landscape { width: 420mm }
  body.A3, body.A4.landscape { width: 297mm }
  body.A4, body.A5.landscape { width: 210mm }
  body.A5                    { width: 148mm }
  body.letter, body.legal    { width: 216mm }
  body.letter.landscape      { width: 280mm }
  body.legal.landscape       { width: 357mm }
}

@page { size: letter }




.header, .header-space,
.footer, .footer-space {
  height: 50px;
}
.header {
  position: fixed;
  top: 0;
  padding-top:20px;
}
.footer {
  position: fixed;
  bottom: 0;
}
.content{
  width: 7.5in;
}

</style>

</head>
<body class="letter">
<table>
  <thead><tr><td>
    <div class="header-space"> </div>
  </td></tr></thead>
  <tbody><tr><td>
    <div class="content">
      
      BorderStyle := bsnone;
WindowState := wsMaximized;
I set these properties to make both of them full screen. In the main form there is a button and when I click I want to show the second form as full screen with slide animation so I used this code:

AnimateWindow(form2.Handle, 500, AW_ACTIVATE OR AW_SLIDE OR AW_HOR_NEGATIVE);
Form2 is in auto create and visible property is set to false.

The problem when I tried this I saw odd results, the animation play but the form2 appear without any controls and not covering the full screen.

How to fix that so I can display form2 as full screen with slide animation ?

I am using XE5

delphi
shareimprove this question
edited Feb 24 '15 at 2:40
asked Feb 24 '15 at 2:23

Wel
1,52663378
add a comment
3 Answers
active oldest votes
¿No encuentras la respuesta? Pregunta en Stack Overflow en español.

✕
 
2

Based on MSN
https://msdn.microsoft.com/en-us/library/windows/desktop/ms632669(v=vs.85).aspx
there are lots of problems reported of using this function. So I recomend you go and implement the animation yourself.

Since you are interested only in sliding information do next:

Fist change your form size to fit into the monitor size.

MyForm.Width := Screen.Width;
MyForm.Height := Screen.Height;
Then move your form to the edge of the screen you want the animation to start from. When doing so keep atleast one pixel of the form inside the visible area of the monitor.

//Strating animation from left border
MyForm.Left := 1 - MyForm.Width;
MyForm.Top := 0;

//Starting from right border
MyForm.Left := MyForm.Width - 1;
MyForm.Top := 0;

//Starting from top border
MyForm.Left := 0;
MyForm.Top := 1 - MyForm.Height;

//Starting from bottom border
MyForm.Left := 0;
MyForm.Top := MyForm.Height - 1;
Once your have positioned your form in starting possition make it visible and enable timer that will beused to update forms position multiple times (animate) until it gets into desired position

MyForm.Show;
AniTimer.Enabled;
And start animation which is basically just updating your form position by using a simple timer

//Left to right animation
procedure MyForm.AniTimerOnTimer(Sender: TObject);
//Constant used to define by how many pixels will the form be moved
//on each timer interval
const MoveStep: Integer = 5;
begin
  if MyForm.Left < MoveStep then
  begin
    MyForm.Left := MyForm.Left + MoveStep;
  end;
  else
  begin
    MyForm.Left := 0;
    AniTimer.Enabled := False;
  end;
end;
Use similar approach for other directions if needed.

Instead of defining MoveStep as constant you can make it as a variable and then dynamically calculate its value so that animation is finished in N steps.

MoveStep := Screen.Width div N;
If you would like to have diagonal animation you would need two MoveStep variables. One for horizontal and one for vertical axis. And you need to make sure that both are being calculated in order to finish animation in specific number of steps

MoveStepX := Screen.Width div N;
MoveStepY := Screen.Height div N;
So now you can controll your animation speed by changing MoveStep and timer interval.

Note I don't recomend setting timer interval to small. Why?

As ypu probably know TTimer component isn't known for its acruacy so it could lead to noticable speed variation of of your animation.

Also changing form position multiple times woulrd require part of it being rerendered hwen it comes into visual rage so it could generate significant load to the CPU.

Moving fomr a few less times and with larger increments could greatly reduce the CPU load whle still performing adequate aniamtion smothness.

So do some testing to find the best combination of timer interval and move step.

shareimprove this answer
answered Feb 24 '15 at 8:09

SilverWarior
4,43321016
add a comment

 
2

Your problem is, before Form2 is first shown, the VCL does not create API windows of the windowed controls. Because it doesn't need to. Remember 'visible' is still set to false when you call AnimateWindow.

Below is a not very elegant workaround which sets 'visible' while the form has 0 width and height. It also addresses an additional problem which I don't know why you are not having. It is that I cannot animate a maximized window at all, which seems logical to me - a maximized window does not move. Anyway, to test it I suggest setting 'wsNormal' as WindowState at design time.

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  if Form2.Visible then begin
    Form2.WindowState := wsNormal;
    AnimateWindow(Form2.Handle, 500, AW_HIDE OR AW_SLIDE OR AW_HOR_NEGATIVE);
    Form2.Close;
  end else begin
    Form2.Width := 0;
    Form2.Height := 0;
    Form2.Visible := True;
    ShowWindow(Form2.Handle, SW_HIDE);

    Form2.WindowState := wsNormal;
    Form2.Width := Form2.Monitor.Width;
    Form2.Height := Form2.Monitor.Height;
    AnimateWindow(form2.Handle, 500, AW_ACTIVATE or AW_SLIDE OR AW_HOR_NEGATIVE);
    Form2.WindowState := wsMaximized;
  end;
end;
shareimprove this answer
answered Feb 24 '15 at 17:21

Sertac Akyuz
49k375133
@Wel - did you try this? – Sertac Akyuz Feb 27 '15 at 10:26
add a comment

1

AnimateWindow is a bit of a loner. It doesn't play nicely with the rest of the team in Delphi. Even though the MSDN doc for it says that it shows the form it actually doesn't do it properly. It only does the animation. I suppose it would do it nicely if you went all out Windows API and knew all that is required.

A few things to keep in mind:

I suppose you noticed that the slide effect doesn't show properly with the borders enabled.
It doesn't know about the WindowState property of the form so it will not Maximize the form if you wanted it to.
It doesn't show controls after the call, only graphic controls
It knows nothing of Delphi and how Delphi handles the showing and hiding of its forms
So the trick is:

Take away borders like you have done.
Before showing the form for the first time you must specify its size. Seeing that you want it maximized, just set it to the screen size where it will display and set its position to the four corners of that screen. This can be done on Form2's OnCreate.
So upon clicking the button you first call the AnimateWindow then call normal Form2.Show
There might be other fixes but this is the one I know of.

    </div>
  </td></tr></tbody>
  <tfoot><tr><td>
    <div class="footer-space"> </div>
  </td></tr></tfoot>
</table>
<div class="header">Prueba Encabezado</div>
<div class="footer">Pie de pagina</div>
</body>
</html>
ul {
    column-count: 2;
    column-gap: 0;
}

li {
    display: inline;
}

/*

<div style="height:100%;overflow-y:auto;width:600px">
<ul>
    <li>Element 1<br></li>
    <li>Element 2<br></li>
    <li>Element 3<br></li>
    <li>Element 4<br></li>
    :
    <li>Element n<br></li>
</ul>
*/
body{
    font-family: verdana;
    color:gray;
    margin: 8px;
}

.str{
    color:#F0F;
}

.perc{
    color:#000;
    background-color:#FF0;
}

.comment{
    color:silver;
}

p{
    color: black;
    font-style:italic;
}

<html>
    <head>
        <title>
            test
        </title>
    </head>
    <body>
This is a way to calculate similarity % between two strings based on <a href="https://en.wikipedia.org/wiki/Levenshtein_distance">Levenshtein distance:</a><p><p><br>
    </body>
</html>

function similarity(s1, s2) {
  var longer = s1;
  var shorter = s2;
  if (s1.length < s2.length) {
    longer = s2;
    shorter = s1;
  }
  var longerLength = longer.length;
  if (longerLength === 0) {
    return 1.0;
  }
  return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength);
}

function editDistance(s1, s2) {
  s1 = s1.toLowerCase();
  s2 = s2.toLowerCase();

  var costs = new Array();
  for (var i = 0; i <= s1.length; i++) {
    var lastValue = i;
    for (var j = 0; j <= s2.length; j++) {
      if (i == 0)
        costs[j] = j;
      else {
        if (j > 0) {
          var newValue = costs[j - 1];
          if (s1.charAt(i - 1) != s2.charAt(j - 1))
            newValue = Math.min(Math.min(newValue, lastValue),
              costs[j]) + 1;
          costs[j - 1] = lastValue;
          lastValue = newValue;
        }
      }
    }
    if (i > 0)
      costs[s2.length] = lastValue;
  }
  return costs[s2.length];
}

var $str1="Marco Antonio Piñero Lopez";
var $str2="marco antonio Pineda lópez";

var perc=Math.round(similarity($str1,$str2)*10000)/100;

var txt="The strings: <span class=\"str\">'"+$str1+"'</span> and <span class=\"str\">'"+$str2+"'</span>";
  txt+="<br>are similar <span class=\"perc\">"+perc+"%</span>";
document.write(txt);

$> pdfinfo document.pdf | grep "Pages\:" | grep -o "[0-9]"
.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; 
  white-space: nowrap;
}
.wallpaper {
  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;
}
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
type="text" name="" id="today_date" onblur=" type='text'"
                    onfocus= "type='date'"
/* put in functions.php */
function register_navwalker() {
   require_once get_template_directory() . '/wp-bootstrap5-walker.php';
  //or place code directly in functions.php
}
add_action( 'after_setup_theme', 'register_navwalker' );


/* place in header of theme */
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="main-menu">
            <?php
            wp_nav_menu(array(
                'theme_location' => 'main-menu',
                'container' => false,
                'menu_class' => '',
                'fallback_cb' => '__return_false',
                'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                'depth' => 2,
                'walker' => new bootstrap_5_wp_nav_menu_walker()
            ));
            ?>
        </div>
    </div>
</nav>

  
 /* Nav walker menu code - place in file or functions.php */
  
 <?php
// bootstrap 5 wp_nav_menu walker
class bootstrap_5_wp_nav_menu_walker extends Walker_Nav_menu
{
  private $current_item;
  private $dropdown_menu_alignment_values = [
    'dropdown-menu-start',
    'dropdown-menu-end',
    'dropdown-menu-sm-start',
    'dropdown-menu-sm-end',
    'dropdown-menu-md-start',
    'dropdown-menu-md-end',
    'dropdown-menu-lg-start',
    'dropdown-menu-lg-end',
    'dropdown-menu-xl-start',
    'dropdown-menu-xl-end',
    'dropdown-menu-xxl-start',
    'dropdown-menu-xxl-end'
  ];

  function start_lvl(&$output, $depth = 0, $args = null)
  {
    $dropdown_menu_class[] = '';
    foreach($this->current_item->classes as $class) {
      if(in_array($class, $this->dropdown_menu_alignment_values)) {
        $dropdown_menu_class[] = $class;
      }
    }
    $indent = str_repeat("\t", $depth);
    $submenu = ($depth > 0) ? ' sub-menu' : '';
    $output .= "\n$indent<ul class=\"dropdown-menu$submenu " . esc_attr(implode(" ",$dropdown_menu_class)) . " depth_$depth\">\n";
  }

  function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
  {
    $this->current_item = $item;

    $indent = ($depth) ? str_repeat("\t", $depth) : '';

    $li_attributes = '';
    $class_names = $value = '';

    $classes = empty($item->classes) ? array() : (array) $item->classes;

    $classes[] = ($args->walker->has_children) ? 'dropdown' : '';
    $classes[] = 'nav-item';
    $classes[] = 'nav-item-' . $item->ID;
    if ($depth && $args->walker->has_children) {
      $classes[] = 'dropdown-menu dropdown-menu-end';
    }

    $class_names =  join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
    $class_names = ' class="' . esc_attr($class_names) . '"';

    $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
    $id = strlen($id) ? ' id="' . esc_attr($id) . '"' : '';

    $output .= $indent . '<li ' . $id . $value . $class_names . $li_attributes . '>';

    $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
    $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
    $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
    $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';

    $active_class = ($item->current || $item->current_item_ancestor || in_array("current_page_parent", $item->classes, true) || in_array("current-post-ancestor", $item->classes, true)) ? 'active' : '';
    $nav_link_class = ( $depth > 0 ) ? 'dropdown-item ' : 'nav-link ';
    $attributes .= ( $args->walker->has_children ) ? ' class="'. $nav_link_class . $active_class . ' dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : ' class="'. $nav_link_class . $active_class . '"';

    $item_output = $args->before;
    $item_output .= '<a' . $attributes . '>';
    $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
  }
}
// register a new menu
register_nav_menu('main-menu', 'Main menu');
<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
<link rel="stylesheet" href="mystyle.css">
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>

The content of the document......
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
</body>
</html>
.hero-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

*Always set a *background-color* to be used if the image is *unavailable*.

body {
  background-image: url("img_tree.gif"), url("paper.gif");
  background-color: #cccccc;
}

*By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
padding before border. 
margin after border
document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {

	document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){

		everyitem.addEventListener('mouseover', function(e){

			let el_link = this.querySelector('a[data-bs-toggle]');

			if(el_link != null){
				let nextEl = el_link.nextElementSibling;
				el_link.classList.add('show');
				nextEl.classList.add('show');
			}

		});
		everyitem.addEventListener('mouseleave', function(e){
			let el_link = this.querySelector('a[data-bs-toggle]');

			if(el_link != null){
				let nextEl = el_link.nextElementSibling;
				el_link.classList.remove('show');
				nextEl.classList.remove('show');
			}


		})
	});

}
// end if innerWidth
}); 
// DOMContentLoaded  end
img {
	image-rendering: -moz-crisp-edges;
	/* Firefox */
	image-rendering: -o-crisp-edges;
	/* Opera */
	image-rendering: -webkit-optimize-contrast;
	/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
	/* IE (non-standard property) */
}
/* MOD SAFARI MEDIA QUERIES ONLY */
/* -------------------- */

/* SAFRI ONLY */
@supports selector(:nth-child(1 of x)) {
/* --- */
	/* h1  {
			display: none;
		}  */
/* --- */
}
/* MOD SAFARI MEDIA QUERIES ONLY + NESTED MEDIA QUERIES */
@media not all and (min-resolution:.001dpcm) {
	/* --- */

	@media only screen and (min-width: 1200px) {
		/* --- */

		@supports (-webkit-appearance:none) {
			/* --- */

			.display-5 {
				padding-top: 140px !important;

			}

			/* --- @media */
		}

		/* --- supports */
	}

	/* SAFARI  */
	@media only screen and (min-width: 815px) and (max-width: 1199px) {

		/* --- */
		@supports (-webkit-appearance:none) {

			/* --- */
			.display-5 {
				padding-top: 90px !important;

			}

			/* --- @media */
		}

		/* --- supports */
	}


	/* IPAD LANDSCAPE  */
	@media only screen and (min-width: 1022px) and (max-width: 1024px) and (orientation: landscape) {

		/* --- */
		@supports (-webkit-appearance:none) {

			/* --- */
			.display-5 {
				padding-top: 50px !important;

			}

			/* --- @media */
		}

		/* --- supports */
	}


	/* --- */
}
:root {
  --spacer-p: 20vw;
}

.pt-8 {
  padding-top: calc(var(--spacer-p) /4) !important;
}
EDITOR X from 50px to 150px

	:root {
			--maxViewportSize: 1920;
			--minViewportSize: 320;
		}

font-size: calc(50px + (150 - 50) * ((100vw - 320 * 1px) / (1920 - 320)));

font-size: calc(50px + (150 - 50) * ((100vw - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize))));



font-size: calc(1.625rem + 7.5vw);

the font-size will be at most 36px, but will decrease to 3vw if the the viewport is less than 1200px
font-size: min(3vw, 36px);


font-size: max(10vw, 60px);

I want the type to go between being 16px on a 320px screen to 22px on a 1000px screen.
font-size: min(max(16px, 4vw), 22px);

eans font-size:3.5vw, max-font-size:40px, min-font-size:16px
font-size: min(max(3.5vw, 16px), 40px);


font-size: clamp(16px, 4vw, 22px);


clamp() allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.
font-size: clamp(100%, 1rem + 2vw, 24px);
font-size: clamp(16px, 3vw, 32px);
font-size: clamp(12px, 2vw, 20px);

.accordion-item {
	background-color: #f4f4f6;
}

.accordion-header {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.accordion-header::before {
	content: '+';
	font-size: 3.5rem;
	margin-right: 20px;
}

.active-header::before {
	content: '-';
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: 1s ease max-height;
	font-size: 1.5rem;
}
const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach((accordionHeader) => {
	accordionHeader.addEventListener('click', () => {
		accordionContent = accordionHeader.nextElementSibling;
		const height = accordionContent.scrollHeight;

		accordionHeader.classList.toggle('active-header');

		if (accordionHeader.classList.contains('active-header')) {
			accordionContent.style.maxHeight = `${height}px`;
		} else {
			accordionContent.style.maxHeight = '0px';
		}
	});
});
<!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>
        input[type="checkbox"]{
            accent-color: rgb(51, 255, 0);
        }
        input[type="radio"]{
            accent-color: red;
        }
        input[type="range"]{
            accent-color: red;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="test" id="test">
    <input type="radio" name="test1" id="test1">
    <input type="range" name="test2" id="test2">
    <input type="date" name="test3" id="test3">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type="checkbox"]{
            accent-color: rgb(51, 255, 0);
        }
        input[type="radio"]{
            accent-color: red;
        }
        input[type="range"]{
            accent-color: red;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="test" id="test">
    <input type="radio" name="test1" id="test1">
    <input type="range" name="test2" id="test2">
    <input type="date" name="test3" id="test3">
</body>
</html>
button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

//dont show scrollbar when content is too long
textarea {
  overflow: auto;
}
button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
}
$accent: hsl(250 50% 50%);
$accent-overlay: color.change($accent, $alpha: 0.1);
$accent-darkened: color.scale($accent, $lightness: -30%);
type="text" name="" id="today_date" onblur=" type='text'"
                    onfocus= "type='date'"
<!DOCTYPE html>
<html>
  <head>
    <style>
      .meme_container {
        position: relative;
      }
      .meme_container img {
        z-index: 1;
      }
      .meme_container .top_meme {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }
      .meme_container .bottom_meme {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
      }
    </style>
  </head>

  <body>
    <div class="meme_container">
      <img src="http://i.imgflip.com/1bij.jpg" />
      <p class="top_meme">This is a caption 1</p>
      <p class="bottom_meme">This is a caption 2</p>
    </div>
  </body>
</html>
.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 
.flexwithgap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}
<style>
    /* Universal Box Sizing */
      
    *, *:before, *:after {
      box-sizing: border-box;
    }
      
    /* Universal Box Sizing with Inheritance */
      
    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
</style>
@media only screen and (max-width: 48em) {

}
   <div>
        <div class="rounded-circle test position-relative" style="width: 150px; height:150px; overflow: hidden;">
            <img id="imguplod" width="100%" src="./images/Ellipse 523.png" alt="">
            <label class="cam_img" for="imgInp">
                <img  width="100%" src="./images/group.png" alt="">
            </label>
            <input type="file" name="logo" id="imgInp" style="display: none;" accept="image/*">
        </div>

        <script>
            imgInp.onchange = evt => {
              const[file] = imgInp.files;
              if (file) {
                imguplod.src = URL.createObjectURL(file);
              }
            }
          </script>
        
      </div>
body{
    background-image: url(https://images.unsplash.com/photo-1518155317743-a8ff43ea6a5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    width: 100vw;
}
//HTML
<div class='dropdown'>
          <Link id='product' className='every' to='/products'>OUR PRODUCTS</Link>
           <div class='dropdown-content'>
            <Link to='autocadd'>AutoCadd</Link>
            <Link to='techset'>Techset</Link>
            <Link to='Endorse'>Endorse</Link>
           </div>
          </div>

//CSS

.dropdown{
    position: relative;
    display: inline-block;
}
.dropdown-content{
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content>*{
 color: black;
 padding: 12px 6px;
text-decoration: none;
 display: block;
}

.dropdown:hover .dropdown-content{
    display: block;
}
.dropdown-content>*:hover{
    background-color: #ddd;
}
  <div class="ps-4 mt-2 row">
            <div class=" col-md-6 shadow p-3 mb-5 bg-body rounded">
              <h6 class="TEXT-COLOR">Uplode Document</h6>
              <div class="d-flex gap-1 align-items-center">
                <input class="d-none" type="file" name="" id="imgInp12">
                <div class="">
                  <label class=" btn fs-small nav-btn-bg" for="imgInp12">Upload Document</label>
                </div>
                <div class="">
                  <input class=" form-control p-1" id="upfileName" readonly/>
                </div>
              </div>
            </div>
          </div>
          <script>
            imgInp12.onchange = (evt) => {
              const [file] = imgInp12.files;
              if (file) {
                upfileName.value = file.name;
              }
            };
          </script>
.box.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="main ps-4 py-2">
        <!-- Another variation with a button -->
        <div class="input-group">
          <input type="Search" class=" search_border form-control" placeholder="Search Property">
          <div class="input-group-append">
            <button class="btn  search_btn" type="button"> 
              <i class="fa fa-search"></i>
              Search
            </button>
          </div>
        </div>
      </div>



.main {
  width: 50%;
}

.search_border{
  border: 1px solid var(--yellow);
}

.search_btn{
  background-color: #FA8103;
  color: white !important;
  outline: none;
  border-radius: 0px 10px 10px 0px;
  padding: 0.475rem 0.78rem;
}
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}
/**
*
* Section: Logos
*
*/

jQuery(document).ready( $ => {

  // Init
  initLogosSlider('.section-logos__list', '.section-logos__listItem', '.section-logos__wrapper');

  $(window).on('resize', debounce(function() {
    initLogosSlider('.section-logos__list', '.section-logos__listItem', '.section-logos__wrapper');
  }));

  // Init functions
  function initLogosSlider(sliderClassName, slidesClassName, sliderWrapperClassName) {
    
		if (!$(sliderClassName).length) return;

    // For each slider
    $(sliderClassName).each( function() {
      
      let slider = $(this);
      let wrapper = $(slider).parents(sliderWrapperClassName); // Slider wrapper

      if ( slidesWidthSum(slider) <= $(slider).outerWidth() && $(slider).hasClass("slick-initialized")) {
        $(wrapper).removeClass('is-slider');
        $(slider).slick("unslick");
      }
  
      if ( slidesWidthSum(slider) > $(slider).outerWidth() ) {
        if (!$(slider).hasClass("slick-initialized")) {
          
          $(wrapper).addClass('is-slider');

          let logosTotalCount = $(slider).find(slidesClassName).length;
          let defaultSlides1200 = 5;
          let defaultSlides992 = 4;
          let defaultSlides768 = 2;
          let defaultSlides561 = 1;

          if (logosTotalCount <= defaultSlides1200) {
            defaultSlides1200 -= 1;
          }

          if (logosTotalCount <= defaultSlides992) {
            defaultSlides992 -= 1;
          }

          if (logosTotalCount <= defaultSlides768) {
            defaultSlides768 -= 1;
          }
  
          $(slider).slick({
            infinite: true,
            slidesToShow: 6,
            slidesToScroll: 6,
            dots: true,
            arrows: true,
            autoplay: false,
            prevArrow: $(wrapper).find('.section-logos__arrow.slick-prev')[0],
            nextArrow: $(wrapper).find('.section-logos__arrow.slick-next')[0],
            responsive: [
              {
                breakpoint: 1200,
                settings: {
                  slidesToShow: defaultSlides1200,
                  slidesToScroll: defaultSlides1200,
                }
              },
              {
                breakpoint: 992,
                settings: {
                  slidesToShow: defaultSlides992,
                  slidesToScroll: defaultSlides992,
                }
              },
              {
                breakpoint: 768,
                settings: {
                  slidesToShow: defaultSlides768,
                  slidesToScroll: defaultSlides768,
                }
              },
              {
                breakpoint: 561,
                settings: {
                  slidesToShow: defaultSlides561,
                  slidesToScroll: defaultSlides561,
                }
              },
            ]
          });
  
        }
      }

    });

    // Helper
    function slidesWidthSum(slider) {
      let slidesWidth = 0;
      let totalGap = parseInt( $(slider).css('gap') ) * ( $(slider).find(`${slidesClassName}:not(.slick-cloned)` ).length - 1);

      $(slider).find(`${slidesClassName}:not(.slick-cloned)`).each(function() {
        slidesWidth += $(this).outerWidth();
      });

      return slidesWidth + totalGap;
    }
	}

  // Helper
  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func, 150, event);
    };
  }
})



/**
 *
 * Section: Logos
 *
 */

.section-logos {
	padding: 70px 0;
  background-color: var(--bg-color);

  &, &[data-theme="white"] {
		--bg-color: #fff;
	}

	&[data-theme="grey"] {
		--bg-color: rgba(240, 243, 249, 0.5);
	}

	.container {
    @media (min-width: 1200px) {
      width: 1118px;
    }

    @media (min-width: 1440px) {
      width: 1278px;
    }

    @media (min-width: 1600px) {
      width: 1336px;
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      width: 988px;
    }

		@media (max-width: 767px) {
      max-width: 500px;
			padding-left: 20px;
			padding-right: 20px;
		}
	}

  &__inner {
    max-width: 1078px;
    margin: 0 auto;

    @media (max-width: 1199px) {
      max-width: 896px;
    }

    @media (max-width: 560px) {
      max-width: calc(100% - 70px);
    }
  }

  &__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 37px;

    border-bottom: 1px solid #D4D3D7;

    @media (max-width: 767px) {
      flex-direction: column;
      padding-bottom: 32px;
      text-align: center;
    }
  }

	&__title {
		margin-top: 0;
		margin-bottom: 0;

		font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    color: var(--color-dark2);
	}

  &__wrapper {
    padding-top: 40px;
    position: relative;

    @media (max-width: 767px) {
      padding-top: 32px;
    }

    &.is-slider {
      .section-logos__list {
        display: block;

        &Item {
          margin: 0 17px;
          min-width: unset;
        }
      }

      .section-logos__arrow {
        display: block;
      }
    }

    .slick-dots {
      --slick-dots-size: 12px;
      --slick-dots-background: #D4D3D7;
      --slick-dots-background-active: var(--color-dark2);
      --slick-dots-margin: 0 8px;
    }
  }

  &__arrow {
    --arrow-size: 32px;
    --arrow-offset: 35px;

    width: var(--arrow-size);
    height: var(--arrow-size);
    display: none;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    @media (max-width: 1279px) {
      --arrow-offset: 15px;
    }

    @media (max-width: 1199px) {
      --arrow-offset: 10px;
    }
    
    &.slick-prev {
      right: 100%;
      margin-right: var(--arrow-offset);
      background-image: url('../images/sections/logos/arrow-prev.svg');
    }

    &.slick-next {
      left: 100%;
      margin-left: var(--arrow-offset);
      background-image: url('../images/sections/logos/arrow-next.svg');
    }
  }

	&__list {
		display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 35px;

		&Item {
      --logo-wrapper-width: 150px;
      --logo-wrapper-height: 50px;

			min-width: var(--logo-wrapper-width);
			min-height: var(--logo-wrapper-height);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
      }
    }
	}
}

<section class="section-logos" data-theme="grey">
      <div class="container">
        <div class="section-logos__inner">
          <div class="section-logos__header">
            <h2 class="section-logos__title">Trusted by 1,800+ customers</h2>

            <a href="#" class="moreButton">
              Learn More
              <span class="moreButton-icon">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 6H10" stroke="var(--more-button-color)" stroke-width="4" stroke-linecap="round"/>
                  <path d="M8 2L12 6L8 10" stroke="var(--more-button-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            </a>
          </div>

          <div class="section-logos__wrapper">
            <button class="section-logos__arrow slick-prev"></button>
            <button class="section-logos__arrow slick-next"></button>

            <div class="section-logos__list">
              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/payoneer.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/masterclass.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/monday.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/lufthansa.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/adobe.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/capgemini.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/capgemini.svg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

input[type=number] {
  -moz-appearance: textfield;
}
div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}
/*HTML CODE*/
 
<input class="slider m-b-1" 
type="range" min="0" 
max="100" step="1" 
value="40" />
 /* JavaScript */
  
 
const slider = document.querySelector(".slider");
 
slider.addEventListener("input", () => {
updateSlider();
});
 
const updateSlider = function () {
const backgroundPercentage =
((slider.value - slider.min) / (slider.max - slider.min)) * 100;
const backgroundColor = `linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) ${backgroundPercentage}%, var(--success-light) ${backgroundPercentage}%, var(--success-light) 100%)`;
slider.style.background = backgroundColor;
};
 
updateSlider();
 <!-- jQuery library -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

<div class="d-flex justify-content-center align-items-center p-1">
        <div>
          <i class="icon bi bi-bell" id="bell"></i>
          <div class="notifications " id="box">
            <h2>Notifications - <span>2</span></h2>
            <div class="notifications-item">
              <div class="text">
                <p>Samso Nagaro Like your home work</p>
              </div>
            </div>
            <div class="notifications-item">
              <div class="text">
                <p>+20 vista badge earned</p>
              </div>
            </div>
          </div>
        </div>

          <script>
            $(document).ready(function(){
        
            var down = false;
            
            $('#bell').click(function(e){
              
                var color = $(this).text();
                if(down){
                    
                    $('#box').css('height','0px');
                    $('#box').css('opacity','0');
                    down = false;
                }else{
                    
                    $('#box').css('height','auto');
                    $('#box').css('opacity','1');
                    down = true;
                    
                }
                
            });
                
                });
          </script>

          <style>
            .icon {
              cursor: pointer;
              margin-right: 5px;
              /* line-height: 60px; */
            }
            .icon span {
              background: #f00;
              padding: 7px;
              border-radius: 50%;
              color: #fff;
              vertical-align: top;
              /* margin-left: -25px; */
            }
            .icon img {
              display: inline-block;
              width: 26px;
              margin-top: 4px;
            }
            .icon:hover {
              opacity: 0.7;
            }
            .logo {
              flex: 1;
              margin-left: 50px;
              color: #eee;
              font-size: 20px;
              font-family: monospace;
            }
            .notifications {
              width: 300px;
              height: 0px;
              opacity: 0;
              position: absolute;
              top: 63px;
              right: 62px;
              border-radius: 5px 0px 5px 5px;
              background-color: #fff;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
               0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }
            .notifications h2 {
              font-size: 14px;
              padding: 10px;
              border-bottom: 1px solid #eee;
              color: #999;
            }
            .notifications h2 span {
              color: #f00;
            }
            .notifications-item {
              display: flex;
              border-bottom: 1px solid #eee;
              padding: 6px 9px;
              margin-bottom: 0px;
              cursor: pointer;
            }
            .notifications-item:hover {
              background-color: #eee;
            }
            .notifications-item img {
              display: block;
              width: 50px;
              height: 50px;
              margin-right: 9px;
              border-radius: 50%;
              margin-top: 2px;
            }
            .notifications-item .text h4 {
              color: #777;
              font-size: 16px;
              margin-top: 3px;
            }
            .notifications-item .text p {
              color: #aaa;
              font-size: 12px;
            }
          </style>
        <div>
          <span class="text-white fs-small p-0">Diane Ward</span>
        </div>
        <div class="p-3">
          <img
            src="./asset/Ellipse 461.svg"
            alt="user-icon"
            style="width: 2.5rem"
          />
        </div>
      </div>
/***************************************************** 
*  Main                                              *
******************************************************/
 
 
html,
body {
    height: 100%;
}
 
html {
  scroll-behavior: smooth;
}
 
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
 
::selection {
	background-color: var(--primary);
	color: #fff;
}
 
 
/* ----- Inline Links + Menu Links Hover Animation*/
.ct-text-block a, .ct-div-block>a, .table--contact a,
.widget_nav_menu a, .oxy-mega-dropdown_link,
.testimonial--inner .ct-link-text, #cff a, .inline-link {
	position: relative; white-space: nowrap; /*padding-bottom: 1px;*/}
 
.ct-text-block a:hover, .ct-div-block>a:hover, .table--contact a:hover,
.widget_nav_menu a:hover, .oxy-mega-dropdown_link:before,
.testimonial--inner .ct-link-text:hover, #cff a:hover, .inline-link:hover
{text-decoration: none;}
 
.ct-text-block a:before, .ct-div-block>a:before, .table--contact a:before,
.widget_nav_menu a:before, .oxy-mega-dropdown_link:before,
.testimonial--inner .ct-link-text:before, #cff a:not(.cff-load-more):before,
.inline-link:before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--accent);
	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform 0.3s ease-in-out;
}
 
.footer--contact a, #footer .widget_nav_menu a,
.testimonial--inner .ct-link-text, #footer .inline-link {padding-bottom: 1px;}
 
.footer--contact a:before, #footer .widget_nav_menu a:before,
.testimonial--inner .ct-link-text:before, #footer .inline-link
{background-color: #fff;}
 
.ct-text-block a:hover:before, .ct-div-block>a:hover:before, .table--contact a:hover:before,
.widget_nav_menu a:hover:before, .oxy-mega-dropdown_link:hover:before,
.testimonial--inner .ct-link-text:hover:before, #cff a:hover:before, .inline-link:hover:before {
	transform: scaleX(1);
	transform-origin: bottom left;
}
 
#nav-main .oxy-mega-dropdown_link-current:before {transform: scaleX(1);}
 
@media screen and (max-width: 992px) {
	.oxy-mega-dropdown_link:hover:before {
	transform: scaleX(0);
	}
}
 
/* ----- Wordbreak + Hyphenation */
.hyphenate /*.ct-text-block, .ct-headline*/ {
 
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
 
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
 
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
 
}
<button class="btn-57">Button</button>


.btn-57,
.btn-57 *,
.btn-57 :after,
.btn-57 :before,
.btn-57:after,
.btn-57:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-57 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-57:disabled {
  cursor: default;
}
.btn-57:-moz-focusring {
  outline: auto;
}
.btn-57 svg {
  display: block;
  vertical-align: middle;
}
.btn-57 [hidden] {
  display: none;
}
.btn-57 {
  background: none;
  border: 3px solid;
  border-radius: 999px;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 20px 60px;
  position: relative;
  text-transform: uppercase;
}
.btn-57:before {
  background: #fff;
  border-radius: 999px;
  content: "";
  inset: 0;
  position: absolute;
  transform: translate(10px, 10px);
  transition: transform 0.2s;
  z-index: -1;
}
.btn-57:hover:before {
  transform: translate(0);
}
.wrapper {
  display: grid;
  grid-template-columns:
    [full-start] 1fr [wrapper-start]
    minmax(0, 70rem) [wrapper-end] 1fr [full-end];

  /* Optional gap */
  column-gap: var(--pad, 1rem);
}

.wrapper > * {
  grid-column: wrapper;
}

.wrapper > .full-width {
  grid-column: full;
}
/* listing woo*/
ul.products li.product:hover .button{
	color:white;
	background:#0C3734;
}

ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2{
	margin-bottom:25px;
}

body.static-cta-buttons .main-navigation ul.menu li.menu-item-has-children.full-width>.sub-menu-wrapper li a.button, body.static-cta-buttons ul.products li.product .added_to_cart, body.static-cta-buttons ul.products li.product .button{
	border-radius:100px;
}

/* listing ewid*/

html#ecwid_html body#ecwid_body .ec-minicart__title, html#ecwid_html body#ecwid_body .ec-minicart__count, html#ecwid_html body#ecwid_body .ec-minicart__counter, html#ecwid_html body#ecwid_body .ec-minicart__counter::after, html#ecwid_html body#ecwid_body .ec-minicart__subtotal, html#ecwid_html body#ecwid_body .ec-minicart__link{
	background:#F22C96 !important;
	border-radius:500px;
}

.ecsp-title{
    font-size: 17px !important;
}
html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control:not(.form-control--loading) .form-control__button{
    background: #ECFAF9!important;
    color:#162936!important;
border-radius:50px;
padding-top:15px;
padding-bottom:15px;
}
html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control:not(.form-control--loading) .form-control__button:hover{
 background: #0C3734!important;
color:white!important;
}


.gwt-Image{
		width:100% !important;
}

.ecsp-productBrowser-price{
	color:black !important;
}
.ecwid-btn{
background: #ECFAF9!important;
color:black !important;
	border-radius:100px !important;
}
.ecwid-btn:hover{
	background: #0C3734!important;
	color:white !important;
}
html#ecwid_html body#ecwid_body .ecsp .ecwid-btn--primary{
	padding: 8px 5px !important;
	min-width: 132px !important;
		font-size:16px !important;
}
	
	html#ecwid_html body#ecwid_body .ecsp.ecsp-SingleProduct-v2{
	min-width: 150px !important;
		min-height: 357px !important;
}
.ecsp-title{
font-size:17px !important;
	font-weight:bold !important;
	min-height:50px;
}
}
@media (max-width:800px){
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__products[data-cols="2"] .grid-product:nth-child(n+1){
	width:25% !important;}
.ecsp-title{
font-size:13px !important;
}
}
/*padding selectivo para los responsive*/
@media (max-width:1350px){
	.paddingselectivo{
		padding-left: 50px;
		padding-right: 50px}}
@media (max-width:800px){
	.paddingselectivo{
		padding-left: 10px;
		padding-right: 10px}}
<!DOCTYPE html>
<html>
<head>
<style>
span {
  background-color: yellow;  
}

span.ex1 {
  min-width: 500px;
  display: inline-block;
}
</style>
</head>
<body>
<h1>The min-width Property</h1>

<h2>min-width: none (default):</h2>
<span>Lorem ipsum dolor sit amet...</span>

<h2>min-width: 500px:</h2>
<span class="ex1">Lorem ipsum dolor sit amet...</span>

</body>
</html>
<body>
<h1>The min-height Property</h1>

<h2>min-height: none (default):</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

<h2>min-height: 200px:</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

</body>


<style>
p {
  background-color: yellow;  
}

p.ex1 {
  min-height: 100px;
}
</style>
/* ----- Wordbreak + Hyphenation */
.dont-break-out /*.ct-text-block, .ct-headline*/ {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}
 box-shadow: 0px 0px 20px 10px lightblue;

box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
.flexbox {
  display: flex;
  margin:10px;
}
.red {
  background: red;
}   
.blue {
  background: blue;
  flex-shrink:0;
}
{display: grid; align-items: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}

//For a min value of 240px and a max value of the available width of container, i.e. 1fr
#textexample {
  background: -webkit-linear-gradient(203.89deg, #FF0000 15.35%, #FF9900 99.34%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}
.nav-link{
    font-size: 1.5rem;
    color: rgb(26, 26, 26);
    text-decoration: none;
    position: relative;
 }

 .nav-link::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: hsl(331, 100%, 50%);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 250ms ease-in;
 }

 .nav-link:hover::after{
    transform: scaleX(1);
    transform-origin: left;
 }
img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}
select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
}
/* Background styles */
body {
    background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100');
    background-position: center;
}


/* Glassmorphism card effect */
.card {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}


/* Generated by https://generator.ui.glass/ */
/* define width, and height for object-fit to work. Aspect.ratio can be 1.0 or 16 / 9 */ 

/* great for cards with image in top */
img {
width: 100%;
height: auto;
object-fit: cover; /*can be cover, contain, fill, scale-down*/
aspect-ratio: 1.0;
}

/* great for logos etc. */
img {
width: 100%;
height: auto;
object-fit: scale-down; /*can be cover, contain, fill, scale-down*/
aspect-ratio: 3 / 2;
padding: 1rem;
}
.projects .content .box
{
    width: 340px;
    margin: 30px;
    padding: 20px;
    background: #f6efe8;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 2px 20px rgba(0,0,0,0.1),  0px 2px 20px rgba(0,0,0,0.1);

}
.projects .content .box h4
{
    color: #000;
    font-size: 20px;
    margin-bottom: 20px;
}
.projects .content .box p
{
    color: #555;
    text-indent: 50px;
}
.projects .content .box img {
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
}
.projects-title {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 100px;
}
.projects-title h2{
    color: #000;
    font-size: 40px;
}
.projects .content
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 40px;
    margin-bottom: 40px;

}
<div class="content">
   	<div class="box">
        <img src="photos/[yourphoto]">
        <h4>Title</h4>
        <p>Project Caption</p>
    </div>
   	<div class="box">
        <img src="photos/[yourphoto]">
        <h4>Title</h4>
        <p>Project Caption</p>
    </div>
   	<div class="box">
        <img src="photos/[yourphoto]">
        <h4>Title</h4>
        <p>Project Caption</p>
    </div>
   	<div class="box">
        <img src="photos/[yourphoto]">
        <h4>Title</h4>
        <p>Project Caption</p>
    </div>
   	<div class="box">
        <img src="photos/[yourphoto]">
        <h4>Title</h4>
        <p>Project Caption</p>
    </div>
</div>
<section class="projects" id="projects">
        <div class="projects-title">
            <h2>Projects</h2>
        </div>
</section>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 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;
}
/* 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;
}
.interest-container {
    max-height: 400px;
    width: 400px;
    box-shadow: 0px 2px 20px rgba(0,0,0,0.1),  0px 2px 20px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 120px; */
}
.interest-container img {
    width: 400px;
    height: 400px;
}
.about {
    margin-top: 90px;
    display: flex;
    flex-direction: row;
    min-height: 80vh;
    justify-content: space-evenly
}
.about-text-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    width: 40%;
}
.about-text-container h2 {
    color: #000;
    font-size: 40px;
    margin-top: 10px;
}
.about-text-container p {
    color: #555;
    text-indent: 50px;
    font-size: 16px;
    font-weight: 400;
    margin-top: 10px;
}
<section class="about" id="about">
  <div class="about-text-container">
     <!-- text -->
  </div>
  <div class="interest-container">
      <img src="photos/devices.jpg">
  </div>
</section>
<section class="about" id="about">
	<div class="about-text-container">
      <h2>About Me</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
      	incididunt ut labore et dolore magna aliqua. Viverra orci sagittis eu volutpat odio 
      	facilisis mauris sit. Sed viverra tellus inhac habitasse platea dictumst vestibulum 		rhoncus. Tristique nulla aliquet enim tortor. Sed pulvinar proin gravida hendrerit. 		Lorem ipsum dolor sit amet. Lectus magna fringilla urna porttitor rhoncus. Tellus
        orci ac auctor augue. Sed enim ut sem viverra. Morbi quis commodo odio aenean. 			Convallis posuere morbi leo urna molestie at.
      </p>
	</div>
    <div class="interest-container">
        <img src="photos/devices.jpg">
    </div>
</section>
<section class="about" id="about">
	<div class="about-text-container">
      <h2>About Me</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
      	incididunt ut labore et dolore magna aliqua. Viverra orci sagittis eu volutpat odio 
      	facilisis mauris sit. Sed viverra tellus inhac habitasse platea dictumst vestibulum 		rhoncus. Tristique nulla aliquet enim tortor. Sed pulvinar proin gravida hendrerit. 		Lorem ipsum dolor sit amet. Lectus magna fringilla urna porttitor rhoncus. Tellus
        orci ac auctor augue. Sed enim ut sem viverra. Morbi quis commodo odio aenean. 			Convallis posuere morbi leo urna molestie at.
      </p>
	</div>
    <div class="intrest-container">
        <img src="photos/devices.jpg">
    </div>
</section>
/* 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;
  }
}
.adj-container {
    width: 100%;

}
.adj {
    position: relative;
    display: flex;
    margin-top: 30px;
    justify-content: space-evenly;

}
.adj li {
    list-style: none;
    margin-right: 30px;
    font-size: 20px;
    color: #555;
    font-weight: 200;
}
<div class="adj-container">
   <ul class="adj">
      <li>Thoughtful</li>
      <li>Creative</li>
      <li>Passionate</li>
      <li>Driven</li>
      <li>Intelligent</li>
   </ul>
</div>
.text-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.text-container h2{
    color: #000;
    font-size: 50px;
}

.text-container p{
    color: #555;
    font-size: 30px;
    font-weight: 200;
}
.card-1
{
    min-height: 70vh;
    width: 100%;
    background:url(photos/banner4.png);
    box-shadow: 0px 2px 20px rgba(0,0,0,0.1),  0px 2px 20px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}
.banner
{
    position: relative;
    width: 100%;
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background: #f6efe8;
    flex-direction: column;
}
<section class="banner" id="banner">
    <div class="card-1">
        <div class="text-container">
            <h2>Hello, I'm [Your Name]</h2>
            <p>Welcome to my website.</p>
        </div>
    </div>
</section>
<header>
  <a href="#" class="logo"><span>M</span>y<span>W</span>ebsite</a>
    <ul class="navigation">
      <li><a href="#banner">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#activities" class="nav-btn">Activities</a></li>
    </ul>
</header>
<section class="banner" id="banner">
  <!-- landing content -->
</section>
#checkbox-2 {
  display: none;
}

#checkbox-1:checked ~ #checkbox-2 {
  display: block;
}
/* styling li elements in the header with the navigation and nav-btn classes */
header .navigation li .nav-btn 
{
    padding: 10px;
    background-color: #000;
    color: #fff;
}

/* styling li elements in the header with the navigation and nav-btn classes after hover action */
header .navigation li .nav-btn:hover
{
    background-color: #ff0157;
    color: #fff;
}
/* styling elements in the header with the navigation class (ul - unordered list) */
header .navigation
{
    position: relative;
    display: flex;
}

/* styling li(list) elements in the header with the navigation class (ul) */
header .navigation li
{
    list-style: none;
    margin-left: 30px;
}

/* styling links(a) in li(list) elements in the header with the navigation class (ul) */
header .navigation li a
{
    text-decoration: none;
    color: #000;
    font-weight: 300;
}

/* styling links(a) in li(list) elements in the header with the navigation class (ul) after hover action*/
header .navigation li a:hover
{
    color: #ff0157;
}
/* styling elements in the header with the logo class */
header .logo
{
  	/* font color black */
    color: #000;
    font-weight: 200;
    font-size: 30px;
    /* no link underline */
    text-decoration: none;
}

/* styling the span of elements in the header with the logo class */
header .logo span
{
    color: #ff0157;
    font-weight: 400;
    font-size: 30px;
    text-decoration: none;
}
.scanner-ui { display: none; }
.scanner-hide { visibility: visible; }

body.qrscanner { background-color: transparent; }
body.qrscanner .scanner-ui { display: block; }
body.qrscanner .scanner-hide { visibility: hidden; }
/*======= FONT-WEIGHT ======= */
.fw-light {
  font-weight: 300 !important;
}
.fw-normal {
  font-weight: 400 !important;
}
.fw-medium {
  font-weight: 500 !important;
}
.fw-semibold {
  font-weight: 600 !important;
}
.fw-bold {
  font-weight: 700 !important;
}
#wrapper {
    width: 300px; height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}
input[type=radio]:checked + label {
    color: #fff;
	background-color: hsl(217, 12%, 63%);
}
.document-toc-link.document-toc-link:not(.button)[aria-current]:not([aria-current=""]):not([aria-current=false]) {
  background-color: var(--background-toc-active);
  border-left: 2px solid var(--category-color);
  color: var(--text-primary);
  font-weight: 600;
}
.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}
    
.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

// Another One

.element {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: red;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    background-color: red;
    border-radius: 100%;
  }
  50% {
    background-color: orange;
  }
  100% {
    transform: scale(1.5);
    background-color: yellow;
  }
}

body,
html {
  height: 100%;
}

body {
body {
  display: grid;
  height: 100vh;
  place-items: center;
}

progress {
  accent-color: #30cc7e;
  place-self: center;
  width: clamp(300px, 60%, 850px);
}

.notice {
  background: #fff9c4;
  border-radius: 6px;
  padding: 0.5rem;
  text-align: center;
  width: clamp(300px, 60%, 850px);
}
html
<div class="input-group" style="top: 15px">
        <input type="text" id="name" required class="input" />
        <label for="name" class="input-label"> Email address </label>
</div>


css

.input-group {
  position: relative;
}
.input {
  padding: 10px;
  border: none;
  border-radius: 4px;
  font: inherit;
  color: #fff;
  background-color: transparent;
  outline: 2px solid #d1c5fc;
}
.input-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(10px, 10px);
  transition: transform 0.25s;
}
.input:focus + .input-label,
.input:valid + .input-label {
  transform: translate(10px, -14px) scale(0.8);
  color: #000;
  padding-inline: 5px;
  background: #fff;
}
.input:is(:focus, :valid) {
  outline-color: #b2a7d7;
}
p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
margin-left: calc( -50vw + 50% );
margin-right: calc( -50vw + 50% );
padding-left: calc( 50vw - 50% );
padding-right: calc( 50vw - 50% );
max-width: 100vw;
<!DOCTYPE html>
<head> 
<title>Start</title>
<link rel="stylesheet" href="film.css">
</head>
<html>
    <body>
        <div class="card"> 
            <h1>SV Codings</h1>
            <p1>HTML basics</p1> <br>
            <p2> DOCTYPE,<br>Head,<br>Title,<br>link CSS to HTML,<br>Body,<br>Div,<br>heading,<br>para,<br>class,<br>card, </p2>
        </div>
    </body>
</html>
[[ .card { 
    height: 100vh;
    width: cover;
    background-color: rgb(25, 219, 35);
    text-align: center;
}
h1{
    color: rgb(236, 234, 236);
} ]]
const reduceData = (data: any[], property: string) => {
  const result = data.reduce((acc, amount) => {
    return acc + Number(amount[property]);
  }, 0);
  return result;
};
//apply max-width for specific breakpoint
@media (min-width: <BREAKPOINT_IN_PX>) {
	.<CLASS_NAME> {
      width: 50%;
    }
}

//align elements
className="text-left" //left-align
className="text-center" //center-align
className="text-end" //right-align
//optional add breakpoints
className="text-md-end"
<?php

$events_label_singular = tribe_get_event_label_singular();
$events_label_plural   = tribe_get_event_label_plural();

$event_id = get_the_ID();

?>

<div id="tribe-events-content" class="tribe-events-single">

	<p class="tribe-events-back">
		<a href="<?php echo esc_url( tribe_get_events_link() ); ?>"> <?php printf( '&laquo; ' . esc_html_x( 'All %s', '%s Events plural label', 'the-events-calendar' ), $events_label_plural ); ?></a>
	</p>

	<!-- Notices -->
	<?php tribe_the_notices() ?>

	<?php the_title( '<h1 class="tribe-events-single-event-title">', '</h1>' ); ?>

	<div class="tribe-events-schedule tribe-clearfix">
		<?php echo tribe_events_event_schedule_details( $event_id, '<h2>', '</h2>' ); ?>
		<?php if ( tribe_get_cost() ) : ?>
			<span class="tribe-events-cost"><?php echo tribe_get_cost( null, true ) ?></span>
		<?php endif; ?>
	</div>

	<!-- Event header -->
	<div id="tribe-events-header" <?php tribe_events_the_header_attributes() ?>>
		<!-- Navigation -->
		<nav class="tribe-events-nav-pagination" aria-label="<?php printf( esc_html__( '%s Navigation', 'the-events-calendar' ), $events_label_singular ); ?>">
			<ul class="tribe-events-sub-nav">
				<li class="tribe-events-nav-previous"><?php tribe_the_prev_event_link( '<span>&laquo;</span> %title%' ) ?></li>
				<li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>&raquo;</span>' ) ?></li>
			</ul>
			<!-- .tribe-events-sub-nav -->
		</nav>
	</div>
	<!-- #tribe-events-header -->

	<?php while ( have_posts() ) :  the_post(); ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<!-- Event featured image, but exclude link -->
			<?php echo tribe_event_featured_image( $event_id, 'medium', false ); ?>

			<!-- Event content -->
			<?php do_action( 'tribe_events_single_event_before_the_content' ) ?>
			<div class="tribe-events-single-event-description tribe-events-content">
				<?php the_content(); ?>
			</div>
			<!-- .tribe-events-single-event-description -->
			<?php do_action( 'tribe_events_single_event_after_the_content' ) ?>

			<!-- Event meta -->
			<?php do_action( 'tribe_events_single_event_before_the_meta' ) ?>
			<?php tribe_get_template_part( 'modules/meta' ); ?>
			<?php do_action( 'tribe_events_single_event_after_the_meta' ) ?>
		</div> <!-- #post-x -->
		<?php if ( get_post_type() == Tribe__Events__Main::POSTTYPE && tribe_get_option( 'showComments', false ) ) comments_template() ?>
	<?php endwhile; ?>

	<!-- Event footer -->
	<div id="tribe-events-footer">
		<!-- Navigation -->
		<nav class="tribe-events-nav-pagination" aria-label="<?php printf( esc_html__( '%s Navigation', 'the-events-calendar' ), $events_label_singular ); ?>">
			<ul class="tribe-events-sub-nav">
				<li class="tribe-events-nav-previous"><?php tribe_the_prev_event_link( '<span>&laquo;</span> %title%' ) ?></li>
				<li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>&raquo;</span>' ) ?></li>
			</ul>
			<!-- .tribe-events-sub-nav -->
		</nav>
	</div>
	<!-- #tribe-events-footer -->

</div><!-- #tribe-events-content -->
<html>

<head>
    <title>Sticky Footer</title>
    <meta charset="UTF-8" />
  <!-- Option 1 -->
  	<style>
      body {
        height: 100vh;
        display: flex;
        flex-direction: column;
      }

      section {
        flex: 1 0 auto;
      }
  	</style>
  <!-- Option 2 -->
  <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

      footer {
        margin-top: auto;
      }
  </style>
</head>

  

<body>
    <section>
        <h1>🔥Hello Footer down there🔥</h1>
        <p>
            ⬇️This content does not fill a whole page height. The footer belongs
            down there. ⬇️
        </p>
    </section>
    <footer>🔥I'm the footer. My margin pushes me down.🔥</footer>
</body>

</html>
object-fit: cover;
/*Multiple Custom DIVI FONTS - In this Example INTER & Poppins 500 & 700*/
/* Get font & CSS from https://google-webfonts-helper.herokuapp.com/fonts */
/*File structure in this example is: 
/* CSS: root-> assets -> css -> fonts.css
/ FONT FILES: root -> assets -> fonts -> 2 folders, inter & poppins

/* This code goes in functions.php - Child-theme*/
add_filter('et_websafe_fonts', 'load_divi_custom_font',10,2);
function load_divi_custom_font($fonts) {
  wp_enqueue_style( 'divi-child', get_stylesheet_directory_uri() . '/assets/css/fonts.css' );
  // Add multiple fonts to Divi's font menu to acces them within DIVI
  $custom_font = array('Poppins' => array(
    'styles'        => '500,700',
    'character_set' => 'latin',
    'type'          => 'sans-serif',
    'standard'      => 1
  ),
  'Inter' => array(
    'styles'        => '500,700',
    'character_set' => 'latin',
    'type'          => 'sans-serif',
    'standard'      => 1
  ));

  return array_merge($custom_font,$fonts);
}

/*CSS for child-theme*/
/* poppins-500 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins/poppins-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins/poppins-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins/poppins-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins/poppins-v20-latin-500.svg#Poppins') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* poppins-700 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins/poppins-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins/poppins-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins/poppins-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins/poppins-v20-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* inter-700 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter/inter-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter/inter-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter/inter-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter/inter-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter/inter-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter/inter-v11-latin-700.svg#Inter') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* inter-500 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter/inter-v11-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter/inter-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter/inter-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter/inter-v11-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter/inter-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter/inter-v11-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* 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;
  }
}
<?php

add_filter( 'woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields' );
function xa_remove_billing_checkout_fields( $fields ) {
    // change below for the method
    $shipping_method ='local_pickup:1'; 
    // change below for the list of fields
    $hide_fields = array( 'billing_address_1', 'billing_address_2', 'billing_city', 'billing_state', 'billing_postcode' );

    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    // uncomment below line and reload checkout page to check current $chosen_methods
     print_r($chosen_methods);
    $chosen_shipping = $chosen_methods[0];

    foreach($hide_fields as $field ) {
        if ($chosen_shipping == $shipping_method) {
            $fields['billing'][$field]['required'] = false;
            $fields['billing'][$field]['class'][] = 'hide';
        }
        $fields['billing'][$field]['class'][] = 'billing-dynamic';
    }

    return $fields;
}

add_action( 'wp_footer', 'cart_update_script', 999 );
function cart_update_script() {
    if (is_checkout()) :
    ?>
    <style>
        .hide {display: none!important;}
    </style>
    <script>
        jQuery( function( $ ) {

            // woocommerce_params is required to continue, ensure the object exists
            if ( typeof woocommerce_params === 'undefined' ) {
                return false;
            }

            $(document).on( 'change', '#shipping_method input[type="radio"]', function() {
                // change local_pickup:1 accordingly 
                $('.billing-dynamic').toggleClass('hide', this.value == 'local_pickup:1');
            });
        });
    </script>
    <?php
    endif;
}
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
.overflowing {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
// js
#!/usr/bin/env php
<?php
foreach (glob('*.js') as $js) {
   echo "wp_enqueue_script('wptheme-{$js}', get_template_directory_uri() . '/js/{$js}', array('jquery'), '1.0', true);";
}

// Css
#!/usr/bin/env php
<?php
foreach (glob('*.css') as $css) {
   echo "wp_enqueue_style('wptheme-{$css}', get_template_directory_uri() . '/css/{$css}', null, '1.0');";
}
// js
#!/usr/bin/env php
<?php
foreach (glob('*.js') as $js) {
   echo "wp_enqueue_script('wptheme-{$js}', get_template_directory_uri() . '/js/{$js}', array('jquery'), '1.0', true);";
}

// Css
#!/usr/bin/env php
<?php
foreach (glob('*.css') as $css) {
   echo "wp_enqueue_style('wptheme-{$css}', get_template_directory_uri() . '/css/{$css}', null, '1.0');";
}
/* 
	https://www.youtube.com/watch?v=q0E1hbcj-NI
    Browsersync + Sass + Gulp in 15 minutes
    
	install as devDependencies:
	npm install browser-sync cssnano gulp gulp-cli gulp-postcss gulp-sass gulp-terser sass -D    
*/

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

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

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

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

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

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

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

// gulp workflow
exports.default = series(sassTask, jsTask, browserSyncServer, watchTask);
<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 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;
}
/* 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;
}
HTML

<div class="sticky"></div>


CSS

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%;
}


jQuery

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}
.gradient {
  background-image: linear-gradient(90deg, rgba(94,114,235,1) 0%, rgba(255,145,144,1) 56%, rgba(254,193,149,1) 100%);
  color: transparent;
  -webkit-background-clip: text;
}
#flyout1, #flyout2, #flyout3 {
    margin:0;
    padding:0;
    width:990px;
    overflow:hidden;
}
#flyout1 {
}
#flyout2 {
    background:transparent url(../images/popupBG1.png) top left no-repeat;
}
#flyout3 {
}
UL.paginate {
    float:left;
    margin:0;
    padding:0;
    height:260px;
    display:block;
}
UL.paginate LI {
    float:left;
    margin:40px 30px 20px 27px;
    padding:0;
    display:inline;
    width:130px;
    height:200px;
}
#scrollable {
    margin-top:10px;
    float:left;
    background-color:#eee;
    width:990px;
    border-top: 1px;
    border-top-color: #CCC;
    border-top-style: solid;
}
.pager {
    margin-right:10px;
    overflow:hidden;
    padding:1em 0;
    float:right;
}
.pager li {
    float:left;
    list-style-type:none;
    margin-right:.3em;
    font-size:1.1em;
}
.pager a {
    color:#FF9182;
    outline:none;
    text-decoration:underline;
}
.pager a:hover {
    text-decoration:none;
}
.pager .active a {
    color:#666;
    font-weight:bold;
}
.pager .disabled {
    width:32px;
    text-indent:-9999px;
}
/* PAGINATED CONTENT */
 #subProd {
    float:left;
    margin:0;
    padding:0;
    width:130px;
}
#subProd img.thumb {
    margin:0;
    padding:0 10px;
    background-color:#fff;
    border:1px solid #ccc;
}
.button, .button1, .button2, .button3, .button4, .button5, .qv {
    float:left;
    background-image: linear-gradient(#ffffff, #eeeeee);
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #666;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    min-height: 18px;
    padding: 5px 10px;
    text-decoration:none;
}
#subProd .qv {
    float:right;
    margin:0;
    padding:0;
    cursor: pointer;
    padding:5px 5px 5px 6px;
}
#subProd .qv IMG {
    border:0 none;
    margin:0;
    padding:0;
}
#subProd .product P {
    margin:5px 0;
    padding:0;
    line-height:13px;
    min-height:13px;
}
#subProd .product .title {
    color:#666;
    font-size:13px;
}
#subProd .product .number {
    color:#666;
    font-size:11px;
}
#subProd .product .price {
    font-size:20px;
    font-weight:bold;
    margin-bottom:3px;
    line-height:20px;
}
// Change text read more boton woocommerce
add_filter( 'gettext', 'ds_change_readmore_text', 20, 3 );

function ds_change_readmore_text( $translated_text, $text, $domain ) {
if ( ! is_admin() && $domain === 'woocommerce' && $translated_text === 'Read more') {
$translated_text = 'Quote';
}
return $translated_text;
}
.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip-path: inset(50%);
  margin: -1px;
}
.bg-scrolling-element-when-modal-active {
    /* when modal active */
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    /* Other browsers */
    overscroll-behavior: none;
}
.paragraph {
  whitespace: no-break;
  text-overflow: ellipsis;
  width: 100px;
}
.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
}
body {
  font-family: Camphor, Open Sans, Segoe UI, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.smol-centering {
  display: grid;
  place-content: center;
}
.smol-css-grid {
  --min: 15ch;
  --gap: 1rem;

  display: grid;
  grid-gap: var(--gap);
  /* min() with 100% prevents overflow
  in extra narrow spaces */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}
.content p{   
   display: -webkit-box;   
   -webkit-line-clamp: 3;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}
.holder {
  position: relative;
}
.holder:after {
  left: 0;
  right: 0;
  width: 100%;
  bottom: -21px;
  content: "";
  height: 21px;
  display: block;
  position: absolute;
  /* Here's the SVG embedded into the CSS BG using https://yoksel.github.io/url-encoder/ */
  background: url("data:image/svg+xml, %3Csvg width='1166' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='1166' height='21'%3E%3Crect width='1166' height='21' fill='url(%23paint0_linear)'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Crect width='1166' height='21' fill='url(%23paint1_radial)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x2='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(-1166 -7 2608 -438157 -138 219063)'%3E%3Cstop offset='0' stop-color='%23333' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23000' stop-opacity='1'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='paint1_radial' cx='0.5' cy='0.5' r='0.5' gradientUnits='userSpaceOnUse' gradientTransform='translate(1453 -10) scale(1740 62) rotate(90)'%3E%3Cstop offset='0.0' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
<div class="alert alert--success toast toast--top--right hide">
    This is success alert
    <button class="alert--close">×</button>
</div>
<div class="alert alert--message toast toast--bottom--left hide">
    This is message alert
    <button class="alert--close">×</button>
</div>
<div class="alert alert--error toast toast--bottom--center hide">
    This is danger alert
    <button class="alert--close">×</button>
</div>
<p class="para--lg">
...
</p>
<p class="para--md text--center text--grey">
...
</p>
<p class="para--sm text--bold">
...
</p>
<h1 class="heading--1">Heading 1</h1>
<h2 class="heading--2">Heading 2</h2>
<h3 class="heading--3">Heading 3</h3>
<h4 class="heading--4">Heading 4</h4>
<h5 class="heading--5">Heading 5</h5>
<h6 class="heading--6">Heading 6</h6>
/*HTML CODE*/

<input class="slider m-b-1" 
type="range" min="0" 
max="100" step="1" 
value="40" />

  
  
  
  
  
 /* JavaScript */
  

const slider = document.querySelector(".slider");

slider.addEventListener("input", () => {
updateSlider();
});

const updateSlider = function () {
const backgroundPercentage =
((slider.value - slider.min) / (slider.max - slider.min)) * 100;
const backgroundColor = `linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) ${backgroundPercentage}%, var(--success-light) ${backgroundPercentage}%, var(--success-light) 100%)`;
slider.style.background = backgroundColor;
};

updateSlider();
<div class="rating--container">
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
</div>
<div class="rating--container ">
    <i class="fas fa-star star star--checked"></i>
    <i class="fas fa-star star star--checked"></i>
    <i class="fas fa-star star star--checked"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
</div>
<div class="nav--container">
    <div class="hamburger--icon">
        <i class="fas fa-bars"></i>
    </div>
    <div class="logo">Brand Name</div>
    <nav class="nav--items">
        <ul class="list list--space">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </nav>
</div>
<div class="modal modal--alert hide">
    <h5 class="modal--heading heading--4">Delete Element</h5>
    <p class="modal--text">Are you sure you want to delete it?</p>
    <div class="modal--actions">
        <a href="#" class="link link--primary m-r-1" onclick="closeModal()">Yes</a>
        <a href="#" class="link link--secondary m-r-1" onclick="closeModal()">No</a>
    </div>
</div>
<div class="overlay hide"></div>
<ul class="list list--stacked list--primary p-v-1">
    <li class="list--item">This is stacked list item 1</li>
    <li class="list--item">This is stacked list item 2</li>
    <li class="list--item">This is stacked list item 3</li>
    <li class="list--item">This is stacked list item 4</li>
    <li class="list--item">This is stacked list item 5</li>
</ul>
<ul class="list list--stacked p-v-1">
    <li class="list--item">This is stacked list item 1</li>
    <li class="list--item">This is stacked list item 2</li>
    <li class="list--item">This is stacked list item 3</li>
    <li class="list--item">This is stacked list item 4</li>
    <li class="list--item">This is stacked list item 5</li>
</ul>
<ul class="list list--space p-v-1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<span class="m-r-1 input--primary">
    <input type="radio" name="radio" id="radio1" />
    <label for="radio1">Radio 1</label>
</span>
<span class="m-r-1 input--primary">
    <input type="radio" name="radio" id="radio2" checked />
    <label for="radio2">Radio 2</label>
</span>
<span class="input--primary">
    <input type="checkbox" id="checkbox" name="radio" checked />
    <label for="checkbox">check this check box</label>
</span>
<div class="input--container input--error">
    <label for="phonenumber" class="input--label">Phone Number </label>
    <input type="number" id="phonenumber" class="input" />
</div>
<div class="input--container input--error">
    <label for="phonenumber" class="input--label">Phone Number </label>
    <input type="number" id="phonenumber" class="input" />
    <span class="input--error--message">Phone number should only contain numbers</span>
</div>
<div class="input--container input--standard">
    <label for="name" class="input--label">Name </label>
    <input type="text" id="name" class="input" />
</div>
<div class="input--container input--primary">
    <label for="email" class="input--label">Email </label>
    <input type="email" id="email" class="input" />
</div>
<div class="input--container input--primary input--disabled">
    <label for="address" class="input--label">Address </label>
    <input type="text" id="address" class="input" readonly autocomplete="off" />
</div>
<img class="img--round" 
src="https://picsum.photos/id/1024/300/300" 
alt="sample image" />
<img class="img--res" 
src="https://i.picsum.photos/id/1024/1920/1280.jpg?hmac=-PIpG7j_fRwN8Qtfnsc3M8-kC3yb0XYOBfVzlPSuVII"
alt="sample image" />
<div class="grid grid--3--cols">
    <div>.....</div>
    <div>.....</div>
    <div>.....</div>
</div>
<div class="grid grid--2--cols">
    <div>.....</div>
    <div>.....</div>
</div>
<div class="card card--overlay">
    <img src="https://picsum.photos/id/1/300" alt="Man sitting in front of computer" />
    <div class="card--info">
        <p class="card--title">Web Development</p>
        <p class="card--author">by Hiteshp</p>
    </div>
    <p class="card--description">
        Learn web development in easy and simple way by building small
        projects
    </p>

    <div class="card--footer">
        <div class="card--btn--action">
            <a href="#" class="link link--information">Learn</a>
            <a href="#" class="link link--secondary">Bookmark</a>
        </div>
        <div class="card--btn--icons">
            <button class="btn icon--btn">
                <i class="far fa-heart" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-share-alt" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>

<div class="card card--text">
    <img src="https://picsum.photos/id/1/300" alt="Man sitting in front of computer" />
    <div class="card--info">
        <p class="card--title">Web Development</p>
        <p class="card--author">by Hitesh</p>
    </div>
    <p class="card--description">
        Learn web development in easy and simple way by building small
        projects
    </p>

    <div class="card--footer">
        <div class="card--btn--action">
            <a href="#" class="link link--information">Learn</a>
            <a href="#" class="link link--secondary">Bookmark</a>
        </div>
        <div class="card--btn--icons">
            <button class="btn icon--btn">
                <i class="far fa-heart" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-share-alt" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>
<div class="card card--horizontal">
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content--btn--container">
        <div class="card--content">
            <div class="card--title">Stylish Blue Shirt</div>
            <div class="card--manufacturer">By LP fashion</div>
            <div class="card--review--container">
                <div class="card--review--star">
                    4.2
                    <i class="far fa-star" aria-hidden="true"></i>
                </div>
                <div class="card--review--number">(256)</div>
            </div>
            <div class="card--price--container">
                <div class="actual--price">₹600</div>
                <div class="strike--price">₹1200</div>
                <div class="offer--percentage">(50%off)</div>
            </div>
        </div>
        <div class="card--btn">
            <button class="btn btn--primary w-100">Add to cart</button>
        </div>
    </div>
</div>
<div class="card">
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge">
    <button class="btn icon--btn icon--badge">
        <i class="far fa-heart" aria-hidden="true"></i>
    </button>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge">
    <button class="btn icon--btn icon--badge">
        <i class="fas fa-times" aria-hidden="true"></i>
    </button>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text">
    <span class="badge--text badge--new">New</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text card--disabled">
    <span class="badge--text badge--sold">Sold out</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text">
    <span class="badge--text badge--sold">Sold out</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<button class="btn btn--fab btn--primary m-r-1">
    <i class="fas fa-plus" aria-hidden="true"></i>
</button>
<button class="btn btn--fab btn--secondary">
    <i class="fas fa-arrow-up"></i>
</button>
<button class="btn icon--btn m-r-1">
    <i class="fas fa-shopping-cart fa-2x" aria-hidden="true"></i>
</button>
<button class="btn icon--btn">
    <i class="fas fa-times-circle fa-2x" aria-hidden="true"></i>
</button>
<a href="#" class="link link--primary m-r-1">Link</a>
<a href="#" class="link link--secondary m-r-1">Link</a>
<a href="#" class="link link--information m-r-1">Link</a>
<button class="btn btn--outline btn--primary">Button</button>
<button class="btn btn--outline btn--secondary">Button</button>
<button class="btn btn--outline btn--icon btn--information">
    <i class="fas fa-check" aria-hidden="true"></i>Button
</button>
<button class="btn btn--outline btn--disabled btn--secondary">
    Button
</button>
<button class="btn btn--primary">Button</button>
<button class="btn btn--icon btn--secondary">
    <i class="fas fa-times" aria-hidden="true"></i>Button
</button>
<button class="btn btn--information">Button</button>
<button class="btn btn--primary btn--disabled">
    Button
</button>
<div class="badge--container">
    <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Randomuser" class="m-r-1 avatar avatar--circle avatar--sm" />
    <span class="badge badge--status badge--bottom--right badge--online">
    </span>
</div>

<div class="badge--container">
    <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Randomuser" class="m-r-1 avatar avatar--circle avatar--sm" />
    <span class="badge badge--status badge--bottom--right badge--offline">
    </span>
</div>
<div class="badge--container">
    <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Randomuser" class="m-r-1 avatar avatar--circle avatar--sm" />
    <span class="badge badge--status badge--bottom--right badge--busy"></span>
</div>
<div class="badge--container m-v-1 m-r-2">
    <i class="fas fa-bell fa-2x" aria-hidden="true"></i>
    <span class="badge badge--top--right badge--primary">9</span>
</div>
<div class="badge--container m-v-1 m-r-2">
    <i class="fas fa-envelope fa-2x" aria-hidden="true"></i>
    <span class="badge badge--top--right badge--secondary">9+</span>
</div>
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--xs" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--sm" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--md" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--lg" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--xl" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--xs" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--sm" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--md" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--lg" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--xl" />
/* HTML Code */
<link rel="stylesheet" href="https://roarui.netlify.app/css/roarui.css">
  
 /* Import CSS */
  @import url("https://roarui.netlify.app/css/roarui.css");
<style>
	html, body {
  		overflow-y: hidden;
  	}
</style>

<script>
  $(function(){
  setTimeout(function(){
    $('html')
    .css({
      'overflow-y': 'scroll'
    })
    
  	window.scrollTo(0, 0);
  }, 3000);
});
</script>
.grid{
  display: grid;
  gap: 2rem;
  padding: 2rem;
}


@media screen and screen and (min-width: 1200px) {
    .grid{
		grid-template-columns: repeat(3, 1fr);
    }
}

@media and screen and (min-width: 900px){
  .grid{
	grid-template-columns: repeat(2, 1fr);
  }
}

@media and screen and (min-width: 0px){
	.grid{
       grid-template-columns: repeat(1, 1fr);
    }
}
/* 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;
  }
}
.text-gradient {
    background: linear-gradient(94.23deg,#5374fa 12.41%,#fd9179 52.55%,#ff6969 89.95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<!-- 2 column grid -->
<div class="grid grid-col-2">
  <div class="grid-col-item">item1</div>
  <div class="grid-col-item">item2</div>
</div>

<!-- 3 column grid -->
<div class="grid grid-col-3">
  <div class="grid-col-item">item1</div>
  <div class="grid-col-item">item2</div>
  <div class="grid-col-item">item3</div>
</div>
<!-- Basic Snackbar -->
<div class="snackbar">
    <span class="white">Moved to Trash</span>
    <span class="material-icons snackbar-close"> close </span>
</div>

<!-- Stacked Snackbar -->
<div class="stacked-snackbar">
    <div class="snackbar">
        <span class="white">Moved to Trash</span>
        <span class="material-icons snackbar-close"> close </span>
    </div>
    <div class="snackbar">
        <span class="white">Moved to Trash</span>
        <span class="material-icons snackbar-close"> close </span>
    </div>
</div>
<div class="alert alert--success m-v-1">
 This is success alert
<button class="alert--close">×< /button>
 < /div>
 <div class="alert alert--error m-v-1">
  This is error alert
<button class="alert--close">×< /button>
< /div>
 <div class="alert alert--message m-v-1">
  This is message alert<button class="alert--close">×< /button>
 < /div>
 <div class="alert alert--information m-v-1">
 This is information alert
 <button class="alert--close">×< /button>
< /div>
 var preloader = document.getElementById("loading");
    var body = document.querySelector("body");
    var html = document.querySelector("html");
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(function loader() {
        preloader.style.display = "none";
        body.classList.remove("no-scroll-y");
        body.classList.add("no-scroll-x");
        html.classList.add("no-scroll-x");
      }, 1500);
    });
 <div class="modal-container">
     <button id="alert-modal-btn" class="btn primary-btn">
         LOG OUT
     </button>
     <dialog id="alert-modal" class="modal">
         <div class="modal-wrapper">
             <h2 class="modal-header">LOGOUT</h2>
             <span class="modal-text">Are you sure you want to log out?</span>
             <form method="dialog" class="modal-actions">
                 <button class="btn secondary-btn modal-action">
                     NO
                 </button>
                 <button class="btn primary-btn modal-action">YES</button>
             </form>
         </div>
     </dialog>
 </div>
.card-body {
  display: flex;
  flex-direction: column;
}

button.btn {
  margin-top: auto;
}
ins {
  padding: 0 0.125em;
  text-decoration: none;
  background-color: lightgreen
}
del {
  padding: 0 0.125em;
  text-decoration: none;
  background-color: pink;
}
mark {
  padding: 0 0.125em;
}
.note {
  padding: 0 0.125em;
  background-color: lightblue;
}
aside.note {
  padding: 0.5em 1em;
}
u {
  text-decoration: none;
  border-bottom: 3px red dashed;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
/*CSS*/
.field-item__wrapper {
    position: relative;
    padding-top: 15px;
}
.form__field {
    font-family: inherit;
    width: 100%;
    border: 0;
    border-bottom: 2px solid #000;
    outline: 0;
    color: #000;
    padding: 7px 0;
    background: 0 0;
    transition: border-color 0.2s;
}
.form__field::placeholder {
    color: transparent;
    opacity: 0;
}
.form__field:placeholder-shown ~ .form__label {
    cursor: text;
    top: 20px !important;
}
.form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    color: #000;
}
.form__field:focus {
    padding-bottom: 6px;
    border-width: 3px;
    border-image-slice: 1;
    border-color: #000 !important;
}
.form__field:focus ~ .form__label {
    position: absolute;
    top: 0 !important;
    font-size: 0.8em;
    display: block;
    transition: 0.2s;
}
.form__field:invalid,
.form__field:required {
    box-shadow: none;
}
.w-input.error {
    border-color: #cc3131;
}
label.error {
    font-size: 10px;
    line-height: 24px;
    color: #cc3131;
    position: absolute;
    bottom: -25px;
}
/*CSS*/
/*CSS*/
.youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.8;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}

.youtube img {
	width: 100%;
}

.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}
/*CSS*/

/*JS*/
(function() {

	var youtube = document.querySelectorAll(".youtube");

	for (var i = 0; i < youtube.length; i++) {

		var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";

		var image = new Image();
		image.src = source;
		image.addEventListener("load", function() {
			youtube[i].appendChild(image);
		}(i));

		youtube[i].addEventListener("click", function() {

			var iframe = document.createElement("iframe");

			iframe.setAttribute("frameborder", "0");
			iframe.setAttribute("allowfullscreen", "");
			iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=0");

			this.innerHTML = "";
			this.appendChild(iframe);
		});
	};

})();
/*JS*/

/*HTML*/
<div data-embed="YOUTUBE_VIDEO_ID" class="video-modal youtube">
  <div class="play-button"></div>
</div>
/*HTML*/
/*CSS*/
.text__underline {
    transform: translateX(-300%);
    transition: 0.7s;
}
.header__nav-button {
    max-width: fit-content;
    overflow: hidden;
}
.header__nav-button:hover .text__underline {
    animation: toMiddlePos 0.7s;
    transform: translateX(0);
    opacity: 100%;
}
.header__nav-button:not(:hover) .text__underline {
    transform: translateX(300%);
    opacity: 0;
}
@keyframes toMiddlePos {
    from {
        transform: translateX(-300%);
    }
    to {
        transform: translateX(0);
    }
}
/*CSS*/

/*HTML markup*/
<a class="button header__nav-button">
  <span>Your text</span>
  <div class="content-list-item__line line-primary text__underline line__black" style="width: 0%; 	display: block; height: 1px;" />
</a>
/*HTML markup*/
/*JS*/
/*connect luxy.js with CDN*/
<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

/*script to make luxy.js work properly*/
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
if (!isMobile) {
	luxy.init({
		wrapper: '#luxy',
		wrapperSpeed: 0.085,

	});
}
/*JS*/

/*HTML*/
<div id="luxy" class="scroll-container">
	... //your content goes here
</div>
/*HTML*/

/*CSS*/
.scroll-container {
  position: fixed;
}
/*CSS*/
/*CSS*/
#nav__wrapper {
  transform: translateY(0%);
  transition: all 0.3s ease-out;
}

#nav__wrapper.header_hide {
  transform: translateY(-100%);
}
/*CSS*/
  
/*JS*/
const header_el = $("#nav__wrapper"),
    mywindow = $(window);
let mypos = mywindow.scrollTop(),
    up = !1,
    newscroll = 0;
mywindow.scroll(function () {
    (newscroll = mywindow.scrollTop()) > mypos && !up ? (header_el.toggleClass("header_hide"), (up = !up)) : newscroll < mypos && up && (header_el.toggleClass("header_hide"), (up = !up)), (mypos = newscroll);
});
/*JS*/
body::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: #DDDDDD;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background: #707070;
  border-radius: 100px;
}
.outlined__text-white {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px white;
}

.outlined__text-black {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px black;
}
Si es un elemento display: inline; entonces solo por Es innecesario justify-content: center;
son funciones en el plano cartesiano 0.0 y 1.1
cubic-bezier(p1, p2, p3, p4): p<=1

Todas las funciones cubicas tienen un punto de inflexión(o dos puntos de concavidad):
T1= (p1,p2) cordenada donde termina concavo hacia abajo(punto 1 de inflexión)
T2= (p3,p4) cordenada donde termina convexo hacia arriba(punto 2 de inflexión)
Nota: si tiene dos puntos de inflexión es porque entre en 1 y el 2 hay una recta 
Ya sabemos que transition no tiene "animación" porque no tiene intervalo de acción
-- esto condiciona a que todas la propiedades existen despues de que el elemento aparesca
-- si le ponemos transition: color 3s; no surgira la animación porque en el display none
   aun no exite el color, luego , en el display block ya existe y no se da la niamción por que
   no logra tener un intervalo donde cambia su valor, sino que no existe y luego exite
   (sinintervalo)
la unidad 1fr en css grid tiene un comportamiento maximo 
yaque si solo se lo pones a un elemento sera el maximo y si le pones a 3
sera 1/3 que es el maximo; por eso no puede ir en el minimo de minmax(30%, 1fr) eso es lo correcto.

__NOTA__
minmax(min,max):es solo de grid y en su parte min no se le pone 1fr porque tiene comportamiento max
-min(): es de css no de grid, y dentro de sus valores no especifica que permite 1fr(no es valido)
-max(): es de css no de grid, y dentro de sus valores no especifica que permite 1fr(no es valido)
<sl-drawer label="Drawer" class="drawer-scrolling">
  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
    <p>Scroll down and give it a try! 👇</p>
  </div>
  <sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>

<sl-button>Open Drawer</sl-button>

<script>
  const drawer = document.querySelector('.drawer-scrolling');
  const openButton = drawer.nextElementSibling;
  const closeButton = drawer.querySelector('sl-button[variant="primary"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Specificity</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div id="main">
            <p>
                <a href="#">Link here</a>
            </p>
        </div>
    </div>
</body>
</html>

a {
    color: black;
}

p a {
    color: purple;
}

div #main p a {
    color: yellow;
}

#main a {
    color: blue;
}

.container #main a {
    color: red;
}
.feed-item {
  border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
}
add_action( 'admin_bar_menu', 'add_link_to_admin_bar', 999 );
function add_link_to_admin_bar($wp_admin_bar) {         
    // adds a child node to site name parent node
    $wp_admin_bar->add_node( array(
      'parent' => 'site-name',
      'id'     => 'plugins',
      'title'  => 'Plugins',
      'href'   => esc_url( admin_url( 'plugins.php' ) ),
      'meta'   => false
    ));
}
add_action( 'admin_bar_menu', 'add_link_to_admin_bar', 999 );
function add_link_to_admin_bar($wp_admin_bar) {         
    // adds a child node to site name parent node
    $wp_admin_bar->add_node( array(
      'parent' => 'site-name',
      'id'     => 'plugins',
      'title'  => 'Plugins',
      'href'   => esc_url( admin_url( 'plugins.php' ) ),
      'meta'   => false
    ));
}
-webkit-text-stroke: 3px black;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: fixed; /* or absolute */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
body, html { margin: 0; padding: 0; }
* { box-sizing: border-box; }
.wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "a a b"
    "a a b";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
  object-fit: cover;
  border-radius: 50%;
  height: 100px;
  width: 100px;
<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>
.revealLTR,
.revealRTL,
.revealTTB,
.revealBTT {
	position: relative;
	overflow: hidden;
}
.revealLTR[data-aos=fade].aos-animate > *,
.revealRTL[data-aos=fade].aos-animate > *,
.revealTTB[data-aos=fade].aos-animate > *,
.revealBTT[data-aos=fade].aos-animate > * {
	animation: fadeIn 0s 0.6s;
	animation-fill-mode: backwards;
}
.revealLTR[data-aos=fade]:not[.aos-animate],
.revealRTL[data-aos=fade]:not[.aos-animate],
.revealTTB[data-aos=fade]:not[.aos-animate],
.revealBTT[data-aos=fade]:not[.aos-animate] {
	opacity: 0;
}
.revealLTR[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateX(-100%);
	animation: revealInLTR 0.6s 0s, revealOutLTR 0.6s 0.6s;
	animation-fill-mode: forwards;
}
.revealRTL[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateX(100%);
	animation: revealInRTL 0.6s 0s, revealOutRTL 0.6s 0.6s;
	animation-fill-mode: forwards;
}
.revealTTB[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateY(-100%);
	animation: revealInTTB 0.6s 0s, revealOutTTB 0.6s 0.6s;
	animation-fill-mode: forwards;
}
.revealBTT[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateY(100%);
	animation: revealInBTT 0.6s 0s, revealOutBTT 0.6s 0.6s;
	animation-fill-mode: forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes revealInLTR {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes revealOutLTR {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(101%);
	}
}
@keyframes revealInRTL {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes revealOutRTL {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-101%);
	}
}
@keyframes revealInTTB {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes revealOutTTB {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(101%);
	}
}
@keyframes revealInBTT {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes revealOutBTT {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-101%);
	}
}
// style.scss
:root{
  --color-property: $var1;
}

// style.css
:root{
  --color-property: $var1;
}

// No compila nada de las variables:
//tal vez porque :root es el unico pseudo elemento al que se puede aceder directamentes, incluso //desde JS, como; let root = document.querySelector(":root")
// etiqueta: especificidad= 0;
// class: especificidad= 1;
// id: especificidad= 2;
 /* luego de acuerdo a las combinaciones, se sumaran sus especificidades implicadas*/

// EL ORDEN QUE APARECEN EN LA HOJA DE STYLE DE navegador es segun a su especificidad; aparece //primero el de mayor especificidad y los de menor abajo:
//- segun a eso se aanula propiedades:


<style>
body {
  margin: 1em auto;
  max-width: 40em;
  width: 88%;
}
  
/* The CSS aspect-ratio property tells browsers to preserve a specific aspect ratio on an element when scaling the size of it up or down. */

iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}
</style>

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/_VDGysJGNoI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<style>
 .spacer {
  height: 100vh;
}

a {
  color: #3d3d3d;
  font-family: Arial, Helvetica, sans-serif;
}
/* The magic one liner that allows for smooth scrolls */
html {
  scroll-behavior: smooth;
}

  /* Removes the animation for users that don't prefer it */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
  
 </style>

<h1 id="top"><a href="#middle">Let's go to the middle of the page</a></h1> 

<div class="spacer">
  &nbsp;
</div>

<h1 id="middle"><a href="#bottom">Go to the bottom?</a></h1>

<div class="spacer">
  &nbsp;
</div>

<h1 id="bottom"><a href="#top">Nah, let's go back to the top</a></h1>
html {
  /* 62.5% of 16px base font size is 10px */
  font-size: 62.5%;
}
@media (max-width: 980px) {
.forceRowOrder {
	display: flex;
  flex-wrap: wrap;
}

.Order1 {
	order: 1;
	margin-bottom: 30px !important;
}

.Order2 {
	order: 2;
	margin-bottom: 0px !important;
}
}
<div class="slider">
    <div class="slider-value">
        <span>0</span>
        <span>500</span>
        <span>1000</span>
    </div>
    <input type="range" min="0" max="1000" value="500">
</div>
<div class="filter-wrap flex-col">
    <label for="price">
        <h4>Price Range Slider:</h4>
    </label>
    <div class="flex-row spc-btwn">
        <h5>₹0</h5>
        <h5>₹2500</h5>
        <h5>₹5000</h5>
    </div>

    <input type="range" name="price" class="prange" min="0" max="5000" value="2500" />
</div>
  <!-- Navigation -->
  <nav class="flex-row header-bar">
      <div class="flex-row header-left">
          <i class="material-icons header-icon"> menu </i>

          <h1 class="web-logo">Gaming</h1>
      </div>
      <div class="flex-row header-right">
          <button class="btn primary-btn btn-active">LOGIN</button>
          <div class="relative-container">
              <i class="material-icons header-icon">
                  favorite_border</i>
              <div class="badge top-right flex-row center-it nav-badge-color">3</div>
          </div>

          <div class="flex-row relative-container">
              <i class="material-icons header-icon"> shopping_cart </i>
              <div class="badge top-right flex-row center-it nav-badge-color">2</div>
          </div>
          <i class="material-icons header-icon"> logout </i>
      </div>
  </nav>
 <!-- GRIDS -->
 <h1>GRIDS</h1>
 <div class="grid">
     <div class="grid-container grid-two bgGrey">
         <div class="bgred"></div>
         <div class="bggreen"></div>

     </div>
     <div class="grid-container grid-three bgGrey">
         <div class="bgred"></div>
         <div class="bggreen"></div>
         <div class="bgblue"></div>
     </div>
 </div>
<ul class="flex-col center-it stk-list-container">
    <li class="flex-row center-it gap-btwn stack-list-item">
        <div class="flex-col gap-btwn">
            <span class="material-icons"> feed </span>1 hour ago
        </div>
        <div class="flex-col gap-btwn">
            Top story
            <p class="stack-list-text">your text
            </p>
        </div>
        <img src="../ignore/modi.jfif" alt="" class="stk-list-img" />
    </li>
    <li class="flex-row center-it gap-btwn stack-list-item">
        <div class="flex-col gap-btwn">
            <span class="material-icons"> feed </span>1 hour ago
        </div>
        <div class="flex-col gap-btwn">
            Top story
            <p class="stack-list-text">your text
            </p>
        </div>
        <img src="../ignore/river.jfif" alt="" class="stk-list-img" />
    </li>
    <li class="flex-row center-it gap-btwn stack-list-item">
        <div class="flex-col gap-btwn">
            <span class="material-icons"> feed </span>1 hour ago
        </div>
        <div class="flex-col gap-btwn">
            Top story
            <p class="stack-list-text">your text
            </p>
        </div>
        <img src="../ignore/cricket.jfif" alt="" class="stk-list-img" />
    </li>
</ul>
     <ul class="flex-col center-it list-container">
         <li class="flex-row center-it spc-btwn norm-list-item">
             <p>The quantity of mangoes:</p>
             <div>18</div>
         </li>
         <li class="flex-row center-it spc-btwn norm-list-item">
             <p>The quantity of bananas:</p>
             <div>10</div>
         </li>
         <li class="flex-row center-it spc-btwn norm-list-item">
             <p>The quantity of apples :</p>
             <div>12</div>
         </li>
     </ul>
<link
  rel="stylesheet"
  href="https://spectre-ui.netlify.app/documentation/styles.css"
/>
@media screen and (min-width: 640px){
  .Index {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap !important;
  }
  section[id*="split"]{
    width: 50%!important;
  }
  section[id*="full"]{
    width: 100%!important;
  }
}
	
<!-- Basic Rating -->
<div class="rating-simple">
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
</div>

<!-- Number Rating -->
<div class="rating-number-container">
    4.5 <span class="material-icons rating-number"> star </span>
</div>
/* ==========================================================================
Animation System by Neale Van Fleet from Rogue Amoeba
========================================================================== */
.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
  animation-fill-mode: backwards;
}

/* Fade In */
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Pop In */
.animate.pop { animation-name: animate-pop; }

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Blur In */
.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}

@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Glow In */
.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}

@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}

/* Grow In */
.animate.grow { animation-name: animate-grow; }

@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Splat In */
.animate.splat { animation-name: animate-splat; }

@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px);
    }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0) translate(0, 0);
  }
}

/* Roll In */
.animate.roll { animation-name: animate-roll; }

@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}

/* Flip In */
.animate.flip {
  animation-name: animate-flip;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1);
  }
}

/* Spin In */
.animate.spin {
  animation-name: animate-spin;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, .9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
  }
}

/* Slide In */
.animate.slide { animation-name: animate-slide; }

@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Drop In */
.animate.drop { 
  animation-name: animate-drop; 
  animation-timing-function: cubic-bezier(.77, .14, .91, 1.25);
}

@keyframes animate-drop {
0% {
  opacity: 0;
  transform: translate(0,-300px) scale(0.9, 1.1);
}
95% {
  opacity: 1;
  transform: translate(0, 0) scale(0.9, 1.1);
}
96% {
  opacity: 1;
  transform: translate(10px, 0) scale(1.2, 0.9);
}
97% {
  opacity: 1;
  transform: translate(-10px, 0) scale(1.2, 0.9);
}
98% {
  opacity: 1;
  transform: translate(5px, 0) scale(1.1, 0.9);
}
99% {
  opacity: 1;
  transform: translate(-5px, 0) scale(1.1, 0.9);
}
100% {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1);
  }
}

/* Animation Delays */
.delay-1 {
  animation-delay: 0.6s;
}
.delay-2 {
  animation-delay: 0.7s;
}
.delay-3 {
  animation-delay: 0.8s;
}
.delay-4 {
  animation-delay: 0.9s;
}
.delay-5 {
  animation-delay: 1s;
}
.delay-6 {
  animation-delay: 1.1s;
}
.delay-7 {
  animation-delay: 1.2s;
}
.delay-8 {
  animation-delay: 1.3s;
}
.delay-9 {
  animation-delay: 1.4s;
}
.delay-10 {
  animation-delay: 1.5s;
}
.delay-11 {
  animation-delay: 1.6s;
}
.delay-12 {
  animation-delay: 1.7s;
}
.delay-13 {
  animation-delay: 1.8s;
}
.delay-14 {
  animation-delay: 1.9s;
}
.delay-15 {
  animation-delay: 2s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}
<style>
    @media all and (max-width: 600px) {
    .table-wrapper {
      width: 95%;
    }
    .td-inline {
      display: inline-table !important;
      width: 100%;
    }
    .img-100 img {
      width: 100%;
      height: auto; 
    }
    
    .show {
      display: block;
    }
    
    }
</style>


<!-- Image left + Text Right-->
<table width="638" border="0" cellpadding="0" cellspacing="0" align="center" class="table-wrapper" style="background: #f4f5f6">
    <tr>
        <td>
            <!-- Image -->
            <table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="48%">
                <tr>
                    <td class="img-100">
                        <img src="https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=327&q=80" width="310" height="auto" alt="blank" style="display: block" border="0" />
                    </td>
                </tr>
            </table>
            <!-- Text -->
            <table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="50%">
                <tr>
                    <td width="30" class="width-20"></td>
                    <td align="center">
                        <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                            <tr>
                                <td height="34" class="height-10"></td>
                            </tr>
                            <tr>
                                <td style="
                        font-size: 28px;
                        font-weight: 500;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.3;
                      ">
                                    Lorem ipsum dolor sit amet
                                </td>
                            </tr>
                            <tr>
                                <td height="16" class="height-10mid"></td>
                            </tr>

                            <tr>
                                <td style="
                        font-size: 18px;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.5;
                      ">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </td>
                            </tr>
                            <tr>
                                <td height="30"></td>
                            </tr>
                            <tr>
                                <td align="left">
                                    <table cellpadding="0" cellspacing="0" border="0" align="left">
                                        <tr>
                                            <td width="200" align="center" height="45" style="border: 2px solid #000">
                                                <a target="_blank" href="#" style="
                                font-size: 18px;
                                     color: #000;
                                text-transform: uppercase;
                                font-family: 'Open Sans', Arial, sans-serif;
                                font-weight: 700;
                                text-align: center;
                                display: block;
                                line-height: 45px;
                                vertical-align: middle;
                                text-decoration: none;
                              ">Shop the Sale</a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr class="show">
                                <td height="20"></td>
                            </tr>
                        </table>
                    </td>
                    <td width="30"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- End Image left + Text Right -->

<!-- Blank space / divider -->
<table width="640" border="0" cellpadding="0" cellspacing="0" align="center" class="table-wrapper" style="background: #f4f5f6">
    <tr>
        <td height="40" class="mob-height-20"></td>
    </tr>
</table>
<!-- End Blank space / divider -->

<!-- Text Left - Image Right -->
<table width="638" border="0" cellpadding="0" cellspacing="0" dir="ltr" align="center" class="table-wrapper" style="background: #f4f5f6">
    <tr>
        <td>
            <!-- Image -->
            <table cellpadding="0" cellspacing="0" border="0" align="right" class="td-inline" width="48%">
                <tr>
                    <td class="img-100">
                        <img src="https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=389&q=80" width="310" height="auto" alt="blank" style="display: block" border="0" />
                    </td>
                </tr>
            </table>
            <!-- Text -->
            <table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="50%">
                <tr>
                    <td width="30" class="width-20"></td>
                    <td align="center">
                        <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                            <tr>
                                <td height="34"></td>
                            </tr>
                            <tr>
                                <td style="
                        font-size: 28px;
                        font-weight: 500;
                        color: #000;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.3;
                      ">
                                    Lorem ipsum dolor sit amet
                                </td>
                            </tr>
                            <tr>
                                <td height="16"></td>
                            </tr>

                            <tr>
                                <td style="
                        font-size: 18px;
                        color: #000;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.5;
                      ">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </td>
                            </tr>
                            <tr>
                                <td height="30"></td>
                            </tr>
                            <tr>
                                <td align="left">
                                    <table cellpadding="0" cellspacing="0" border="0" align="left">
                                        <tr>
                                            <td width="200" align="center" height="45" style="border: 2px solid #000">
                                                <a target="_blank" href="#" style="
                                font-size: 18px;
                                color: #000;
                                text-transform: uppercase;
                                font-family: 'Open Sans', Arial, sans-serif;
                                font-weight: 700;
                                text-align: center;
                                display: block;
                                line-height: 45px;
                                vertical-align: middle;
                                text-decoration: none;
                              ">Watch the Video</a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr class="show">
                                <td height="20"></td>
                            </tr>
                        </table>
                    </td>
                    <td width="30"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- End Text Left - Image Right -->
:root {
	
/*** COLOR SYSTEM ***/
	
/* 
GLOBAL COLOR SETUP (HSL)
Set the global colors below using HSL variables.
*/
	
	--primary-h: 44;
	--primary-s: 98%;
	--primary-l: 50%;

	--secondary-h: 41.1;
	--secondary-s: 100%;
	--secondary-l: 63.3%;

	--accent-h: 54.5;
	--accent-s: 15.5%;
	--accent-l: 86.1%;

	--base-h: 357.2;
	--base-s: 70.5%;
	--base-l: 47.8%;

/* 
SHADING VARIABLES
If you want to adjust the generated shade variants, you can adjust the percentages here.
Higher percentages are lighter and lower are darker.
*/

	--ultra-light: 95%;
	--light: 85%;
	--dark: 25%;
	--ultra-dark: 10%;

/* 
GLOBAL COLOR VARIABLES
These are the variables you can use in styling. They don't need to be edited.
Future plans: Auto generate full complimentary, triadic, analogous, etc. color schemes.
*/

	--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
	--primary-ultra-light: hsl(var(--primary-h), var(--primary-s), var(--ultra-light));
	--primary-light: hsl(var(--primary-h), var(--primary-s), var(--light));
	--primary-dark: hsl(var(--primary-h), var(--primary-s), var(--dark));
	--primary-ultra-dark: hsl(var(--primary-h), var(--primary-s), var(--ultra-dark));
	--primary-trans-80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .8);
	--primary-trans-60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .6);
	--primary-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .4);
	--primary-trans-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .2);
	--primary-comp: hsl(calc(var(--primary-h) + 180), var(--primary-s), var(--primary-l));
	--secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
	--secondary-ultra-light: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-light));
	--secondary-light: hsl(var(--secondary-h), var(--secondary-s), var(--light));
	--secondary-dark: hsl(var(--secondary-h), var(--secondary-s), var(--dark));
	--secondary-ultra-dark: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-dark));
	--secondary-trans-80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .8);
	--secondary-trans-60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .6);
	--secondary-trans-40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .4);
	--secondary-trans-20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .2);
	--secondary-comp: hsl(calc(var(--secondary-h) + 180), var(--secondary-s), var(--secondary-l));
	--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--accent-ultra-light: hsl(var(--accent-h), var(--accent-s), var(--ultra-light));
	--accent-light: hsl(var(--accent-h), var(--accent-s), var(--light));
	--accent-dark: hsl(var(--accent-h), var(--accent-s), var(--dark));
	--accent-ultra-dark: hsl(var(--accent-h), var(--accent-s), var(--ultra-dark));
	--accent-trans-80: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .8);
	--accent-trans-60: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .6);
	--accent-trans-40: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .4);
	--accent-trans-20: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .2);
	--accent-comp: hsl(calc(var(--accent-h) + 180), var(--accent-s), var(--accent-l));
	--base: hsl(var(--base-h), var(--base-s), var(--base-l));
	--base-ultra-light: hsl(var(--base-h), var(--base-s), var(--ultra-light));
	--base-light: hsl(var(--base-h), var(--base-s), var(--light));
	--base-dark: hsl(var(--base-h), var(--secondary-s), var(--dark));
	--base-ultra-dark: hsl(var(--base-h), var(--base-s), var(--ultra-dark));
	--base-trans-80: hsla(var(--base-h), var(--base-s), var(--base-l), .8);
	--base-trans-60: hsla(var(--base-h), var(--base-s), var(--base-l), .6);
	--base-trans-40: hsla(var(--base-h), var(--base-s), var(--base-l), .4);
	--base-trans-20: hsla(var(--base-h), var(--base-s), var(--base-l), .2);
	--base-comp: hsl(calc(var(--base-h) + 180), var(--base-s), var(--base-l));
	
/*** END COLOR SYSTEM ***/
}
<div class="modal">
    <div class="modal-header">
        Content...
    </div>
    <div class="modal-body">
        Content...
    </div>
    <div class="modal-footer">
        <button class="btn btn-secondary">...</button>
        <button class="btn btn-primary">...</button>
    </div>
</div>
/* To use REM units effectively, you'll want to make sure you reset your root font-size to 62.5% */

html {
     font-size: 62.5%;
}

/* MAX WIDTH UTILITY CLASSES */

.max-w--320 {
  width: 100%;
  max-width: 32rem;
}

.max-w--480 {
  width: 100%;
  max-width: 48rem;
}

.max-w--640 {
  width: 100%;
  max-width: 64rem;
}

.max-w--720 {
  width: 100%;
  max-width: 72rem;
}

.max-w--960 {
  width: 100%;
  max-width: 96rem;
}

.max-w--1120 {
  width: 100%;
  max-width: 112rem;
}

.max-w--full {
  width: 100%;
  max-width: 100%;
}
/* Owl Spacing */

.ct-section.owl-spacing--s .ct-section-inner-wrap > * + *,
.owl-spacing--s:not(.ct-section) > * + * {
margin-top: .5vmax;
}

.ct-section.owl-spacing--m .ct-section-inner-wrap > * + *,
.owl-spacing--m:not(.ct-section) > * + * {
margin-top: 1vmax;
}

.ct-section.owl-spacing--l .ct-section-inner-wrap > * + *,
.owl-spacing--l:not(.ct-section) > * + * {
margin-top: 2vmax;
}

.ct-section.owl-spacing--xl .ct-section-inner-wrap > * + *,
.owl-spacing--xl:not(.ct-section) > * + * {
margin-top: 4vmax;
}
<div class="card-shadow">
    <div class="card-img-container">
        <img class="card-img" src="" alt="" />
        <span class="card-badge-text">content...</span>
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-vertical">
    <div class="card-img-container">
        <img class="card-img" src="" alt="" />
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-horizontal">
    <div class="card-img-container">
        <img class="card-horizontal-img" src="" alt="" />
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-text-only">
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-overlay">
    <div class="card-img-container">
        <img class="card-img img-text" src="" alt="" />
        <span class="card-text-overlay">content...</span>
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-dismiss">
    <div class="card-img-container">
        <img class="card-img" src="" alt="" />
        <span class="material-icons card-dismiss-icon"> close </span>
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content......</div>
    </div>
</div>
div class="card-badge">
<div class="card-img-container">
    <img class="card-img" src="" alt="" />
    <span class="card-badge-text">content...</span>
</div>
<div class="card-body">
    <div class="card-content">content...</div>
    <div class="card-sub-content">content...</div>
</div>
</div>
.ticker-wrap .ticker {
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}
// NOTAS 
 /*
 1) SVG , PNG ,JPG: 
 para una misma imagen, puede pasar que el peso de svg sea mayor que png o jpg; porque
 dependera de que grafica se lleva a svg, si son figuras simples -> svg pesa poco; pero si son
 muchas imagenes intrincadas entonces svg terminara pesando mas, ya que jpg y png cuardan bits y svg guarda codigo vectorias.
 */

/*
2) -webkit-mask-img "solo funciona para firefox" 
   por lo tanto para enmascarar es mejor usar SVG
   -donde se usara "<image> con width y height obligatorios" y no <img>  
   -aplicar stdDeviation="10" entre 1 y 10 se pasa como que va perdiendo espacio
*/

/*
3) es mejor mover la mascara modificando cx y cy , sera mas simple.

  NOTA: las forma de escalar para un mismo tamaño con  background-image  y <img src=""/>
        No son iguales. es mejor usar un mismo tipo si quiere sobreponer imagenes parecidas y dar           efecto collage
*/

/*
  ENMASCARAR CON 	clipPath esta muy bien, incluso para moverlo con el mousemove es simple; pero 
  "no tiene forma de difuminar los bordes de lamascara con la función gauss"
*/
<!-- Primary/ Secondary Button -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

<!-- Link Button -->
<button class="btn btn-primary-link">
    <a href="">Primary Link Button</a>
</button>
<button class="btn btn-secondary-link">
    <a href="">Secondary Link Button</a>
</button>

<!-- Icon Button -->
<button class="btn btn-primary-icon btn-flex">
    <span class="material-icons"> account_circle </span>
    Primary Icon Button
</button>
<button class="btn btn-secondary-icon btn-flex">
    <span class="material-icons"> notifications </span>
    Secondary Icon Button
</button>

<!-- Floating Action Button -->
<button class="btn btn-float">
    <span class="material-icons"> add </span>
</button>
<button class="btn btn-float">
    <span class="material-icons"> arrow_upward </span>
</button>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Woodstone</h1>
  <h5>Neque porro quisquam</h5>
  <h6>Est. 1958</h6>
</div>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Vanguard</h1>
  <h5>Cras ornare tristique elit</h5>
  <h6>Est. 1965</h6>
</div>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Spartacus</h1>
  <h5>At vero eos et accusamus</h5>
  <h6>Est. 1977</h6>
</div>
_______________________________-
  
  @import url(https://fonts.googleapis.com/css?family=Raleway:500);
@import url(https://fonts.googleapis.com/css?family=Righteous);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1306 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  color: #bdbdbd;
  margin: 40px 25px;
  max-width: 285px;
  width: 100%;
  text-align: center;
  font-size: 16px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.snip1306 h1,
.snip1306 h5 {
  margin: 0;
  text-transform: uppercase;
}
.snip1306 h1 {
  font-family: 'Righteous', Arial, sans-serif;
  font-size: 1.8em;
  line-height: 50px;
  position: relative;
  background-color: #bdbdbd;
  color: #212121;
  text-align: center;
  margin: 0 30px 10px;
}
.snip1306 h1:before,
.snip1306 h1:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: -5px;
  border-width: 25px 10px;
  border-style: solid;
}
.snip1306 h1:before {
  left: -23px;
  border-color: #bdbdbd #bdbdbd #bdbdbd transparent;
}
.snip1306 h1:after {
  right: -23px;
  border-color: #bdbdbd transparent #bdbdbd #bdbdbd;
}
.snip1306 h5 {
  font-weight: 500;
}
.snip1306 h6 {
  margin: 0;
  display: inline-block;
  position: relative;
}
.snip1306 h6:before,
.snip1306 h6:after {
  position: absolute;
  height: 1px;
  content: '';
  background: #bdbdbd;
  width: 30px;
  top: 50%;
}
.snip1306 h6:before {
  left: -35px;
}
.snip1306 h6:after {
  right: -35px;
}
.snip1306 .diamond {
  width: 10px;
  height: 10px;
  margin: 15px 5px;
  display: inline-block;
  line-height: 80px;
  background: #bdbdbd;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}
.snip1306 .diamond:nth-of-type(2) {
  -webkit-transform: rotateZ(-45deg) scale(2) translate(2px, -2px);
  transform: rotateZ(-45deg) scale(2) translate(2px, -2px);
}
/* Demo purposes only */
body {
  background-color: #212121;
}