Codepen CSS Illustration
How do I make an codepen css illustration?
What is a codepen css illustration? How do you make a codepen css illustration? This script and codes were developed by Marius Balaj on 07 July 2022, Thursday.
Codepen CSS Illustration - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Codepen CSS Illustration</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="browser"> <ul class="head"> <li></li> <li></li> <li></li> </ul> <div class="window"> <div class="codepen"> <div class="header"> <span class="logo">▀▀▀▀▀▀</span> <button><span>▀</span> ▀▀▀</button> <i class="avatar">▀</i> </div> <div class="content"> <div class="pen-container"> <div class="pen-head"> <span>▀▀</span> ▀▀ ▀▀ ▀▀ ▀▀ <span>▀▀</span> </div> <ul class="pen"> <li><i class="thumb"></i> <div class="meta"> <div class="user"> <i class="avatar"></i> ▀▀ <small>▀</small> </div> <div class="stats"> ▀ ▀ ▀ </div> </div> </li> <li><i class="thumb"></i> <div class="meta"> <div class="user"> <i class="avatar"></i> ▀▀▀▀ </div> <div class="stats"> ▀ ▀ <small>▀</small> </div> </div> </li> <li><i class="thumb"></i> <div class="meta"> <div class="user"> <i class="avatar"></i> ▀▀▀▀ </div> <div class="stats"> ▀ ▀ ▀ </div> </div> </li> <li><i class="thumb"></i> <div class="meta"> <div class="user"> <i class="avatar"></i> ▀▀▀ <small>▀</small> </div> <div class="stats"> ▀ ▀ ▀ </div> </div> </li> <li><i class="thumb"></i> <div class="meta"> <div class="user"> <i class="avatar"></i> ▀▀ </div> <div class="stats"> ▀ ▀ <small>▀</small> </div> </div> </li> <li><i class="thumb"></i> <div class="meta"> <div class="user"> <i class="avatar"></i> ▀▀▀▀▀ </div> <div class="stats"> ▀ ▀ ▀ </div> </div> </li> <li><button>▀▀</button></li> </ul> </div> <ul class="sidebar"> <li>▀▀▀ <span></span> </li> <li>▀▀ ▀▀▀ <div class="activity"> <i class="avatar"></i> <span>▀</span> ▀▀▀▀▀ <span>▀▀</span> <small>▀▀</small> </div> <div class="activity"> <i class="avatar"></i> <span>▀▀</span> ▀▀ <span>▀▀▀▀</span> <small>▀▀</small> </div> <div class="activity"> <i class="avatar"></i> <span>▀</span> ▀▀▀▀ <span>▀▀▀</span> <small>▀▀</small> </div> </li> </ul> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Codepen CSS Illustration - Script Codes CSS Codes
body { color: #ffffff; background: #27AE60;
}
.browser { width: 500px; margin: 150px auto; border: 15px solid #34495e; background:#34495e; border-radius: 20px;
}
.head { float: left; background: #34495e; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 15px;
}
.head li { width: 20px; height: 20px; border-radius: 50%; float: left; background: #d35400; margin: 0 5px 15px 0;
}
.head li:nth-child(2) { background: #f39c12;
}
.head li:last-child { background: #2ecc71;
}
.window { box-sizing: border-box; -moz-box-sizing: border-box; padding: 15px; width: 100%; overflow: hidden; background: #ecf0f1; border-radius: 0 0 6px 6px;
}
.codepen { background: #333333;
}
.header { box-sizing: border-box; -moz-box-sizing: border-box; padding: 8px 10px; color: #fff; background: #111; height: 50px;
}
.logo { top:3px; position:relative; }
.pen li button, .header button { color: #ffffff; background: #4c4c4c; border: 0; height: 34px; line-height: 41px; padding: 0 10px; outline: 0;
}
.header button span { color: #76daff;
}
.header .avatar { height: 34px; display: block; width: 34px; line-height: 45px; text-align: center; background: #333; float: right;
}
.content { overflow: hidden; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; margin-top: 10px;
}
.pen-container { width: 70%; float: left; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 8px;
}
.pen-head { width: 100%; color: #76daff;
}
.pen-head span:first-child { color: #fff;
}
.pen-head span:last-child { color: #4c4c4c; float: right;
}
.pen li { margin: 0 4% 4% 0; float: left; width: 48%;
}
.pen li .avatar { width: 10px; height: 10px; display: inline-block; top: -5px; position: relative; background: #1abc9c;
}
.pen li .stats small { color: #c0392b;
}
.pen li:nth-child(even) { margin: 0 0 10px 0;
}
.pen li .thumb { display: block; width: 100%; height: 60px; background: #e74c3c;
}
.pen li:nth-child(2) .thumb { background: #3b9cdc;
}
.pen li:nth-child(2) .avatar { background: #bdc3c7;
}
.pen li:nth-child(3) .thumb { background: #f1c40f;
}
.pen li:nth-child(3) .avatar { background: #c0392b;
}
.pen li:nth-child(4) .thumb { background: #8e44ad;
}
.pen li:nth-child(4) .avatar { background: #d35400;
}
.pen li:nth-child(5) .thumb { background: #34495e;
}
.pen li:nth-child(5) .avatar { background: #bdc3c7;
}
.pen li:nth-child(6) .thumb { background: #2ecc71;
}
.pen li:nth-child(6) .avatar { background: #8e44ad;
}
.pen li .meta { overflow: hidden; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 10px 5px 0 5px; background: #151617;
}
.pen li .user { float: left; color: #62e0ff;
}
.pen li .user small { color: #d5b720;
}
.pen li .stats { line-height: 13px; font-size: 10px; float: right; color: #999;
}
.pen li:last-child { width: 100%; text-align: center;
}
.pen li:last-child button { padding: 0 20px;
}
.sidebar { width: 30%; float: right;
}
.sidebar li { margin: 0 0 10px; font-size: 10px; background: #151617; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px;
}
.sidebar li:first-child span { margin: 5px 0 0; display: block; width: 100%; height: 15px; background: #fff;
}
.sidebar li .activity { overflow: hidden; margin: 10px 0 0; color: #999;
}
.sidebar li .activity i { display: block; float: left; margin-right: 5px; width: 25px; height: 25px; background: #34495e;
}
.sidebar li .activity:nth-child(2) i { background: #ecf0f1;
}
.sidebar li .activity:nth-child(3) i { background: #16a085;
}
.sidebar li .activity span { color: #76daff;
}
Codepen CSS Illustration - Script Codes JS Codes
//Inspired by http://dribbble.com/monstercritic
Developer | Marius Balaj |
Username | mariusbalaj |
Uploaded | July 07, 2022 |
Rating | 4 |
Size | 2,818 Kb |
Views | 54,648 |
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!
Name | Size |
Social Buttons Slide | 3,249 Kb |
Apple TV poster | 2,957 Kb |
Metro UI animations | 3,146 Kb |
Flat iPhone with Next Post Animation | 3,283 Kb |
Codepen CSS Illustration | 2,818 Kb |
Social Buttons v2 | 10,293 Kb |
Login with flip 3d animation | 3,014 Kb |
Pixel art to CSS | 4,772 Kb |
Simple Parallax with jQuery | 2,277 Kb |
Adi.js | 3,555 Kb |
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!
Name | Username | Size |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Improved Page Flipping Effect | Usaphp | 5,201 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
RWD- Mostly Fluid Layout Pattern | Marcocastro | 2,312 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!