контейнера, я пытаюсь сохранить все это в нем
Код: Выделить всё
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;
}
}Код: Выделить всё
Price Tiers
[*]
[img]icons/icon1.png[/img]
Personal
[list]
Custom domains
[*]Sleeps after 30 mins of inactivity
[/list]
Free
[url=#/]Sign up[/url]
[img]icons/icon2.png[/img]
Small team
[list]
[*]Never sleeps
[*]Multiple workers for more powerful apps
[/list]
$150
[url=#/]Free trial[/url]
[img]icons/icon3.png[/img]
Enterprise
[list]
[*]Dedicated
[*]Simple horizontal scalability
[/list]
$400
[url=#/]Free trial[/url]
Я пытался превратить контейнер панели во флексбокс в надежде, что все будет просто поместился прямо внутри него, но ничего не получалось, изображения и элементы продолжали выходить за пределы контейнера панели в тело
Подробнее здесь: https://stackoverflow.com/questions/785 ... -container
Мобильная версия