Разделение экрана

Question

Подскажите пожалуйста как сделать так же как на фото. Имеется ввиду разделить на две части.

Answer 1

Один и вариантов:

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  height: 100%;
  width: 50%;
}

div:first-child {
  background: #ccc;
}

div:nth-child(2) {
  background: #eee;
}

<div></div>
<div></div>

https://jsfiddle.net/fLycw7bt

Answer 2

Пример

* {
  box-sizing: borde-box;
  margin: 0;
  padding: 0;
}

.block__left,
.block__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-basis: 0;
  flex-grow: 1;
  padding: 3em;
}

.block__left {
  background-color: #F8F9F9;
}

.block__right {
  background-color: #EAEAEA;
}

@media (min-width:568px) {
  .block {
    display: flex;
  }
  .block__left,
  .block__right {
    flex-basis: 0;
    flex-grow: 1;
  }
}

<div class="block">
  <div class="block__left">
    Left
  </div>
  <div class="block__right">
    Right
  </div>
</div>

Answer 3

Статичный вариант, как в вопросе

В левый, родительский блок добавлен, блок SVG, который служит для адаптивности текста, линий Skills В дальнейшем при желании можно будет добавить анимацию этих линий

.wrapper {
    display: flex;
     flex-direction:row; 
     background:grey;
     width:80vw;
     height:auto;
    
}
.txt {
font-family:sans-serif;
font-size:14px;
font-weight:bold;
text-align:left;
}
.skills {
font-family:sans-serif;
font-size:32px;
font-weight:bold;
}

.item {
flex-grow: 1;
width:50vw;
height:80vh;
}
.item-1 {

background:#F8F9F9;

}
.item-2 {

background:#EAEAEA;
}

<div class="wrapper">
<div class="item item-1">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 580 500" preserveAspectRatio="none"  >  
    <rect width="100%" height="100%" fill="none" />
    <text class="skills" x="10%"     y="110" >Professional Skills</text> 
      <text  class="txt" x="10%"     y="180" >UI/UX DESIGN 75%</text>
   <rect x="30" y="200" width="500" height="5"  fill="#D9D9D9" /> 
    <rect x="30" y="200" width="375" height="5"  fill="#00CAC4" />  

<text class="txt" x="10%" y="270" >WEB DEVELOPMENT 90%</text> 
   <rect x="30" y="290" width="500" height="5"  fill="#D9D9D9" /> 
    <rect x="30" y="290" width="450" height="5"  fill="#00CAC4" />   

<text class="txt" x="10%" y="360" >MARKETING 65%</text> 
   <rect x="30" y="380" width="500" height="5"  fill="#D9D9D9" /> 
    <rect x="30" y="380" width="325" height="5"  fill="#00CAC4" />      
</svg> 

</div>
<div class="item item-2"></div>
</div>

Как вариант + анимация левой половины при наведении:

.container {
  width: 100%;
  display:flex;
  flex-wrap:wrap; 
}

.left {
  width: 50%;
  background: #F8F9F9;
  color:white;
  font-size:36px;
  text-align:center;
  transition:1s;
}

.right {
  width: 50%;
  z-index:-1;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0;
  display:block;
}

.container:hover .left {
  margin-right:-50%;
  width:100%;
}
.txt {
font-family:sans-serif;
font-size:14px;
font-weight:bold;
text-align:left;
}
.skills {
font-family:sans-serif;
font-size:32px;
font-weight:bold;
}

<div class="container">
  <div class="left">
  <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="580" height="500" viewBox="0 0 580 500"  >  
    <rect width="100%" height="100%" fill="none" />
    <text class="skills" x="0%"  y="110" >Professional Skills</text> 
      <text  class="txt" x="0%"  y="180" >UI/UX DESIGN 75%</text>
   <rect x="0" y="200" width="100%" height="5"  fill="#D9D9D9" /> 
    <rect x="0" y="200" width="75%" height="5"  fill="#00CAC4" />  

<text class="txt" x="0%" y="270" >WEB DEVELOPMENT 90%</text> 
   <rect x="0" y="290" width="100%" height="5"  fill="#D9D9D9" /> 
    <rect x="0" y="290" width="90%" height="5"  fill="#00CAC4" />   

<text class="txt" x="0%" y="360" >MARKETING 65%</text> 
   <rect x="0" y="380" width="100%" height="5"  fill="#D9D9D9" /> 
    <rect x="0" y="380" width="65%" height="5"  fill="#00CAC4" />   
</svg>
    
  </div>
  
  <div class="right">
     <img src="https://i.stack.imgur.com/nA0yc.jpg">
  </div>
</div>

БЛОГ НА HUSL

Разделение экрана

Ответы (3 шт):