Web widget

Developer
Nika Zawila
Size
3,371 Kb
Views
12,144
  1. Web widget Previews
  2. Web widget HTML Codes
  3. Web widget CSS Codes

How do I make an web widget?

Another widget for your dashboard.Inspired by http://drbl.in/kidZ by Frantisek Kusovsky (http://behance.net/blackyeti). What is a web widget? How do you make a web widget? This script and codes were developed by Nika Zawila on 15 October 2022, Saturday.

Web widget Previews
IQ Test

Web widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Web widget</title> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <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="widget"> <div class="widget__header"> <h2 class="widget__header-title"> DNTM <span class="widget__header-author"> by Abine </span> </h2> <div class="nav"> <a href="#" class="nav__item"> <i class="fa fa-cubes"></i> </a> <a href="#" class="nav__item"> <i class="fa fa-check-circle-o"></i> </a> <a href="#" class="nav__item"> <i class="fa fa-gear"></i> </a> </div> </div> <div class="widget__body"> <div class="flash"> <strong>All 6</strong> companies blocked now </div> <div class="accordion"> <div class="accordion__item "> <div class="accordion__header"> <i class="fa fa-minus accordion__state-icon"></i> <h2>Social Networks</h2> </div> <div class="accordion__body"> <div class="accordion__body-item"> <i class=" fa fa-check-square accordion__checked-icon"></i> Facebook </div> <div class="accordion__body-item"> <i class=" fa fa-check-square accordion__checked-icon"></i> Twitter </div> <div class="accordion__body-item"> <i class=" fa fa-check-square accordion__checked-icon"></i> Google+ </div> </div> </div> <div class="accordion__item"> <div class="accordion__header"> <i class="fa fa-plus accordion__state-icon"></i> <h2>Data Companies</h2> </div> </div> <div class="accordion__item"> <div class="accordion__header"> <i class="fa fa-plus accordion__state-icon"></i> <h2>Email</h2> </div> </div> </div> </div>
</div>
</div>
</body>
</html>

Web widget - Script Codes CSS Codes

html, body { min-height: 100%;
}
body { background: linear-gradient(#56899c, #28596f); font: 16px 'Helvetica Neue', Helvetica, sans-serif; color: #293B48; -webkit-font-smoothing: antialiased;
}
strong { font-weight: bold;
}
.widget { margin: 40px auto; width: 330px; position: relative;
}
.widget__header { background: #20303A; color: #485D6B; padding: 20px 120px 20px 20px; border-radius: 3px 3px 0 0;
}
.widget__header:after { content: ''; display: block; position: absolute; top: -8px; right: 20px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #20303A;
}
.widget__header-title { font-weight: bold; font-size: 14px;
}
.widget__header-author { font-style: italic; font-weight: normal;
}
.widget__body { background: #fff; padding-bottom: 20px; border-radius: 0 0 4px 4px;
}
.nav { position: absolute; top: 20px; right: 20px;
}
.nav__item { display: inline-block; margin-left: 8px; color: #485D6B;
}
.nav__item:hover { color: #5d7789;
}
.flash { background: #5CBA3C; color: white; padding: 15px 20px; font-size: 14px;
}
.accordion__header { text-transform: uppercase; font-size: 10px; font-weight: bold; padding: 12px 20px; background: #F7FBFD; color: #A1B2BF; border-bottom: 1px solid #ECF2F6;
}
.accordion__body-item { margin: 0 60px 0 20px; padding: 20px 0; border-bottom: 1px dotted #D0DAE0; font-size: 14px; position: relative;
}
.accordion__body-item:last-child { border-bottom: none;
}
.accordion__state-icon { float: right; padding: 2px; color: #A1B2BF; font-size: 14px;
}
.accordion__checked-icon { color: #5CBA3C; font-size: 22px; position: absolute; top: 16px; right: -42px;
}
Web widget - Script Codes
Web widget - Script Codes
Home Page Home
Developer Nika Zawila
Username nikazawila
Uploaded October 15, 2022
Rating 3.5
Size 3,371 Kb
Views 12,144
Do you need developer help for Web widget?

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!

Nika Zawila (nikazawila) Script Codes
Name
Menu
Buttons for autumn
Music player
Product backlog module
Mr. Rooster in CSS
Player
Dashboard Stats Component
Weather widget
Modal component with brick menu
Cashflow app module
Create amazing sales emails 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!