ბლოგის გვერდი #2, ვაწყობთ ქარდებს

მოცემულ ვიდეოში ვაწყობთ ბლოგის გვერდისთვის ქარდებს, რომელშიც გამოვა შემდეგი ინფორმაცია

• სტატიის სათაური
• ფავორიტებში დამატების ხატულა (იკონა)
• სტატიის განთავსების თარიღი
• სტატიის აღწერა
• მეტის ნახვის ღილაკი
• გაზიარების ხატულა (იკონა)

 

ვიდეოში გამოყენებული საიტები

• unsplash სტოკ სურათები
• შემთხვევითი ტექსტის გენერატორი (lorem ipsum ქართულად)
• fontawesome ხატულების (იკონების) საიტი
• figma აპლიკაცია, რომელშიც დავხატე ქარდის მონახაზები

 

*საიტები, რომლებიც მივუთითე არის უფასო და შეგიძლიათ გამოიყენოთ ყოველგვარი თანხის გადახდის გარეშე.

 

ვიდეოში ახსნილი card-ის HTML და CSS კოდები

 

HTML კოდი

<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>

CSS კოდი

.card {
    width: 200px;
}
.img-container {
    position: relative;
}
.img-container .fav-img {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
}
.img-container span {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: white;
    font-size: 14px;
}
.card .card-img {
    width: 100%;
    display: block;
}
.card h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
}
.card p {
    margin-top: 0;
    height: 48px;
    overflow: hidden;
}
.action-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.action-container button {
    background-color: var(--green);
    font-size: 12px;
    padding: 0 15px;
    height: 25px;
    border-radius: 5px;
    color: white;
}
.action-container img {
    width: 15px;
}
.card-body {
    border: 1px solid rgb(0, 0, 0);
    padding-inline: 15px;
    padding-bottom: 10px;
    border-top: 0;
}