Last active
January 8, 2020 17:35
-
-
Save headquarters/72a4de3881a1c70d042fc2510d3c17f7 to your computer and use it in GitHub Desktop.
Visually diffing two sites with iframes: a cheap and dirty way to manually diff two versions of the same site that might only differ by a few pixels here and there.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>Compare Old and New Sites Visually</title> | |
| <style> | |
| body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .container { | |
| position: relative; | |
| width: 1600px; | |
| height: 1200px; | |
| margin: auto; | |
| } | |
| .iframe { | |
| border: none; | |
| width: 1600px; | |
| height: 1200px; | |
| margin: 0; | |
| padding: 0; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| } | |
| #new-site { | |
| opacity: 0.5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <!-- | |
| Replace the URLs below with your old and new sites. The iframes will sit on top of each other, | |
| with the bottom one being on top and slightly transparent. This transparency allows you to | |
| visually tell the differences between the sites | |
| --> | |
| <iframe src="http://example.com/old-site" class="iframe" id="old-site"></iframe> | |
| <iframe src="http://example.com/new-site" class="iframe" id="new-site"></iframe> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment