Icons

Developer
Rosh Jutherford
Size
2,328 Kb
Views
32,368

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
IQ Test

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,368
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
Name
Flat Logo by Henrik Dahlheim
Game-Style Header
Parallax Canvas Gallery
Pre-loader 1 by Chris Hall
Flat Range Sliders
Share toggles
Apple iPhone 5s style scrolling
Hover effect demo
Download Button
Twisted
Create amazing blog posts 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!