This is a snippet of code to illustrate the design element that is utilized in website/mobile designed with icons as wallpaper(Jumbotron) or as part of the design element.
Created the folder for the with css/img subfolders and index.html file
Downloaded the icons I planned to use for the design from Flaticons
In Pixlr I created a new image with a 500 x 200 pixel canvas
While using Pixlr I added the icons to the 500 x 200 canvas and made the canvas transparent
Added the img to the img subfolder and I utilized the
class from the CSS file
Added the button with h1 text Lorem ipsum, for the text I used google fonts
<div class="img-pattern">
<!--Header title -->
<h1 class="header-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<!-- Click me button -->
<button class="button btn" onclick="alert('Hello world! Thank you for clicking on me')">Click Me</button>
</div>.img-pattern{
position: relative;
background-color: #4891ea;
background:#4891ea url(../img/wall_pattern.png) center bottom;
background-repeat: repeat;
text-align: center;
color: #fff;
padding-bottom: 14em;
min-height: 425px;
}###Utilities used:
Pixlr
Free alternative to Photoshop Pixlr
Icons
Flaticon - Designed by Freepik
Lorem ipsum (Random Text Generator)