I'm laying out a figma layout Webovio. Interested in the layout of the block 04 Services
Image from this block
There is a code for this block
.page__company-articles {}
.company-articles {}
.company-articles__container {}
.articles__block_container {
max-width: 1140px;
/*margin: 0 auto;*/
margin: 0 -100px;
/*position: absolute;
left: 0;
right: 0;*/
/*top: 0;*/
}
.article__and__comment {
color: rgba(33, 56, 66, 0.6);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
/*margin-left: calc(165/1441*100vw);*/
/*166/1441*100vw*/
/*margin-right: calc(166/1441*100vw);*/
/*166/1441*100vw*/
}
.main-article {
flex: 0 1 50%;
/*padding-right: 100px;*/
padding: 0px 100px;
}
.article__first-note {
margin-top: 120px;
/*120*/
/*margin-left: 166px;*/
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: rgba(77, 83, 60, 0.9);
}
.article__title {
color: #4D533C;
margin-top: calc(29px);
/*margin-left: 166px;*/
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 46px;
}
.article__text {
margin-top: calc(35px);
/*margin-left: 166px;*/
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: rgba(33, 56, 66, 0.6);
}
.article__second-note {
margin-top: calc(42px);
/*margin-left: 166px;*/
font-family: 'FontAwesome';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 18px;
text-decoration-line: underline;
color: #D4D6D4;
}
.comment {
flex: 0 1 50%;
/*padding-left: 100px;*/
box-shadow: 20px 25px 43px rgba(0, 0, 0, 0.18);
padding: 0px 100px;
}
.comment__text {
margin-top: calc(120px);
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
font-size: 24px;
line-height: 40px;
/* or 167% */
color: #4D533C;
}
.icon__and__label {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: calc(50px);
}
.comment__icon {
/*margin-left: calc(40px);*/
}
.label {
margin-top: calc(-50px);
/*14px*/
margin-left: calc(30px);
}
.comment__author {
color: #4D533C;
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 22px;
line-height: 33px;
/* identical to box height */
color: #4D533C;
}
.comment__author-position {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
/* identical to box height */
color: #152934;
padding-top: calc(6px);
}
@media (max-width: 1242px) {
.main-article,
.comment {
flex: 0 1 100%;
text-align: center;
padding-left: 0px;
padding-right: 0px;
}
}
<section class="page__company-articles company-articles">
<div class="company-articles__container articles__block_container">
<div class="article__and__comment">
<article class="main-article">
<div class="article__first-note">What we do for you</div>
<div class="article__title">Strategy. Design Content. Technology Development </div>
<div class="article__text">There’s no secret sauce, no wizard behind the curtain. What makes Aerolab tick is an interdisciplinary team with a framework that fosters candid collaboration.</div>
<div class="article__second-note">More know About us</div>
</article>
<article class="comment">
<div class="comment__text">With More than 10 Years of Knowledge and Expertise we Design and Code Websites and Apps, We Build Brands and Help Them Succeed</div>
<div class="icon__and__label">
<div class="comment__icon">
<img src="https://i.stack.imgur.com/NAeUC.png" alt="author">
</div>
<div class="label">
<div class="comment__author">Genevieve Rodriquez</div>
<div class="comment__author-position">Founder & CEO, Webovio</div>
</div>
</div>
</article>
</div>
</div>
</section>
Tell me how to make the block shown here in full-screen mode look like it does on a one-line layout while maintaining the value of the flex-wrap
property. Blocks with classes main_article
and comment
should be on one line with some padding between them and some padding from the screen edges. The line above with company logos is of no interest, it does not need to be typeset