Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS3 Pricing Table Not displaying?
Tagged: CSS Pricing Table, css3, html
- This topic has 2 replies, 3 voices, and was last updated 7 years, 1 month ago by Victor Font.
-
AuthorPosts
-
February 19, 2017 at 11:00 am #201362ChrisGregoryMember
Hello,
I am attempting to display a pricing table on a page in the Infinity theme.
I'm pulling the code from here: CSS3 Pricing TableI have added the HTML code to the page via the text tab, and have added the CSS code to the bottom of the child themes CSS file.
Somehow, the page is not displaying the pricing table as it is shown in the design editor on the codepen.io site (link above).
Any idea why the pricing table is not displaying?
Did I implement the code wrong?There is a JS box with the following:
/* original post: http://www.red-team-design.com/css3-pricing-table */I'm not sure where to input the JS. It appears to be a comment.
The Code is listed below. Any help is greatly appreciated!HTML CODE
<div id="pricing-table" class="clear">
<div class="plan">
<h3>Single Headshot<span>$135</span></h3>
Select- <b>60</b> Minute Session
- <b>1 Image</b> - Electronic Format
- <b>Full</b> Resolution
- <b>Retouched</b> Digital Negatives
- <b>Color</b> and <b>Black & White</b>
- <b>Print</b> & <b>Reproduction</b>
- <b>Sized</b> for Social Media & Ads
- <b>No</b> Location Fee
- <b>Same Day</b> Processing
- <b>Additional Images</b> $45/ea.
</div>
<div class="plan" id="most-popular">
<h3>Four Headshots<span>$250</span></h3>
Select- <b>120</b> Minute Session
- <b>4 Images</b> - Electronic Format
- <b>Full</b> Resolution
- <b>Retouched</b> Digital Negatives
- <b>Color</b> and <b>Black & White</b>
- <b>Print</b> & <b>Reproduction</b>
- <b>Sized</b> for Social Media & Ads
- <b>No</b> Location Fee
- <b>Same Day</b> Processing
- <b>Additional Images</b> $45/ea.
</div>
<div class="plan">
<h3>Ten Headshots<span>$650</span></h3>
Select- <b>180</b> Minute Session
- <b>10 Images</b> - Electronic Format
- <b>Full</b> Resolution
- <b>Retouched</b> Digital Negatives
- <b>Color</b> and <b>Black & White</b>
- <b>Print</b> & <b>Reproduction</b>
- <b>Sized</b> for Social Media & Ads
- <b>No</b> Location Fee
- <b>Same Day</b> Processing
- <b>Additional Images</b> $45/ea.
</div>
<div class="plan">
<h3>Team Headshots<span>TBD</span></h3>
Select- <b>Full Day</b> Session
- <b>All Images</b> - Electronic Format
- <b>Full</b> Resolution
- <b>Retouched</b> Digital Negatives
- <b>Color</b> and <b>Black & White</b>
- <b>Print</b> & <b>Reproduction</b>
- <b>Sized</b> for Social Media & Ads
- <b>No</b> Location Fee
- <b>3 Day</b> Processing
- <b>Additional Images</b> $45/ea.
</div>
</div>CSS CODE
body{
background: #fff;
}#pricing-table {
margin: 100px auto;
text-align: center;
width: 892px; /* total computed width = 222 x 3 + 226 */
}#pricing-table .plan {
font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
text-shadow: 0 1px rgba(255,255,255,.8);
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */
float: left;
position: relative;
}#pricing-table #most-popular {
z-index: 2;
top: -13px;
border-width: 3px;
padding: 30px 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
}#pricing-table .plan:nth-child(1) {
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}#pricing-table .plan:nth-child(4) {
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}/* --------------- */
#pricing-table h3 {
font-size: 20px;
font-weight: normal;
padding: 20px;
margin: -20px -20px 50px -20px;
background-color: #eee;
background-image: -moz-linear-gradient(#fff,#eee);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(#fff, #eee);
background-image: -o-linear-gradient(#fff, #eee);
background-image: -ms-linear-gradient(#fff, #eee);
background-image: linear-gradient(#fff, #eee);
}#pricing-table #most-popular h3 {
background-color: #ddd;
background-image: -moz-linear-gradient(#eee,#ddd);
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
background-image: -webkit-linear-gradient(#eee, #ddd);
background-image: -o-linear-gradient(#eee, #ddd);
background-image: -ms-linear-gradient(#eee, #ddd);
background-image: linear-gradient(#eee, #ddd);
margin-top: -30px;
padding-top: 30px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}#pricing-table .plan:nth-child(1) h3 {
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
}#pricing-table .plan:nth-child(4) h3 {
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}#pricing-table h3 span {
display: block;
font: bold 25px/100px Georgia, Serif;
color: #777;
background: #fff;
border: 5px solid #fff;
height: 100px;
width: 100px;
margin: 10px auto -65px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}/* --------------- */
#pricing-table ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}#pricing-table li {
border-top: 1px solid #ddd;
padding: 10px 0;
}/* --------------- */
#pricing-table .signup {
position: relative;
padding: 8px 20px;
margin: 20px 0 0 0;
color: #fff;
font: bold 14px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
background-color: #72ce3f;
background-image: -moz-linear-gradient(#72ce3f, #62bc30);
background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));
background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
background-image: -o-linear-gradient(#72ce3f, #62bc30);
background-image: -ms-linear-gradient(#72ce3f, #62bc30);
background-image: linear-gradient(#72ce3f, #62bc30);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}#pricing-table .signup:hover {
background-color: #62bc30;
background-image: -moz-linear-gradient(#62bc30, #72ce3f);
background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));
background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
background-image: -o-linear-gradient(#62bc30, #72ce3f);
background-image: -ms-linear-gradient(#62bc30, #72ce3f);
background-image: linear-gradient(#62bc30, #72ce3f);
}#pricing-table .signup:active, #pricing-table .signup:focus {
background: #62bc30;
top: 2px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
}/* --------------- */
.clear:before, .clear:after {
content:"";
display:table
}.clear:after {
clear:both
}.clear {
http://studiojphotography.ca/prices/
zoom:1
}February 19, 2017 at 11:44 am #201604AndykevParticipantYou posted this in two areas of the forum. Was answered in General section. It is showing up fine, just clear your cache and refresh.
February 19, 2017 at 11:48 am #201605Victor FontModeratorYour pricing table is displaying just fine.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet? -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.