Flat Icons CSS - Dribbble Remake

Developer
Tyler Fry
Size
8,259 Kb
Views
30,360
  1. Flat Icons CSS - Dribbble Remake Previews
  2. Flat Icons CSS - Dribbble Remake HTML Codes
  3. Flat Icons CSS - Dribbble Remake CSS Codes

How do I make an flat icons css - dribbble remake?

Found these awesome icons on Dribbble and took the challenge to css them up. Check out the original design here. . What is a flat icons css - dribbble remake? How do you make a flat icons css - dribbble remake? This script and codes were developed by Tyler Fry on 16 July 2022, Saturday.

Flat Icons CSS - Dribbble Remake Previews
IQ Test

Flat Icons CSS - Dribbble Remake - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Icons CSS - Dribbble Remake</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Titillium+Web:900);
html { background: #B9CAD2;
}
body { padding-top: 50px;
}
a { text-decoration: none; color: #333;
}
img { max-width: 100%; height: auto; vertical-align: sub;
}
.box { margin: 0 auto; max-width: 600px; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15); text-align: center;
}
.icon { width: 80px; height: 80px; display: inline-block; border-radius: 50%; margin: 20px;
}
.messages { background: #4BCD6C; position: relative; transition: background-color .3s ease;
}
.messages:before { content: ''; position: absolute; bottom: 6px; left: 17px; width: 0; height: 0; border: 6px solid transparent; border-top: 15px solid rgba(0, 0, 0, 0.2); transform: rotate(15deg);
}
.messages:hover { background: #37c75c;
}
.messages .bubble { position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -25px; width: 50px; height: 40px; background: #fff; display: block; border-radius: 50%; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.messages .bubble:after { content: ''; position: absolute; bottom: -9px; left: 3px; width: 0; height: 0; border: 6px solid transparent; border-top: 15px solid #fff; transform: rotate(15deg);
}
.calender { background: #53C0FF; position: relative; transition: background-color .3s ease;
}
.calender:hover { background: #3ab7ff;
}
.calender .day { position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -25px; width: 50px; height: 30px; background: #fff; display: block; border-radius: 5px; border-top: 10px solid #EB4D4D; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); text-align: center; line-height: 30px; font-family: 'Titillium Web', sans-serif; font-weight: 900; font-size: 20px;
}
.calender .day:before { content: attr(data-prev); position: absolute; left: 0; color: #ddd;
}
.calender .day:after { content: attr(data-next); position: absolute; right: 0; color: #ddd;
}
.photos { background: #FE6FB9; position: relative; transition: background-color .3s ease;
}
.photos:hover { background: #fe56ad;
}
.photos:before { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; margin: -20px 0 0 -25px; width: 40px; height: 30px; background: #fff; display: block; border-radius: 5px; border: 5px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); transform: rotate(15deg); opacity: .6;
}
.photos:after { content: ''; position: absolute; z-index: 1; top: 50%; left: 50%; margin: -20px 0 0 -25px; width: 40px; height: 30px; background: #fff; display: block; border-radius: 5px; border: 5px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); transform: rotate(35deg); opacity: .2;
}
.photos .photo { position: absolute; z-index: 3; top: 50%; left: 50%; margin: -20px 0 0 -25px; width: 40px; background: #fff; display: block; border-radius: 5px; border: 5px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.camera { background: #F9C330; position: relative; transition: background-color .3s ease;
}
.camera:hover { background: #f8bc17;
}
.camera .cutaway { position: absolute; z-index: 3; top: 0; right: 0; width: 25px; height: 25px; background: #fff; display: block; border-radius: 50%; box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.1), -2px 2px 15px rgba(255, 255, 255, 0.9), -4px 4px 25px rgba(255, 255, 255, 0.9);
}
.camera .lens { position: absolute; z-index: 3; top: 50%; left: 50%; margin: -19px 0 0 -19px; width: 26px; height: 26px; display: block; background: #fff; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.camera .lens .inner { width: 26px; height: 26px; display: block; background: #606060; border-radius: 50%; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8);
}
.camera .lens .center { position: relative; width: 16px; height: 16px; display: block; background: #333; border-radius: 50%; top: 5px; left: 5px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8);
}
.camera .lens .center:before { content: ''; position: absolute; left: -5px; top: -4px; transform: rotate(45deg); border: 12px solid transparent; border-left: 12px solid rgba(255, 255, 255, 0.2);
}
.camera .lens .center:after { content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #333; position: absolute; right: 5px; top: 5px;
}
.video { background: #495E6D; position: relative; transition: background-color .3s ease; overflow: hidden;
}
.video:hover { background: #3f515e; overflow: hidden;
}
.video .film { width: 38px; height: 80px; padding: 0 2px; position: relative; left: 16px; background: #D6E4EE; border-right: 4px solid #2C3831; border-left: 4px solid #2C3831; display: block;
}
.video .border { width: 0; height: 80px; border-left: 2px dashed #4F687A; display: block; float: left;
}
.video .strip { width: 29px; height: 45px; margin: -22px 2px 0; background: #8193A0; display: block; float: left; position: relative; top: 50%; border-radius: 5px; box-shadow: inset 0 -3px 0 #4F687A;
}
.video .strip:before { content: ''; width: 29px; height: 45px; background: #8193A0; display: block; float: left; position: absolute; top: -50px; right: 0; border-radius: 5px; box-shadow: inset 0 -3px 0 #4F687A;
}
.video .strip:after { content: ''; width: 29px; height: 45px; background: #8193A0; display: block; float: left; position: absolute; bottom: -50px; right: 0; border-radius: 5px; box-shadow: inset 0 -3px 0 #4F687A;
}
.map { background: #FF8048; position: relative; transition: background-color .3s ease;
}
.map:hover { background: #ff6e2f;
}
.map:before { content: ''; width: 0; height: 0; border: 25px solid transparent; border-left: 15px solid #FFE7D8; position: absolute; bottom: 12px; left: 50%; margin: 0 0 0; z-index: 1; /* -webkit-filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.2)); */
}
.map:after { content: ''; width: 0; height: 0; border: 25px solid transparent; border-right: 15px solid #fff; position: absolute; bottom: 12px; left: 50%; margin: 0 0 0 -40px; z-index: 1; /* -webkit-filter: drop-shadow(-1px 2px 0 rgba(0,0,0,0.2)); */
}
.map .pointer { content: ''; position: absolute; width: 40px; height: 40px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZTdkOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(50%, #ffffff), color-stop(50%, #ffe7d8)); background-image: -moz-linear-gradient(left, #ffffff 50%, #ffe7d8 50%); background-image: -webkit-linear-gradient(left, #ffffff 50%, #ffe7d8 50%); background-image: linear-gradient(to right, #ffffff 50%, #ffe7d8 50%); top: 10px; left: 50%; margin: 0 0 0 -20px; border-radius: 50%; /* box-shadow: 0 1px 0 1px rgba(0,0,0,0.2); */
}
.map .pointer:before { content: ''; position: relative; width: 20px; height: 20px; display: block; background: #FF8048; border-radius: 50%; z-index: 3; top: 10px; left: 50%; margin: 0 0 0 -10px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
.weather { background: #269DF1; position: relative; transition: background-color .3s ease;
}
.weather:hover { background: #0f92ee;
}
.weather .sun { content: ''; position: absolute; width: 30px; height: 30px; /* background: #fff; */ top: 50%; left: 50%; margin: -25px 0 0 -25px; border-radius: 50%; -webkit-filter: drop-shadow(0 3px 0 #0F62E9); border: 9px dotted #fff;
}
.weather .sun:before { content: ''; position: relative; border-radius: 50%; width: 23px; height: 23px; display: block; background: #fff; top: 3px; left: 3px;
}
.weather .cloud { display: block; width: 35px; height: 15px; background: #C6E1F0; border-radius: 10px; -webkit-filter: drop-shadow(0 3px 0 #0F62E9); position: absolute; bottom: 23px; right: 10px;
}
.weather .cloud:before { content: ''; display: block; width: 15px; height: 15px; position: absolute; background: #C6E1F0; border-radius: 50%; left: 5px; top: -10px;
}
.weather .cloud:after { content: ''; display: block; width: 15px; height: 15px; position: absolute; background: #C6E1F0; border-radius: 50%; left: 15px; top: -5px;
}
.clock { background: #EB4D4D; position: relative; transition: background-color .3s ease;
}
.clock:hover { background: #e83636;
}
.clock .rim { border: 5px solid #fff; width: 60px; height: 60px; display: block; border-radius: 50%; position: relative; top: 5px; left: 5px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 3px 0 rgba(0, 0, 0, 0.15);
}
.clock .center { position: absolute; z-index: 3; top: 50%; left: 50%; margin: -4px 0 0 -4px; width: 8px; height: 8px; background: #fff; display: block; border-radius: 50%; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.clock .center:before { content: ''; position: relative; width: 5px; height: 18px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); display: block; transform: rotate(45deg); top: -17px; left: 12px;
}
.clock .center:after { content: ''; position: relative; width: 5px; height: 10px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); display: block; transform: rotate(-45deg); top: -10px; left: 9px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="box"> <a href="#" class="icon messages"> <span class="bubble"></span> </a> <a href="#" class="icon calender"> <span class="day" data-prev="3" data-next="2">24</span> </a> <a href="#" class="icon photos"> <span class="photo"><img src="http://s.cdpn.io/6035/photo-icon.jpg" /></span> </a> <a href="#" class="icon camera"> <span class="cutaway"></span> <span class="lens"> <span class="inner"> <span class="center"></span> </span> </span> </a> <a href="#" class="icon video"> <span class="film"> <span class="border"></span> <span class="strip"></span> <span class="border"></span> </span> </a> <a href="#" class="icon map"> <span class="pointer"></span> </a> <a href="#" class="icon weather"> <span class="sun"></span> <span class="cloud"></span> </a> <a href="#" class="icon clock"> <span class="rim"> <span class="center"></span> </span> </a>
</div>
</body>
</html>

Flat Icons CSS - Dribbble Remake - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900);
html { background: #B9CAD2;
}
body { padding-top: 50px;
}
a { text-decoration: none; color: #333;
}
img { max-width: 100%; height: auto; vertical-align: sub;
}
.box { margin: 0 auto; max-width: 600px; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15); text-align: center;
}
.icon { width: 80px; height: 80px; display: inline-block; border-radius: 50%; margin: 20px;
}
.messages { background: #4BCD6C; position: relative; transition: background-color .3s ease;
}
.messages:before { content: ''; position: absolute; bottom: 6px; left: 17px; width: 0; height: 0; border: 6px solid transparent; border-top: 15px solid rgba(0, 0, 0, 0.2); transform: rotate(15deg);
}
.messages:hover { background: #37c75c;
}
.messages .bubble { position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -25px; width: 50px; height: 40px; background: #fff; display: block; border-radius: 50%; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.messages .bubble:after { content: ''; position: absolute; bottom: -9px; left: 3px; width: 0; height: 0; border: 6px solid transparent; border-top: 15px solid #fff; transform: rotate(15deg);
}
.calender { background: #53C0FF; position: relative; transition: background-color .3s ease;
}
.calender:hover { background: #3ab7ff;
}
.calender .day { position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -25px; width: 50px; height: 30px; background: #fff; display: block; border-radius: 5px; border-top: 10px solid #EB4D4D; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); text-align: center; line-height: 30px; font-family: 'Titillium Web', sans-serif; font-weight: 900; font-size: 20px;
}
.calender .day:before { content: attr(data-prev); position: absolute; left: 0; color: #ddd;
}
.calender .day:after { content: attr(data-next); position: absolute; right: 0; color: #ddd;
}
.photos { background: #FE6FB9; position: relative; transition: background-color .3s ease;
}
.photos:hover { background: #fe56ad;
}
.photos:before { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; margin: -20px 0 0 -25px; width: 40px; height: 30px; background: #fff; display: block; border-radius: 5px; border: 5px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); transform: rotate(15deg); opacity: .6;
}
.photos:after { content: ''; position: absolute; z-index: 1; top: 50%; left: 50%; margin: -20px 0 0 -25px; width: 40px; height: 30px; background: #fff; display: block; border-radius: 5px; border: 5px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); transform: rotate(35deg); opacity: .2;
}
.photos .photo { position: absolute; z-index: 3; top: 50%; left: 50%; margin: -20px 0 0 -25px; width: 40px; background: #fff; display: block; border-radius: 5px; border: 5px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.camera { background: #F9C330; position: relative; transition: background-color .3s ease;
}
.camera:hover { background: #f8bc17;
}
.camera .cutaway { position: absolute; z-index: 3; top: 0; right: 0; width: 25px; height: 25px; background: #fff; display: block; border-radius: 50%; box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.1), -2px 2px 15px rgba(255, 255, 255, 0.9), -4px 4px 25px rgba(255, 255, 255, 0.9);
}
.camera .lens { position: absolute; z-index: 3; top: 50%; left: 50%; margin: -19px 0 0 -19px; width: 26px; height: 26px; display: block; background: #fff; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.camera .lens .inner { width: 26px; height: 26px; display: block; background: #606060; border-radius: 50%; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8);
}
.camera .lens .center { position: relative; width: 16px; height: 16px; display: block; background: #333; border-radius: 50%; top: 5px; left: 5px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8);
}
.camera .lens .center:before { content: ''; position: absolute; left: -5px; top: -4px; transform: rotate(45deg); border: 12px solid transparent; border-left: 12px solid rgba(255, 255, 255, 0.2);
}
.camera .lens .center:after { content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #333; position: absolute; right: 5px; top: 5px;
}
.video { background: #495E6D; position: relative; transition: background-color .3s ease; overflow: hidden;
}
.video:hover { background: #3f515e; overflow: hidden;
}
.video .film { width: 38px; height: 80px; padding: 0 2px; position: relative; left: 16px; background: #D6E4EE; border-right: 4px solid #2C3831; border-left: 4px solid #2C3831; display: block;
}
.video .border { width: 0; height: 80px; border-left: 2px dashed #4F687A; display: block; float: left;
}
.video .strip { width: 29px; height: 45px; margin: -22px 2px 0; background: #8193A0; display: block; float: left; position: relative; top: 50%; border-radius: 5px; box-shadow: inset 0 -3px 0 #4F687A;
}
.video .strip:before { content: ''; width: 29px; height: 45px; background: #8193A0; display: block; float: left; position: absolute; top: -50px; right: 0; border-radius: 5px; box-shadow: inset 0 -3px 0 #4F687A;
}
.video .strip:after { content: ''; width: 29px; height: 45px; background: #8193A0; display: block; float: left; position: absolute; bottom: -50px; right: 0; border-radius: 5px; box-shadow: inset 0 -3px 0 #4F687A;
}
.map { background: #FF8048; position: relative; transition: background-color .3s ease;
}
.map:hover { background: #ff6e2f;
}
.map:before { content: ''; width: 0; height: 0; border: 25px solid transparent; border-left: 15px solid #FFE7D8; position: absolute; bottom: 12px; left: 50%; margin: 0 0 0; z-index: 1; /* -webkit-filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.2)); */
}
.map:after { content: ''; width: 0; height: 0; border: 25px solid transparent; border-right: 15px solid #fff; position: absolute; bottom: 12px; left: 50%; margin: 0 0 0 -40px; z-index: 1; /* -webkit-filter: drop-shadow(-1px 2px 0 rgba(0,0,0,0.2)); */
}
.map .pointer { content: ''; position: absolute; width: 40px; height: 40px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZTdkOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(50%, #ffffff), color-stop(50%, #ffe7d8)); background-image: -moz-linear-gradient(left, #ffffff 50%, #ffe7d8 50%); background-image: -webkit-linear-gradient(left, #ffffff 50%, #ffe7d8 50%); background-image: linear-gradient(to right, #ffffff 50%, #ffe7d8 50%); top: 10px; left: 50%; margin: 0 0 0 -20px; border-radius: 50%; /* box-shadow: 0 1px 0 1px rgba(0,0,0,0.2); */
}
.map .pointer:before { content: ''; position: relative; width: 20px; height: 20px; display: block; background: #FF8048; border-radius: 50%; z-index: 3; top: 10px; left: 50%; margin: 0 0 0 -10px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
.weather { background: #269DF1; position: relative; transition: background-color .3s ease;
}
.weather:hover { background: #0f92ee;
}
.weather .sun { content: ''; position: absolute; width: 30px; height: 30px; /* background: #fff; */ top: 50%; left: 50%; margin: -25px 0 0 -25px; border-radius: 50%; -webkit-filter: drop-shadow(0 3px 0 #0F62E9); border: 9px dotted #fff;
}
.weather .sun:before { content: ''; position: relative; border-radius: 50%; width: 23px; height: 23px; display: block; background: #fff; top: 3px; left: 3px;
}
.weather .cloud { display: block; width: 35px; height: 15px; background: #C6E1F0; border-radius: 10px; -webkit-filter: drop-shadow(0 3px 0 #0F62E9); position: absolute; bottom: 23px; right: 10px;
}
.weather .cloud:before { content: ''; display: block; width: 15px; height: 15px; position: absolute; background: #C6E1F0; border-radius: 50%; left: 5px; top: -10px;
}
.weather .cloud:after { content: ''; display: block; width: 15px; height: 15px; position: absolute; background: #C6E1F0; border-radius: 50%; left: 15px; top: -5px;
}
.clock { background: #EB4D4D; position: relative; transition: background-color .3s ease;
}
.clock:hover { background: #e83636;
}
.clock .rim { border: 5px solid #fff; width: 60px; height: 60px; display: block; border-radius: 50%; position: relative; top: 5px; left: 5px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 3px 0 rgba(0, 0, 0, 0.15);
}
.clock .center { position: absolute; z-index: 3; top: 50%; left: 50%; margin: -4px 0 0 -4px; width: 8px; height: 8px; background: #fff; display: block; border-radius: 50%; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.clock .center:before { content: ''; position: relative; width: 5px; height: 18px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); display: block; transform: rotate(45deg); top: -17px; left: 12px;
}
.clock .center:after { content: ''; position: relative; width: 5px; height: 10px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); display: block; transform: rotate(-45deg); top: -10px; left: 9px;
}
Flat Icons CSS - Dribbble Remake - Script Codes
Flat Icons CSS - Dribbble Remake - Script Codes
Home Page Home
Developer Tyler Fry
Username frytyler
Uploaded July 16, 2022
Rating 4.5
Size 8,259 Kb
Views 30,360
Do you need developer help for Flat Icons CSS - Dribbble Remake?

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!

Tyler Fry (frytyler) Script Codes
Name
Login Form
Flat UI Kit - Dribbble Rebound
Email UI - Dribbble Rebound
Mini Profile
Flat Instagram Logo
Carousel Book Layout Using CSS Regions
To Do Task Widget
Ui Kit Dribbble Rebound
Check
Responsive Viewer
Create amazing web content 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!