Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Google Clone
ID	6383058550865920
Created	5 years ago, 1590238439310
Updated	5 years ago, 1609708475035
Code	<!DOCTYPE html> <!-- This was a project I made to see if I could make it look like the actual Google. Time Spent: ~30 minutes Date Released: 2020-05-23 ps: Do you see ONE small difference? Tell me in the T&T! --> <html> <head> <meta charset="utf-8"> <title>Google Clone</title> <link href="https://fonts.googleapis.com/css?family=Google+Sans+Display\|Material+Icons+Round\|Roboto" rel="stylesheet"/> <style> html, body { background: white; font-family: 'Google Sans Display', sans-serif; max-height: 100%; animation: 0.3s fadeIn forwards; } @keyframes fadeIn { from {opacity: 0;} tp {opacity: 1;} } .no-select { -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; } .logo { text-align: center; font-size: 80px; margin-top: 22%; font-weight: 500; } .center { text-align: center; } #g { color: dodgerblue; } #o { color: rgb(240, 77, 77); } #o2 { color: orange; } #g2 { color: dodgerblue; } #l { color: rgb(7, 171, 67); } #e { color: rgb(240, 77, 77); } #fakeBox { outline: none; box-sizing: border-box; margin-top: 30px; border-radius: 50px; border: none; box-shadow: 0px 1px 5px lightgrey; width: 60%; height: 30px; padding: 20px; font-size: 15px; padding-left: 50px; } #fakeboxP .search { outline: none; float: left; border: none; background: none; color: rgb(138, 138, 138); font-weight: 100; position: relative; top: 39px; left: 21.5%; padding-right: 0px; transform: scale(0.9); } #fakeboxP .mic { outline: none; float: right; border: none; background: none; color: rgb(138, 138, 138); font-weight: 100; position: relative; top: 39px; right: 21.5%; padding-right: 0px; transform: scale(0.9); cursor: pointer; } nav#top-right-nav { position: absolute; top: 10px; right: 15px; } nav#top-right-nav a { color: #333; font-size: 15px; text-decoration: none; margin-left: 12px; margin-right: 5px; } nav#top-right-nav a:nth-child(1) { color: #333; font-size: 15px; text-decoration: none; margin-left: 0px; margin-right: 0; } nav#top-right-nav a:hover { text-decoration: underline; color: rgb(94, 94, 94); } nav#top-right-nav #apps { color: #5f6368; border-radius: 50%; padding: 7px; position: relative; top: 6px; bottom: 5px; padding-top: 15px; padding-bottom: 2px; } nav#top-right-nav #apps:hover { background: rgb(235, 235, 235); } nav#top-right-nav #profile { background: rgba(0, 123, 255, 0.5); opacity: 0.85; border-radius: 50%; padding-top: 12px; padding-bottom: 12px; padding-left: 7px; padding-right: 7px; transition: all 0.4s; } nav#top-right-nav #profile img { width: 30px; position: relative; top: 9px; left: -1px; } nav#top-right-nav #profile:hover { background: rgba(13, 77, 145, 0.5); } #custumize-button { border: none; background: white; box-shadow: 0 3px 6px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .13); border-radius: 50px; bottom: 16px; cursor: pointer; display: flex; align-items: center; height: 32px; position: fixed; right: 15px; color: #1A73e8; padding-right: 15px; outline: none; line-height: 25px; transition: all 0.2s; } #custumize-button i.material-icons-round { font-size: 20px; padding-right: 5px; padding-left: 5px; } #custumize-button:hover { background: rgba(214, 239, 255, 0.4); } </style> </head> <body class='center no-select'> <nav id='top-right-nav'> <a href='#'>Gmail</a> <a href='#'>Images</a> <a href='#' id='apps'><i class='material-icons-round'>apps</i></a> <a href='#' id='profile'><img src='https://www.kasandbox.org/programming-images/avatars/robot_male_3.png'></a> </nav> <div class='logo' title='Google'><span id='g'>G</span><span id='o'>o</span><span id='o2'>o</span><span id='g2'>g</span><span id='l'>l</span><span id='e'>e</span></div> <div id='fakeboxP' class='center'> <input id='fakeBox' type='text' placeholder="Search Google or type a URL"> <button type='submit' class='search'><i class='material-icons-round'>search</i></button> <button class='mic'><i class='material-icons-round' onclick='alert("Mic is blocked on Khan Academy.");' title='Search by voice'>mic</i></button> </div> <div id=''> <button id='custumize-button' title='Custumize this page'><i class='material-icons-round'>brush</i>Customize</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <!-- CREDIT TO BlueBird@BirdWatcher03 FOR THE AMAZING SAVE FUNCTION --> <script> var save = function(){ html2canvas(document.body,{ allowTaint : false, useCORS: true, width:579, height:566, }) .then(function(canvas){ b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }); }; var handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { console.log("Saving..."); save(); }, 1000) } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', handleSave); window.parent.savers += 1; for (window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', handleSave) } </script> </html>
Folds	9,260
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIWMuqurCww
Votes	176
Spin-Offs	14
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	LeaferStudios
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739457266096
Updated	10 months ago, 1739457272636
Source Deleted	unknown