გამოიწერე YouTube-ის არხიyoutube white icon svg გამოწერა

დახმარების გვერდის დასრულება

HTML, CSS-ის ინტენსიური კურსი

კურსის დასრულების შემდეგ შეძლებთ HTML CSS-ით ააწყოთ კომპლექსური ვებ გვერდები.

გაიგე მეტი

მოცემულ ვიდეოში ვაწყობთ დახმარების გვერდს, რომელშიც გამოვიყენებთ აკარდიონის ტიპის სტრუქტურას, რომელიც ძალიან გავრცელებულია ვებ-დეველოპმენტში, მისი ვიზუალური სიმარტივიდან გამომდინარე, ასევე გამოვიყენებთ დამხმარე active კლასს, რომელიც დაგვეხმარება აკარდიონის გახსნასა და დახურვაში.

გაკვეთილში ასევე ვახსენე .gitignore ფაილი და მისი მნიშვნელობა, რომელიც გვაძლევს საშუალებას ჩვენი სამუშაო დირექტორიიდან დავამატოთ კონკრეტული ფაილები ან დირექტორიები .gitignore  ფაილში, რომელიც არ მისცემს საშუალებას დამატებულ ფაილებს აიტვირთოს გითზე.

ასევე გამოვიყენე ფერის ტიპი rgba(0,0,0, 0.1) მოცემულ ჩანაწერი იშიფრება, როგორც წითელი, მწვანე, ლურჯი, გამჭვირვალობა თვითეული ფერების შედგება 0-დან 255-მდე ციფრებისგან, რომლების კომბინაციით შედგება სხვა დანარჩენი ნებისმიერი ფერი, ხოლო ბოლო ჩანაწერი კი ნიშნავს ამ ზოგადი ფერის გამჭვირვალობას

HTML კოდი

<div class="accordion-container">
    <div class="accordion-item active">
        <div class="accordion-header">
            როგორ დავრეგისტრირდეთ
            <img src="./assets/icons/down.svg" alt="down arrow">
        </div>
        <div class="accordion-body">
            დეტალური ტექსტი...
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            როგორ გავიაროთ ავტორიზაცია
            <img src="./assets/icons/down.svg" alt="down arrow">
        </div>
        <div class="accordion-body">
            დეტალური ტექსტი...
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            როგორ დავამტოთ ბლოგი ფავორიტებში
            <img src="./assets/icons/down.svg" alt="down arrow">
        </div>
        <div class="accordion-body">
            დეტალური ტექსტი...
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            როგორ გავაზიაროთ ბლოგი
            <img src="./assets/icons/down.svg" alt="down arrow">
        </div>
        <div class="accordion-body">
            დეტალური ტექსტი...
        </div>
    </div>
</div>

 CSS კოდი

.accordion-container {
    border: 1px solid #ccc;
    border-bottom: 0;
    margin-bottom: 30px;
}
.accordion-header {
	font-size: 24px;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
    cursor: pointer;
}
.accordion-header:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
.accordion-header img {
    width: 15px;
}
.accordion-body {
    display: none;
	padding: 10px 20px;
	border-bottom: 1px solid #ccc;
}

.accordion-item.active .accordion-body {
    display: block;
}

.accordion-item.active .accordion-header img {
    transform: rotate(180deg);
}

კურსში შემავალი თემები

კომენტარები 0

საიტის აწყობა (ავტორიზაცია) საიტის აწყობა (რეგისტრაცია, პაროლის აღდგენა) საიტის აწყობა (header, nav, footer), ცოტა რამ display:flex-ზე საიტის აწყობა, როგორ მუშაობს CSS flexbox (display: flex;) საიტის აწყობა (ბლოგის გვერდი, ნაწილი #1) Git-ის დაყენება Windows-ზე Linux-ის ძირითადი ბრძანებები ვებ-დეველოპმენტისთვის CSS position property, ვისწავლოთ CSS პოზიციები ფონტების მიბმა საიტზე, როგორ მივაბათ ფონტები CSS @import and CSS variables, იმპორტი და ცვლადები CSS-ში html tables, ცოტა რამ ცხრილების შესახებ როგორ შევქმნათ და ავტვირთოთ პროექტი Git-ზე ბლოგის გვერდი #2, ვაწყობთ ქარდებს display: grid; თვისება, რომელიც აუცილებელია ვიცოდეთ display:grid-ის საზომი ერთეულები fr-ები (fractions) ბლოგის ლისტის გვერდის დასრულება display:grid-ის დახმარებით ბლოგის დეტალური გვერდის დასრულება კონტაქტის გვერდის დასრულება დახმარების გვერდის დასრულება საიტის აწყობა: ცოტა რეფაქტორინგი და ბოქსმოდელის განხილვა საიტის აწყობა: პირელი ნაბიჯები რესპონსივ დიზაინში საიტის აწყობა: რესპონსივი, მთავარი გვერდი საიტის აწყობა: მობილური ნავიგაცია როგორ გავასწოროთ HTML ელემენტი ცენტრში როგორ გავაკეთო dark theme