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

საიტის აწყობა: მობილური ნავიგაცია

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

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

გაიგე მეტი

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

/* laptops */
@media screen and (max-width: 992px) {
    ....
}
/* tablets */
@media screen and (max-width: 768px) {
    ....
    /* mobile menu styles */
    header {
        position: relative;
    }
    header .mobile-menu {
        display: flex;
        gap: 0 5px;
        cursor: pointer;
        padding-block: 15px;
    }
    header nav {
        display: none;
    }
    header nav.active {
        display: flex;
        position: absolute;
        background: var(--sky);
        width: 100%;
        top: 100%;
        left: 0;
        flex-direction: column;
        padding-block: 15px;
    }
    header nav.active > div {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    header nav.active a {
        padding: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    header nav.active > div:last-child a:last-child {
        border-bottom: 0;
    }
    header > .container {
        justify-content: space-between;
    }
    footer {
        height: initial;
    }
}
/* mobile phones */
@media screen and (max-width: 576px) {
    ...
}

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

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

ვალერი ხარიტონაშვილი
22/07/2022, 09:33:44

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

კობა სხულუხია
21/07/2022, 03:29:16

მადლობა გამოხმაურებისთვის მაგრამ ვერ ვიპოვნე თქო გითზე responsive.css, იქ მხოლოდ ამათ ვხედავ:

blog-detail.css

card.css

colors.css

contact.css

fonts.css

help.css

style.css

tables.css

ვალერი ხარიტონაშვილი
21/07/2022, 01:19:31

გითზე არის კოდი და შეგიძლია ჩახედო

კობა სხულუხია
21/07/2022, 11:19:48

ყველაფერს ზუსტად მივყევი მაგრამ ჩემთან card ცოტათი ვერტიკალურ მენიუს ეფარება, კონკრეტულად მის ბოლო პუნქტს "შესვლა"-ს(როცა რესპონსივისთვის ვაპატარავებ), გიტჰაბზე ვერ ვიპოვე responsive.css რომ მეპოვა სად მაქვს შეცდომა, მერე header nav.active-ს მოვუხსენი padding-block: 15px; და აღარ ეფარება, მაგრამ თქვენთან რანაირად არ ეფარება მაგ პარამეტრით ვერ ვხვდები

საიტის აწყობა (ავტორიზაცია) საიტის აწყობა (რეგისტრაცია, პაროლის აღდგენა) საიტის აწყობა (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