Помогите с базовой разметкой, прошу

Question

Помогите с базовой разметкой, прошу

meow dynasty Профи (638), на голосовании 3 дня назад

Нужно написать html css код с таким расположением div, как на картинке. (Сверху форма Имя, сообщение. Кнопка отправить) Никакого контента не нужно, только такой макет. Чем проще код, тем лучше. на флексах

Answer 1

 <!DOCTYPE html> 
<html> 
<head> 
    <style> 
        .container { 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 20px; 
        } 
 
        .form { 
            margin-bottom: 20px; 
        } 
 
        .form input,  
        .form textarea { 
            width: 100%; 
            margin-bottom: 10px; 
            padding: 5px; 
        } 
 
        .form button { 
            background: red; 
            color: white; 
            border: none; 
            padding: 5px 20px; 
            cursor: pointer; 
        } 
 
        .cards { 
            display: flex; 
            gap: 20px; 
        } 
 
        .card { 
            flex: 1; 
            border: 2px solid red; 
            height: 300px; 
        } 
    </style> 
</head> 
<body> 
    <div class="container"> 
        <form class="form"> 
            <input type="text" placeholder="Имя"> 
            <textarea placeholder="Сообщение"></textarea> 
            <button type="submit">Отправить</button> 
        </form> 
         
        <div class="cards"> 
            <div class="card"></div> 
            <div class="card"></div> 
            <div class="card"></div> 
        </div> 
    </div> 
</body> 
</html>