Icons
How do I make an icons?
Pure CSS flat icons. Designed by Jee on Dribbblehttp://dribbble.com/shots/963394-icons?list=searches&tag=flat. What is a icons? How do you make a icons? This script and codes were developed by Rosh Jutherford on 04 September 2022, Sunday.
Icons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Icons </title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section>
<div> <p class="day">FR</p> <p class="date">23</p>
</div>
<div> <span class="i"> <i class="icon-reorder"></i> </span> <span class="night"> <span></span> </span>
</div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Icons - Script Codes CSS Codes
html,body{ background:#ff7878; font-family:arial, sans-serif; color:#ffffff; font-size:14px; width:100%; height:100%;
}
section{ width:435px; height:200px; margin:50px auto;
}
div{ width:120px; height:120px; position:relative; margin:50px 40px 0 40px; float:left; background:#23b49a; border:8px solid #ffffff; border-radius:20px; box-shadow:0 10px 20px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.8), 0 10px 40px 0 rgba(0,0,0,0.1);
}
div:before, div:after{ content:" "; position:absolute; width:3px; height:10px; background:#ffffff; box-shadow:0 2px 1px -1px rgba(0,0,0,0.8); top:-5px; margin-top:50%;
}
div:after{ right:0;
}
p{ position:absolute; text-align:left; width:120px; padding-left:25px; top:8px;
}
p:first-of-type:after{ content:" "; width:120px; height:60px; position:absolute; z-index:2; background:rgba(0,0,0,0.1); border-radius:10px 10px 0 0; top:-9px; left:0px; border-top:3px solid #148d70;
}
.date{ font-size:68px; font-weight:bold; line-height:68px; height:68px; top:-34px; margin-top:50%; text-align:center; padding:0;
}
div:nth-of-type(2){ background:#ddece9; border:8px solid #ddece9;
}
div:nth-of-type(2):before, div:nth-of-type(2):after{ display:none;
}
.i{ display:block; position:absolute; width:50px; height:50px; border-radius:5px; text-align:center; background:#fafafa; color:#c2c2c2; font-size:25px; line-height:50px; top:-25px; margin-top:50%; margin-right:50%; right:-5px; z-index:4; box-shadow:0 5px 10px -3px rgba(0,0,0,0.3);
}
.night{ width:50px; height:45px; display:block; position:absolute; background:#3e6185; border-radius:5px; top:-25px; margin-top:50%; margin-left:50%; border-top:5px solid #194d60;
}
.night:before{ content:" "; width:20px; height:20px; border-radius:10px; position:absolute; background:#ffffff; top:-15px; margin-top:50%; left:-10px; margin-left:50%;
}
.night:after{ content:" "; width:15px; height:15px; border-radius:7.5px; background:#3e6185; position:absolute; top:-15px; margin-top:50%; left:-12px; margin-left:50%;
}
.night span{ display:block; width:5px; height:5px; background:#9fb0c2; border-radius:2.5px; position:absolute; z-index:2; right:7px; top:4.5px;
}
.night span:before, .night span:after{ content:" "; width:3px; height:3px; border-radius:1.5px; position:absolute; background:#9fb0c2; z-index:2; left:-26px; top:4px;
}
.night span:after{ left:-2px; top:28px;
}
Developer | Rosh Jutherford |
Username | the_ruther4d |
Uploaded | September 04, 2022 |
Rating | 4.5 |
Size | 2,328 Kb |
Views | 32,384 |
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!
Name | Size |
IOS7 Icon | 2,313 Kb |
Apple iPhone 5s style scrolling | 4,740 Kb |
Lazy Load for Background Images | 2,977 Kb |
RvV 2 | 3,115 Kb |
Responsive CSS Menu | 2,559 Kb |
Kinetic Mark by Philip Thepkaysone | 2,504 Kb |
CSS Fine Art | 5,996 Kb |
Flat Range Sliders | 2,467 Kb |
Twisted | 3,216 Kb |
Beautiful Login Form | 2,861 Kb |
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!
Name | Username | Size |
Simple content swap | Snografx | 1,859 Kb |
Acorrdian 2016 | Milanodituti | 3,720 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Css3 loader | Clknap | 2,391 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Getting Started | Viblast | 1,500 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Sinclair Research Computers | MattCowley | 3,068 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!