верстка двух блоков

Question

Мне нужно сверстать такую страницу html и css, но у меня не получается разделить главный блок и навигационный.Вообщем нужно сделать так, чтобы блоки которые обведены красным цветом были отдельны и размещались в линию, я написал код, но он не работает.[![

body {
    margin: 0px;
    padding: 0px;
}

li {
    display: inline-block;
}

.content {
    background:linear-gradient(145.59deg, #29FF8C -19.48%, #3AC1A8 22.2%, #7000FF 133.44%, #7ECAE2 137.8%);
    width: 100%;
    height: 821px;
}

.main_block {
    display: block;
    width: 1200px;
    height: 821px;
    background: rgba(255, 255, 255, 0.7);
    margin-left: 290px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

.nav_block {
    display: block;
    background: red;
    width: 821;
    height: 200px;
}

.blocks {
    display: inline-block;
}

<!DOCTYPE html>
<html>
 <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="profile.css">
  <title>HTML5</title>
 </head>
    
    
 <body>
    <div class = "content">
        <div class = "blocks"><div class = "nav_block"></div></div>
        <div class = "blocks"><div class = "main_block"></div></div>
    
    </div>
 </body>
    
    
</html>

]2]2

Answer 1

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}


.content {
    display: flex;
    height: 100%;
    background: linear-gradient(145.59deg, #29FF8C -19.48%, #3AC1A8 22.2%, #7000FF 133.44%, #7ECAE2 137.8%);
}

.nav_block {
    width: 20%;
    height: 100%;
}

.main_block {
    width: 80%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

<div class="content">
  <div class="nav_block"></div>
  <div class="main_block"></div>
</div>

БЛОГ НА HUSL

верстка двух блоков

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