I have designed a pricing form like the one shown below:
To view a full page version of my code for easier reading, please click on the link provided.
@import url('http://fonts.googleapis.com/css?family=Indie+Flower');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
body{
background-color: rgb(237, 237, 237);
}
#pricing{
width: 1340px;
/* margin: 100px auto; */
font-family: 'Open Sans', Helvetica;
}
.price_card{
width: 295px;
max-height: 173px;
background: rgb(255, 255, 255);
display: inline-table;
top: 0;
border: 1px solid green;
}
.price_card:not(:last-child){
margin-right: 32px;
}
.header{
color: rgb(255, 255, 255);
background-color: rgb(113, 191, 68);
font-size: 20px;
font-weight: 100;
height: 68px;
display: block;
text-align: center;
padding: 28px 0 0px;
}
.price{
width: 100%;
font-size: 18px;
font-weight: 300;
display: block;
text-align: center;
padding: 10px 0 10px;
}
.name{
width: 100%;
font-size: 25px;
font-weight: 100;
display: block;
text-align: center;
padding: 0;
}
.features{
list-style: none;
text-align: center;
color: rgb(255, 255, 255);
background-color: rgb(144, 205, 109);
margin: 0;
padding: 0;
}
.features li{
margin: 0 35px;
padding: 20px 15px;
width: 200px;
}
.features li:not(:last-child){
border: 1px solid rgb(242, 242, 242);
border-top: 0;
border-left: 0;
border-right: 0;
}
button{
color: rgb(255, 255, 255);
border: 0;
border-radius: 0px;
height: 42px;
width: 177px;
display: block;
font-weight: 200;
background-color: rgb(113, 191, 68);
font-size: 18px;
text-transform: uppercase;
margin: 20px auto 35px;
}<div id="pricing">
<div class="content">
<h1>PRICE POPULAR CLOUD SERVICES</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptates magnam nam eligendi, maiores quis, <br />ut perspiciatis odit eos accusamus modi sequi laborum veritatis quasi harum dolorem maxime, magni at!
</p>
<br />
</div>
<div class="price_card">
<div class="header">
<span class="name">Google Cloud</span>
</div>
<ul class="features">
<span class="price">800 USD</span>
</ul>
<button>More info</button>
</div>
<div class="price_card">
<div class="header">
<span class="name">Amazon Cloud</span>
</div>
<ul class="features">
<li class="price">1000 USD</li>
</ul>
<button>More info</button>
</div>
<div class="price_card">
<div class="header">
<span class="name">GO DADDY</span>
</div>
<ul class="features">
<li class="price">1200 USD</li>
</ul>
<button>More info</button>
</div>
<div class="price_card">
<div class="header">
<span class="name">PLUS+ </span>
</div>
<ul class="features">
<li class="price">2000 USD</li>
</ul>
<button>More info</button>
</div>
</div>I am facing two issues and need your help to resolve them:
As you can observe:
- The first element with class
price_cardhas applied CSS styles while the others do not.
Why am I encountering this problem?
- Being inexperienced in creating responsive websites, could you provide an example at a resolution of approximately 800x400 pixels where only two cards scale in each row?