Price Table with Unique CSS3 Design Shapes

I'm currently working on designing a price table that resembles a bone shape. I stumbled upon some code on CodePen that could help me achieve this look, but I'm unsure of how to tweak and merge it.

I'm facing difficulties when it comes to sharing the links to the code, but you can find the bone-shaped design here:

CSS3: Bone shape

http://codepen.io/Rv-Designs/pen/fthsp

@charset "utf-8";
 * {
  padding: 0;
  margin: 0;
  border: 0;
}
...
...
...
  <!-- .Container ends here -->
  </div>
  <!-- .Row ends here -->
</div>

My vision for the price table is to resemble something like this:

htmlcsscustomizationshapes

Answer №1

If you're looking for a design inspiration, you might want to consider the following:

@charset "utf-8";

* {
padding:0; 
margin:0; 
border:0;
}

body {
   background: #d5d5d5;
font-family:trebuchet MS;
color:#6B6B6B;
   border: 0 none;
   margin: 0;
font-size:13px;
   padding: 0;
}
#wrapper{
  padding: 60px 0px;
}
.container{...}
.row{...}
.circle{...}
.shape-1,
.shape-2,
.shape-3,
.shape-4 {...}

.link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  

<div id="wrapper">
    <div class="container">
        <div class="row bone-container">
              <div class="shape-1 col-md-3">
                  <div class="circle c1 img-circle">
                      <h4 class="blue">Basic Plan</h4>
                      <span class="icon blue"><i class="fa fa-eur"></i></span>
                      <span class="price-large blue">8,</span>
                      <span class="price-small">90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-info">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
          
              <div class="shape-2 col-md-3">
                  <div class="circle c2 img-circle">
                      <h4 class="yellow">Starter Plan</h4>
                      <span class="icon yellow"><i class="fa fa-eur"></i></span>
                      <span class="price-large yellow">24,</span>
                      <span class="price-small">90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-warning">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
          
          <div class="shape-3 col-md-3">
                  <div class="circle c3 img-circle">
                      <h4 class="green">Premier Plan</h4>
                      <span class="icon green"><i class="fa fa-eur"></i></span>
                      <span class="price-large green">54,</span>
                      <span class="price-small">90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-success">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
          
          <div class="shape-4 col-md-3">
                  <div class="circle c4 img-circle">
                      <h4 class="red">Deluxe Plan</h4>
                      <span class="icon red"><i class="fa fa-eur"></i></span>
                      <span class="price-large red">8,</span>
                      <span class="price-small">90</span>
                      <p>Great for small Business</p>
                      <button type="button" class="btn btn-danger">Choose</button>
                  </div>
              </div><!-- .Col-md-3 ends here -->
        </div><!-- .Container ends here -->
    </div><!-- .Row ends here -->
</div>

http://codepen.io/anon/pen/ZGmOdz

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mobile device causing HTML margins to shrink

I've attempted to utilize a few posts here that discuss resizing for mobile devices, but unfortunately, I'm having trouble getting it to work correctly. The margins are causing all the elements to be squished together when viewing the site on a m ...

htmlcss

User interface for creating a platform resembling Product Hunt or Reddit

I am currently developing a web application similar to Product Hunt. The back-end API is up and running smoothly, and I have successfully implemented AngularJS for the front-end. However, I lack experience in designing the look and feel of the site. Shou ...

cssangularjstwitter-bootstrap

Leveraging Python Variables in HTML within a multiline Python string

Attempting to create HTML code using Python and run it from a browser. Check out the code below: import webbrowser f = open('image.html','w') message = """<html> <head></head> <body><img src="URL"></b ...

pythonhtml

Obtaining user input from a content editable div in a React component

Get content from editable div const contentref=useRef() const handleclick=()=>{ setContent(contentref.current.value) console.log(contentref.current.value) } Element Properties <div name="textbox" ref ={contentref} cla ...

htmlreactjscontenteditablereact-dom

Styling elements with CSS to display inline blocks next to each other while taking up the full

I am facing a challenge with two text blocks of varying lengths. The left block contains short text while the right block may have lengthy content. Both blocks need to be displayed side by side, occupying 100% of the parent's width exactly. For a sim ...

htmlcssweb

How to Conceal Axis Label in an HTML5 Canvas Line Chart

Is there a way to hide the x-axis label from a line chart without hiding the y-axis label as well? I tried using scaleFontSize: 0,, but that ended up hiding both axis labels. I only want to hide the x-axis label. var lineOptions = { ///Boo ...

javascripthtmlchartshtml5-canvaslinechart

Disregarding boundaries set by divisions

Trying to keep things concise here. I have a division called "the box" with a fixed width of 1200px that contains various other divisions. One of these divisions is a links bar, known as the "pink bar", which has a width of 100% and a height of 25px. My is ...

csslayoutcss-float

Command Internet Explorer 9 to disregard media queries and instead adhere to the minimum width rule

Is there a way to prevent IE9 from recognizing media queries or following min-width? I have created a responsive design for mobile devices using media queries on my website, and they function perfectly in modern browsers. However, some users still use old ...

css

Customize the CSS styling of third-party components in different pages using NextJS

When working with third-party components, you can include their styles by importing their stylesheet into your component or _app.tsx file. For detailed instructions on how to do this, you can refer to Next.js documentation. Another option is to add the sty ...

cssreactjsnext.jsfullcalendar

Ways to programmatically increase the names of variables in JavaScript?

I am currently working on developing a user-friendly recipe app with Node/Express. Users are able to access a 'new recipe' HTML form where they can easily add as many ingredients as they desire by clicking the 'add ingredient' button. U ...

javascripthtmlnode.jsexpress

Issues with message display validation in jQuery

Validation has been applied to the form, and there are div elements within the input fields with corresponding IDs. The goal is to display error messages within those divs. Specifically, if an input field is missing, the errorMessage should be set in the ...

javascriptjqueryhtmlcssjquery-validate

What is the best way to reposition an element to the end of its flexbox container?

I have a flexbox-container that contains multiple details-elements with flex-wrap behavior. My goal is to have a details-element move below the other elements within the container when it is opened. For example, I want it to go from this initial layout: ...

javascripthtmlcssflexboxhtml-tag-details

What steps can I take to restore my text_field to its original dimensions?

I recently added the token-input-mac.css file to my project and noticed that my text_area has become extremely small, resembling a text input field. How can I maintain the new css styling while only adjusting the height of the text_field? Here is the toke ...

css

Choose the selectize item to always move to the front

Hey there, I'm currently using the selectize plugin to incorporate tags into my website. Everything is working well, except for the issue of the drop-down item being obscured by some of my other divs. I'm looking to have them function more like ...

jqueryhtmlcssselectize.js

Elements contained within the enclosing div will not be visible

I'm currently working on a responsive webpage, and I've encountered a new issue that I can't seem to resolve. I've wrapped three separate divs within a parent div, but for some unknown reason, the child divs are not displaying. Can some ...

htmlcss

When accessing the innerHTML and outerHTML properties on an HTMLElement, they may return undefined without triggering

Task: My goal is to take an HTML string, make changes to certain attributes of image tags within it, and then return the modified HTML string. The function I have developed follows these steps: private resolveImagesInHTML (body: string): string { le ...

javascripthtmltypescriptreact-nativehtml-parsing

Animating a div in jQuery by creating a duplicate

I've spent hours scouring Google and StackOverflow for a solution to this particular issue I'm facing, but haven't been able to find one. Here's the problem: I'm currently in the process of creating a shopping website. When a user ...

javascriptjqueryhtmlcss

The color of the navbar-toggler-icon in Bootstrap cannot be altered

While working on customizing my Bootstrap 5 navbar, I encountered an issue with changing the color of the navbar-toggler-icon. The preset colors, navbar-light and navbar-dark, didn't align with my theme, so I attempted to change the color to pure whit ...

htmlcsstwitter-bootstrapbootstrap-5

Add a file to the input field using JavaScript and the input type="file"

I am facing the challenge of sending a file (up to a few MB) generated by JavaScript to a server using POST (not ajax POST). I am wondering how I can add a file to an input type="file" using JavaScript. After checking Pre-Populate HTML form file input, it ...

javascripthtmlhttp

Guide to retrieving a file stored locally with VueJS

Currently, I am working on an upload system and I want to provide users with a sample template. The template is stored locally in a subfolder within the assets directory. My goal is to access this template in my VueJS component and display a link to it on ...

htmlcsvdownloadvue.js