A Pen by Icebob

Developer
Icebob
Size
7,324 Kb
Views
52,624
  1. A Pen by Icebob Previews
  2. A Pen by Icebob HTML Codes
  3. A Pen by Icebob CSS Codes
  4. A Pen by Icebob JS Codes

How do I make an a pen by icebob?

What is a a pen by icebob? How do you make a a pen by icebob? This script and codes were developed by Icebob on 12 June 2022, Sunday.

A Pen by Icebob Previews
IQ Test

A Pen by Icebob - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Icebob</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav> <ul> <li class="active"><i class="fa fa-bar-chart"></i><span>Dashboard</span></li> <li><i class="fa fa-area-chart"></i><span>Traffic</span></li> <li><i class="fa fa-pie-chart"></i><span>Content</span></li> <li><i class="fa fa-user"></i><span>Users</span></li> <li><i class="fa fa-database"></i><span>Database</span></li> <li><i class="fa fa-book"></i><span>Logs</span></li> </ul>
</nav>
<article> <header> <div class="title">Dashboard</div> <div class="user">John Doe</div> <div class="sep"></div> <div class="options"><i class="fa fa-image"></i><i class="fa fa-gear"></i><i class="fa fa-plus"></i></div> </header> <div class="colLeft"> <section class="visits"> <header> <div class="title">Visits</div> <div class="functions"><i class="fa fa-bars"></i><i class="fa fa-close"></i></div> </header> <div class="chart"></div> </section> <section class="visitDuration"> <header> <div class="title">Average visit duration</div> <div class="functions"><i class="fa fa-bars"></i><i class="fa fa-close"></i></div> </header> <div class="chart"></div> </section> <section class="visitsByCountry"> <header> <div class="title">Visits by country</div> <div class="functions"><i class="fa fa-bars"></i><i class="fa fa-close"></i></div> </header> <div class="chart"></div> </section> </div> <div class="colRight"> <section class="browsers"> <header> <div class="title">Popularity by browsers</div> <div class="functions"><i class="fa fa-bars"></i><i class="fa fa-close"></i></div> </header> <div class="chart"></div> </section> <section class="manAndWoman"> <header> <div class="title">Average man and woman</div> <div class="functions"><i class="fa fa-bars"></i><i class="fa fa-close"></i></div> </header> <div class="measure"> <div class="left"><i class="fa fa-female"></i> <div class="value">41%</div> </div> <div class="right"><i class="fa fa-male"></i> <div class="value">59%</div> </div> </div> </section> <section class="visitsByTraffic"> <header> <div class="title">Visits by type of traffic</div> <div class="functions"><i class="fa fa-bars"></i><i class="fa fa-close"></i></div> </header> <div class="chart"></div> </section> </div>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://code.highcharts.com/highcharts.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Icebob - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Dosis:300|Lato:300,400,600,700|Roboto+Condensed:300,700|Open+Sans+Condensed:300,600|Open+Sans:400,300,600,700|Maven+Pro:400,700);
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css");
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html { background-color: Black;
}
body { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMCUiIGN5PSIwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc2N2E5ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdiNDk1NCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(top right, #767a9f, #7b4954); background-image: -webkit-radial-gradient(top right, #767a9f, #7b4954); background-image: radial-gradient(top right, #767a9f, #7b4954); color: #7E7A7B; font-family: "Open Sans"; font-size: 16px; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; overflow: hidden; width: 100%; height: 100%; position: absolute; padding: 0px; margin: 0px;
}
nav { position: absolute; top: 0; bottom: 0; width: 150px; left: 0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.7)), color-stop(100%, rgba(0, 0, 0, 0.4))); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
}
nav ul { padding: 0px; margin: 0px; list-style: none;
}
nav ul li { display: block; width: 100%; height: 150px; text-align: center; padding-top: 40px; position: relative; cursor: pointer; border: 0px; border-left: 1px solid transparent;
}
nav ul li i:before { display: block; font-size: 3.0rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
nav ul li span { display: block; margin-top: 5px; font-family: "Lato"; font-size: 0.9rem; font-weight: 400; text-transform: uppercase; text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
nav ul li.active, nav ul li:hover { color: #979495; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMSIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(center center, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background-image: -webkit-radial-gradient(center center, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background-image: radial-gradient(center center, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); border: 0px; border-left: 1px solid White; -webkit-border-image: -webkit-linear-gradient(transparent, white, transparent) 1 100%; -moz-border-image: -moz-linear-gradient(transparent, white, transparent) 1 100%; border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0)) 1 100%;
}
nav ul li.active:after, nav ul li:hover:after { content: '\f0da'; font-family: "FontAwesome"; color: rgba(255, 255, 255, 0.8); position: absolute; left: 0px; top: 60px;
}
article { position: absolute; left: 150px; top: 0; right: 0; bottom: 0; overflow: auto; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0ZTI3MjgiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNGMzMzM3IiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(top left, rgba(78, 39, 40, 0.5), rgba(76, 51, 55, 0.3)); background-image: -webkit-radial-gradient(top left, rgba(78, 39, 40, 0.5), rgba(76, 51, 55, 0.3)); background-image: radial-gradient(top left, rgba(78, 39, 40, 0.5), rgba(76, 51, 55, 0.3)); padding: 2.0rem;
}
article > header { display: block; width: 100%; color: #A8BCF7; font-size: 0.8rem; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.2))); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)); height: 50px; line-height: 50px; overflow: hidden; margin-bottom: 2.0rem;
}
article > header .title { float: left; font-size: 5.2rem; text-transform: uppercase; font-weight: 600; position: relative; top: -2px; color: #644654; cursor: default;
}
article > header .user { float: right; margin: 0px 20px; font-weight: 600; cursor: pointer;
}
article > header .user:after { content: "\f0d7"; font-family: FontAwesome; padding: 0px 10px;
}
article > header .user:hover { color: #d7e0fb;
}
article > header .sep { float: right; width: 0px; height: 25px; margin-top: 12.5px; border-right: 1px solid #7c80a3;
}
article > header .options { float: right; margin: 0px 20px;
}
article > header .options i { padding: 0px 8px; cursor: pointer;
}
article > header .options i:hover { color: #d7e0fb;
}
article > header:after { display: block; content: ''; clear: both; width: 0px;
}
article .colLeft { float: left; width: 60%; padding-right: 2.0rem;
}
article .colRight { float: right; width: 40%;
}
article:after { display: block; content: ''; clear: both; width: 0px;
}
article section { height: 200px; background-color: rgba(0, 0, 0, 0.2); margin-bottom: 2.0rem;
}
article section header { width: 100%; height: 30px; line-height: 30px; vertical-align: center; padding: 0px 4px; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); font-size: 0.6rem;
}
article section header .title { float: left; font-weight: 600; color: #e6e6e6; text-transform: uppercase; margin-left: 10px;
}
article section header .functions { float: right;
}
article section header .functions i { margin: 0px 5px; cursor: pointer; font-size: 0.8rem; font-weight: normal;
}
article section header:after { display: block; content: ''; clear: both; width: 0px;
}
article section .chart { width: 500px; height: 170px;
}
article section.manAndWoman { height: 130px;
}
article section .measure .left { float: left; width: 50%; line-height: 100px; border-right: 1px solid Black; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYTc2OCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmE3NjgiIHN0b3Atb3BhY2l0eT0iMC42Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 167, 104, 0)), color-stop(100%, rgba(255, 167, 104, 0.6))); background-image: -moz-linear-gradient(left, rgba(255, 167, 104, 0), rgba(255, 167, 104, 0.6)); background-image: -webkit-linear-gradient(left, rgba(255, 167, 104, 0), rgba(255, 167, 104, 0.6)); background-image: linear-gradient(to right, rgba(255, 167, 104, 0), rgba(255, 167, 104, 0.6));
}
article section .measure .left i { float: left; line-height: 100px; color: #FFA768; margin-left: 30px; font-size: 2.5rem;
}
article section .measure .left .value { float: right; color: rgba(0, 0, 0, 0.8); font-size: 2.0rem; font-weight: 800; margin-right: 20px;
}
article section .measure .right { float: right; width: 50%; line-height: 100px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjN2Y5ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVjN2Y5ZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #5c7f9f), color-stop(100%, rgba(92, 127, 159, 0))); background-image: -moz-linear-gradient(left, #5c7f9f, rgba(92, 127, 159, 0)); background-image: -webkit-linear-gradient(left, #5c7f9f, rgba(92, 127, 159, 0)); background-image: linear-gradient(to right, #5c7f9f, rgba(92, 127, 159, 0));
}
article section .measure .right i { float: right; line-height: 100px; color: #FFA768; margin-right: 30px; font-size: 2.5rem;
}
article section .measure .right .value { float: left; color: rgba(0, 0, 0, 0.8); font-size: 2.0rem; font-weight: 800; margin-left: 20px;
}

A Pen by Icebob - Script Codes JS Codes

$(function() { loadCharts();
});
$(window).resize(function() { loadCharts();
})
function loadCharts() { $(".chart").css("width", $(".colLeft section").width() + "px");
Highcharts.setOptions({ colors: ['#5C7F9F', '#FFA768']
});
$('section.visits .chart').highcharts({ chart: { animation: false, backgroundColor: "transparent" }, title: { text: '' }, xAxis: { lineColor: '#684b5a', gridLineColor: '#684b5a', tickColor: '#684b5a', gridLineWidth: 1, labels: { style: {color: '#777'} }, categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { lineColor: '#684b5a', gridLineColor: '#684b5a', tickInterval: 1000, labels: { style: {color: '#777'} }, title: { text: '' } }, legend: { enabled: false }, credits: { enabled: false }, plotOptions: { line: { animation: false, marker: { enabled: true, symbol: "circle" } } }, series: [{ data: [3000, 4000, 1800, 200, 3500, 1800, 1400, 2300, 2000, 2500, 3800, 2500] }, { data: [2500, 1100, 2500, 3000, 2800, 4200, 3100, 1700, 2900, 3100, 1000, 1900] }]
});
}
A Pen by Icebob - Script Codes
A Pen by Icebob - Script Codes
Home Page Home
Developer Icebob
Username icebob
Uploaded June 12, 2022
Rating 3
Size 7,324 Kb
Views 52,624
Do you need developer help for A Pen by Icebob?

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!

Icebob (icebob) Script Codes
Name
Dashboard info panels with animation
Radio player
Number change effects
User administration page
Login page with blur background
Full responsive keypad
Loading animation with css
Dashboard page
Home portal app
Memory card game with VueJS
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!