Pure CSS Responsive iCons

Developer
Tom Hergenreter
Size
3,198 Kb
Views
16,192
  1. Pure CSS Responsive iCons Previews
  2. Pure CSS Responsive iCons HTML Codes
  3. Pure CSS Responsive iCons CSS Codes
  4. Pure CSS Responsive iCons JS Codes

How do I make an pure css responsive icons?

Attempt to create responsive icons, inspired by Zurb Foundation Illustration. . What is a pure css responsive icons? How do you make a pure css responsive icons? This script and codes were developed by Tom Hergenreter on 17 October 2022, Monday.

Pure CSS Responsive iCons Previews
IQ Test

Pure CSS Responsive iCons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Responsive iCons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <!--iphone--> <div class="iphone"> <div class="grid"></div> </div> <!--ipad--> <div class="ipad"> <div class="grid"></div> </div> <!--monitor--> <div class="monitor"> <div class="grid"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Responsive iCons - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.container { width: 716px; margin: 0 auto; position: relative; margin-top: 50px;
}
body { background-color: #444; font-size: 1.6em;
}
h1 { font: normal 1.5em/2em "Helvetica"; color: white; clear: both; margin: 0 auto;
}
/*iphone*/
.iphone { position: relative; width: 3.5em; height: 5.5em; background-color: #fff; border-radius: .2em; border: .3em solid #222; border-top-width: .7em; border-bottom-width: .7em; margin: 128px 20px 0px 0px; float: left; /*earpiece*/ /*home-button*/
}
.iphone:before { content: ""; position: absolute; left: 1.3em; top: -.4em; width: .4em; height: .1em; background-color: #fff; border-radius: 50%;
}
.iphone:after { content: ""; position: absolute; bottom: -.5em; width: .3em; height: .3em; left: 1.35em; border-radius: 50%; background-color: #fff;
}
.iphone .grid, .iphone .grid:before, .iphone .grid:after { width: 90%; height: 1.15em; margin: 0 auto; margin-top: 7%; background-color: #ff8b4d;
}
.iphone .grid:before { content: ""; position: absolute; top: 1.3em;
}
.iphone .grid:after { content: ""; position: absolute; top: 2.6em;
}
/*ipad*/
.ipad { position: relative; width: 8em; height: 10.5em; background-color: #fff; margin: 0 auto; border-radius: .2em; border: .8em solid #222; float: left; margin-right: 20px; /*camera*/ /*home-button*/
}
.ipad:before { content: ""; position: absolute; left: 3.15em; top: -.5em; width: .2em; height: .2em; background-color: #fff; border-radius: 50%;
}
.ipad:after { content: ""; position: absolute; bottom: -.55em; width: .3em; height: .3em; left: 3.1em; border-radius: 50%; background-color: #fff; z-index: 20;
}
.ipad .grid, .ipad .grid:before, .ipad .grid:after { width: 95%; height: 2.75em; margin: 0 auto; margin-top: 2.75%; background-color: #ff8b4d;
}
.ipad .grid:before { content: ""; position: absolute; top: 2.89em;
}
.ipad .grid:after { content: ""; position: absolute; top: 5.8em;
}
/*monitor*/
.monitor { position: relative; width: 14em; height: 9.5em; background-color: #fff; margin: 0 auto; border-radius: .2em; border: .8em solid #222; float: left; /*base*/ /*stand*/
}
.monitor:before { content: ""; position: absolute; left: 4.15em; bottom: -1.8em; width: 4em; height: .2em; background-color: #222;
}
.monitor:after { content: ""; position: absolute; bottom: -1.78em; width: 3em; height: 1em; left: 4.65em; background-color: #222;
}
.monitor .grid, .monitor .grid:before, .monitor .grid:after { width: 97%; height: 3.55em; margin: 0 auto; margin-top: 2.3%; background-color: #ff8b4d;
}
.monitor .grid:before { content: ""; position: absolute; top: 3.95em; width: 47%;
}
.monitor .grid:after { content: ""; position: absolute; top: 3.95em; left: 6.4em; width: 47%;
}

Pure CSS Responsive iCons - Script Codes JS Codes

/* Icons can be resized by changing font-size property in body slector */
Pure CSS Responsive iCons - Script Codes
Pure CSS Responsive iCons - Script Codes
Home Page Home
Developer Tom Hergenreter
Username TomHergenreter
Uploaded October 17, 2022
Rating 4.5
Size 3,198 Kb
Views 16,192
Do you need developer help for Pure CSS Responsive 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!

Tom Hergenreter (TomHergenreter) Script Codes
Name
Responsive Gallery
Toronto 3D
Flat, Scaleable CSS iPhone Illustration
Colorado Badge
CSS Paper Navigation Menu
Image Caption Reveal
Create amazing marketing copy 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!