Codepen Inception

Developer
Daniesy
Size
4,495 Kb
Views
4,048
  1. Codepen Inception Previews
  2. Codepen Inception HTML Codes
  3. Codepen Inception CSS Codes
  4. Codepen Inception JS Codes

How do I make an codepen inception?

A client version of codepen. It still has some quirks but it gets the job done. Try it out :). What is a codepen inception? How do you make a codepen inception? This script and codes were developed by Daniesy on 10 January 2023, Tuesday.

Codepen Inception Previews
IQ Test

Codepen Inception - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Codepen Inception</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
html, body { height: 100%; font-family: "Lato";
}
.animate { transition: .3s linear; backface-visibility: none;
}
.wrapper { background: black; height: 50%; display: flex; overflow: hidden;
}
.wrapper > section { flex: 1; color: white; height: 100%; display: flex; max-width: 100%; flex-direction: column; position: relative;
}
.wrapper > section .title:after { content: " Content";
}
.wrapper > section .toggle { float: right; cursor: pointer;
}
.wrapper > section .toggle:hover { color: white;
}
.wrapper > section .content { padding: 20px 20px; height: 100%; font-size: .9em; position: relative; overflow-y: auto; opacity: .9;
}
.wrapper > section .content:focus { opacity: 1; outline: none;
}
.wrapper > section .header { color: #FFF; width: 100%; display: block; padding: 10px 10px; position: relative; z-index: 2;
}
.wrapper .html .content, .wrapper .html .header { background: #4F8EDA;
}
.wrapper .css .content, .wrapper .css .header { background: #737AD3;
}
.wrapper .js .content, .wrapper .js .header { background: #B37BD7;
}
.preview { display: block; height: 50%; background: #FFF; padding: 20px 20px 20px; border: 10px solid #343436;
}
.collapsed { max-width: 35px !important;
}
.collapsed .header .title { visibility: hidden; opacity: 0;
}
.collapsed .content { opacity: 0;
}
.collapsed .content .header .title:after { content: "";
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet'>
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class='wrapper'> <section class='html animate'> <div class='header'> <span class='title animate'> HTML </span> <span class='toggle fa fa-eye animate'></span> </div> <div class='content animate' contenteditable='true'></div> </section> <section class='css animate'> <div class='header'> <span class='title animate'> CSS </span> <span class='toggle fa fa-eye animate'></span> </div> <div class='content animate' contenteditable='true'></div> </section> <section class='js animate'> <div class='header'> <span class='title animate'> JS </span> <span class='toggle fa fa-eye animate'></span> </div> <div class='content animate' contenteditable='true'></div> </section>
</div>
<section class='preview'></section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Codepen Inception - Script Codes CSS Codes

* { box-sizing: border-box;
}
html, body { height: 100%; font-family: "Lato";
}
.animate { transition: .3s linear; backface-visibility: none;
}
.wrapper { background: black; height: 50%; display: flex; overflow: hidden;
}
.wrapper > section { flex: 1; color: white; height: 100%; display: flex; max-width: 100%; flex-direction: column; position: relative;
}
.wrapper > section .title:after { content: " Content";
}
.wrapper > section .toggle { float: right; cursor: pointer;
}
.wrapper > section .toggle:hover { color: white;
}
.wrapper > section .content { padding: 20px 20px; height: 100%; font-size: .9em; position: relative; overflow-y: auto; opacity: .9;
}
.wrapper > section .content:focus { opacity: 1; outline: none;
}
.wrapper > section .header { color: #FFF; width: 100%; display: block; padding: 10px 10px; position: relative; z-index: 2;
}
.wrapper .html .content, .wrapper .html .header { background: #4F8EDA;
}
.wrapper .css .content, .wrapper .css .header { background: #737AD3;
}
.wrapper .js .content, .wrapper .js .header { background: #B37BD7;
}
.preview { display: block; height: 50%; background: #FFF; padding: 20px 20px 20px; border: 10px solid #343436;
}
.collapsed { max-width: 35px !important;
}
.collapsed .header .title { visibility: hidden; opacity: 0;
}
.collapsed .content { opacity: 0;
}
.collapsed .content .header .title:after { content: "";
}

Codepen Inception - Script Codes JS Codes

$(function(){ $(".toggle").on("click", function(){ var $parent = $(this).parents("section"); $parent.toggleClass("collapsed"); if($parent.hasClass("collapsed")){ $(this).removeClass("fa-eye").addClass("fa-eye-slash"); }else{ $(this).addClass("fa-eye").removeClass("fa-eye-slash"); } }) $(".html .content").on("keyup", updateHTML); $(".css .content").on("keyup", updateCSS); $(".js .content").on("keyup", updateJS); function refreshPreview(e){ updateHTML(e); updateCSS(e); updateJS(e); } function updateHTML(e){ console.log($(e.target).text()); $(".preview").html($(e.target).text()); $(".css .content").trigger("keyup"); $(".js .content").trigger("keyup"); } function updateCSS(e){ var style = $(e.target).text(), regex = /([^{]+){([^}]+)}/gm, matches, output = []; style = cleanString(style); while (matches = regex.exec(style)) { console.log(".preview "+matches[1]); $(".preview "+matches[1]).attr("style", matches[2]); } } function updateJS(e){ eval($(e.target).text()); } function cleanString(text){ return text.replace(/\s/g, ' '); }
})
Codepen Inception - Script Codes
Codepen Inception - Script Codes
Home Page Home
Developer Daniesy
Username daniesy
Uploaded January 10, 2023
Rating 3
Size 4,495 Kb
Views 4,048
Do you need developer help for Codepen Inception?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniesy (daniesy) Script Codes
Name
Full CSS3 Dropdown Menu
Beautiful Flat Text Slider
Cookie box
Certificate Badges
MSlider 3D
Title badges
Badge certified
CSS Switches
OsX Mavericks
Flat css-only countdown and countup
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!