Pricing Table
How do I make an pricing table?
What is a pricing table? How do you make a pricing table? This script and codes were developed by Alan Neese on 30 October 2022, Sunday.
Pricing Table - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pricing Table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="pricing-grid"> <div class="plan plan1"> <h2>Cat</h2> <p>Common, yet regarded by many as the worst house pet.</p> <ul class="features"> <li>Scratches everything</li> <li>Easily lost for days</li> <li>Kind of a bummer</li> </ul> <p class="price">free</p> <a href="#" class="cta">
Pricing Table - Script Codes CSS Codes
/* Some CSS Setup - nothing to do with flexbox */
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { font-family: sans-serif; margin: 0; background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}
a { color:white;
}
.plan ul { margin: 0; padding: 0; list-style: none;
}
.plan ul li { border-bottom: 1px solid rgba(0,0,0,0.1); padding:10px;
}
.plan ul li:last-child { border-bottom: 0;
}
.plan a { text-decoration: none; background:#FEFF00; padding:10px; color:black; border-radius:4px;
}
.plan h2 { text-transform: uppercase; color:white; letter-spacing: 2px; text-shadow:3px 3px 0 rgba(0,0,0,0.1);
}
.price { font-size: 50px; font-family: serif; margin: 10px 0;
}
/* Flex Container!!! */
.pricing-grid { max-width:750px; margin: 0 auto; display:flex;
/* align-items:center; */
}
.plan { background:rgba(255,255,255,0.2); margin:20px; padding:20px; border-radius: 4px; text-align: center; flex:1; display:flex; flex-wrap:wrap;
}
.plan > * { flex:1 1 100%;
}
.plan .cta { align-self:flex-end;
}
Developer | Alan Neese |
Username | alanneese |
Uploaded | October 30, 2022 |
Rating | 3 |
Size | 2,234 Kb |
Views | 10,120 |
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!
Name | Size |
RandomQuote | 2,811 Kb |
Flexbox Header | 1,868 Kb |
Images abound | 1,643 Kb |
Bulma Horizontal Form | 2,216 Kb |
Css cards | 1,700 Kb |
Container Hero | 1,613 Kb |
Click to copy | 1,722 Kb |
Hero Overlay | 1,639 Kb |
Big Letter | 2,020 Kb |
Lou Brock Tribute Page | 2,006 Kb |
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!
Name | Username | Size |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Rotate Demo | Agelber | 3,061 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Formations | Cantelope | 5,731 Kb |
Sass Radar | Jlong | 6,887 Kb |
Apex Calculator | Michaelwnelson | 2,370 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Random Gradients - JS | Aldlevine | 2,026 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!