Member Avatar for SabithaSri

Please give any idea

design.png 12.23 KB
  • 10 Contributors
  • 9 Replies
  • 1K Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by Sohaib_7

Dani AI

Generated

The layout in the picture is a simple four-up feature row. Bootstrap (as and suggested) gives a quick, tested grid, and the float approach shown by will work — but a modern, clearer solution is CSS Grid (or Flexbox for one-dimensional needs). Grid lets you declare columns and gutters directly, so you get reliable spacing and responsive behavior without manual percent math. (developer.mozilla.org)

Practical, ready-to-use guidance: wrap each feature in a semantic element (section/article/figure), center the icon, heading and paragraph inside it, and use a grid container like display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;. Prefer gap over ad-hoc margins for gutters, and set box-sizing: border-box globally so padding does not break widths. For small screens use minmax() with auto-fit/auto-fill or a media query to collapse to two/one column layouts. If you must support very old browsers, add a simple Flexbox or float fallback. (developer.mozilla.org)

On icons: is right that icon fonts are convenient, but inline SVGs (or an external SVG sprite using <symbol>/<use>) give crisper results and better accessibility. Add a <title> inside inline SVG and use role="img" (or aria-hidden="true" for decorative icons) so screen readers behave correctly. (developer.mozilla.org)

Troubleshoot: if columns wrap unexpectedly, check box-sizing, remove conflicting horizontal margins, and verify that gap (not margins) is controlling the gutters.

Recommended Answers

All 9 Replies

Member Avatar for pritaeas

Use bootstrap to create 4 columns.

commented: Thankyou so much +0
Member Avatar for Dani

Yes, that's definitely a bootstrap design.

commented: Thankyou so much +0
Member Avatar for gentlemedia

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;
}
Member Avatar for Purvi_1

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.

Member Avatar for ichigo_1

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.

Member Avatar for kipsy

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

Member Avatar for Holistic_1

its simple
you can make this type of picture in photoshop

Member Avatar for Sohaib_7

Nice post

Be a part of the DaniWeb community

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