Icon Grid

Developer
Anupam Chakravarty
Size
2,151 Kb
Views
91,080
  1. Icon Grid Previews
  2. Icon Grid HTML Codes
  3. Icon Grid CSS Codes

How do I make an icon grid?

What is a icon grid? How do you make a icon grid? This script and codes were developed by Anupam Chakravarty on 16 September 2022, Friday.

Icon Grid Previews
IQ Test

Icon Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Icon Grid</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"> <!-- Cheat Sheet: https://linearicons.com/free#cheatsheet --> <link href='https://fonts.googleapis.com/css?family=Muli:300,400' rel='stylesheet' type='text/css'>
</head>
<div id="icon-grid"> <div class="grid" id="cell-1"> <span class="lnr lnr-eye" style="color:#0054a6;"></span> <h2>Designing Brands</h2> <p>I develop websites that engage users and guide them to taking action.</p> </div> <div class="grid" id="cell-2"> <span class="lnr lnr-laptop-phone" style="color:#003471;"></span> <h2>Building Interfaces</h2> <p>I develop websites that engage users and guide them to taking action.</p> </div> <div class="grid" id="cell-3"> <span class="lnr lnr-pie-chart" style="color:#0054a6;"></span> <h2>Conducting Research</h2> <p>A short explanation about the thing being discussed.</p> </div> <div class="grid" id="cell-4"> <span class="lnr lnr-calendar-full" style="color:#003471;"></span> <h2>Planning Campaigns</h2> <p>A short explanation about the thing being discussed.</p> </div> <div class="grid" id="cell-5"> <span class="lnr lnr-volume-high" style="color:#0054a6;;"></span> <h2>Amplifying Voices</h2> <p>A short explanation about the thing being discussed.</p> </div> <div class="grid" id="cell-6"> <span class="lnr lnr-film-play" style="color:#003471;"></span> <h2>Crafting Stories</h2> <p>I </p> </div> <!--<div class="grid" id="cell-7">7</div> <div class="grid" id="cell-8">8</div> <div class="grid" id="cell-9">9</div>-->
</div>
</body>
</html>

Icon Grid - Script Codes CSS Codes

@media only screen and (orientation: landscape) { #cell-1, #cell-4, #cell-7 { width: 33%; float: left; } #cell-3, #cell-6, #cell-9 { width: 33%; float: right; } #cell-2, #cell-5, #cell-8 { width: 33%; float: left; }
}
.grid { border: 1px solid rgba(0, 0, 0, 0); text-align: center; min-height: 100px; padding: 20px 0px 10px 0px;
}
.lnr { font-size: 4em; /*text-shadow: 2px 1px rgba(107,171,229,1);*/ font-weight: normal;
}
.lnr:hover { text-shadow: 1px 1px rgba(107, 171, 229, 0.8); transition: all ease 0.2s;
}
.grid h2 { font-family: 'Muli', sans-serif; font-weight: 400; font-size: 1.3em;
}
.grid p { font-family: 'Muli', sans-serif; font-weight: 300; font-size: 0.9em; padding:0 5px 0 5px;
}
#icon-grid { height:500px; width:100%;
}
Icon Grid - Script Codes
Icon Grid - Script Codes
Home Page Home
Developer Anupam Chakravarty
Username anupamc
Uploaded September 16, 2022
Rating 3
Size 2,151 Kb
Views 91,080
Do you need developer help for Icon Grid?

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!

Anupam Chakravarty (anupamc) Script Codes
Name
ATG Email Design
POM 2017 - Spread the Word
A Pen by Anupam Chakravarty
BAS - First Email
BAS - Second Email
Homecoming 2017 - One Month to Go
1988 Interactive Invitation
Living GU Social Shares
Homecoming Playlist Mockup
Blue and Gray Day - Google Tag Manager Setup Beta
Create amazing SEO 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!