მოცემულ ვიდეოში ვასრულებთ ბლოგის დეტალურ გვერდს, რომლის დროსაც ვიყენებთ display:grid თვისებას
HTML კოდი
<div class="container blog-detail">
<img class="main-img" src="./assets/img/card-img.jpg" alt="ბლოგის სათაური">
<h1>ჩვენი სტატიის პირველი სათაური</h1>
<p>დეტალური აღწერა ...</p>
<p>დეტალური აღწერა ...</p>
<div class="similar-container">
<h2>მსგავსი სტატიტები</h2>
<div class="card">
<div class="img-container">
<img class="card-img" src="./assets/img/card-img.jpg" alt="ჩვენი პრიველი სტატია">
<img class="fav-img" src="./assets/icons/heart.svg" alt="ფავორიტებში დამატების იქონი">
<span>12/01/2022</span>
</div>
<div class="card-body">
<h3>სტატიის ჩვენებური სათაური</h3>
<p>
ქარდის აღწერა
</p>
<div class="action-container">
<button class="btn">მეტი...</button>
<div>
<img src="./assets/icons/share.svg" alt="გაზიარება">
</div>
</div>
</div>
</div>
...
...
...
</div>
</div>
CSS კოდი
.container.blog-detail .main-img {
width: 100%;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.container.blog-detail .similar-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 30px;
}
.container.blog-detail .similar-container h2 {
grid-column: 1 / span 4;
}
შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა
ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით