Get View Page Source, View, copy and download HTML code of any website page
🔍 View Source API
Extract full HTML source code from any website
For smart Primates & ROBOTS (oh and ALIENS ).
Get Genuine WordPress Website's Google PageSpeed Performance Score.
Get Genuine PrestaShop, Magento, OpenCart Website's Google PageSpeed Performance Score.
Get Genuine WebFlow, WIX, Weebly, SquareSpace Website's Google PageSpeed Performance Score.
Get Genuine BigCommerce Website's Google PageSpeed Performance Score.
Get Genuine Shopify Website's Google PageSpeed Performance Score.
Extract full HTML source code from any website
Animations are good and it make website's pages attractive and more live. It feel user to see live things. Here you can user videos etc or gif image, But the problem is after using videos or gif file your website's page will heavy and load slow. These heavy file will consume your hosting spaces and also consume user's data and bandwidth.
So in this case we can use animations to make some zoom-in and zoom-out effect to JPG and PNG file. Using this we can save data and bandwidth. We will do it with simple CSS. Here we are not using any JavaScript, which can make it complex. below are 2 images. 1st one is normal image, and when your mouse hover then it will zoom. see 2nd image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom Hover Effect</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
section {
text-align: center;
}
.image-container {
position: relative;
overflow: hidden;
display: inline-block;
width: 100%;
max-width: 500px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}
.image-container img {
display: block;
border: none;
margin: 0;
padding: 0;
width: 100%;
height: auto;
transform: scale(1.1); /* Default size */ /* IMPORTANT PART */
transition: transform 9.5s ease-in-out; /* Smooth transition for zoom effect */
}
.image-container:hover img {
transform: scale(2); /* Zoom in */ /* IMPORTANT PART */
}
</style>
</head>
<body>
<!-- Container for the Zoom Effect -->
<section>
<h2>Image Zoom Hover Effect</h2>
<div class="image-container">
<img src="1.jpg" alt="Zoom Effect Image">
</div>
</section>
</body>
</html>
Suppose you have 2 Div tag. And want the make inner tag center
<div id="d1">
<div id="d2">
</div>
</div>
Then you will use below 1 line css code as below:
style="margin: 0 auto;"
<div id="d1">
<div id="d2" style="margin: 0 auto;" >
</div>
</div>
Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link. </title>
</head>
<body>
Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link.
<section id="sec" class="image_main-banner-class module-container image-full-width-img text-text good-style fullimg-width-background "
back-img-url="IMAGE-URL">
Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>
</section>
<script>
try {
let sec = document.getElementsByClassName("image_main-banner-class module-container image-full-width-img text-text good-style fullimg-width-background ");
let img=sec[0].getAttribute("back-img-url");
sec[0].style.backgroundImage = "url('"+img+"')";
} catch (err) { console.log(err); }
let tttt=0
if (window.screen.width < 500) {
tttt=5000;
} else {
tttt=2500;
}
</script>
</body>
</html>
<!doctype html>
<html lang="en-au">
<head>
<meta charset="utf-8">
<title>Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.story { content-visibility: auto; contain-intrinsic-size: auto 1300px;}
body { font-size: 18px; background: #fdfbfb; padding: 0 2rem; font-family: sans-serif; box-sizing: border-box; line-height: 1.4;}
article { margin: 0 auto; max-width: 960px;}
article p:first-of-type { font-size: 1.2rem;}
blockquote { padding: 2rem; border: 3px dashed rebeccapurple;}
h1 { text-align: center; font-size: 2.75rem;}
a { color: inherit; font-weight: bolder;}
ul { list-style: none;}
nav { display: flex; justify-content: space-between; align-items: center;}
nav ul { list-style: none;}
figure { width: 100%; margin: 0;}
img { width: 100%; max-width: 100%;}
ul { list-style: circle;}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; margin-bottom: 1rem;}
figcaption { font-size: 80%; background: rebeccapurple; color: white; text-align: center; padding: 1rem; margin: -1rem auto 1rem; z-index: 1; position: relative; width: 80%; max-width: 400px;}
</style>
</head>
<body>
<article>
<h1>The Art of Bug Debugging</h1>
<figure>
<img src="https://picsum.photos/960/550" alt="" />
</figure>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quo
accusantium corrupti magnam, rem non ad dignissimos alias! Voluptas
molestias expedita pariatur temporibus adipisci ab quaerat fugiat
quisquam aliquid ad!
</p>
<blockquote>
Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius
consequuntur nulla adipisci ratione velit perspiciatis repellat ipsa
tempore earum hic corporis, provident reprehenderit maiores commodi qui
rerum nisi animi quaerat! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Obcaecati voluptatem officia qui blanditiis et
laudantium, corrupti fuga fugit? Saepe eius sit totam ipsam nesciunt
debitis amet at quos doloribus porro.
</p>
<figure>
<img src="https://picsum.photos/960/550?random=2" alt="" />
<figcaption>
<a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing
elit. Doloremque, praesentium.
</figcaption>
</figure>
<h2>How to inspect the issue</h2>
<div class="story">
<blockquote>
Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
</blockquote>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
officiis omnis, maiores corporis, commodi temporibus necessitatibus
minus quae et eum repudiandae sequi voluptates magnam consequuntur
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=1" alt="" />
</figure>
<figure>
<img src="https://picsum.photos/475?random=2" alt="" />
</figure>
</div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, vitae,
odit pariatur mollitia facere quo debitis libero optio obcaecati
exercitationem voluptas, beatae fugiat! Optio voluptates at harum eum
ad molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis, accusamus nulla? Delectus atque rerum vitae nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
odio eos dolorum molestias expedita optio cum fugiat illo sequi
veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
<li>
Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
quae saepe harum, incidunt consequatur libero?
</li>
<li>Nemo saepe doloremque enim praesentium provident officiis!</li>
</ul>
<p>
Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
sunt cupiditate voluptatum dolorem, asperiores provident porro
excepturi temporibus repellendus iure laboriosam vero
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=4" alt="" />
<figcaption>
Ipsum veniam saepe atque maxime incidunt hic reprehenderit
consectetur vero.
</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/475?random=5" alt="" />
<figcaption>
Facilis nesciunt perferendis porro asperiores provident.
</figcaption>
</figure>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
aliquid natus numquam rerum omnis obcaecati, explicabo quibusdam
assumenda dolorem ut iure modi quod voluptates cum eveniet consectetur
aperiam distinctio nisi.
</p>
</div>
<h2>Don't ask your colleagues for help</h2>
<div class="story">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
officiis omnis, maiores corporis, commodi temporibus necessitatibus
minus quae et eum repudiandae sequi voluptates magnam consequuntur
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, debitis
consequatur beatae veritatis distinctio molestiae nemo! Velit labore
et officiis distinctio. Molestiae minima perspiciatis magni mollitia
dolore. Rem, in consectetur.
</p>
<blockquote>
Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
odio eos dolorum molestias expedita optio cum fugiat illo sequi
veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
<li>
Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
quae saepe harum, incidunt consequatur libero?
</li>
<li>Nemo saepe doloremque enim praesentium provident officiis!</li>
</ul>
<p>
Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
sunt cupiditate voluptatum dolorem, asperiores provident porro
excepturi temporibus repellendus iure laboriosam vero
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=6" alt="" />
<figcaption>
Ipsum veniam saepe atque maxime incidunt hic reprehenderit
consectetur vero.
</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/475?random=7" alt="" />
<figcaption>
Facilis nesciunt perferendis porro asperiores provident.
</figcaption>
</figure>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ipsam
voluptas explicabo optio ullam molestias eaque dicta reiciendis
similique commodi possimus nostrum fugit id illo et, consequatur omnis
labore quasi!
</p>
</div>
<h2>Improve your performance by making som coffee</h2>
<div class="story">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
officiis omnis, maiores corporis, commodi temporibus necessitatibus
minus quae et eum repudiandae sequi voluptates magnam consequuntur
</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
<li>
Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
quae saepe harum, incidunt consequatur libero?
</li>
<li>Nemo saepe doloremque enim praesentium provident officiis!</li>
</ul>
<blockquote>
Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
</blockquote>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, vitae,
odit pariatur mollitia facere quo debitis libero optio obcaecati
exercitationem voluptas, beatae fugiat! Optio voluptates at harum eum
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
odio eos dolorum molestias expedita optio cum fugiat illo sequi
veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
</p>
<p>
Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
sunt cupiditate voluptatum dolorem, asperiores provident porro
excepturi temporibus repellendus iure laboriosam vero
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=8" alt="" />
<figcaption>
Ipsum veniam saepe atque maxime incidunt hic reprehenderit
consectetur vero.
</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/475?random=9" alt="" />
<figcaption>
Facilis nesciunt perferendis porro asperiores provident.
</figcaption>
</figure>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
aliquid natus numquam rerum omnis obcaecati, explicabo quibusdam
assumenda dolorem ut iure modi quod voluptates cum eveniet consectetur
aperiam distinctio nisi.
</p>
</div>
<h2>Don't forget to deploy to production on Friday!</h2>
<div class="story">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
officiis omnis, maiores corporis, commodi temporibus necessitatibus
minus quae et eum repudiandae sequi voluptates magnam consequuntur
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=2" alt="" />
</figure>
<figure>
<img src="https://picsum.photos/475?random=3" alt="" />
</figure>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
odio eos dolorum molestias expedita optio cum fugiat illo sequi
veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
</p>
<blockquote>
Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
</blockquote>
<p>
Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
sunt cupiditate voluptatum dolorem, asperiores provident porro
excepturi temporibus repellendus iure laboriosam vero
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=4" alt="" />
<figcaption>
Ipsum veniam saepe atque maxime incidunt hic reprehenderit
consectetur vero.
</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/475?random=5" alt="" />
<figcaption>
Facilis nesciunt perferendis porro asperiores provident.
</figcaption>
</figure>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
</p>
</div>
</article>
</body>
</html>
Here is the below code that will load the iframe video when it iframe will be in the viewport.
It is important that to fill the page i have used image tag with width and height.
You can use your own data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy load iframe video using IntersectionObserver</title>
</head>
<body>
<br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
<br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
<br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
<br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
<br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
<iframe allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" title="Title" url-src="PUT-YOUYUBE-VIDEO-LINK-HERE"
id="widget2" data-gtm-yt-inspected-5="true" width="640" height="360" frameborder="0"></iframe>
<script>
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const iframe = entry.target;
//iframe.src = iframe.dataset.src; // Assume if you use data-src for youtube link
iframe.src=iframe.getAttribute('url-src');
observer.unobserve(iframe);
}
});
});
const iframes = document.querySelectorAll('iframe[url-src]');
iframes.forEach(iframe => {
observer.observe(iframe);
});
</script>
</body>
</html>
We can achieve it by 2 method.
1- Standard auto execute function.
2- Arrow function.
<script>
(function() {
const iamvar1= 'Iam var 1';
console.log('Auto Execute 1 function');
})();
</script>
<script>
(()=> {
const iamvar2= 'Iam var 2';
console.log('Auto Execute 2 function');
})();
</script>
You are working on Shopify project with a snippet. In that snippet you want pass value as per your need. So how can you achieve it ?
Let assume that you will use a snippet "rimg-a.liquid" in other liquid file and want to use as below. You want to pass imgurl, class and fetch value.
================================================
content of any liquid file or theme.liquid file in where you want to use rimg-a.liquid snippet file
include 'rimg-a',
imgurl: 'URl-IMAGE',
class: 'feature-mobile',
fetch: 'yes'
================================================
content of rimg-a.liquid file
<img {% if fetch != blank %} fetchpriority="high" decoding="async" {% endif %}
{% if imgurl != blank %}
src="{{ imgurl | split:'?' | first | replace: '2078x2233','390x419' }}"
{% endif %}
{% if class != blank %}class="{{ class }}"{% endif %}
>