A Pen by Jon Milner

Developer
Jon Milner
Size
3,675 Kb
Views
10,120
  1. A Pen by Jon Milner Previews
  2. A Pen by Jon Milner HTML Codes
  3. A Pen by Jon Milner CSS Codes
  4. A Pen by Jon Milner JS Codes

How do I make an a pen by jon milner?

What is a a pen by jon milner? How do you make a a pen by jon milner? This script and codes were developed by Jon Milner on 09 December 2022, Friday.

A Pen by Jon Milner Previews
IQ Test

A Pen by Jon Milner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Jon Milner</title> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="tab-demo"> <div class="tabs"> <ul class="action-tabs"> <li class="tab"><i class="fa fa-terminal"></i></li> <li class="tab"><i class="fa fa-gear"></i></li> </ul> <ul class="device-tabs"> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> <li class="tab"> <div class="device__name">Device Name</div> <div class="device__ip">192.0.0.0</div> <div class="device__close"><i class="fa fa-close"></i></div> </li> </ul> </div> <div class="console">Hello World</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Jon Milner - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: #ecf0f1; font-family: 'Helvetica Neue', sans-serif; font-weight: 200; text-align: center;
}
.tab-demo { max-width: 960px; margin: 80px auto;
}
h1 { color: #d4d8d9; font-size: 80px;
}
.tabs { display: flex;
}
.tabs ul { display: block; flex-shrink: 0; margin: 0 8px 0 0; padding: 0; font-size: 0; list-style: none; cursor: pointer; text-align: left; overflow: auto; white-space: nowrap;
}
.tabs ul:last-child { margin-right: 0;
}
.tabs ul.device-tabs { flex-shrink: inherit;
}
.tab { position: relative; display: inline-block; margin-right: 8px; padding: 10px 50px 10px 10px; background: #e7ebec; box-shadow: 0 0 1px 0 #bdc0c1 inset; color: #767879; font-size: 16px; transition: all 0.05s ease; overflow: hidden;
}
.tab:last-child { margin-right: 0;
}
.tab:hover { background: #f6f8f8;
}
.action-tabs .tab { padding: 14px 14px 12px 14px; font-size: 26px; line-height: 1;
}
.device-tabs .tab:before { position: absolute; display: block; content: ''; width: 100%; height: 4px; top: 0; left: 0; background: #00bb00;
}
.tab.active { background: #fff;
}
.tab .device__name { font-size: 14px;
}
.tab .device__ip { color: #bdc0c1; font-size: 12px;
}
.tab .device__close { position: absolute; width: 18px; height: 18px; right: 10px; top: 50%; margin-top: -9px; border-radius: 50%; border: 1px solid transparent; color: #bdc0c1; font-size: 15px; line-height: 15px; text-align: center; transition: all 0.05s ease; z-index: 1;
}
.tab .device__close:hover { background: #ec7063; box-shadow: 0 0 0 1px #b93d30; color: #fff;
}
.console { width: 100%; height: 300px; padding: 20px; background: #333; color: #fff; font-family: monospace; text-align: left;
}

A Pen by Jon Milner - Script Codes JS Codes

$('.tab').click(function() { $('.tab').removeClass('active'); $(this).addClass('active');
})
A Pen by Jon Milner - Script Codes
A Pen by Jon Milner - Script Codes
Home Page Home
Developer Jon Milner
Username jonmilner
Uploaded December 09, 2022
Rating 3
Size 3,675 Kb
Views 10,120
Do you need developer help for A Pen by Jon Milner?

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!

Jon Milner (jonmilner) Script Codes
Name
Playing Around with AMCSS
Atom Loading Icon
Simple CSS Radial Progress Bar
Kitty Blocks
Animated Hamburger Menu Icon
Animated Multi-Step Progress Bar
Responsive Card Layout using CSS Columns
Responsive Hexagon Layout using Sass Mixin
Chomp Chomp
Simple Accordion Menu
Create amazing captions 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!