მოცემულ ვიდეოში ვასრულებთ კონტაქტის გვერდს, რომელიც აწყობილია 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;
}
შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა
ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით