Jump to content

.London Domains - £4
Photo

How can I write this code using html /css

html css

  • Please log in to reply
4 replies to this topic

#1 rk484

rk484
  • Member
  • Newbie
  • 2 posts

Posted 07 February 2017 - 18:46

Here is the pic(just for example):

 

 

How can I create this by writing just the code. 

Attached Files


  • 0

#2 Renaissance-Design

Renaissance-Design
  • Global Mod
  • Code Poet
  • 1,572 posts

Posted 07 February 2017 - 19:06

Use an unordered list, float the <li> with 50% width. Use :before to place the tickmarks.


  • 0

Chris Cox is a freelance web designer & developer based in Bridgend, South Wales. You should definitely follow @RenaissDesign on Twitter.

Was this post helpful? Buy me a beer.


#3 rk484

rk484
  • Member
  • Newbie
  • 2 posts

Posted 07 February 2017 - 19:11

.list_item {  
display: block;
float: left;
margin-top: 13px;
width: 296px;
} 

.list_item li {
  background-image: url("http"//mysite.com/resources/image/staticpage_images/icon-tick.png");
  background-position-x: left;
  background-position-y: 3px;
  background-repeat: no-repeat;
  color: #555;
  float: left;
  font-size: 15px;
  height: 30px;
  line-height: 24px;
  margin-bottom: 0;
  padding-left: 24px;
  width: 90%;
}
 
<div class="list_item">

<ul>
<li>1500+ trusted partner retailers</li>
<li>Over 1.5 million happy users</li>


</ul>
</div>
 
I was testing this code online in a real time html editor, but it isnt running

Edited by Renaissance-Design, 07 February 2017 - 19:16.
Code formatting

  • 0

#4 Renaissance-Design

Renaissance-Design
  • Global Mod
  • Code Poet
  • 1,572 posts

Posted 07 February 2017 - 19:21

It's worth inspecting each element in your browser's dev tools to see what styles they're inheriting. Did you start with a CSS reset?


  • 0

Chris Cox is a freelance web designer & developer based in Bridgend, South Wales. You should definitely follow @RenaissDesign on Twitter.

Was this post helpful? Buy me a beer.


#5 DigitalSquid

DigitalSquid
  • Overlord
  • Squidministrator
  • 1,053 posts

Posted 07 February 2017 - 19:33

  background-image: url("http"//mysite.com/resources/image/staticpage_images/icon-tick.png");

You've got an extra quote after http. It's breaking the syntax. 


  • 3

More than happy to help for free but if you want to show some love back, either give me an up-vote or buy me a beer!

www.digitalsquid.net
@Digital_Squid






Also tagged with one or more of these keywords: html, css

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users