Responsive pricing table CSS3

Developer
Soufiane Abid
Size
4,837 Kb
Views
16,192
  1. Responsive pricing table CSS3 Previews
  2. Responsive pricing table CSS3 HTML Codes
  3. Responsive pricing table CSS3 CSS Codes
  4. Responsive pricing table CSS3 JS Codes

How do I make an responsive pricing table css3?

Https://www.behance.net/gallery/35065739/Responsive-Pricing-Table-CSS3-PSD-and-HTML. What is a responsive pricing table css3? How do you make a responsive pricing table css3? This script and codes were developed by Soufiane Abid on 12 October 2022, Wednesday.

Responsive pricing table CSS3 Previews
IQ Test

Responsive pricing table CSS3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive pricing table CSS3</title> <link rel='stylesheet prefetch' href='https://f9ir.github.io/responsivpricingtablecss3/bootstrapgrid.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="container">	<div class="table">	<div class="col-md-3 prop">	<h2>prop</h2>	<div class="rec"></div>	<li class="hidden-xs">Editable php &amp; css files </li>	<li class="hidden-xs">One-click auto-install</li>	<li class="hidden-xs">Premium support</li>	<li class="hidden-xs">Theme updates</li>	<li class="hidden-xs">Domain use license</li>	<li class="hidden-xs">Layred photoshop files</li>	<li class="hidden-xs">Bonus theme</li>	</div>	<div class="col-xs-12 col-md-3">	<div class="price active">	<h2>standar</h2>	<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M 10,8L 10,5 C 10,4.448, 9.552,4, 9,4S 8,4.448, 8,5L 8,8 C 6.896,8, 6,8.896, 6,10l0,2 c0,1.104, 0.896,2, 2,2l0,13 C 8,27.552, 8.448,28, 9,28S 10,27.552, 10,27L 10,14 c 1.104,0, 2-0.896, 2-2L 12,10 C 12,8.896, 11.104,8, 10,8z M 8,10l 2,0 l0,2 L 8,12 L 8,10 zM 18,18L 18,5 C 18,4.448, 17.552,4, 17,4S 16,4.448, 16,5L 16,18 c-1.104,0-2,0.896-2,2l0,2 c0,1.104, 0.896,2, 2,2l0,3 C 16,27.552, 16.448,28, 17,28S 18,27.552, 18,27L 18,24 c 1.104,0, 2-0.896, 2-2l0-2 C 20,18.896, 19.104,18, 18,18z M 16,20l 2,0 l0,2 L 16,22 L 16,20 zM 26,12L 26,5 C 26,4.448, 25.552,4, 25,4S 24,4.448, 24,5L 24,12 c-1.104,0-2,0.896-2,2l0,2 c0,1.104, 0.896,2, 2,2l0,9 c0,0.552, 0.448,1, 1,1s 1-0.448, 1-1L 26,18 c 1.104,0, 2-0.896, 2-2L 28,14 C 28,12.896, 27.104,12, 26,12z M 24,14l 2,0 l0,2 l-2,0 L 24,14 z"></path></g></svg>	<li>	<h4 class="visible-xs">Editable php &amp; css files </h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">One-click auto-install</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">Premium support</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_close_alt2.svg">	</li>	<li>	<h4 class="visible-xs">Theme updates</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_close_alt2.svg">	</li>	<li>	<h4 class="visible-xs">Domain use license</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_close_alt2.svg">	</li>	<li>	<h4 class="visible-xs">Layred photoshop files</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_close_alt2.svg">	</li>	<li>	<h4 class="visible-xs">Bonus theme</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_close_alt2.svg">	</li>	<span>from <strong>35</strong><sub>$</sub></span>	<a class="btn" href="#">sign up</a>	</div>	</div>	<div class="col-xs-12 col-md-3">	<div class="price">	<h2>developer</h2>	<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><g><path d="M 2.544,24.656c 0.48,0.746, 1.488,1.634, 3.568,1.634c 1.308,0, 2.982-0.382, 4.846-1.048 C 11.764,28.794, 13.246,32, 16,32c 2.8,0, 4.288-3.316, 5.084-6.942c 1.868,0.632, 3.548,0.996, 4.862,0.996c 2.2,0, 3.232-0.936, 3.712-1.72 c 1.552-2.544-0.87-5.774-3.794-8.444c 0.54-0.52, 1.048-1.040, 1.494-1.546c 2.528-2.878, 3.234-5.232, 2.098-7 c-0.48-0.746-1.488-1.634-3.568-1.634l0,0 c-1.308,0-2.982,0.382-4.846,1.048C 20.236,3.206, 18.754,0, 16,0C 13.2,0, 11.712,3.316, 10.916,6.942 C 9.048,6.308, 7.368,5.946, 6.054,5.946l0,0 c-2.2,0-3.234,0.936-3.712,1.72C 0.79,10.21, 3.212,13.44, 6.136,16.11 c-0.54,0.522-1.048,1.040-1.494,1.546C 2.114,20.534, 1.408,22.89, 2.544,24.656z M 16,30c-1.294,0-2.442-2.162-3.174-5.5 c 1.052-0.454, 2.14-0.984, 3.254-1.59c 1.068,0.548, 2.112,1.026, 3.124,1.442C 18.476,27.774, 17.314,30, 16,30z M 12,16 c0-0.734, 0.022-1.45, 0.052-2.154c 0.576-0.408, 1.166-0.812, 1.784-1.21C 14.546,12.18, 15.248,11.76, 15.944,11.36 c 0.706,0.384, 1.418,0.786, 2.138,1.224c 0.644,0.394, 1.262,0.796, 1.862,1.2C 19.978,14.508, 20,15.244, 20,16 c0,0.734-0.022,1.45-0.052,2.154C 19.372,18.562, 18.782,18.966, 18.164,19.364C 17.454,19.82, 16.752,20.24, 16.056,20.64 c-0.706-0.384-1.418-0.786-2.138-1.224c-0.644-0.394-1.262-0.796-1.862-1.2C 12.022,17.492, 12,16.756, 12,16z M 10.010,16.752 C 9.716,16.528, 9.428,16.304, 9.152,16.082C 9.428,15.848, 9.714,15.614, 10.006,15.38C 10.002,15.648, 10,15.874, 10,16 C 10,16.146, 10.004,16.422, 10.010,16.752z M 12.234,11.308C 12.292,10.74, 12.36,10.19, 12.438,9.658C 12.894,9.852, 13.36,10.066, 13.836,10.29 c-0.36,0.22-0.72,0.43-1.082,0.662C 12.574,11.070, 12.412,11.192, 12.234,11.308z M 18.030,10.24c 0.516-0.26, 1.020-0.502, 1.514-0.724 C 19.628,10.082, 19.7,10.672, 19.762,11.278c-0.278-0.178-0.512-0.324-0.636-0.4C 18.76,10.654, 18.394,10.452, 18.030,10.24z M 21.99,15.248 c 0.294,0.224, 0.582,0.448, 0.858,0.67c-0.276,0.234-0.562,0.466-0.856,0.702C 21.998,16.352, 22,16.126, 22,16 C 22,15.854, 21.996,15.578, 21.99,15.248z M 19.766,20.692c-0.058,0.568-0.124,1.12-0.202,1.65c-0.456-0.194-0.924-0.408-1.398-0.632 c 0.36-0.22, 0.72-0.43, 1.082-0.662C 19.426,20.93, 19.588,20.808, 19.766,20.692z M 12.874,21.122c 0.366,0.224, 0.73,0.426, 1.096,0.638 c-0.516,0.26-1.020,0.502-1.514,0.724c-0.084-0.564-0.156-1.154-0.218-1.762C 12.516,20.898, 12.75,21.046, 12.874,21.122z M 27.95,23.292c-0.316,0.516-1.016,0.762-2.004,0.762c-1.154,0-2.712-0.352-4.488-0.976c 0.212-1.372, 0.344-2.712, 0.422-3.856 c 0.894-0.66, 1.72-1.328, 2.502-2C 27.204,19.784, 28.672,22.11, 27.95,23.292z M 25.888,7.71c 0.916,0, 1.574,0.23, 1.886,0.716 c 0.75,1.166-0.666,3.528-3.43,6.158c-0.86-0.7-1.708-1.34-2.472-1.882c-0.082-1.18-0.218-2.556-0.444-3.962 C 23.202,8.082, 24.752,7.71, 25.888,7.71z M 16,2c 1.294,0, 2.442,2.162, 3.174,5.5c-1.052,0.454-2.14,0.984-3.254,1.59 C 14.85,8.542, 13.806,8.062, 12.796,7.648C 13.524,4.226, 14.686,2, 16,2z M 4.050,8.708c 0.316-0.516, 1.016-0.762, 2.004-0.762 c 1.154,0, 2.712,0.352, 4.488,0.976C 10.328,10.294, 10.198,11.632, 10.12,12.778c-0.894,0.66-1.72,1.328-2.502,2 C 4.796,12.216, 3.328,9.89, 4.050,8.708z M 10.126,19.296c 0.082,1.18, 0.218,2.556, 0.444,3.962c-1.772,0.658-3.322,1.030-4.458,1.030 c-0.916,0-1.574-0.23-1.886-0.716c-0.75-1.166, 0.666-3.528, 3.43-6.158C 8.514,18.114, 9.362,18.756, 10.126,19.296z"></path></g></svg>	<li>	<h4 class="visible-xs">Editable php &amp; css files </h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">One-click auto-install</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">Premium support</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">Theme updates</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_close_alt2.svg">	</li>	<li>	<h4 class="visible-xs">Domain use license</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_close_alt2.svg">	</li>	<li>	<h4 class="visible-xs">Layred photoshop files</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_close_alt2.svg">	</li>	<li>	<h4 class="visible-xs">Bonus theme</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_close_alt2.svg">	</li>	<span>from <strong>55</strong><sub>$</sub></span>	<a class="btn" href="#">sign up</a>	</div>	</div>	<div class="col-xs-12 col-md-3">	<div class="price">	<h2>professional</h2>	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" enable-background="new 0 0 16 16" xml:space="preserve"> <g><path d="M 30,8l-6,0 L 24,4 c0-1.104-0.896-2-2-2L 10,2 C 8.896,2, 8,2.896, 8,4l0,4 L 2,8 C 0.896,8,0,8.896,0,10l0,18 c0,1.104, 0.896,2, 2,2l 28,0 c 1.104,0, 2-0.896, 2-2L 32,10 C 32,8.896, 31.104,8, 30,8z M 10,4l 12,0 l0,4 L 10,8 L 10,4 z"></path></g></svg>	<li>	<h4 class="visible-xs">Editable php &amp; css files </h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">One-click auto-install</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">Premium support</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">Theme updates</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">Domain use license</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">Layred photoshop files</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<li>	<h4 class="visible-xs">Bonus theme</h4>	<img src="https://f9ir.github.io/responsivpricingtablecss3/icon_check.svg">	</li>	<span>from <strong>195</strong><sub>$</sub></span>	<a class="btn" href="#">sign up</a>	</div>	</div>	</div>	</div> <script src="js/index.js"></script>
</body>
</html>

Responsive pricing table CSS3 - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat);
body { background: url("https://f9ir.github.io/responsivpricingtablecss3/bg.png"); }
.table { margin: 100px; }
.prop .rec { width: 100px; height: 100px; display: block; margin: 0 auto 30px auto; visibility: hidden; }
.prop h2 { padding: 15px; visibility: hidden; }
.prop li { font-family: "Montserrat", sans-serif; list-style: none; color: #fffff3; padding: 5px; margin: 5px 0; display: inline-block; border-bottom: 1px dashed #a493c6; }
.price { background: #fffff3; box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.5); } .price h2 { font-family: "Montserrat", sans-serif; font-size: 1.5em; text-transform: uppercase; text-align: center; padding: 15px; color: #566270; } .price svg { display: block; margin: 0 auto 30px auto; width: 100px; height: 100px; fill: #a493c6; } .price li:nth-child(even) { background: #a493c6; } .price li:nth-child(odd) { background: #e0e3da; } .price li { list-style: none; text-align: center; padding: 3px; margin: 10px 0; } .price span { display: block; text-align: center; font-family: "Montserrat", sans-serif; font-size: 2em; color: #566270; } .price span strong { font-size: 2.2em; } .price a { display: block; font-family: "Montserrat", sans-serif; font-size: 2em; padding: 10px; background: #a493c6; color: #fffff3; text-decoration: none; text-align: center; transition: all 0.2s ease-in-out; } .price a:hover { background: #566270; }
.visible-xs { display: none; }
@media (max-width: 74.9em) { .table { margin: 100px 0; } .visible-xs { display: none; margin: 5px 0; font-family: "Montserrat", sans-serif; } }
@media (max-width: 61.9em) { .prop { display: none; } .visible-xs { display: block; } }

Responsive pricing table CSS3 - Script Codes JS Codes

// https://www.behance.net/gallery/35065739/Responsive-Pricing-Table-CSS3-PSD-and-HTML
Responsive pricing table CSS3 - Script Codes
Responsive pricing table CSS3 - Script Codes
Home Page Home
Developer Soufiane Abid
Username SoufianeAbid
Uploaded October 12, 2022
Rating 3
Size 4,837 Kb
Views 16,192
Do you need developer help for Responsive pricing table CSS3?

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!

Soufiane Abid (SoufianeAbid) Script Codes
Name
Jump loading
Flat accordion
ScrollTop
Sandal Adidas PURE CSS
Push Over Menu
One click to copy
About me Sliding
Small UnderLine
Rotation
Egg hover
Create amazing captions 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!