Создание контента
Для следующего примера нужен какой нибудь текст, который будет расположен на главной странице. У бота с искусственным интеллектом был запрошен текст на тему: «почему выгодно работать с нашей компанией?». Текст был запрошен на четыре абзаца по два предложения.
Давайте сразу же обернем абзацы тегами <p> и </p> и поместим все в контейнер <div> с классом «content»:
<p>Мы предлагаем широкий спектр услуг, адаптированных под индивидуальные потребности каждого клиента. Наша компания стремится к долгосрочному сотрудничеству, поэтому мы всегда заботимся о высоком качестве работы и стремимся превзойти ожидания наших клиентов.</p>
<p>С нами сотрудничают только опытные и высококвалифицированные специалисты, которые гарантируют качественное выполнение всех поставленных задач. Мы постоянно совершенствуем свои навыки и следим за новыми тенденциями в своей сфере деятельности, чтобы предложить вам самые современные и эффективные решения.</p>
<p>Мы ценим ваше время и ресурсы, поэтому всегда стремимся к максимально оперативному выполнению заказов. Благодаря четкой организации работы и использованию современных технологий, вы сможете получить желаемый результат в кратчайшие сроки, не затрачивая лишних усилий и средств.</p>
<p>Сотрудничество с нами - это не только выгодное вложение, но и возможность сэкономить время, силы и средства. Мы гарантируем индивидуальный подход к каждому клиенту, а также соблюдение всех установленных сроков и обязательств. Благодаря этому, мы завоевали доверие многих клиентов, и число их продолжает расти.</p>
</div>
Получилось вот так:
Это не совсем то что нам нужно поэтому давай те добавим стили:
margin 0 auto ;
font-size 15pt; ;
Вроде стало нормально, но все равно как то пресно. Нужно добавить картинки. У искусственного интеллекта были запрошены изображения с офисными работниками.
Картинки были уменьшены до размера 150 на 150 пикселей. Но можно уменьшить с помощью width и height. Эти картинки поместим в папку images. Давайте вставим их на страницу.
Первую картинку вставим в первый абзац в право и текст будет обтекать ее по левому краю. Для реализации этого вставим в первый абзац после тега <p> следующий код:
А вторую картинку вставим в третий абзац с левой стороны. Для этого вставим после тега <p> в третьем абзаце следующий код:
И для реализации задуманного нам нужно добавить код в файл стилей. Для первой картинки будет следующий код:
padding 0 20px ;
Здесь свойство float:right перемещает изображение в право. Свойство padding создает отступы вокруг картинки. Сверху и снизу ноль пикселей, а справа и слева двадцать пикселей. Справа тоже добавили отступ потому что картинка сильно отдалилась от текста.
Для второй картинки добавим следующие стили:
padding-right 15px ;
Здесь все тоже самое, но свойство float перемещает изображение влево.
Но можно было не использовать идетификаторы, а сразу установить расположение картинок внутри тега с помощью атрибута align. И код с атрибутом aling для второй картинки будет выглядить так:
