im trying to my a flyer with a pricing tier of what you get for each tier with a corresponding image to go with it. but if you look at the code the image and elements go beyond the white panel
container im trying to keep it all in it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price Tiers</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">
<link rel="stylesheet" href="pricing.css.css">
</head>
<body>
<div class="panel pricing-table">
<div class="pricing-plan">
<img src="icons/icon1.png" alt="" class="pricing-img">
<h2 class="pricing-header">Personal</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Custom domains</li>
<li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
</ul>
<span class="pricing-price">Free</span>
<a href="#/" class="pricing-button">Sign up</a>
</div>
<div class="pricing-plan">
<img src="icons/icon2.png" alt="" class="pricing-img">
<h2 class="pricing-header">Small team</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Never sleeps</li>
<li class="pricing-features-item">Multiple workers for more powerful apps</li>
</ul>
<span class="pricing-price">$150</span>
<a href="#/" class="pricing-button is-featured">Free trial</a>
</div>
<div class="pricing-plan">
<img src="icons/icon3.png" alt="" class="pricing-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
<a href="#/" class="pricing-button">Free trial</a>
</div>
</div>
</body>
</html>
html{
box-sizing: border-box;
}
body {
background-color: blue;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.panel {
display: flex;
background-color: whitesmoke;
flex-direction: column;
text-align: center;
max-width: 960px;
width: 100%;
text-transform: uppercase;
border-radius: 25px;
padding: 15px;
}
.pricing-img {
margin-bottom: 25px;
}
.pricing-header {
color: gray;
text-transform: uppercase;
}
.pricing-features {
border-top: 1px solid gray;
letter-spacing: 1px;
color: blue;
font-weight: 600;
font-size: 12px;
}
.pricing-features-item {
margin: 25px 0;
border-bottom: 1px solid gray;
}
.pricing-price {
display: block;
color: blue;
font-weight: 600;
font-size: 25px;
margin: 25px 0;
}
.pricing-button {
border-radius: 20px;
border: 1px solid blue;
color: blue;
padding: 24px 50px;
margin: 25px 0;
}
.pricing-button.is-featured {
background-color: blue;
color: white;
}
.pricing-button.is-featured:hover {
background-color: aqua;
color: white;
}
@media (min-width:900px) {
.panel {
display: flex;
flex-direction: row;
}.pricing-plan {
border-right: 1px solid gray;
padding: 25px 50px;
}
.pricing-plan:last-child {
border-right: none;
}
}
iv tryed to turn the panel container into a flexboxe in hopes that everything will just fit right inside of it but nothing works the images and elements keeps going beyond the panel container and into the body
New contributor
Akilou Issifou is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.