How to create a website or domain hosting plan table using HTML, CSS?

I will learn how to create a website or domain hosting plan table using HTML, CSS.

Frequently Asked Questions:

How to create website or domain hosting plan table and price table using HTML, CSS?

How to create a website or domain hosting plan using HTML, CSS?

How to create a website or domain hosting plan table using HTML, CSS?

Yes, today we will learn how to create a website or domain hosting plan table. And finally I will give the source code and learn to do some customization. But customization has to be done only in HTML part and some CSS part. Actually there is not much customization and CSS and HTML to write but can be different as per your requirement. You can add many things and do customization here. We'll learn how to do this by just writing some simple code. And I will now give you the source code as a gift. You can learn more by customizing the source code. Let us not waste time in making them. For this I always give you the source code. Do you know what customization is? If you can't do it, there is no problem. I will give some instructions which will help you in customization. Or you use the source code directly, no problem. But the pictures, colors, these are usually what I have given, they have to be changed. Here is the source code and I will try to explain step by step later.

🍃

Source Code:

          
    <body>
<div class="pricing-table">
		<h2>Shared Hosting Plans</h2>
		<div class="price-item">
			<ul>
				<li class="plan">Personal</li>
				<li class="price">
					<p>$2.99<small></small></p>
					<span class="price-doller">$5.99</span>
					<span class="discount">Save 50%</span>
				</li>
		<li class="btn"><button>Get Started</button></li>
		<li class="list">30 GB SSD</li>
		<li class="list">1 Website</li>		
        <li class="list">Domaine Name</li>
    </ul></div>
    <div class="price-item">
    	<ul>
    		<li class="plan plus">Business+</li>
    		<li class="price">
    			<p>$8.99<small></small></p>
    			<span class="price-doller">$17.99</span>
    			<span class="discount plus">Save 50%</span>
    		</li>
    		<li class="btn"><button class="plus">Get Started</button></li>
    		<li class="list">60 GB SSD</li>
    		<li class="list">Unlimited Websites</li>
    		<li class="list">Domaine Name</li>
    		<li class="list">AutoBackup</li>
    	</ul></div>
    	<div class="price-item">
    		<ul>
    			<li class="plan">Business</li>
    			<li class="price">
    				<p>$4.99<small></small></p>
    				<span class="price-doller">$9.99</span>
    				<span class="discount">Save 50%</span>
    			</li>
    			<li class="btn"><button>Get Started</button></li>
    			<li class="list">90 GB SSD</li>
    			<li class="list">Unlimited Websites</li>
<li class="list">Domaine Name</li>
    		</ul></div></div>
    		<style>
* {
	margin: 0;
	padding: 0; }
body {background: #eee;
	font-family: 'Montseraat', sans-serif;}
.pricing-table {width: 80%;
	text-align: center;
	overflow: hidden;
	margin-left: 10%;
	margin-right: 10%;}
.pricing-table h2 {color: #6D6E70;
	font-size: 40px;
	margin-bottom: 5%;
	margin-top: 5%;}
.pricing-table .price-item {background: #fff;
	float: left;
	width: 32%;
	border-radius: 10px;}
.pricing-table .price-item:nth-of-type(1),
.pricing-table .price-item:nth-of-type(3) {
	margin-top: 3%}
.pricing-table .price-item:nth-of-type(2),
.pricing-table .price-item:nth-of-type(3) {
    margin-left: 1%;}
 .pricing-table .price-item ul {
 list-style: none;
 transition: all .5s ease-in-out;}
 .pricing-table .price-item ul:hover {
 	margin-top: -10px;}
 .pricing-table .price-item ul li.plan {
 	padding: 15px;
 	font-size: 18px;
 	font-weight: bold;
 	color: #fff;
 	background: #007bff;
 	border-top-left-radius: 10px;
 	border-top-right-radius: 10px;}
 .pricing-table .price-item ul li.plus {
 	background: #dc3545;
 	color: #fff;}
 .pricing-table .price-item ul li.price {
 	padding: 15px;}
 .pricing-table .price-item ul li.price p {
 	font-weight: bold;
 	font-size: 35px;
 	color: #414141;}
.pricing-table .price-item ul li.price p small {
	font-size: 18px;
	color: #6D6E70;
	font-weight: normal;}
.pricing-table .price-item ul li.price span {
	display: block;}
.pricing-table .price-item ul li.price .price-doller {
	color:#6D6E70;
	margin-top: 7%;
	font-weight: bold;
	text-decoration: line-through;}

.pricing-table .price-item ul li.price .discount {
	color: #007bff;
	margin-top: 7%;}
.pricing-table .price-item ul li.price .plus {
	color: #dc3545;}
.pricing-table .price-item ul li.btn {
	margin: 24px 0;}
.pricing-table .price-item ul li.btn button {
	padding: 10px 32px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	background: #007bff;
	border:none;
	border-radius: 10px;
	cursor: pointer;
	transition: all .3s ease-in-out;}
.pricing-table .price-item ul li.btn button:hover {
	background: #1169D9;}
.pricing-table .price-item ul li.btn button.plus {
	background: #dc3545;}
.pricing-table .price-item ul li.btn button.plus:hover {
	background: #C82233;}
.pricing-table .price-item ul li.list {
	padding: 10px;
	border-bottom: 1px solid #f2f2f2;
	font-weight: bold;}
.pricing-table .price-item ul li.list:last-of-type {
	border-bottom: none;}
    		  
    		</style>
    </body>

1. Create the HTML part

We will put them inside the website or domain hosting plan table. We have to put them inside the <div class="pricing-table"> tag.

Note: There is a lot of customization here, and if you don't need it, just describe your hosting plan.

2. Create the CSS part.

I will only teach you what to change here so as not to increase the content unnecessarily. It is very difficult to create or teach each line separately. If you have any problem you can let me know.

If you want to complete more beauty, you can do customization, but if you don't want, there is no need to do customization.

Result:

Last words:

If you can complete the task correctly. Then using this source code you can easily create any website or domain hosting plan table. It must be very easy for you to create a special website or domain hosting plan table by creating CSS and HTML. Do not forget to give your opinion in the comment box.

Special Note:

There are no mistakes or errors in the source code because it has been tested and you are seeing the result above. Still, if there is any problem, you can let me know. Only humans are wrong.

My Talk:

Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!

Popular Posts

How to create a website or domain hosting plan table using HTML, CSS?

How to create a website or domain hosting plan table using HTML, CSS?

How to create website or domain hosting plan table and price table using HTML, CSS?

How to create a website or domain hosting plan using HTML, CSS?

How to create a website or domain hosting plan table using HTML, CSS?

1. Create the HTML part

2. Create the CSS part.

Result:

My Talk:

Posted by Priyo Event

Post a Comment

0 Comments

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form

Popular Posts

How to create a website or domain hosting plan table using HTML, CSS?

How to create a website or domain hosting plan table using HTML, CSS?

How to create website or domain hosting plan table and price table using HTML, CSS?

How to create a website or domain hosting plan using HTML, CSS?

How to create a website or domain hosting plan table using HTML, CSS?

1. Create the HTML part

2. Create the CSS part.

Result:

My Talk:

Posted by Priyo Event

You may like these posts

Post a Comment

0 Comments

Social Plugin

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form