კონტაქტის გვერდის დასრულება

მოცემულ ვიდეოში ვასრულებთ კონტაქტის გვერდს, რომელიც აწყობილია display: grid;-ის დახმარებით

 კონტაქტის HTML კოდი

<div class="container contact">
    <div>
        <h1>კონტაქტის ფორმა</h1>
        <p>შეავსეთ ქვემოთ მოცემული ველები და დააჭირე გაგზავნის ღილაკს</p>
        <form action="">
            <div class="form-group">
                <label for="email">ელფოსტა</label>
                <input type="email" id="email">
            </div>
            <div class="form-group">
                <label for="subjec">თემა</label>
                <input type="text" id="subjec">
            </div>
            <div class="form-group">
                <label for="message">თემა</label>
                <textarea name="" id="message" cols="30" rows="10"></textarea>
            </div>
            <button type="submit">გაგზავნა</button>
        </form>
    </div>
    <div>
        <h2>საკონტაქტო ინფორმაცია</h2>
        <ul>
            <li><strong>ფეისბუქი:</strong> <a href="#">john doe</a></li>
            <li><strong>მისამართი:</strong> ქ.თბილისი, რუსთაველის #1</li>
            <li><strong>ელფოსტა:</strong> john.doe@val-do.com</li>
            <li><strong>ტელეფონი:</strong> 577 71 17 77</li>
        </ul>
    </div>
</div>

 კონტაქტის გვერდის CSS კოდი

.container.contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 800px;
}

.container.contact label {
    display: block;
    font-weight: bold;
    margin-bottom: 15px;
}

.container.contact input, 
.container.contact textarea
{
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    border: 1px solid black;
    padding-inline: 15px;
    outline: none;
    font-size: 14px;
}

.container.contact textarea {
    height: initial;
    padding-block: 15px;
}

.container.contact button {
	background: var(--blue);
	color: white;
	border: 0;
	font-size: 16px;
	padding: 10px 20px;
	margin-bottom: 15px;
}