<section class="s-contacts">
<div class="s-contacts__img">
<img src="https://www.meme-arsenal.com/memes/36e497fe587e57c31d2f9c7797def0d2.jpg" alt="">
</div>
<div class="s-contacts__content contacts">
<div class="contacts__text">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi, iste! Atque molestiae aperiam commodi delectus ex! Doloremque natus alias dignissimos, fugiat delectus qui voluptate deserunt iusto ipsum corrupti laboriosam voluptatibus fuga sequi amet tenetur minus labore earum dolores culpa quos. Iure, ratione ut necessitatibus voluptatem laboriosam praesentium commodi doloremque ipsa dolor atque ab temporibus, possimus rem nostrum nam? Quisquam corrupti in quia nemo, aperiam rem tenetur quasi quis esse eius inventore neque tempore ducimus quas ipsum magni dignissimos nisi voluptatibus unde exercitationem. Obcaecati fuga odit aut fugit autem sed ducimus maiores dolorum facere alias amet beatae natus excepturi, expedita cumque commodi? Consequuntur officiis nam, consequatur ipsum assumenda sapiente. Nostrum, assumenda voluptatibus! Aperiam voluptatum voluptatibus omnis id quisquam molestias labore assumenda, incidunt atque quia adipisci reiciendis, earum laudantium similique deleniti? Quasi consectetur laudantium quidem itaque! Explicabo, mollitia. Officiis sequi alias aliquid esse corrupti delectus repellendus vel molestias eligendi. Ipsam ratione beatae corporis molestias debitis quas odio iure sapiente, facilis qui ea consectetur? Quos, odit a ut dolorum eius accusamus sequi possimus, corporis voluptate alias consequuntur officia architecto! Dolorum quisquam quaerat iusto quam adipisci provident. Odit ipsum aliquid ratione? Deserunt, hic blanditiis? Nobis quia fuga impedit corrupti repellat sint, ipsum odit vel?</p>
</div>
<div class="contacts__socials">
<div class="contact-item-1">
<h1>Наши контакты</h1>
<ul>
<li><a href="#">Ссылка на социальную сеть номер 1</li>
<li><a href="#">Ссылка на социальную сеть номер 2
<li><a href="#">Ссылка на социальную сеть номер 3</a>
</ul>
</div>
<div class="contact-item-2">
<h2>
Дополнительный блок с контактами
</h2>
<ul>
<li>Ссылка на социльную сеть номер 1</li>
<li>Ссылка на социльную сеть номер 2</li>
<li>Ссылка на социльную сеть номер 3</li>
</ul>
</div>
</div>
</div>
</section>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.s-contacts {
width: 100%;
background: linear-gradient(261.88deg, #765D69 0%, rgba(118, 93, 105, 0.7) 100%);
display: flex;
padding: 20px;
}
.contacts {
&__socials {
display: flex;
justify-content: space-around;
margin: 20px;
}
&__text {
margin: 20px;
p {
color: white;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.