Share
Site-ul de portofoliu unic câștigat, proiectat în mod unic de către Paul J Noble a atras atenția multor oameni, nu numai clienților. Astăzi va urmări etapa de proiectare a acestui tutorial și va demonstra cum este codificat.
Pentru acest tutorial, site-ul excelent ROA (Suedia) este folosit ca exemplu de element de portofoliu. Acest site a fost prezentat recent în Creattica și autorul nu este afiliat cu ROA. Simțiți-vă libertatea de a vă folosi munca proprie ca articole de portofoliu.
Vom crea un site de portofoliu online cu o grilă de imagini, un antet fix, elemente de text și interfață. Marcarea va fi stilistică astfel încât conținutul să se potrivească fără derularea în aproape toate afișările utilizatorilor și să se scadă frumos la dimensiunile mai mari ale ecranului, în timp ce se degradează grațios la rezoluții mai mici. Grilă de imagini va afișa numai imaginea curentă și activă, dar va conține mult mai multe imagini ascunse care pot fi vizualizate prin navigare la nivel de pagină.
Crearea șablonului HTML și a CSS ne va pregăti pentru următoarea parte a acestui tutorial, în care vom adăuga stratul de interacțiune folosind Javascript și vom aduce designul la viață.
Creați un nou document html în editorul dvs. de text preferat. Atașați jQuery (1.4.2+) și un nou fișier CSS gol.
Primul marcaj pe care îl vom crea va fi un div care ține tot conținutul nostru. Mai târziu, vom seta valorile minime de înălțime și lățime pentru acest div ("#page") pentru a ne asigura că graficul de proiectare este redus la rezoluții reduse. Creați câteva diviziuni pentru elementele majore ale paginii ilustrate mai jos.
Numele dvs. - Portofoliu digital
Pentru site-urile care nu necesită derulare verticală, este adesea mai puțin obositor să plasați elemente de navigare și elemente de antet în partea de jos a ecranului. Acest lucru eliberează spațiu suplimentar la cel mai des vizionat spațiu din apropierea ferestrei. Ne-ar plăcea ca acest element să întindă întreaga lățime a afișajului utilizatorului și să fie întotdeauna poziționat în partea de jos a ecranului.
Deși acest lucru este plasat vizual în partea de jos a ecranului, acesta va apărea efectiv în partea de sus a marcajului documentului. Vom crea un div cu antetul ID și apoi un div imbricat cu clasa "interior". Un înveliș interior va simplifica poziționarea elementelor interne.
În cadrul pachetului vom crea trei diviziuni; "#logo", "#social" și "#nav".
Pentru logo-ul vom asambla un fișier imagine numit "images_26 / build-an-innovative-portfolio-site-using-alternative-uiux.png" și adăugați alt text. Creați fișierul de imagine logos tăind logo-ul dvs. din PSD. Întrucât aceasta va fi poziționată absolut, dimensiunea exactă nu este critică - cu toate acestea, asigurați-vă că imaginea dvs. de logo-ul se încadrează în bara de navigare în design.
Pentru butoanele sociale vom avea nevoie de trei ancore - câte unul pentru Facebook, Flickr și LinkedIn. Acestea vor avea imagini de fundal aplicate ca grafică, totuși vom folosi textul în scopuri semantice și vom ascunde acest lucru cu CSS. Pentru aceste linkuri externe vom folosi atributul target = "_ blank", astfel încât paginile să se deschidă într-o nouă filă sau fereastră.
Pentru navigare vom folosi din nou trei ancore și le vom atribui propriilor clase și valori id.
Găsește-mă pe Facebook Vezi-mi Flickr Găsește-mă pe LinkedInDespre activitatea de fotografie
Obiectele noastre grafice pentru elementele rămase nu vor fi la fel de simple ca logo-ul. Pe măsură ce sunt interactive, vor avea nevoie de stări de hover, iar butoanele de navigare vor necesita stări active.
Pentru butoanele de navigare vom crea o imagine sprite. Reveniți la Photoshop și creați o selecție în jurul butoanelor din PSD. Selectați Editare> Copiere combinată.
Apoi selectați Fișier> Nou. Se va afișa un dialog cu lățimea și înălțimea care nu sunt respectate în dreptul dreptunghiului selectat anterior. Modificați înălțimea la valoarea de 3 ori valoarea implicită. Aceasta va crea o nouă pânză care se va potrivi cu trei versiuni ale graficului de navigare, câte una pentru fiecare stare necesară; activ, hover și oprit.
Acum, mutați folderul cu butoane din PSD și clonați acest grup de două ori pentru a crea trei grupuri. Reglați ușor culorile textului pentru a fi uniform pentru fiecare grup pentru a crea diferite stări ale butoanelor. Mai jos este un exemplu de grafic final. Salvați versiunea finită ca PNG (24-biți) la "img / icons / nav.png" asigurându-vă că fundalul este transparent.
Pentru butoanele de social media, vom avea nevoie doar de două stări ("hover" și "off"). Repetați procesul de mai sus pentru a crea o imagine sprite pentru butoane sociale. Salvați imaginea ca "img / icons / social-media.png".
În cele din urmă, creați o imagine nouă "img / bg / header.png".
Acum, că am dezvoltat structura și activele imaginii, să creăm câteva CSS pentru a începe să styling această pagină.
În partea de sus a fișierului CSS vom include o resetare CSS pentru a ne asigura că nicio valoare implicită a browserului nu va afecta aspectul.
html, body, div, span, applet, obiect, iframe, h1, h2, h3, h4, h5, h6, p, bloc, em, font, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, supt, set de câmp, formă, etichetă, legendă marja: 0; umplutura: 0; frontieră: 0; contur: 0; font-size: 100%; aliniere verticală: linia de bază; fundal: transparent; corp linie-înălțime: 1.2; font-family: arial, sans-serif; ol, ul stil-list: nici unul; blockquote, q citate: none; blockquote: înainte, blockquote: după, q: înainte, q: după content: "; -prin;
Apoi vom crea câteva stiluri de bază pentru elementele principale ale paginii.
corp, html înălțime: 100%; corp background: # 0f1219; #page height: 100%; min-înălțime: 700px; poziție: relativă; min-lățime: 1100px; overflow: ascuns; h1, h2, p, li, div font-family: "arial", "helvetica", sans-serif; li font-size: 12px;
Apoi, vom modela antetul. Vom folosi poziția absolută a logo-ului și a altor elemente pentru a ușura controlul asupra designului.
Notă: vom ancora stilul nostru ca elemente de nivel de bloc ("display: block") și cu indentare text-indent pentru a asigura elemente accesibile, dar ele bazate pe grafic. Lățimile și înălțimile pot fi ajustate dacă fișierele sprite personalizate ale imaginii diferă în funcție de dimensiunile lor.
Accentsconagua
#header background: url ('? /img/bg/header.png') repetați; înălțime: 60px; z-index: 1200; overflow: ascuns; poziția: absolută; fund: 0; lățime: 100%; #logo poziție: absolută; top: 0px; stânga: 30px; #header.inner width: auto; padding: 0 30px; poziție: relativă; înălțime: 70px; #nav poziție: absolută; drept: 30px; top: 14px; înălțime: 31px; lățime: 290px; #n a background: url ('? /img/icons/nav.png') no-repeat 0 0; text-indent: -9999px; float: dreapta; afișare: bloc; contur: nici unul; înălțime: 31px; Acum vom defini stilurile individuale pentru fiecare buton de navigare prin maparea diferitelor locații de sprite de imagine în fiecare clasă de butoane.
#nav a.work lățime: 95px; #nav a.work:hover pozitie fundal: 0 -62px; #nav a.about width: 93px; Poziția fundalului: -188px 0; #nav a.about: poziționați background-position: -188px -62px; #nav a.workActive width: 95px; Poziția fundalului: -0px-31px; cursor: implicit; #nav a.aboutActiv (lățime: 93px; pozitie fundal: -188px-31px; cursor: implicit; #nav a.photos width: 93px; pozitie fundal: -95px 0; #nav a.photos:hover pozitie de fundal: -95px -62px; #nav a.photosActive width: 93px; fundal-poziție: -95px-31px; cursor: implicit;
Apoi vom face același lucru și pentru butoanele de social media.
#social width: 88px; înălțime: 26px; poziția: absolută; top: 17px; dreapta: 330px; #social a display: block; fundal: url ('? /img/icons/social-media.png') no-repeat 0 0; plutește la stânga; înălțime: 26px; lățime: 26px; contur: nici unul; plutește la stânga; margin-dreapta: 4px; text-indent: -9999px; overflow: ascuns; #social a.fb background-position: 0 0; #social a.fb: hover background-position: 0 -26px; #social a.flickr background-position: -30px 0; .flickr: mutați background-position: -30px -26px; #social a.linkedin background-position: -60px 0; margin-right: 0; #social a.linkedin: hover background-position: -60px -26px; OK, actualizați acum pagina și ar trebui să vedeți ceva similar cu imaginea de mai jos. Deplasați cursorul peste butoanele pentru a vedea diferitele stări. Dacă există vreo stare ciudată în stările de hover, încercați să ajustați proprietatea de poziție în fundal în CSS.
Încercați să redimensionați fereastra browserului pentru a simula afișări cu rezoluție mai mică. Barele de derulare ar trebui să apară odată ce fereastra este redusă sub valorile min-înălțime și min-lățime definite pentru "#page" div.
Vom folosi un efect de lumină spot pentru a focaliza atenția vizuală asupra imaginii active în timp ce sugerăm conținutul înconjurător. Pentru a crea o separare mai puternică a fundalului / primului plan, vom aplica, de asemenea, un model textil subtil în fundal.
Pentru a realiza acest lucru, va trebui să adăugăm o marjă. Creați următoarele divs noi imbricate în div '#main'.
Mai întâi să creăm imaginea reflectoarelor ("images_26 / build-an-innovative-portfolio-site-using-alternative-uiux_2.png") care va suprapune galeria. Revenind la Photoshop, selectați stratul din grupul "vignette". Accesați Selectare> Toate și copiați regiunea selectată. Creați un document nou (ar trebui să fie cel puțin 1400 x 900) și lipiți clipboard-ul în pânză.
Acum, va trebui să facem o ajustare a imaginii noastre. Mai întâi, extindeți dimensiunea panzei, astfel încât acesta să fie cu 100 de pixeli mai sus în partea de sus.
Apoi, extindeți marginea din stânga cu 50 de pixeli.
În cele din urmă, extindeți marginea inferioară și dreaptă, astfel încât dimensiunea totală a panzei este de 1600 x 1600.
Acum, luați uneltele cupă și cu opțiunea anti-aliasing "off" și toleranța setată la "0", umpleți regiunea transparentă în jurul marginilor cu culoarea de fundal a paginii (# 0f1219). Rezultatul final ar trebui să arate similar cu imaginea de mai jos.
Selectați Fișier> Salvare pentru Web și salvați această imagine ca PNG pe 24 de biți ("images_26 / build-an-innovative-portfolio-site-using-alternative-uiux_2.png".
Acum, revenind la imaginea sursă originală, selectați layerul Formă umplere 1 (acesta este stratul de linii diagonale). Faceți clic dreapta și selectați "Rasterize layer". Apoi, măriți apropierea și selectați o regiune a stratului de mai jos. Copiați acest lucru (doar liniile - nu copiați fundalul) și lipiți-l într-un document nou. Salvați pentru web, din nou un PNG pe 24 de biți cu transparență cu calea 'img / bg / lines.png'.
Acum, să adăugăm CSS care va integra noile noastre imagini?
#horizon min-height: 700px; lățime: 100%; overflow: ascuns; #main background: # 0f1219; lățime: 1300px; marja: auto; margin-top: -190px; înălțime: 1000px; overflow: ascuns; poziție: relativă; #main .inner width: 9000px; înălțime: 9000px; overflow: ascuns; poziția: absolută; top: 0; stânga: 0; .glowBg background: # 282d3f; înălțime: 100%; lățime: 100%; poziția: absolută; #glowTexture background: url ('? /img/bg/lines.png') repetați; înălțime: 900px; lățime: 1300px; poziția: absolută; top: 0; stânga: 0; #glowShadow height: 1600px; poziția: absolută; lățime: 1500px; top: 00px; overflow: ascuns; z-index: 200; #glowShadow img afișare: bloc; Poziția: relativă; stânga: -100px; Salvați, reîmprospătați și acum ar trebui să vedeți culoarea de fundal, textura și lumina reflectoarelor. Apoi vom începe să adăugăm câteva imagini.
Pentru imaginile galeriei vom plasa imagini în funcție de proiect în coloane. Fiecare proiect poate avea mai multe imagini dispuse vertical. Proiecte diferite sunt accesate prin mutarea coloanelor în lateral.
Creați o nouă imagine 640x480 și inserați un instantaneu al unui site sau o recoltă a unor lucrări pe care doriți să le prezentați. Stilul întunecat al acestui design, de obicei, funcționează cel mai bine cu imaginile care au în principal un fundal ușor.
Pentru a începe, vom adăuga o marjă.
Veți observa că am adăugat câteva stiluri inline pe etichete. Acest lucru simulează ceea ce stratul de interacțiune se va aplica ulterior automat (vom vedea cum se face acest lucru în următoarea parte a acestui tutorial). Cu toate acestea, pentru moment, vom codifica greu stilurile. Notă: atributul de opacitate nu va funcționa în Internet Explorer 8 și mai jos.
Adăugați următoarele CSS pentru imaginile galeriei:
#gallery left: 285px; poziția: absolută; lățime: 100%; înălțime: 900px; #galerie .col poziție: absolută; top: 80px; lățime: 640px; .item height: 480px; lățime: 640px; fundal: # 181a22; poziția: absolută; marja: auto; top: 320px; z-index: 100; overflow: ascuns;
Cea mai importantă proprietate aici este poziționarea absolută a coloanelor (acestea sunt divs cu clasa "col"). Cu poziționarea absolută putem muta fiecare coloană în mod independent sau putem muta toate coloanele în sincronizare, ceea ce ne va permite să navigăm în grila imaginilor după aplicarea stratului de interacțiune.
Actualizați pagina și acum ar trebui să vedeți galeria cu imagini. Veți observa totuși că galeria este poziționată în poziție verticală. În mod ideal, dorim ca conținutul să se centreze în funcție de dimensiunea ferestrei. Pentru a realiza acest lucru, va trebui să adăugăm un pic de scripting.
Creați o nouă etichetă de script chiar înainte de eticheta de închidere a corpului și introduceți următorul cod:
Asigurați-vă că jQuery a fost adăugat în antetul paginii sau altfel acest script nu va funcționa.
Acest script face câteva lucruri. Funcția arrange () detectează înălțimea ferestrei și apoi ajustează proprietățile CSS ale "elementelor" #main 'pentru a centraliza vertical conținutul. Acest lucru se întâmplă în situațiile în care fereastra utilizatorului are o înălțime mai mare de 760 de pixeli (a se vedea condiția la linia 541), pentru înălțimile ferestrelor inferioare acestei proprietăți CSS implicite. Ascendentul $ (window) .resize () (linia 25) apelează funcția adjust () ori de câte ori fereastra utilizatorului este redimensionată.
În acest moment, vom adăuga un anumit conținut de text referitor la proiectul activ. Pentru aceasta vom avea nevoie de titlu, subcapitol și un paragraf de text pentru a elabora proiectul activ.
Adăugați următoarea marcare la diviziunea "#leftCol":
Proiect demo
WEBSITE 2011
Proiect demo
WEBSITE 2011
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Nunc non tellus eget neque temporis adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. În dignissim lacus eu doaro tempus ut tincidunt nisi dapibus. Lorem ipsum dolor stați amet, consectetur adipiscing elit. Nunc non tellus eget neque temporis adipiscing.
Conectați-vă la proiect aici
Desigur, dacă utilizați o lucrare reală pe care ați făcut-o liberă să utilizați titlurile și textul corpului care descrie cu exactitate munca dvs..
Acum vom redacta acest conținut cu câteva CSS-uri suplimentare:
#leftCol padding-top: 30px; lățime: 200px; înălțime: 480 px; stânga: 30px; poziția: absolută; z-index: 10001; top: 270px; #projectInfo top: 50px; poziția: absolută; înălțime: 350px; lățime: 200px; #leftCol h1 culoare: #fff; font-size: 28px; margin-bottom: 6px; top: 50px; font-weight: 300; linia-înălțime: 30px; #leftCol p.sub culoare: # 338966; font-size: 11px; text-transform: majuscule; literă Spațiere: 2px; font-weight: bold; #leftCol p.body, #leftCol p.link culoare: # 8c8f95; font-family: "lucida grande", "arial"; font-size: 12px; linia-înălțime: 19px; padding-top: 30px; margin-bottom: 10px; #leftCol p.link padding-top: 10px; #leftCol p.link a culoare: # 8c8f95; text-decorare: subliniere; #leftCol p.link a: hover culoare: #fff; text-decorare: subliniere;
Din nou, cel mai important aspect aici este poziționarea absolută a elementului "#leftCol". Deoarece acest element este plasat în afara etichetei "#gallery" încă în eticheta "#main", poziția sa va fi relativă la eticheta centrată "#main" și independentă de mișcarea din galerie. Aceasta înseamnă că textul se poate reîmprospăta atunci când proiectul activ se modifică fără a schimba poziția. Indicele z foarte ridicat pentru "#leftCol" (10001) plasează acest conținut mai presus de orice alt conținut de pe pagină. Aceasta înseamnă că textul nostru nu va fi interferat de efectul reflectoarelor. Celelalte proprietăți sunt în majoritate stiluri de text și legate de formatare, care pot fi ajustate după cum doriți.
Acum reîmprospătați pagina și un text frumos formatat trebuie să apară în partea stângă a imaginii active așa cum este ilustrat mai jos.
Acum, când am dezvoltat o structură pentru conținutul static, vom aplica un marcaj care va adăuga elemente care permit utilizatorilor noștri să interacționeze cu site-ul.
Revenind la "#leftCol" div, adăugați următorul cod:
Sus jos stanga dreapta
Elementul "#grid" este gol; acest lucru va fi populate de Javascript în versiunea finală de lucru. Deocamdată, totuși, vom codifica cu greu câteva elemente copil pentru a obține o idee despre cum va apărea.
Acum vom folosi din nou o imagine sprites, de data asta pentru tastele săgeată. Prin urmare, revenind la Photoshop, mergeți la grupul "tastatură" și folosiți instrumentul de riglă notați dimensiunile totale.
Din nou, va trebui să permitem o dublare a înălțimii grupului pentru includerea unei stări "implicite" și "hover". Creați un document nou cu un fundal transparent care este egal cu lățimea grupului "tastatură" și de două ori înălțimea. În exemplul tutorial acest lucru este egal cu 70 x 92.
Glisați grupul "tastatură" în noul document. Duplicați acest grup și poziționați unul imediat deasupra celuilalt. Grupul de mai jos va fi statul nostru "hover". Efectuați unele reglaje minore pentru starea de hover prin strălucirea suprafeței de culoare, a săgeților și a conturului. Reglajele fine sunt adesea suficiente pentru stările de hover și schimbările minore în luminozitate sunt de obicei ușor de văzut.
Pentru exemplul tutorial, schimbarea culorii de fundal de la # 262a34 la # 2b2f3a, iar culoarea de fundal a cursorului / săgeții de la # 32343f la # 4b4d56 va crea un efect ideal.
Imaginea finală ar trebui să arate ca mai jos:
Salvați această imagine ca 'img / icons / keys.png'.
Acum vom adăuga câteva CSS pentru a mapa imaginea la diferite clase.
#leftCol #controls width: 200px; înălțime: 55px; poziția: absolută; fund: 18px; #grid .line lățime: 5px; fundal: # 666; overflow: ascuns; plutește la stânga; margin-dreapta: 2px; poziție: relativă; cursor: implicit; #grid height: 55px; lățime: 200px; #tracker height: 10px; fundal: #fff; lățime: 5px; poziția: absolută; z-index: 10000; cursor: implicit; #grid .line lățime: 5px; fundal: # 3d424f; overflow: ascuns; plutește la stânga; margin-dreapta: 2px; poziție: relativă; cursor: implicit; #keys width: 92px; înălțime: 46px; poziția: absolută; stânga: 86px; fund: 0; # chei a text-indent: -999px; lățime: 22px; înălțime: 22px; fundal: url ('? /img/icons/keys.png') no-repeat 0 0; overflow: ascuns; poziția: absolută; Elementele ".line" ale copilului vor forma o grilă reprezentând înălțimile relative ale coloanelor. Această abstractizare va fi o modalitate ideală de a lăsa utilizatorul să cunoască dimensiunea foliei, părțile sale și poziția lor actuală - în unele moduri echivalente cu crucea de coacere a unui site tradițional de conținut.
Oricum, următoarea sarcină este de a mapa clasele cheie la imaginea sprite:
#keys a.kup stânga: 24px; text-indent: -999px; top: 0; pozitie fundal: -24px 0; #keys a.kup: hover, #keys a.hoveru background-position: -24px -46px; #keys a.kdown stânga: 24px; top: 24px; pozitie fundal: -24px -24px; #keys a.kdown: hover, #keys a.hoverd background-position: -24px -70px; #keys a.kleft left: 0px; top: 24px; pozitie fundal: 0px -24px; #keys a.kleft: hover, #keys a.hoverl background-position: 0px -70px; #keys a.kright left: 46px; top: 24px; fundal-poziție: -46px -24px; lățime: 24px; #keys a.kright: hover, #keys a.hoverr background-position: -46px -70px;
Încercați să actualizați browserul și să treceți peste elementele create. Noile chei și grilă ar trebui să apară asemănătoare cu ilustrația de mai jos:
În final, vom adăuga navigația dinamică care se va atașa la proiectul activ. Introduceți următoarea marjă imediat după eticheta deschisă a elementului "#leftCol":
Am folosit stilul inline aici pentru a simula ceea ce se va obține automat atunci când am adăugat interactivitate completă Javascript.
Un alt sprite de imagine va fi folosit pentru aceste ancore. Revenind la fișierul Photoshop, deschideți grupul "butoane" și selectați stratul de unghi drept. Așa cum ne-ar plăcea niște plăcuțe pe ancora noastră, le vom modela cu dimensiunile 44 x 44.
Creați un nou document 88 x 176 cu fundal transparent pentru a găzdui 2 seturi de 4 pictograme. Creați un strat nou negru care să ne ajute să vedem săgețile translucide. Trageți un ghidaj vertical la 44 de pixeli pe axa x. (glisați ghidajele atunci când sunt activate regulile și asigurați-vă că Fereastra> Informații este vizibilă pentru a vedea locația curentă). Apoi glisați trei ghidaje orizontale la 44, 88 și 132 pixeli pe axa y.
Acum, revenind la versiunea PSD originală, glisați săgeata unghiului în noul document și creați 4 copii în partea stângă. Aceasta va fi starea noastră "implicită". Faceți opacitatea pentru fiecare strat 12%. Utilizând Editare> Transformare pentru a roti ghidajele astfel încât comanda să fie așa cum apare mai jos:
Copiați aceste straturi și deplasați fiecare 44 pixeli în dreapta. Reglați opacitatea fiecărui strat nou la 20%. Opriți fundalul negru astfel încât pânza să apară aproape complet transparentă și selectați Salvare pentru Web. Exportați ca PNG de 24 de biți cu transparență activată pentru 'img / icons / movers.png'.
Acum vom adăuga câteva CSS pentru a marca această imagine:
a.mover background: url ('? /img/icons/movers.png') no-repeat -44px 0; înălțime: 44px; lățime: 44px; schiță: nimic important; #up, #right, #down, #left display: bloc; z-index: 300; poziția: absolută; top: 10px; stânga: 10px; #right background-position: 0px -44px; #right: se deplasează background-position: -44px -44px; #down pozitie fundal: 0 -88px; #down: pozitioneaza background-position: -44px -88px; #up pozitie fundal: 0px -132px; #up: hover background-position: 44px -132px; Reîmprospătați browserul dvs. și acum ar trebui să vedeți ceva similar cu cel de mai jos.
Si asta e! Pentru partea finală a acestui tutorial vom scrie Javascript care va gestiona automat aspectul imaginilor și va introduce navigarea dinamică folosind tastatura sau mouse-ul.
În cazul în care este posibil să fi ratat ceva, iată marcajele HTML finale:
Numele dvs. - Portofoliu digital Găsește-mă pe Facebook Vezi-mi Flickr Găsește-mă pe LinkedInDespre activitatea de fotografie
Proiect demo
WEBSITE 2011
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Nunc non tellus eget neque temporis adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. În dignissim lacus eu doaro tempus ut tincidunt nisi dapibus. Lorem ipsum dolor stați amet, consectetur adipiscing elit. Nunc non tellus eget neque temporis adipiscing.
Conectați-vă la proiect aici
Sus jos stanga dreapta
