Dashboard Focal Tags

Developer
Adam Lowenthal
Size
2,981 Kb
Views
12,144
  1. Dashboard Focal Tags Previews
  2. Dashboard Focal Tags HTML Codes
  3. Dashboard Focal Tags CSS Codes

How do I make an dashboard focal tags?

What is a dashboard focal tags? How do you make a dashboard focal tags? This script and codes were developed by Adam Lowenthal on 12 October 2022, Wednesday.

Dashboard Focal Tags Previews
IQ Test

Dashboard Focal Tags - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dashboard Focal Tags</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="focal"> <div class="focal--tag web"> <a href="#"> <div class="focal--tag__icon"> <i class="fa fa-pencil-square-o"></i> </div> <div class="focal--tag__content"> <div class="title">Web Registration</div> <div class="value">127</div> </div> </a> </div> <div class="focal--tag hotbook"> <a href="#"> <div class="focal--tag__icon"> <i class="fa fa-heart"></i> </div> <div class="focal--tag__content"> <div class="title">Hotbook</div> <div class="value">262</div> </div> </a> </div> <div class="focal--tag systemTasks"> <a href="#"> <div class="focal--tag__icon"> <i class="fa fa-check-square-o"></i> </div> <div class="focal--tag__content"> <div class="title">System Tasks</div> <div class="value">1293</div> </div> </a> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>

Dashboard Focal Tags - Script Codes CSS Codes

body { padding: 60px;
}
.focal { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap;
}
.focal--tag { color: white; padding: 1em; margin: 1em 0;
}
.focal--tag a { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: white;
}
.focal--tag a:hover { text-decoration: none;
}
.focal--tag a:hover .focal--tag__icon { margin-left: .25em; -webkit-transition-duration: .25s; transition-duration: .25s;
}
.focal--tag a .focal--tag__icon { font-size: 72px; -webkit-transition-duration: .25s; transition-duration: .25s;
}
.focal--tag a .focal--tag__content { text-align: right;
}
.focal--tag a .focal--tag__content .title { text-transform: uppercase; font-weight: 100;
}
.focal--tag a .focal--tag__content .value { font-size: 56px; font-weight: 100;
}
.focal .web { background: #f0ad4e;
}
.focal .web:hover { background-color: #eea236;
}
.focal .hotbook { background: #d9534f;
}
.focal .hotbook:hover { background-color: #d43f3a;
}
.focal .systemTasks { background: #5bc0de;
}
.focal .systemTasks:hover { background-color: #46b8da;
}
@media (max-width: 992px) { .focal { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .focal--tag { margin: 0 1em; width: calc((100% / 3) - 2em); } .focal--tag a { -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .focal--tag a .focal--tag__icon { font-size: 36px; } .focal--tag a .focal--tag__content { text-align: center; } .focal--tag a .focal--tag__content .value { font-size: 36px; }
}
@media (max-width: 700px) { .focal { -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .focal--tag { width: 100%; margin: 1em 0; }
}
Dashboard Focal Tags - Script Codes
Dashboard Focal Tags - Script Codes
Home Page Home
Developer Adam Lowenthal
Username alowenthal
Uploaded October 12, 2022
Rating 3
Size 2,981 Kb
Views 12,144
Do you need developer help for Dashboard Focal Tags?

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!

Adam Lowenthal (alowenthal) Script Codes
Name
A Pen by Adam Lowenthal
Blog List -- BnC
RWP Notifications
Spotify Artist Page UI
Mobile First Menu
Agile Burndown Chart
Sticky Footer
Google Maps Directions Sidebar
Webster Hall Show Tickets
Month Shows
Create amazing love letters 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!