Добавить в корзинуПозвонить
Найти в Дзене
Дите Индяго

Позиционирование контента на темном фоне через Bootstrap

Небольшая страница с построенным контентом. Первый блок основа, вторая дополнение со списком. Код <style> body { background: #000000; } .top-a { margin-top: 200px; } li { border-bottom: 1px solid rgb(20, 20, 20); padding: 10px; list-style-type: none; } </style> <body> <div class="container top-a"> <div class="row"> <div class="col-8 bg-dark"> <div class="col-12 p-4"> <h2 class="text-white">Заголовок №1</h2> <p class="text-white">Новый текст.. Свежие данные.. Интересно, да? <a href="#" class="text-warning">Next</a></p> </div> <div class="col-12 p-4"> <h2 class="text-white">Заголовок №2</h2> <p class="text-white">Новый текст.. Свежие данные.. Интересно, да? <a href="#" class="text-warning">Next</a></p> </div> <div class="col-12 p-4"> <h2 class="text-white">Заголовок №3</h2> <p class="text-white">Новый текст.. Свежие данные.. Интересно, да? <a href="#" class="text-warning">Next</a></p> </div> </div> <div class="col-4 text-center"> <ul class="text-secondary" > <li>Yellow</li> <li>Green</li

Небольшая страница с построенным контентом. Первый блок основа, вторая дополнение со списком.

Код

<style>
body { background: #000000; }
.top-a { margin-top: 200px; }
li {
border-bottom: 1px solid rgb(20, 20, 20);
padding: 10px;
list-style-type: none;
}
</style>
<body>
<div class="container top-a">
<div class="row">
<div class="col-8 bg-dark">
<div class="col-12 p-4">
<h2 class="text-white">Заголовок №1</h2>
<p class="text-white">Новый текст.. Свежие данные.. Интересно, да? <a href="#" class="text-warning">Next</a></p>
</div>
<div class="col-12 p-4">
<h2 class="text-white">Заголовок №2</h2>
<p class="text-white">Новый текст.. Свежие данные.. Интересно, да? <a href="#" class="text-warning">Next</a></p>
</div>
<div class="col-12 p-4">
<h2 class="text-white">Заголовок №3</h2>
<p class="text-white">Новый текст.. Свежие данные.. Интересно, да? <a href="#" class="text-warning">Next</a></p>
</div>
</div>
<div class="col-4 text-center">
<ul class="text-secondary" >
<li>Yellow</li>
<li>Green</li>
<li>Purple</li>
<li>Lime</li>
<li>White</li>
</ul>
</div>
</div>
</div>
</body>

Смотрится неплохо. Правда нет адаптации контента под мобильные устройства.