Flat UI Element

Developer
Patrick
Size
2,670 Kb
Views
12,144
  1. Flat UI Element Previews
  2. Flat UI Element HTML Codes
  3. Flat UI Element CSS Codes
  4. Flat UI Element JS Codes

How do I make an flat ui element?

I saw a flat UI element somewhere and wanted to recreate it with some quick social icon functionality. The JS is dirty and will be re-coded when I feel like it.. What is a flat ui element? How do you make a flat ui element? This script and codes were developed by Patrick on 21 November 2022, Monday.

Flat UI Element Previews
IQ Test

Flat UI Element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat UI Element</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="head"> <h1>Brian D. Dog</h1> Friend of Man </div> <div class="body"> <a href="#"><span class="entypo-twitter"></span></a><a href="#"><span class="entypo-facebook"></span></a><a href="#"><span class="entypo-dribbble"></span></a><a href="#"><span class="entypo-gplus"></span></a> </div> <div class="foot"> <a href="#" class="footItem1"><span class="entypo-heart"></span>102</a><a href="#" class="footItem2"><span class="entypo-user"></span>4,587</a><a href="#" class="footItem3"><span class="entypo-plus"></span>84,023</a> </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>

Flat UI Element - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 100px; font-family: helvetica, sans-serif; background: #eaedf1; font-size: 10px; }
a { text-decoration: none; -webkit-transition: all .4s; }
.container { width: 360px; margin: 0 auto; }
/* the HEAD stuffs */
.head { overflow: auto; padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size: 1.2em; color: #b9becd; } .head:before { content: ""; display: block; float: left; width: 80px; height: 80px; margin-right: 20px; background: url("http://img0.etsystatic.com/000/0/6525182/il_570xN.345773300.jpg") no-repeat; background-size: 80px; border-radius: 40px; } .head h1 { margin: 15px 0 5px; font-weight: 100; font-size: 2.2em; color: #5e6d81; }
/* the BODY stuffs */
.body { display: none; background: #323a45; color: #fff; }
.body a { display: inline-block; width: 25%; padding: 20px; border-right: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff; font-size: 2.5em} .body a:hover { background: #515761; } .body a:last-child { border-right: none; }
/* the FOOT stuffs */
.foot { /*height: 100px;*/ }
[class^="footItem"] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }
[class^="footItem"] span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; } .footItem1 { background: #14b9d6; border-radius: 0 0 0 5px; } .footItem1:hover { background: #5bcee2; } .footItem2 { background: #f27935; } .footItem2:hover { background: #f6a172; } .footItem3 { background: #1fbba6; border-radius: 0 0 5px 0; } .footItem3:hover { background: #63d0c1; }

Flat UI Element - Script Codes JS Codes

// adding functionality to a flat UI element i saw somewhere
// js is crusty and needs to be re-coded
$('.head').hover ( function(){ $('.body').stop().slideDown('fast'); }, function(){ $('.body').stop().slideUp('fast'); } );
$('.body').hover ( function(){ $(this).slideDown('fast').stop(); }, function(){ $(this).slideUp('fast'); } );
Flat UI Element - Script Codes
Flat UI Element - Script Codes
Home Page Home
Developer Patrick
Username hinducows
Uploaded November 21, 2022
Rating 4
Size 2,670 Kb
Views 12,144
Do you need developer help for Flat UI Element?

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!

Patrick (hinducows) Script Codes
Name
3D Transforms Flip
CSS Filters
Overlay Drop Description
Fixed Scrolling Backgrounds
Sloppy Panels
Arrow Navigation
Simple Button
Log In Modal
3D Transforms
JQuery CSS Transition Content Slide-In
Create amazing blog posts 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!