@fortawesome/free-regular-svg-icons#faQuestionCircle TypeScript Examples
The following examples show how to use
@fortawesome/free-regular-svg-icons#faQuestionCircle.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: HowToResolveFeedbackBanner.tsx From frontend.ro with MIT License | 5 votes |
|
function HowToResolveFeedbackBanner() {
const [showExplanation, setShowExplanation] = useState(false);
return (
<div className={styles['how-to-resolve-feedback-banner']}>
<div className="d-flex align-items-center">
<FontAwesomeIcon
size="2x"
height="32"
className="mr-1"
icon={faQuestionCircle}
/>
Trebuie să rezolvi feedback-ul din codul de mai jos
pentru a putea trimite din nou exercițiul.
<Button
variant="transparent"
className="text-bold"
onClick={() => setShowExplanation(!showExplanation)}
>
{showExplanation ? 'Ascunde instrucțiunile' : 'Vrei să vezi cum?'}
</Button>
</div>
{showExplanation && (
<>
<List as="ol" variant="count">
<li> fiecare fișier cu feedback va fi marcat cu o linie roșie </li>
<li> înăuntrul său, codul cu probleme va fi hașurat cu roșu </li>
<li> pune mouse-ul deasupra codului marcat și așteaptă câteva secunde </li>
<li> în partea de sus a paginii va apărea feedback-ul</li>
<li>
după ce l-ai citit, apasă pe butonul
<em> Done </em>
pentru a-l marca drept rezolvat
</li>
<li>
după ce ai rezolvat toate feedback-urile poți trimite exercițiul
din nou
</li>
</List>
<p>
Dacă dai de probleme scrie-ne la
{' '}
<a href="mailto:[email protected]">[email protected]</a>
</p>
</>
)}
</div>
);
}
Example #2
| Source File: icon.service.ts From WowUp with GNU General Public License v3.0 | 5 votes |
|
public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
this.addSvg(faAngleDoubleDown);
this.addSvg(faArrowUp);
this.addSvg(faArrowDown);
this.addSvg(faSyncAlt);
this.addSvg(faTimes);
this.addSvg(faExternalLinkAlt);
this.addSvg(faQuestionCircle);
this.addSvg(faPlay);
this.addSvg(faClock);
this.addSvg(faBug);
this.addSvg(faLink);
this.addSvg(faDiscord);
this.addSvg(faGithub);
this.addSvg(faInfoCircle);
this.addSvg(faCodeBranch);
this.addSvg(faCaretDown);
this.addSvg(faExclamationTriangle);
this.addSvg(faCode);
this.addSvg(faPatreon);
this.addSvg(faCoins);
this.addSvg(faCompressArrowsAlt);
this.addSvg(faPencilAlt);
this.addSvg(faCheckCircle);
this.addSvg(faDiceD6);
this.addSvg(faSearch);
this.addSvg(faInfoCircle);
this.addSvg(faNewspaper);
this.addSvg(faCog);
this.addSvg(faAngleUp);
this.addSvg(faAngleDown);
this.addSvg(faChevronRight);
this.addSvg(faUserCircle);
this.addSvg(faEllipsisV);
this.addSvg(faCopy);
this.addSvg(farCheckCircle);
this.addSvg(faExclamation);
this.addSvg(faTrash);
this.addSvg(faHistory);
this.addSvg(faCaretSquareRight);
this.addSvg(faCaretSquareLeft);
this.addSvg(faMinimize);
this.addSvg(faUpRightFromSquare);
}
Example #3
| Source File: LinksAndButtons.tsx From frontend.ro with MIT License | 4 votes |
|
export default function LinksAndButtonsContent() {
const lessonInfo = getLessonById('linkuri-si-butoane');
return (
<>
<LessonCover>
<Image
width="2400"
height="1260"
alt="Doodle reprezentând un buton și mai multe linkuri"
src={`${process.env.CLOUDFRONT_PUBLIC}/seo/links-and-buttons_2400w.jpg`}
/>
</LessonCover>
<LessonFirstSentence>
Deși la prima vedere pare un subiect simplu, sunt totuși multe de
știut despre link-uri și butoane în HTML. În acest articol vom discuta
despre markup, atribute și cele mai bune practici. Totodată, vom trata
împreună cele două concepte pentru că de multe ori se folosesc
link-uri în loc de butoane și invers.
</LessonFirstSentence>
<section>
<LessonHeading as="h2" id={lessonInfo.chapters[0].id}>
{lessonInfo.chapters[0].title}
</LessonHeading>
<p>
Elementul
{' '}
<FormattedText as="strong">{'<a>'}</FormattedText>
{' '}
denumit și
{' '}
<i>ancoră</i>
{' '}
sau
{' '}
<i>link</i>
{' '}
este unul din cele mai uzuale elemente folosite pentru
construirea paginilor web. Dacă vrem să ne mutam la o altă pagină
sau la o altă zonă în cadrul aceleiași pagini, atunci vom folosi
acest element. Pentru a specifica destinația link-ului vom folosi
atributul
{' '}
<FormattedText as="strong">href</FormattedText>
{' '}
.
</p>
</section>
<section>
<LessonHeading as="h2" id={lessonInfo.chapters[1].id}>
{lessonInfo.chapters[1].title}
</LessonHeading>
<LessonHeading as="h3" id="cele-mai-uzuale">
Cele mai uzuale
</LessonHeading>
<Highlight
className="my-5"
language="html"
code={`
<a href="https://frontend.ro/"> Frontend.ro </a>`}
/>
<p>
În cazul acesta, spunem că este un
{' '}
<strong>link către un URL absolut</strong>
{' '}
- adică un URL care
conține întreaga adresă a unei pagini. Acest tip de URL este deseori
întâlnit atunci când un website face legătura către un alt website.
</p>
<p>
Putem avea și
{' '}
<strong>URL-uri relative</strong>
,
a căror destinție finală se calculează în funcție de
pagina pe cară ne aflăm. În exemplul de mai jos avem același
link atât în
{' '}
<FormattedText as="strong">
about.html
</FormattedText>
{' '}
cât și în
{' '}
<FormattedText as="strong">
home.html
</FormattedText>
:
</p>
<Highlight
language="html"
code={`
<a href="info.html"> Go to info page </a>`}
/>
<p>
Totuși, ajungem la destinații diferite în funcție de pagina
pe care suntem.
</p>
<BasicEditorLazy folderStructure={relativeUrlExample} readOnly />
<p>
Foarte utile sunt și link-urile care duc către o secțiune ale
aceleiași pagini sau așa numitele
{' '}
<FormattedText as="strong">jump links</FormattedText>
.
</p>
<Highlight
className="my-5"
language="html"
code={`
<a href="#comments">
Sari la secțiunea de comentarii
</a>
<h2 id="comments">Comentarii</h2>
<!-- ... -->`}
/>
<LessonTip>
Observați atributul
{' '}
<FormattedText as="strong">id</FormattedText>
.
Aceasta este modalitatea prin care facem legătura între link și
secțiunea paginii la care vrem să ajungem.
</LessonTip>
<p>
Deși nu am ajuns la partea de CSS, merită menționat că jump links
pot să beneficieze de
{' '}
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior">smooth scrolling</a>
{' '}
pentru ca utilizatorii să aibă o experiență mai plăcută:
</p>
<LessonFigure
isVideo
withBorder
src={`${process.env.CLOUDFRONT_PUBLIC}/public/images/lessons/links-and-buttons/smooth-scrolling.mp4`}
alt="Redarea comportamentului de smooth scrolling"
demo="/demo/html/jump-links"
/>
</section>
<section>
<LessonHeading as="h3" id={lessonInfo.chapters[2].id}>
{lessonInfo.chapters[2].title}
</LessonHeading>
<p>
Sunt situații în care vrem să oferim unui utilizator posibilitatea de a
{' '}
<strong>
deschide email-ul precompletat către o adresă
</strong>
. În cazul acesta ne
vom folosi de
{' '}
<FormattedText as="strong">mailto</FormattedText>
:
</p>
<Highlight
className="my-5"
language="html"
code={`
<a href="mailto:[email protected]">
Trimite email la Frontend.ro
</a>`}
/>
<p>
Apasă pe linkul alăturat și ți se va deschide clientul de email,
precompletat cu adresa noastră ?
{' '}
<a href="mailto:[email protected]">Trimite email la Frontend.ro</a>
.
</p>
<LessonFigure
isVideo
withBorder
src={`${process.env.CLOUDFRONT_PUBLIC}/public/images/lessons/links-and-buttons/mailto.mp4`}
alt="Opțiunea mailto pentru a ușura trimiterea de email-uri"
/>
<LessonHeading as="h3" id={lessonInfo.chapters[3].id}>
{lessonInfo.chapters[3].title}
</LessonHeading>
<p>
Mai mult, dacă vrem să arătăm în pagină
numere de telefon e recomandat să folosim link-uri,
pentru a ne deschide direct aplicația prin care sunăm:
</p>
<Highlight
className="my-5"
language="html"
code={`
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>
`}
/>
<p>
Apasă pe unul din numerele de mai jos pentru a vedea cum sunt
precompletate pe telefon (poți să dai click fără griji, nu le vei apela dacă faci asta)
</p>
<List variant="bullets">
<li>
<a href="tel:+49.157.0156">+49 157 0156</a>
</li>
<li>
<a href="tel:+1(555)5309">(555) 5309</a>
</li>
</List>
<LessonFigure
isVideo
withBorder
src={`${process.env.CLOUDFRONT_PUBLIC}/public/images/lessons/links-and-buttons/link-to-tel.mp4`}
alt="Link-uri către numere de telefon"
/>
<LessonHeading as="h3" id={lessonInfo.chapters[4].id}>
{lessonInfo.chapters[4].title}
</LessonHeading>
<p>
Împreuna cu atributul
{' '}
<FormattedText as="strong">download</FormattedText>
{' '}
putem instrui
browser-ul să downloadeze fișierul din cadrul link-ului în loc să îl
deschidă în pagina curentă:
</p>
<Highlight
className="my-5"
language="html"
code={`
<a href="https://FrontEnd.ro/logo.png" download> Download our logo </a>
`}
/>
<p>
Apasă pe linkul de alături pentru a downlada logo-ul nostru ?
{' '}
<a href="/logo.png" download>
Downloadează logo-ul nostru
</a>
</p>
<p>
Acum că ne-am familiarizat cu situații din practică unde putem
folosi link-uri, ne-am obișnuit puțin cu markup-ul și cu câteva
dintre atributele ce pot însoți elementul, putem să
vorbim de câteva bune practici pe care să le avem în vedere.
</p>
</section>
<section>
<LessonHeading as="h2" id={lessonInfo.chapters[5].id}>
{lessonInfo.chapters[5].title}
</LessonHeading>
<p>
În afară de atributele prezentate, un alt atribut des folosit este
{' '}
<FormattedText as="strong"> target</FormattedText>
{' '}
, care ne indică cum
să deschidem link-ul din href.
</p>
<p>
Ca și developeri cel mai des ne vom întâlni cu situația de a folosi
{' '}
<FormattedText as="strong">
target="_blank"
</FormattedText>
{' '}
(link-ul va fi deschis într-o fereastră sau un tab
nou)
.
Când folosim valoarea
{' '}
<strong>_blank</strong>
, e recomandat să adăugăm un nou atribut
pentru securitate și anume :
{' '}
<FormattedText as="strong">
rel=”noopener noreferrer”
</FormattedText>
.
</p>
<Highlight
className="my-5"
language="html"
code={`
<a href="http://frontend.ro" target="_blank" rel="noopener noreferrer">
Link-ul se deschide într-un nou tab
</a>
`}
/>
<p>
Apasă pe următorul link pentru a-l deschide într-un nou tab ?
{' '}
<a
href="http://frontend.ro"
target="_blank"
rel="noopener noreferrer"
>
Link-ul se deschide într-un nou tab
</a>
</p>
</section>
<section>
<LessonHeading as="h2" id={lessonInfo.chapters[6].id}>
{lessonInfo.chapters[6].title}
</LessonHeading>
<p>
În continuare vom raspunde la câteva întrebări pe care noi ca și
developeri ni le putem adresa pe măsură ce codăm și ne întâlnim cu
diverse situații:
</p>
<LessonQuote>
Putem folosi doar un
{' '}
<FormattedText as="strong">icon</FormattedText>
{' '}
în
interiorul unui link?
</LessonQuote>
<p>
Din păcate un simplu icon nu ne-ar oferi suficientă
informație contextuală despre link, deci nu ar fi chiar recomandat.
Dacă totuși suntem nevoiți să folosim un astfel de icon, o bună
practică ar fi să adăugăm în link niște text
ascuns vizual, care va fi totuși citit de
{' '}
<strong>screen readers</strong>
:
</p>
<Highlight
className="my-5"
language="html"
code={`
<a href="https://fontawesome.com/">
<svg width="24" height="24" viewBox="0 0 1024 1024">
<g>
<path d="M384 928c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z" />
<path d="M1024 928c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z" />
<path d="M1024 512v-384h-768c0-35.346-28.654-64-64-64h-192v64h128l48.074 412.054c-29.294 23.458-48.074 59.5-48.074 99.946 0 70.696 57.308 128 128 128h768v-64h-768c-35.346 0-64-28.654-64-64 0-0.218 0.014-0.436 0.016-0.656l831.984-127.344z" />
</g>
</svg>
// Se comporta ca un label ce e ascuns
<span style="position: absolute; opacity: 0">
Coș de cumpărături
</span>
</a>`}
/>
<p>
Spre exemplu, link-ul alăturat conține doar un icon pentru un coș de cumpărături,
dar e în același timp
accesibil pentru cei ce folosesc screen readere ?:
{' '}
<a href="https://fontawesome.com/">
<svg width="24" height="24" viewBox="0 0 1024 1024">
<g>
<path d="M384 928c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z" />
<path d="M1024 928c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z" />
<path d="M1024 512v-384h-768c0-35.346-28.654-64-64-64h-192v64h128l48.074 412.054c-29.294 23.458-48.074 59.5-48.074 99.946 0 70.696 57.308 128 128 128h768v-64h-768c-35.346 0-64-28.654-64-64 0-0.218 0.014-0.436 0.016-0.656l831.984-127.344z" />
</g>
</svg>
{/* Se comporta ca un label ce e ascuns */}
<span style={{ position: 'absolute', opacity: '0' }}>
Coș de cumpărături
</span>
</a>
</p>
<LessonTip icon={faQuestionCircle}>
Atributul
{' '}
<FormattedText as="strong">style</FormattedText>
{' '}
este folosit
pentru a adăuga reguli CSS elementelor. Încă nu am ajuns la acel
capitol deci e ok dacă nu știi cum să-l folosești.
Totuși, te rugăm să-l păstrezi în exemplu, pentu a funcționa
cum ne așteptăm.
</LessonTip>
<LessonQuote>
Putem folosi o
{' '}
<FormattedText as="strong">imagine</FormattedText>
{' '}
în
interiorul unui link?
</LessonQuote>
<p>
Daaa. Vom avea nevoie de multe ori să facem asta în proiectele
noastre.
</p>
<Highlight
className="my-5"
language="html"
code={`
<a href="https://FrontEnd.ro">
<img
src="https://FrontEnd.ro/images/logo.png"
alt="Frontend.ro LOGO."
height="48"
/>
</a>`}
/>
<p>
Alături avem o imagine într-un link. Dacă dăm click pe ea,
ne va duce pa pagina principală (home page) ?
{' '}
<a style={{ verticalAlign: 'middle' }} href="/">
<img height="48" src="/logo.png" alt="Frontend.ro LOGO." />
</a>
</p>
{/* this demo ? is not very clear at this moment, when we will have more CSS lessons,
maybe we can uncomment this part */}
{/* <LessonQuote>
Putem folosi bucăți mari de cod în interiorul unui link?
</LessonQuote>
<p>Răspunsul la această întrebare este că nu e tocmai o idee bună.</p>
<LessonFigure
withBorder
src={`${process.env.CLOUDFRONT_PUBLIC}/public/images/lessons/links-and-buttons/demo-link.png`}
alt="2 metode diferite prin care putem folosi link-urile în raport cu bucăți
mai mari de cod și implicațiile lor"
demo="/demo/html/linkuri-care-contin-bucati-mari-de-continut"
/> */}
</section>
<section>
<LessonHeading as="h2" id={lessonInfo.chapters[7].id}>
{lessonInfo.chapters[7].title}
</LessonHeading>
<p>
Elementul html
{' '}
<FormattedText as="strong">{'<button>'}</FormattedText>
{' '}
este folosit atunci când vrem să facem o acțiune (exemple: arată/ascunde
un meniu, play sau pause la un video, trimite un comentariu, etc)
</p>
<Highlight
language="html"
code={`
<button type="button">
Open menu
</button>`}
/>
<p>
Spre deosebire de link-uri, butoanele
{' '}
<strong>NU</strong>
{' '}
schimbă
pagina. Totuși dacă avem un formular cu un buton de login, dăm click pe
el, așteptăm, apoi suntem direcționați către o nouă pagină, putem
spune că acțiunea declanșată de buton a schimbat pagina. În cazul acesta e ok :)
</p>
</section>
<section>
<LessonHeading as="h2" id={lessonInfo.chapters[8].id}>
{lessonInfo.chapters[8].title}
</LessonHeading>
<p>
Cele 2 tipuri de butoane pe care le vom folosi cel mai des în
aplicațiile noastre sunt :
</p>
<List variant="bullets">
<li>
<FormattedText as="strong">type="button"</FormattedText>
</li>
<li>
<FormattedText as="strong">type="submit"</FormattedText>
: (utilizate
în cadrul formularelor - vom discuta mai multe în momentul în care
vom ajunge la această lecție)
</li>
</List>
<p>O bună practică este să specificăm mereu tipul acestora.</p>
<p>
Pe lîngă submit și button, type mai pot avea și valoarea
{' '}
<FormattedText as="strong">reset</FormattedText>
. Uite un exemplu care le include pe toate 3:
</p>
<Highlight
className="my-5"
language="html"
code={`
<form action="/" method="POST">
<input type="text" name="name" id="name" style="padding: 0.7em; border-radius: 5px; "/>
<!-- Dacă vrem să fie mai explicit... -->
<button type="submit" style="padding: .5em; border: none; color: #fff; font-size: 1.2em; border-radius: 5px; background: #58af58">Submit</button>
<!-- ...sau să resetăm inputurile la valoarea
lor inițială (tinde să enerveze userii) -->
<button type="reset" style="padding: .5em; border: none; color: #fff; font-size: 1.2em; border-radius: 5px; background: #77838b">Reset</button>
<!-- Acesta împiedică ca acțiunea de submit să
aibă loc, ceea ce poate fi util uneori în cadrul
unui form -->
<button type="button" style="padding: .5em; border: none; color: #fff; font-size: 1.2em; border-radius: 5px; background: #2980b9">Non-submitting button</button>
</form>
`}
/>
<LessonFigure
withBorder
src={`${process.env.CLOUDFRONT_PUBLIC}/public/images/lessons/links-and-buttons/buttons-types.png`}
alt="Tipuri de butoane"
demo="/demo/html/tipuri-de-butoane"
/>
</section>
<section>
<LessonHeading as="h2" id={lessonInfo.chapters[9].id}>
{lessonInfo.chapters[9].title}
</LessonHeading>
<p>
Acest atribut boolean împiedică interactivitatea cu butonul: nu
poate fi apăsat sau focusat. Cel mai comun pattern este în cazul
autentificării pe un site:
</p>
{/* <Highlight
className="my-5"
language="html"
code={`
<form className="login-container">
<label htmlFor="email">Introdu adresa de email:</label>
<input type="email" id="email" placeholder="Email" />
<label htmlFor="password">Introdu parola:</label>
<input type="password" id="password" placeholder="Password" />
<button type="submit" disabled>Loghează-te</button>
</form>
`}
/>
<LessonFigure
withBorder
src={`${process.env.CLOUDFRONT_PUBLIC}/public/images/lessons/links-and-buttons/disabled-button.png`}
alt="Atributul disabled"
demo="/demo/html/butoane-atributul-disabled"
/> */}
<List as="ol" style={{ listStyle: 'revert' }}>
<li>
completăm formularul
</li>
<li>
apăsăm butonul de login
</li>
<li>
butonul devinde
{' '}
<strong> disabled </strong>
{' '}
cât timp
se trimit datele la server și se așteaptă un răspuns
(pentru a preveni cazul în care utilizatorul încearcă
din nou în timp ce autentificarea e înca în proges)
</li>
<li>
dacă logarea eșuează, putem afișa un mesaj informativ în care să
explicăm de ce nu a putut avea loc și să facem enabled la buton abia
la final, pentru a reîncerca.
</li>
</List>
<LessonFigure
isVideo
withBorder
src={`${process.env.CLOUDFRONT_PUBLIC}/public/images/lessons/links-and-buttons/form_validation_with_disabled_button.mp4`}
alt="Validare form cu button disabled"
/>
</section>
<section>
<LessonHeading as="h2" id={lessonInfo.chapters[10].id}>
{lessonInfo.chapters[10].title}
</LessonHeading>
<p>
Ca o scurtă recapitulare, folosim link-uri dacă se schimbă pagina
sau facem jump la o secțiune din pagină, iar de butoane dacă facem o
acțiune.
</p>
<LessonTip icon={faThumbsDown}>
Nu putem avea link-uri în butoane sau butoane în link-uri - nu e
valid markup-ul.
</LessonTip>
</section>
<div className="dots" />
<LessonResources
className="my-5"
links={[
{
text: 'Documentația completă a link-urilor pe MDN',
url:
'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a',
},
{
text: 'Documentația completă a <button> pe MDN',
url:
'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button',
},
{
text: 'Valoarea "noreferrer" pentru atributul "rel"',
url: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noreferrer',
},
{
text: 'Valoarea "noopener" pentru atributul "rel"',
url: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener',
},
]}
/>
</>
);
}
Example #4
| Source File: galerie-imagini-fixa.tsx From frontend.ro with MIT License | 4 votes |
|
export default function FixedGallery() {
const title = 'O galerie de imagini în care fiecare ocupa 45% din lățimea disponibilă';
return (
<>
<Head>
<title>
{title}
{' '}
| DEMO - FrontEnd.ro
</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<>
<Header demoPage withNavMenu />
<Demo title={title}>
<DemoPreview>
<div style={{
display: 'flex',
flexFlow: 'row wrap',
justifyContent: 'space-between',
alignItems: 'flex-start',
}}
>
<img
style={{ width: '45%', marginBottom: '2em' }}
src="https://d3tycb976jpudc.cloudfront.net/demo-assets/body-of-water-and-trees.jpg"
alt="Body of water and trees"
/>
<img
style={{ width: '45%', marginBottom: '2em' }}
src="https://d3tycb976jpudc.cloudfront.net/demo-assets/alpaca-portrait.jpg"
alt="Alpaca portrait"
/>
<img
style={{ width: '45%' }}
src="https://d3tycb976jpudc.cloudfront.net/demo-assets/lion-portrait.jpg"
alt="Lion portrait"
/>
<img
style={{ width: '45%' }}
src="https://d3tycb976jpudc.cloudfront.net/demo-assets/snow-capped-mountains.jpg"
alt="Snow capped mountains"
/>
</div>
</DemoPreview>
<Highlight
className="my-5"
language="html"
code={`
<div style="display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;">
<img
src="https://d3tycb976jpudc.cloudfront.net/demo-assets/body-of-water-and-trees.jpg"
alt="Body of water and trees"
style="width: 45%; margin-bottom: 1em" />
<img
src="https://d3tycb976jpudc.cloudfront.net/demo-assets/alpaca-portrait.jpg"
alt="Alpaca portrait"
style="width: 45%; margin-bottom: 1em" />
<img
src="https://d3tycb976jpudc.cloudfront.net/demo-assets/lion-portrait.jpg"
alt="Lion portrait"
style="width: 45%" />
<img
src="https://d3tycb976jpudc.cloudfront.net/demo-assets/snow-capped-mountains.jpg"
alt="Snow capped mountains"
style="width: 45%" />
</div>`}
/>
<LessonTip icon={faQuestionCircle}>
Atributul
{' '}
<strong>style</strong>
{' '}
este folosit pentru a stiliza elementele.
{' '}
Încă nu am ajuns la acel capitol deci nu-ți fă griji dacă nu înțelegi acel cod.
<br />
{' '}
<br />
Totuși va trebui să-l pui acolo pentru a obține același rezultat ca mai sus.
</LessonTip>
</Demo>
<Footer />
</>
</>
);
}
Example #5
| Source File: lazy-image-loading.tsx From frontend.ro with MIT License | 4 votes |
|
export default function LazyLoadingImages() {
const title = 'Încărcarea imaginilor doar cand avem nevoie de ele';
const images = [{
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/inside-sushi-restaurant.jpg',
alt: 'Inside a sushi restaurant',
}, {
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/man-in-black-holding-video-camera.jpg',
alt: 'Man in black holding video camera',
}, {
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/motivational-quote-on-flat-screen-tv.jpg',
alt: 'Motivational quote on a flat screen',
}, {
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/red-plastic-chairs.jpg',
alt: 'Red plastic chairs',
}, {
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/turned-on-black-flat-screen-monitor.jpg',
alt: 'Turned-on black flat screen monitor',
}, {
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/two-people-using-a-laptop.jpg',
alt: 'Two people using a laptop',
}, {
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/turned-on-iMac-and-Apple-Magic-Keyboard.jpg',
alt: 'Turned on iMac and Apple Magic Keyboard',
}, {
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/eiffel-tower-during-night.jpg',
alt: 'Eiffel tower during night',
}, {
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/woman-climbing-down-stairs.jpg',
alt: 'Woman climbing down stairs',
},
{
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/orange-fruits-in-white-ceramic-bowl.jpg',
alt: 'Orange fruits in white ceramic bowl',
},
{
src: 'https://d3tycb976jpudc.cloudfront.net/demo-assets/3-red-and-green-apple.jpg',
alt: '3 Red and green apples',
}];
return (
<>
<Head>
<title>
{title}
{' '}
| DEMO - FrontEnd.ro
</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<>
<Header demoPage withNavMenu />
<Demo title={title}>
<p>
Deschide
{' '}
<a href="/intro/devtools" target="_blank" rel="noreferrer">panoul Network</a>
{' '}
din DevTools și apoi refreshuiește
pagina.
Imaginile sunt încărcate doar când ne apropiem de ele, spre deosebire de
{' '}
<a href="/demo/html/regular-image-loading" target="_blank" rel="noreferrer">
acest demo
</a>
{' '}
unde browserul le încarcă pe toate de la început.
</p>
<p>
{' '}
Această tehnică se numește
<strong>Lazy Loading</strong>
</p>
<DemoPreview>
<div>
{images.map(({ src, alt }) => (
<img loading="lazy" height="500" src={src} alt={alt} />
))}
</div>
</DemoPreview>
{/*
TODO: add
<Highlight
className="my-5"
language="html"
code={`
`}
/> */}
<LessonTip icon={faQuestionCircle}>
Atributul
{' '}
<strong>style</strong>
{' '}
este folosit pentru a stiliza elementele.
{' '}
Încă nu am ajuns la acel capitol deci nu-ți fă griji dacă nu înțelegi acel cod.
<br />
{' '}
<br />
Totuși va trebui să-l pui acolo pentru a obține același rezultat ca mai sus.
</LessonTip>
</Demo>
<Footer />
</>
</>
);
}
Example #6
| Source File: linkuri-care-contin-bucati-mari-de-continut.tsx From frontend.ro with MIT License | 4 votes |
|
export default function LinksAroundBiggerChuncksOfContent() {
const title = 'Două modalități prin care putem folosi bucăți mari de cod în interiorul unui link și implicațiile lor';
return (
<>
<Head>
<title>
{title}
{' '}
| DEMO - FrontEnd.ro
</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<>
<Header demoPage />
<Demo title={title}>
<p>
Primul exemplu are un div cu elemente și este plasat în interiorul
unui link.
</p>
<p>
Faptul că îl folosim așa, în interiorul link-ului, duce la implicații
în ceea ce privește UX-ul. De exemplu, poate fi dificil să selectem
textul din interior, iar întregul element are nevoie de reguli de
stilizare destul de complexe pentru a crea starea de
{' '}
<i>focus</i>
{' '}
și
{' '}
<i>hover</i>
.
</p>
<p>
Totodată trebuie să avem în vedere și
{' '}
<i>accesibilitatea</i>
, cum ar
fi faptul că întregul conținut va fi citit de către screen readere
înainte de a fi "anunțat" ca fiind un link.
</p>
<DemoPreview>
<a href="#">
<div
style={{
border: '1px solid #eaeaea',
borderRadius: '15px',
boxShadow: '2px 2px 2px rgba(0, 0, 0, 0.2)',
padding: '1em',
width: '500px',
backgroundColor: '#fff',
margin: 'auto',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '30px' }}>
{' '}
Titlu
{' '}
</h2>
<div>
<svg
id="a5349118-8809-40c5-ab34-fa23ee5ede74"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
width="761"
height="700.71023"
viewBox="0 0 761 700.71023"
>
<title>link</title>
<path
d="M261.134,348.56808c12.42842,23.049,38.806,32.94351,38.806,32.94351s6.22712-27.47543-6.2013-50.52448-38.806-32.94351-38.806-32.94351S248.70559,325.519,261.134,348.56808Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
<path
d="M269.67653,340.98511c22.43841,13.49969,31.08016,40.3138,31.08016,40.3138s-27.73812,4.92678-50.17653-8.57291S219.5,332.4122,219.5,332.4122,247.23811,327.48541,269.67653,340.98511Z"
transform="translate(-219.5 -99.64489)"
fill="#6c63ff"
/>
<path
d="M980.5,723.35511c0,24.30053-57.75527,77-129,77s-129-52.69947-129-77,57.75527-11,129-11S980.5,699.05458,980.5,723.35511Z"
transform="translate(-219.5 -99.64489)"
fill="#3f3d56"
/>
<path
d="M980.5,723.35511c0,24.30053-57.75527,77-129,77s-129-52.69947-129-77,57.75527-11,129-11S980.5,699.05458,980.5,723.35511Z"
transform="translate(-219.5 -99.64489)"
opacity="0.1"
/>
<ellipse
cx="632"
cy="623.71023"
rx="129"
ry="44"
fill="#3f3d56"
/>
<rect
x="76"
y="301.71023"
width="410"
height="234"
fill="#f1f1f1"
/>
<ellipse
cx="677.5"
cy="40.71023"
rx="39.5"
ry="37"
fill="#2f2e41"
/>
<path
d="M782,370.85511l-10,14s-48,10-30,25,44-14,44-14l14-18Z"
transform="translate(-219.5 -99.64489)"
fill="#ffb8b8"
/>
<path
d="M834,211.85511s-13,0-16,18-6,78-6,78-42,55-35,62,15,20,20,18,48-61,48-61Z"
transform="translate(-219.5 -99.64489)"
fill="#6c63ff"
/>
<path
d="M834,211.85511s-13,0-16,18-6,78-6,78-42,55-35,62,15,20,20,18,48-61,48-61Z"
transform="translate(-219.5 -99.64489)"
opacity="0.1"
/>
<path
d="M874,160.85511s-1,39-13,41-8,15-8,15,39,23,65,0l5-12s-18-13-10-31Z"
transform="translate(-219.5 -99.64489)"
fill="#ffb8b8"
/>
<path
d="M807,400.85511s-59,110-37,144,55,104,60,104,33-14,31-23-32-76-40-82-4-22-3-23,34-54,34-54-1,84,3,97-1,106,4,110,28,11,32,5,16-97,8-118l15-144Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
<path
d="M861,667.85511l-25,46s-36,26-11,30,40-6,40-6l22-16v-46Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
<path
d="M827,641.85511l13,31s5,13,0,16-19,21-10,23a29.29892,29.29892,0,0,0,5.49537.5463,55.56588,55.56588,0,0,0,40.39769-16.43935L884,687.85511s-27.77007-63.94827-27.385-63.47413S827,641.85511,827,641.85511Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
<circle cx="679.5" cy="51.21023" r="34" fill="#ffb8b8" />
<path
d="M918.5,198.35511l-10.5,10.5s-32,12-47,0c0,0,5.5-11.5,5.5-10.5s-43.5,7.5-47.5,25.5,3,49,3,49-28,132-17,135,114,28,113,9,8-97,8-97l35-67s-5-22-17-29S918.5,198.35511,918.5,198.35511Z"
transform="translate(-219.5 -99.64489)"
fill="#6c63ff"
/>
<path
d="M874,393.85511l-13,8s-50,34-24,40,41-24,41-24l10-12Z"
transform="translate(-219.5 -99.64489)"
fill="#ffb8b8"
/>
<path
d="M948,246.85511l9,9s6,84-6,101-67,63-70,60-22-18-18-20,57.18287-57.56942,57.18287-57.56942L916,261.85511Z"
transform="translate(-219.5 -99.64489)"
opacity="0.1"
/>
<path
d="M952,243.85511l9,9s6,84-6,101-67,63-70,60-22-18-18-20,57.18287-57.56942,57.18287-57.56942L920,258.85511Z"
transform="translate(-219.5 -99.64489)"
fill="#6c63ff"
/>
<path
d="M884.93835,102.56024s-11.55751-4.20273-27.31774,4.72807l8.40545,2.10136s-12.60818,1.05069-14.18421,17.8616h5.77876s-3.67739,14.70955,0,18.91228l2.364-4.4654,6.82944,13.65887,1.576-6.82943,3.15205,1.05068,2.10136-11.03216s5.25341,7.88011,9.45614,8.40545v-6.82943s11.55751,13.13353,15.23489,12.60819l-5.25341-7.35478,7.35478,1.576-3.15205-5.25341,18.91228,5.25341-4.20273-5.25341,13.13353,4.20273,6.30409,2.62671s8.9308-20.48831-3.67738-34.67252S896.75852,96.51882,884.93835,102.56024Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
<path
d="M554.59811,528.43759q-1.25967.794-2.60744,1.47382a30.87649,30.87649,0,0,1-41.42627-13.64933l-6.65209-13.19072,4.465-2.251,6.65209,13.19073a25.84163,25.84163,0,1,0,46.14646-23.27365l-27.93638-55.39357A25.84162,25.84162,0,1,0,487.093,458.61749l9.89088,19.612-4.465,2.251L482.628,460.86852a30.84193,30.84193,0,0,1,55.07639-27.7757l27.93637,55.39356a30.84665,30.84665,0,0,1-11.04267,39.95121Z"
transform="translate(-219.5 -99.64489)"
fill="#3f3d56"
/>
<path
d="M557.3,596.80949q-1.24231.783-2.57748,1.45725a30.87615,30.87615,0,0,1-41.42627-13.64933l-27.93638-55.39356a30.84193,30.84193,0,0,1,55.07639-27.77571L547.77488,516l-4.465,2.251-7.33863-14.55188a25.84162,25.84162,0,1,0-46.14645,23.27365l27.93637,55.39356a25.84163,25.84163,0,1,0,46.14646-23.27365l-9.61614-19.0671,4.465-2.251,9.61614,19.0671A30.88584,30.88584,0,0,1,557.3,596.80949Z"
transform="translate(-219.5 -99.64489)"
fill="#3f3d56"
/>
<path
d="M756.5,637.35511h-462v-257h462Zm-460-2h458v-253h-458Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
</svg>
</div>
<p>
Tot ce este în interiorul acestui link devine la rîndul lui,
un link.
</p>
</div>
</a>
</DemoPreview>
<Highlight
className="my-5"
language="html"
code={`
<a href="#">
<div style="
border: 1px solid #eaeaea;
border-radius: 15px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
padding: 1em;
width: 500px;
margin: auto;
text-align: center;
">
<h2 style="font-size: 30px;">Primul exemplu are un div cu elemente în interior, plasat în interiorul unui link</h2>
<div>
<svg id="a5349118-8809-40c5-ab34-fa23ee5ede74" width="200" height="200" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="761" height="700.71023" viewBox="0 0 761 700.71023"><title>link</title><path d="M261.134,348.56808c12.42842,23.049,38.806,32.94351,38.806,32.94351s6.22712-27.47543-6.2013-50.52448-38.806-32.94351-38.806-32.94351S248.70559,325.519,261.134,348.56808Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/><path d="M269.67653,340.98511c22.43841,13.49969,31.08016,40.3138,31.08016,40.3138s-27.73812,4.92678-50.17653-8.57291S219.5,332.4122,219.5,332.4122,247.23811,327.48541,269.67653,340.98511Z" transform="translate(-219.5 -99.64489)" fill="#6c63ff"/><path d="M980.5,723.35511c0,24.30053-57.75527,77-129,77s-129-52.69947-129-77,57.75527-11,129-11S980.5,699.05458,980.5,723.35511Z" transform="translate(-219.5 -99.64489)" fill="#3f3d56"/><path d="M980.5,723.35511c0,24.30053-57.75527,77-129,77s-129-52.69947-129-77,57.75527-11,129-11S980.5,699.05458,980.5,723.35511Z" transform="translate(-219.5 -99.64489)" opacity="0.1"/><ellipse cx="632" cy="623.71023" rx="129" ry="44" fill="#3f3d56"/><rect x="76" y="301.71023" width="410" height="234" fill="#f1f1f1"/><ellipse cx="677.5" cy="40.71023" rx="39.5" ry="37" fill="#2f2e41"/><path d="M782,370.85511l-10,14s-48,10-30,25,44-14,44-14l14-18Z" transform="translate(-219.5 -99.64489)" fill="#ffb8b8"/><path d="M834,211.85511s-13,0-16,18-6,78-6,78-42,55-35,62,15,20,20,18,48-61,48-61Z" transform="translate(-219.5 -99.64489)" fill="#6c63ff"/><path d="M834,211.85511s-13,0-16,18-6,78-6,78-42,55-35,62,15,20,20,18,48-61,48-61Z" transform="translate(-219.5 -99.64489)" opacity="0.1"/><path d="M874,160.85511s-1,39-13,41-8,15-8,15,39,23,65,0l5-12s-18-13-10-31Z" transform="translate(-219.5 -99.64489)" fill="#ffb8b8"/><path d="M807,400.85511s-59,110-37,144,55,104,60,104,33-14,31-23-32-76-40-82-4-22-3-23,34-54,34-54-1,84,3,97-1,106,4,110,28,11,32,5,16-97,8-118l15-144Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/><path d="M861,667.85511l-25,46s-36,26-11,30,40-6,40-6l22-16v-46Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/><path d="M827,641.85511l13,31s5,13,0,16-19,21-10,23a29.29892,29.29892,0,0,0,5.49537.5463,55.56588,55.56588,0,0,0,40.39769-16.43935L884,687.85511s-27.77007-63.94827-27.385-63.47413S827,641.85511,827,641.85511Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/><circle cx="679.5" cy="51.21023" r="34" fill="#ffb8b8"/><path d="M918.5,198.35511l-10.5,10.5s-32,12-47,0c0,0,5.5-11.5,5.5-10.5s-43.5,7.5-47.5,25.5,3,49,3,49-28,132-17,135,114,28,113,9,8-97,8-97l35-67s-5-22-17-29S918.5,198.35511,918.5,198.35511Z" transform="translate(-219.5 -99.64489)" fill="#6c63ff"/><path d="M874,393.85511l-13,8s-50,34-24,40,41-24,41-24l10-12Z" transform="translate(-219.5 -99.64489)" fill="#ffb8b8"/><path d="M948,246.85511l9,9s6,84-6,101-67,63-70,60-22-18-18-20,57.18287-57.56942,57.18287-57.56942L916,261.85511Z" transform="translate(-219.5 -99.64489)" opacity="0.1"/><path d="M952,243.85511l9,9s6,84-6,101-67,63-70,60-22-18-18-20,57.18287-57.56942,57.18287-57.56942L920,258.85511Z" transform="translate(-219.5 -99.64489)" fill="#6c63ff"/><path d="M884.93835,102.56024s-11.55751-4.20273-27.31774,4.72807l8.40545,2.10136s-12.60818,1.05069-14.18421,17.8616h5.77876s-3.67739,14.70955,0,18.91228l2.364-4.4654,6.82944,13.65887,1.576-6.82943,3.15205,1.05068,2.10136-11.03216s5.25341,7.88011,9.45614,8.40545v-6.82943s11.55751,13.13353,15.23489,12.60819l-5.25341-7.35478,7.35478,1.576-3.15205-5.25341,18.91228,5.25341-4.20273-5.25341,13.13353,4.20273,6.30409,2.62671s8.9308-20.48831-3.67738-34.67252S896.75852,96.51882,884.93835,102.56024Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/><path d="M554.59811,528.43759q-1.25967.794-2.60744,1.47382a30.87649,30.87649,0,0,1-41.42627-13.64933l-6.65209-13.19072,4.465-2.251,6.65209,13.19073a25.84163,25.84163,0,1,0,46.14646-23.27365l-27.93638-55.39357A25.84162,25.84162,0,1,0,487.093,458.61749l9.89088,19.612-4.465,2.251L482.628,460.86852a30.84193,30.84193,0,0,1,55.07639-27.7757l27.93637,55.39356a30.84665,30.84665,0,0,1-11.04267,39.95121Z" transform="translate(-219.5 -99.64489)" fill="#3f3d56"/><path d="M557.3,596.80949q-1.24231.783-2.57748,1.45725a30.87615,30.87615,0,0,1-41.42627-13.64933l-27.93638-55.39356a30.84193,30.84193,0,0,1,55.07639-27.77571L547.77488,516l-4.465,2.251-7.33863-14.55188a25.84162,25.84162,0,1,0-46.14645,23.27365l27.93637,55.39356a25.84163,25.84163,0,1,0,46.14646-23.27365l-9.61614-19.0671,4.465-2.251,9.61614,19.0671A30.88584,30.88584,0,0,1,557.3,596.80949Z" transform="translate(-219.5 -99.64489)" fill="#3f3d56"/><path d="M756.5,637.35511h-462v-257h462Zm-460-2h458v-253h-458Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/></svg>
</div>
<p>Tot ce este în interiorul acestui link devine la rîndul lui, un link.</p>
</div>
</a>
`}
/>
<p>
Al doilea exemplu are un link în titlu și link-ul are un
<a href="/css/pseudo-elements"> pseudo-element</a>
{' '}
definit care
"acoperă" întregul card.
</p>
<p>
Această modalitate are de asemenea implicații. Și în acest caz e
destul de greu să selectem textul din interior, dar generează un
comportament mai intuitiv pentru tehnologiile assistive, lucru pe
care e bine să-l avem în vedere când scriem cod pentru aplicațiile
noastre.
</p>
<p>
Exemplul acesta ne oferă și posibilitatea să includem link-uri
multiple. Când vine vorba să includem link-uri în interiorul altor
link-uri, lucrurile se complică puțin. Un articol mai detaliat pe
această temă găsim aici:
<a
href="https://css-tricks.com/nested-links/"
target="_blank"
rel="noopener noreferrer"
>
{' '}
nested links
</a>
</p>
<DemoPreview>
<a href="#" style={{ textDecoration: 'none' }}>
<div
style={{
position: 'relative',
border: '1px solid #eaeaea',
borderRadius: '15px',
boxShadow: '2px 2px 2px rgba(0, 0, 0, 0.2)',
padding: '1em',
width: '500px',
backgroundColor: '#fff',
margin: 'auto',
textAlign: 'center',
}}
>
<h2 style={{ fontSize: '30px' }}>
<a href="#0">Titlu </a>
</h2>
<div>
<svg
id="a5349118-8809-40c5-ab34-fa23ee5ede74"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
width="761"
height="700.71023"
viewBox="0 0 761 700.71023"
>
<title>link</title>
<path
d="M261.134,348.56808c12.42842,23.049,38.806,32.94351,38.806,32.94351s6.22712-27.47543-6.2013-50.52448-38.806-32.94351-38.806-32.94351S248.70559,325.519,261.134,348.56808Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
<path
d="M269.67653,340.98511c22.43841,13.49969,31.08016,40.3138,31.08016,40.3138s-27.73812,4.92678-50.17653-8.57291S219.5,332.4122,219.5,332.4122,247.23811,327.48541,269.67653,340.98511Z"
transform="translate(-219.5 -99.64489)"
fill="#6c63ff"
/>
<path
d="M980.5,723.35511c0,24.30053-57.75527,77-129,77s-129-52.69947-129-77,57.75527-11,129-11S980.5,699.05458,980.5,723.35511Z"
transform="translate(-219.5 -99.64489)"
fill="#3f3d56"
/>
<path
d="M980.5,723.35511c0,24.30053-57.75527,77-129,77s-129-52.69947-129-77,57.75527-11,129-11S980.5,699.05458,980.5,723.35511Z"
transform="translate(-219.5 -99.64489)"
opacity="0.1"
/>
<ellipse
cx="632"
cy="623.71023"
rx="129"
ry="44"
fill="#3f3d56"
/>
<rect
x="76"
y="301.71023"
width="410"
height="234"
fill="#f1f1f1"
/>
<ellipse
cx="677.5"
cy="40.71023"
rx="39.5"
ry="37"
fill="#2f2e41"
/>
<path
d="M782,370.85511l-10,14s-48,10-30,25,44-14,44-14l14-18Z"
transform="translate(-219.5 -99.64489)"
fill="#ffb8b8"
/>
<path
d="M834,211.85511s-13,0-16,18-6,78-6,78-42,55-35,62,15,20,20,18,48-61,48-61Z"
transform="translate(-219.5 -99.64489)"
fill="#6c63ff"
/>
<path
d="M834,211.85511s-13,0-16,18-6,78-6,78-42,55-35,62,15,20,20,18,48-61,48-61Z"
transform="translate(-219.5 -99.64489)"
opacity="0.1"
/>
<path
d="M874,160.85511s-1,39-13,41-8,15-8,15,39,23,65,0l5-12s-18-13-10-31Z"
transform="translate(-219.5 -99.64489)"
fill="#ffb8b8"
/>
<path
d="M807,400.85511s-59,110-37,144,55,104,60,104,33-14,31-23-32-76-40-82-4-22-3-23,34-54,34-54-1,84,3,97-1,106,4,110,28,11,32,5,16-97,8-118l15-144Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
<path
d="M861,667.85511l-25,46s-36,26-11,30,40-6,40-6l22-16v-46Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
<path
d="M827,641.85511l13,31s5,13,0,16-19,21-10,23a29.29892,29.29892,0,0,0,5.49537.5463,55.56588,55.56588,0,0,0,40.39769-16.43935L884,687.85511s-27.77007-63.94827-27.385-63.47413S827,641.85511,827,641.85511Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
<circle cx="679.5" cy="51.21023" r="34" fill="#ffb8b8" />
<path
d="M918.5,198.35511l-10.5,10.5s-32,12-47,0c0,0,5.5-11.5,5.5-10.5s-43.5,7.5-47.5,25.5,3,49,3,49-28,132-17,135,114,28,113,9,8-97,8-97l35-67s-5-22-17-29S918.5,198.35511,918.5,198.35511Z"
transform="translate(-219.5 -99.64489)"
fill="#6c63ff"
/>
<path
d="M874,393.85511l-13,8s-50,34-24,40,41-24,41-24l10-12Z"
transform="translate(-219.5 -99.64489)"
fill="#ffb8b8"
/>
<path
d="M948,246.85511l9,9s6,84-6,101-67,63-70,60-22-18-18-20,57.18287-57.56942,57.18287-57.56942L916,261.85511Z"
transform="translate(-219.5 -99.64489)"
opacity="0.1"
/>
<path
d="M952,243.85511l9,9s6,84-6,101-67,63-70,60-22-18-18-20,57.18287-57.56942,57.18287-57.56942L920,258.85511Z"
transform="translate(-219.5 -99.64489)"
fill="#6c63ff"
/>
<path
d="M884.93835,102.56024s-11.55751-4.20273-27.31774,4.72807l8.40545,2.10136s-12.60818,1.05069-14.18421,17.8616h5.77876s-3.67739,14.70955,0,18.91228l2.364-4.4654,6.82944,13.65887,1.576-6.82943,3.15205,1.05068,2.10136-11.03216s5.25341,7.88011,9.45614,8.40545v-6.82943s11.55751,13.13353,15.23489,12.60819l-5.25341-7.35478,7.35478,1.576-3.15205-5.25341,18.91228,5.25341-4.20273-5.25341,13.13353,4.20273,6.30409,2.62671s8.9308-20.48831-3.67738-34.67252S896.75852,96.51882,884.93835,102.56024Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
<path
d="M554.59811,528.43759q-1.25967.794-2.60744,1.47382a30.87649,30.87649,0,0,1-41.42627-13.64933l-6.65209-13.19072,4.465-2.251,6.65209,13.19073a25.84163,25.84163,0,1,0,46.14646-23.27365l-27.93638-55.39357A25.84162,25.84162,0,1,0,487.093,458.61749l9.89088,19.612-4.465,2.251L482.628,460.86852a30.84193,30.84193,0,0,1,55.07639-27.7757l27.93637,55.39356a30.84665,30.84665,0,0,1-11.04267,39.95121Z"
transform="translate(-219.5 -99.64489)"
fill="#3f3d56"
/>
<path
d="M557.3,596.80949q-1.24231.783-2.57748,1.45725a30.87615,30.87615,0,0,1-41.42627-13.64933l-27.93638-55.39356a30.84193,30.84193,0,0,1,55.07639-27.77571L547.77488,516l-4.465,2.251-7.33863-14.55188a25.84162,25.84162,0,1,0-46.14645,23.27365l27.93637,55.39356a25.84163,25.84163,0,1,0,46.14646-23.27365l-9.61614-19.0671,4.465-2.251,9.61614,19.0671A30.88584,30.88584,0,0,1,557.3,596.80949Z"
transform="translate(-219.5 -99.64489)"
fill="#3f3d56"
/>
<path
d="M756.5,637.35511h-462v-257h462Zm-460-2h458v-253h-458Z"
transform="translate(-219.5 -99.64489)"
fill="#2f2e41"
/>
</svg>
</div>
<p>
Tot ce este în interiorul acestui link devine la rândul lui un
link.
</p>
</div>
</a>
</DemoPreview>
<Highlight
className="my-5"
language="html"
code={`
<style>
h2 a::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div style="
position: relative;
border: 1px solid #eaeaea;
border-radius: 15px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
padding: 1px;
width: 500px;
background-color: #fff;
margin: auto;
text-align: center;">
<h2 style="font-size: 30px;">
<a href="#0">Al doilea exemplu are un link în titlu și link-ul are un pseudo-element definit care "acoperă" întregul card.</a>
</h2>
<div>
<svg id="a5349118-8809-40c5-ab34-fa23ee5ede74" width="200" height="200" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="761" height="700.71023" viewBox="0 0 761 700.71023"><title>link</title><path d="M261.134,348.56808c12.42842,23.049,38.806,32.94351,38.806,32.94351s6.22712-27.47543-6.2013-50.52448-38.806-32.94351-38.806-32.94351S248.70559,325.519,261.134,348.56808Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/><path d="M269.67653,340.98511c22.43841,13.49969,31.08016,40.3138,31.08016,40.3138s-27.73812,4.92678-50.17653-8.57291S219.5,332.4122,219.5,332.4122,247.23811,327.48541,269.67653,340.98511Z" transform="translate(-219.5 -99.64489)" fill="#6c63ff"/><path d="M980.5,723.35511c0,24.30053-57.75527,77-129,77s-129-52.69947-129-77,57.75527-11,129-11S980.5,699.05458,980.5,723.35511Z" transform="translate(-219.5 -99.64489)" fill="#3f3d56"/><path d="M980.5,723.35511c0,24.30053-57.75527,77-129,77s-129-52.69947-129-77,57.75527-11,129-11S980.5,699.05458,980.5,723.35511Z" transform="translate(-219.5 -99.64489)" opacity="0.1"/><ellipse cx="632" cy="623.71023" rx="129" ry="44" fill="#3f3d56"/><rect x="76" y="301.71023" width="410" height="234" fill="#f1f1f1"/><ellipse cx="677.5" cy="40.71023" rx="39.5" ry="37" fill="#2f2e41"/><path d="M782,370.85511l-10,14s-48,10-30,25,44-14,44-14l14-18Z" transform="translate(-219.5 -99.64489)" fill="#ffb8b8"/><path d="M834,211.85511s-13,0-16,18-6,78-6,78-42,55-35,62,15,20,20,18,48-61,48-61Z" transform="translate(-219.5 -99.64489)" fill="#6c63ff"/><path d="M834,211.85511s-13,0-16,18-6,78-6,78-42,55-35,62,15,20,20,18,48-61,48-61Z" transform="translate(-219.5 -99.64489)" opacity="0.1"/><path d="M874,160.85511s-1,39-13,41-8,15-8,15,39,23,65,0l5-12s-18-13-10-31Z" transform="translate(-219.5 -99.64489)" fill="#ffb8b8"/><path d="M807,400.85511s-59,110-37,144,55,104,60,104,33-14,31-23-32-76-40-82-4-22-3-23,34-54,34-54-1,84,3,97-1,106,4,110,28,11,32,5,16-97,8-118l15-144Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/><path d="M861,667.85511l-25,46s-36,26-11,30,40-6,40-6l22-16v-46Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/><path d="M827,641.85511l13,31s5,13,0,16-19,21-10,23a29.29892,29.29892,0,0,0,5.49537.5463,55.56588,55.56588,0,0,0,40.39769-16.43935L884,687.85511s-27.77007-63.94827-27.385-63.47413S827,641.85511,827,641.85511Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/><circle cx="679.5" cy="51.21023" r="34" fill="#ffb8b8"/><path d="M918.5,198.35511l-10.5,10.5s-32,12-47,0c0,0,5.5-11.5,5.5-10.5s-43.5,7.5-47.5,25.5,3,49,3,49-28,132-17,135,114,28,113,9,8-97,8-97l35-67s-5-22-17-29S918.5,198.35511,918.5,198.35511Z" transform="translate(-219.5 -99.64489)" fill="#6c63ff"/><path d="M874,393.85511l-13,8s-50,34-24,40,41-24,41-24l10-12Z" transform="translate(-219.5 -99.64489)" fill="#ffb8b8"/><path d="M948,246.85511l9,9s6,84-6,101-67,63-70,60-22-18-18-20,57.18287-57.56942,57.18287-57.56942L916,261.85511Z" transform="translate(-219.5 -99.64489)" opacity="0.1"/><path d="M952,243.85511l9,9s6,84-6,101-67,63-70,60-22-18-18-20,57.18287-57.56942,57.18287-57.56942L920,258.85511Z" transform="translate(-219.5 -99.64489)" fill="#6c63ff"/><path d="M884.93835,102.56024s-11.55751-4.20273-27.31774,4.72807l8.40545,2.10136s-12.60818,1.05069-14.18421,17.8616h5.77876s-3.67739,14.70955,0,18.91228l2.364-4.4654,6.82944,13.65887,1.576-6.82943,3.15205,1.05068,2.10136-11.03216s5.25341,7.88011,9.45614,8.40545v-6.82943s11.55751,13.13353,15.23489,12.60819l-5.25341-7.35478,7.35478,1.576-3.15205-5.25341,18.91228,5.25341-4.20273-5.25341,13.13353,4.20273,6.30409,2.62671s8.9308-20.48831-3.67738-34.67252S896.75852,96.51882,884.93835,102.56024Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/><path d="M554.59811,528.43759q-1.25967.794-2.60744,1.47382a30.87649,30.87649,0,0,1-41.42627-13.64933l-6.65209-13.19072,4.465-2.251,6.65209,13.19073a25.84163,25.84163,0,1,0,46.14646-23.27365l-27.93638-55.39357A25.84162,25.84162,0,1,0,487.093,458.61749l9.89088,19.612-4.465,2.251L482.628,460.86852a30.84193,30.84193,0,0,1,55.07639-27.7757l27.93637,55.39356a30.84665,30.84665,0,0,1-11.04267,39.95121Z" transform="translate(-219.5 -99.64489)" fill="#3f3d56"/><path d="M557.3,596.80949q-1.24231.783-2.57748,1.45725a30.87615,30.87615,0,0,1-41.42627-13.64933l-27.93638-55.39356a30.84193,30.84193,0,0,1,55.07639-27.77571L547.77488,516l-4.465,2.251-7.33863-14.55188a25.84162,25.84162,0,1,0-46.14645,23.27365l27.93637,55.39356a25.84163,25.84163,0,1,0,46.14646-23.27365l-9.61614-19.0671,4.465-2.251,9.61614,19.0671A30.88584,30.88584,0,0,1,557.3,596.80949Z" transform="translate(-219.5 -99.64489)" fill="#3f3d56"/><path d="M756.5,637.35511h-462v-257h462Zm-460-2h458v-253h-458Z" transform="translate(-219.5 -99.64489)" fill="#2f2e41"/></svg>
</div>
<p>Tot ce este în interiorul acestui link devine la rîndul lui un link.</p>
</div>
`}
/>
<LessonTip icon={faQuestionCircle}>
Atributul
{' '}
<FormattedText as="strong">style</FormattedText>
{' '}
este folosit pentru a adăuga reguli
CSS elementelor. Incă nu am ajuns la acel capitol deci e absolut
normal să nu știi ce face.
<br />
{' '}
<br />
Totuși, te rugăm să-l pui acolo pentru a obține același rezultat ca cel de mai sus.
</LessonTip>
</Demo>
<Footer />
</>
</>
);
}
