Please give any idea

Recommended Answers

Use bootstrap to create 4 columns.

Jump to Post

Yes, that's definitely a bootstrap design.

Jump to Post

or just something like this;

HTML:
<div>
    <img src="icon-1.gif" alt="Icon 1" />
    <h2>Fully Responsive</h2>
    <p>text the bla the bla</p>
</div>
<div>
    <img src="icon-2.gif" alt="Icon 2" />
    <h2>HTML5 &amp; CSS3</h2>
    <p>text the bla the bla</p>
</div>
<div>
    <img src="icon-3.gif" alt="Icon 3" />
    <h2>Ready for use</h2>
    <p>text the bla the bla</p>
</div> …
Jump to Post

All 8 Replies

Re: How to design like this picture 80 80

Use bootstrap to create 4 columns.

commented: Thankyou so much +0
Re: How to design like this picture 80 80

Yes, that's definitely a bootstrap design.

commented: Thankyou so much +0
Re: How to design like this picture 80 80

or just something like this;

HTML:
<div>
    <img src="icon-1.gif" alt="Icon 1" />
    <h2>Fully Responsive</h2>
    <p>text the bla the bla</p>
</div>
<div>
    <img src="icon-2.gif" alt="Icon 2" />
    <h2>HTML5 &amp; CSS3</h2>
    <p>text the bla the bla</p>
</div>
<div>
    <img src="icon-3.gif" alt="Icon 3" />
    <h2>Ready for use</h2>
    <p>text the bla the bla</p>
</div>
<div>
    <img src="icon-4.gif" alt="Icon 4" />
    <h2>Shortcodes</h2>
    <p>text the bla the bla</p>
</div>

CSS:
 /* Nasty CSS reset for demo purpose, but better to use a CSS reset such as normalize.css */
* {
    marging: 0;
    padding: 0;
}

/* Apply a natural box layout model to all elements */
*,
*:before,
*:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

div {
    float: left;
    width: 25%;
    padding: 0 2rem;
    text-align: center;
}
Re: How to design like this picture 80 80

It also uses font awesome for the icons, not images @gentlemedia, so:

add <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> to the <head>

and replace <img src="icon-2.gif" alt="Icon 2" /> with <h1><i class="fa fa-globe"></i></h1>

Hope this helpes :)

Re: How to design like this picture 80 80

Hello, here all you need to use the boostrap class !

your code is goes like this :

<div class = "col-lg-12">
    <div class="row">
     <div class="col-lg-3">
       <img></img>
       <h2></h2>
       <p></p>
     </div>
     <div class="col-lg-3">
       <img></img>
       <h2></h2>
       <p></p>
     </div>
     <div class="col-lg-3">
       <img></img>
       <h2></h2>
       <p></p>
     </div>
     <div class="col-lg-3">
       <img></img>
       <h2></h2>
       <p></p>
     </div>    
    </div>  
</div>

Here, you have to use your custom css style, image and content.

Re: How to design like this picture 80 80

Now I work as web developer and in my work I contacted with UX/UI web designers from different It companies like Effective Soft Corporation But I am also interested in interface design so I need more practise with photoshop. You know I think UI design makes an application or website more attractive.

Re: How to design like this picture 80 80

It is very easy, try to do the function "lining" in photoshop and make one circle and copy it several times. I did a lot of design in my property in Portugal during quarantine, so if you need help I am here

Re: How to design like this picture 80 80

its simple
you can make this type of picture in photoshop

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.