Icons

Size
2,328 Kb
Views
32,384

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 Previews

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;
}
Icons - Script Codes
Icons - Script Codes
Home Page Home
Developer Rosh Jutherford
Username the_ruther4d
Uploaded September 04, 2022
Rating 4.5
Size 2,328 Kb
Views 32,384
Do you need developer help for Icons?

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!

Rosh Jutherford (the_ruther4d) Script Codes
Create amazing video scripts 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!