Services table

Developer
Jitendra
Size
2,136 Kb
Views
42,504
  1. Services table Previews
  2. Services table HTML Codes
  3. Services table CSS Codes

How do I make an services table?

Simple Services table. What is a services table? How do you make a services table? This script and codes were developed by Jitendra on 03 July 2022, Sunday.

Services table Previews
IQ Test

Services table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Services table</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="services">
<section class="pricecol">
<div class="icon">
<i class="icon-magic"></i>
</div>
<h3><Span>Web Design</span></h3>
<ul>
<li>Etiam sit amet orci</li>
<li>Duis leo sed fringilla</li>
<li>Mauris sit amet nibh</li>
<li>Donec sodales sagittis</li>
</ul>
<p>
<a class="button"><span>Sign Up</span></a>
</p>
</section>
<section class="pricecol">
<div class="icon">
<i class="icon-leaf"></i>
</div>
<h3><Span>Development</span></h3>
<ul>
<li>Etiam sit amet orci</li>
<li>Duis leo sed fringilla</li>
<li>Mauris sit amet nibh</li>
<li>Donec sodales sagittis</li>
</ul>
<p>
<a class="button"><span>Sign Up</span></a>
</p>
</section>
<section class="pricecol">
<div class="icon">
<i class="icon-link"></i>
</div>
<h3><Span>Support</span></h3>
<ul>
<li>Etiam sit amet orci</li>
<li>Duis leo sed fringilla</li>
<li>Mauris sit amet nibh</li>
<li>Donec sodales sagittis</li>
</ul>
<p>
<a class="button"><span>Sign Up</span></a>
</p>
</section>
</div>
</body>
</html>

Services table - Script Codes CSS Codes

.services
{
width:1000px;
overflow:auto;
margin:0 auto;
}
.pricecol
{
width:31%;
background:rgb(38, 48, 52);
min-height:30%;
border-radius:10px;
position:relative;
padding:30px 0px;
text-align:center;
font-family:verdana;
float:left;
margin-left:20px;
}
.icon
{
width:60px;
height:60px;
border-radius:100%;
background:rgb(108, 140, 54);
color:#fff;
text-align:center;
position:relative;
margin:0 auto;
}
.icon i
{
font-size:30px;
position:relative;
top:15px;
}
h3
{
text-align:center;
background:rgb(34, 43, 47);
text-align:center;
border-top:1px solid rgb(25, 31, 34);
border-bottom:1px solid rgb(51, 60, 64);
color:#fff;
}
h3 span
{
border-top:1px solid rgb(51, 60, 64);
border-bottom:1px solid rgb(25, 31, 34);
display:block;
padding: 10px 0px;
font-family:verdana;
font-size:20px;
}
.button
{
border-radius:34px;
border:5px solid rgba(255, 255, 255, 0.07);
color:rgb(64, 85, 29);
font-size:16px;
margin-top:15px;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.15);
cursor:pointer;
display:inline-block;
}
.button span
{
display:inline-block;
padding:10px 15px;
background: none repeat scroll 0% 0% rgb(108, 140, 54);
border-radius:20px;
box-shadow: 0px 0px 1px rgba(255, 255, 255, 0.3) inset, 0px 2px 0px rgba(255, 255, 255,
0.1) inset;
}
ul
{
list-style-type:none;
padding:0px;
color:#fff;
font-family:verdana;
font-size:14px;
margin:0 auto;
text-align:center;
width:70%;
color:rgb(165, 174, 178);
border-bottom:1px solid rgb(51, 60, 64);
border-top:1px solid rgb(25, 31, 34);
}
li
{
padding:10px 0px;
border-top:1px solid rgb(51, 60, 64);
border-bottom:1px solid rgb(25, 31, 34);
}
Services table - Script Codes
Services table - Script Codes
Home Page Home
Developer Jitendra
Username berdejitendra
Uploaded July 03, 2022
Rating 4.5
Size 2,136 Kb
Views 42,504
Do you need developer help for Services table?

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!

Jitendra (berdejitendra) Script Codes
Name
Mobile Sub Menu Concept
CSS3 Lion
Flat Music Player Playlist Mobile UI
Two joint circles - One element
Adam and eva - One element pixel image
Mail icon - One Element
One element - Steve Jobs
Responsive Section hover effect to show content
Underpants - One Element
Facebook Flat Notification
Create amazing blog posts 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!