*{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Manrope", sans-serif; } body{ background-color: #ECF2F8;; } /* Trik! Sljedeći korak koji želim da uradim jeste da dodam JS-code koji će mi omogućiti da se prikažu/sakriju share ikone. Za početak, želim samo da sakrijem share ikone. Tako da u index.html datoteci, u sekciji, dodajem class="display-none" na share ikone. */ .display-none{ display: none; } /* Slijedi mi stilizacija-podešavanje glavnog container-a. Znam da se isti sastoji iz dvije cjeline. Prvu polovinu čini slika, a drugu tekstualni sadržaj. Poenta ove stilizacije je da se sve to lijepo uklopi u jedan container. Znači, flexBox raspored elemenata. Lijevo kontener je slika, a desno je tekstualni sadržaj. */ .article-preview-container{ width: 730px; margin: 5rem auto; box-shadow: 0px 40px 40px -10px rgba(201, 213, 225, 0.50); /* Ova sjena daje dojam dubine i ističe element iz pozadine .. */ display: flex; /* Jedna cjelina do druge, duž horizontale --znači FlexBox raspored elemenata!! */ align-items: center; /* Ovo će centrirano-horizontalno postaviti obe komponente unutar glavnog kontenjera .. */ } /* Slijedi mi stilizacija-podešavanje slike. Slika je lijevo od tekstualnog sadržaja. Poenta ove stilizacije je da se slika lijepo uklopi u jedan container. Da se slika lijepo zaobli, i da se uklopi u container. */ .drawers-img{ border-radius: 10px 0 0 10px; /* Ova svojstva daju zaobljene ivice lijevoj strani slike ..*/ width: 300px; height: 290px; display: block; /* Ova svojstva će sliku postaviti kao blok element, tako da se može centrirati unutar roditeljskog elementa .. */ } /* Slijedi mi stilizacija-podešavanje 'kontenjera' tekstualnog sadržaja. Tekstualni sadržaj je desno od slike. */ .article-content-container{ background-color: #fff; border-radius: 0 10px 10px 0; /* Ova svojstva daju zaobljene ivice desnoj strani kontenjera ..*/ padding: 2rem; height: 290px; width: 500px; } .main-heading{ color: #48556A; font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: .25px; padding-bottom: 1rem; } .preview-text{ color: #6e8098; font-size: 13px; font-weight: 500; line-height: 20px; padding-bottom: .5rem; } /* Slijedi stilizacija kontenjera u kojem treba podesiti raspored elemenata( slika, tekst, autor i datum ). Zatim i share button, kao i share ikone. CSS inspector će mi pomoći da dobijem sve potrebne informacije o elementima koje treba stilizovati!! Poenta ove stilizacije je da se kontener sa podacima o autoru i kontener sa share ikonicama lijepo uklopi u jedan container. Znači, flexBox raspored elemenata!! --> Slika, tekst(ime autora), datum i share ikone trebaju biti raspoređeni u jednom redu!! */ .author-info{ display: flex; align-items: center; justify-content: space-between; /* Ovo će rasporediti elemente unutar kontenjera tako da budue razmaka između istih .. */ position: relative; } .avatar-date-name-container{ display: flex; align-items: center; } .author-avatar-img{ border-radius: 50%; width: 40px; margin-right: 1rem; } .author-name{ color: #48556A; font-size: 13px; font-weight: 700; line-height: 20px; margin-top: 1rem; } /* ------------------------------------------------------------------------------------------------ */ .share-btn-container{ height: 32px; width: 32px; background-color: #ECF2F8; border-radius: 50%; /* Zaobli ..*/ display: flex; /* Fleksiraj */ align-items: center; /* Vertikalno centriraj */ justify-content: center; /* Horizontalno centriraj */ cursor: pointer; /* Kursor mijenja oblik na pointer kada se pređe preko elementa */ } .share-shape-container{ background-color: #48556A; border-radius: 7px; width: 248px; height: 60px; box-shadow: 0px 40px 40px -10px rgba(201, 213, 225, 0.50); position: absolute; left: 215px; top: -55px; } .share-icons-container{ display: flex; align-items: center; justify-content: center; margin-top: 1.2rem; column-gap: 20px; } .share-text-p{ color: #9DAEC2; font-size: 13px; text-transform: uppercase; font-weight: 500; line-height: 20px; letter-spacing: 5px; } /* -------------------------------------------------------------------------------------------------- */ /* 1) Otvori stranicu u Chrome browseru. 2) Otvori Chrome DevTools (F12). 3) Klikni na ikonu "Select an element in the page to inspect it" (ili pritisni Ctrl + Shift + C). 4) Klikni na element koji želiš stilizovati. 5) Klikni na Mobile Device Toolbar ikonu (ili pritisni Ctrl + Shift + M) da bi prešao u responsive mode. 6) Pregledaj stranicu kroz recimo iPhone 12 .. Media Queries su CSS tehnika koja omogućava da se stilovi primjenjuju samo na određenim uređajima ili veličinama ekrana. */ .mobile-author-area { display: none; } .mobile-avatar-container { display: none; } .mobile-share-btn-container { display: none; } .mobile-social-sharing-bar { display: none; } .mobile-share-icons-container { display: none; } .mobile-social-sharing-btn-container { display: none; } @media screen and (max-width: 767px){ .article-preview-container{ width: 95%; height: 100vh; margin: 2rem auto 0rem auto; /* Gore Desno Dole Lijevo*/ flex-direction: column; /* Ova svojstva će postaviti elemente unutar kontenjera u kolonu, jedan ispod drugog .. */ } .article-img-container{ width: 100%; } .drawers-img{ border-radius: 10px 10px 0px 0px; /* Ova svojstva daju zaobljene ivice lijevoj strani slike ..*/ width: 100%; } .article-content-container{ border-radius: 0px 0px 10px 10px; /* Ova svojstva daju zaobljene ivice desnoj strani kontenjera ..*/ padding: 1rem; width: 100%; } .author-info { display: none; } .main-heading { padding-left: 1rem; padding-right: 1rem; } .preview-text { padding-left: 1rem; padding-right: 1rem; } /* Mobile Author Area */ .mobile-author-area { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 2rem; padding-left: 1rem; padding-right: 1rem; } .mobile-avatar-container { display: flex; align-items: center; } .mobile-share-btn-container { height: 32px; width: 32px; background-color: #ECF2F8; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* Mobile Share Bar */ .mobile-social-sharing-bar { width: 100%; background-color: #48556A; display: flex; align-items: center; justify-content: space-between; height: 60px; display: none; margin-top: 3rem; border-radius: 0px 0px 10px 10px; } .mobile-share-icons-container { display: flex; align-items: center; justify-content: center; margin-top: .5rem; column-gap: 20px; padding-left: 1rem; } .mobile-social-sharing-btn-container { height: 32px; width: 32px; background-color: #ECF2F8; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 1rem } } .attribution { font-size: 11px; text-align: center; margin-top: 20px; } .attribution a { color: hsl(228, 45%, 44%); }