I am attempting to replicate the design of this webpage using HTML and CSS: https://i.sstatic.net/bFVmg.jpg
But, I am struggling to adjust the padding for the box on the right side. Here is how my version looks currently: https://i.sstatic.net/WMwii.jpg
How can I modify the CSS to eliminate the large white gap at the top of the text? Below is the code I have implemented:
.flexbox {
margin: 1rem 6rem;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
/* background-color: grey; */
}
.ten {
height: 100%;
text-align: center;
flex-basis: 40%;
font-size: 25vw;
letter-spacing: -3rem;
}
.yrs-exp {
min-height: 100%;
display: flex;
flex-direction: column;
flex-basis: 18%;
}
.yrs-exp p {
margin-bottom: 2rem;
}
.yrs-exp button {
text-transform: capitalize;
height: 7vh;
width: 80%;
}
.deats {
display: flex;
min-height: 100%;
flex-basis: 30%;
justify-content: center;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
.deat {
display: flex;
align-items: center;
flex-direction: column;
flex-basis: 49%;
border: solid 1px black;
}
.deat h2 {
font-size: 6vw;
margin-bottom: -0.8rem;
}
.deat p {
text-transform: uppercase;
margin-top: 0;
}<div class="flexbox">
<div class="ten">10</div>
<div class="yrs-exp">
<h1>Years of experience</h1>
<p>
DreamSoft is a team of highly experienced app designers and developers
creating unique software for you.
</p>
<button>GET IN TOUCH</button>
</div>
<div class="deats">
<div class="deat">
<h2>2k</h2>
<p>Apps developed</p>
</div>
<div class="deat">
<h2>40</h2>
<p>Consultants</p>
</div>
<div class="deat">
<h2>12</h2>
<p>Awards</p>
</div>
<div class="deat">
<h2>160</h2>
<p>Employees</p>
</div>
</div>
</div>For reference, here is the codepen link: https://codepen.io/caseycling/pen/yLVdzja