Q:

Arrange DIVs in the right position

I'm having huge problems trying to arrage my DIVs, as I found that this thing is not as simple as it seems, just put a DIV and inside that DIV another 2 and you're done. The image bellow shows how I would want my page to be structured:
sur1.
surf2: surfleft, surfright. surf3. surf4 Where . means another line and , means that DIVs should be one next to another.
And also can't center that image vertical and horizontall middle on surfright from surf 2 parent.

@font-face 
{
    font-family: FONT;
    src: url(Montserrat-Regular.ttf);
}

p.title1
{
 font-size: 2.5em;
 margin: 0;
}

p.title2
{
 font-size: 3em;
}

.i1
{
 height: 400px;
    float: right;
    display: block;
    margin-top: 150px;
 
}

div.surf1
{

 display: block;
 background-image: url("surf1.jpg");
 background-position: center;
 background-size: cover;
 height: 600px;
}

div.surf2 {
    width: fit-content;
    position:absolute;
    background: #41c3ac;
    height: 600px;
}


div.surfleft {
    float:left;
    display: block;
    width: 45%;
    padding-top: 80px;
    height: 600px;
 background: #8C78B1;
 }

div.surfright {
 float: right;
 background: #ff6b57;
 }

div.surf3
{
 background: #ff6b57;
 height: 600px;
}

div.surf4
{
 background: #8C78B1;
 height: 600px;
}

div.text1
{
 padding-top: 100px;
 color: white;
 text-align:center;
 font-size: 2.5em;
}

div.button
{
 text-align: center;
 font-size: 1.5em;
 margin: 0 auto;
 width: 15%;
 padding: 8px;
 border: 2px solid;
 border-color: #e7dd84;
 background-color: rgba(236,229,167,0.2);
 color: #e7dd84;
 transition: 0.35s;

}
div.button:hover
{
 background-color: white;
 color: black;
 border-color: white;
 transition: 0.35s;
}

body
{
 margin: 0;
 font-family: FONT;
 color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
 <div class="text1">
  <b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
 </div>
    <br><br><br><br><br>
 <div class="button">
  Go to site
 </div>
</div>
<div class="surf2">
 <div class="surfleft">
     <p class="title1">Interractive games</p>
         <ul style="font-size: 1.5em">
         <li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
            <li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>   
          </ul>
     </div>
     <div class="surfright">
      <img  src="console.png" alt="404 Image not Found" height="400px">
     </div>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>

A:

Please note that you may use correct width values to have fine edges in your design.

div.surf1
{
 display: block;
 background-color: #cdcdcd;
 height: 100px;
}

div.surf2 {
    background: #41c3ac;
    height: 100px;
}

div.surfleft {
    float:left;
    display: block;
    width: 50%;
    height: 100px;
 background: #8C78B1;
 }

div.surfright {
 float: right;
    width: 50%
 background: #ff6b57;
 }

div.surf3
{
 background: #ff6b57;
 height: 100px;
}

div.surf4
{
 background: #8C78B1;
 height: 100px;
}

body
{
 margin: 0;
 font-family: FONT;
 color: white;
}
<div class="surf1">
 <div class="text1">Surf 1</div>
</div>
<div class="surf2">
 <div class="surfleft">Surf left</div>
     <div class="surfright">Surf right</div>
</div>
<div class="surf3">Surf 3</div>
<div class="surf4">Surf 4</div>

