ადმინისტრაციული პორტფოლიო HTML5-ზე. რომელი შაბლონი გსურთ „პორტფოლიოს“ კატეგორიისთვის? თოვლი - უფასო სადესანტო გვერდის შაბლონი HTML5-ზე და CSS3-ზე
ამ კოლექციამ გაზარდა შაბლონები სხვადასხვა პროფესიისთვის, მაგრამ ძირითადად პროგრამის თემის შესაფასებლად, ვებ დიზაინერები და განლაგების დიზაინერები, რადგან ნამუშევრის დიზაინი და სტრუქტურა საუკეთესოდ შეეფერება თავად მათ.
მანამდე ჩვენ უკვე გამოვაქვეყნეთ დამატებითი შაბლონები პორტფელის შესაქმნელად. Მაგალითად:
სუფთა
პროფესიონალი, სუფთა პერსონალური პორტფოლიოს და დამოუკიდებელი ვებ ჟურნალის სპეციალური გვერდის შესაქმნელად. იდეალურად შეეფერება დიზაინერებს, განლაგების დიზაინერებს და პროგრამისტებს.შაბლონი სრულად ადაპტირებადია, მას აქვს ელემენტების გარეგნობის ანიმაცია სწორი კოდით გადახვევისას.
გორგო პორტფოლიო
სუფთა, სუფთა და ელეგანტური დიზაინერის პორტფოლიოს შაბლონი. ვიკონანი მინიმალიზმის სტილში. ასევე არის ლამაზი ახალი ეკრანის მენიუ.რობოტის კონდახებით ბადე იშლება მოჭადრაკე ქალის კონდახის უკან, ისე რომ უფრო მშვიდია, ფრაგმენტები ტენდენციაა. რობოტის მხარემ ჩემზე კიდევ უფრო დიდი შთაბეჭდილება მოახდინა, ალბათ დემო ნაწილის საშუალებით. თუ თქვენ აპირებთ გამოყოთ მთელი დიზაინი, როგორც სპეციალური ელემენტი, გთხოვთ გაითვალისწინოთ ნამუშევრის მკაფიო დიზაინი.
ლითიუმი
ბეზკოშტოვნი საპასუხო შაბლონისტილში Ბინა, რომელიც იდეალურია ნებისმიერი ფრილანსერისთვის, იქნება თქვენ ვებ მწერალი თუ ფოტოგრაფი, რადგან სადგური გთავაზობთ როგორც პორტფოლიოს სამუშაო კატეგორიების ფილტრით, ასევე ფოტო გალერეით.კონიაკი
კიდევ ერთი ხიდის ზემოთ მკაფიო შაბლონი სპეციალური პორტფელის შესაქმნელად. არსებობს ბევრი სიკეთე, რომელიც ჩვენ ძალიან გვიყვარს: პარალაქსის ეფექტები, ბლოკების ეფექტი, რომლებიც ჩნდება გადახვევისას, გლუვი გადახვევა, სხვადასხვა მკურნალობა და, განსაკუთრებით, თავად პორტფელის ბლოკი.შაბლონი აბსოლუტურად უფასოა და შესაფერისია ნებისმიერი IT პროფესიის ფრილანსერებისთვის.
კონგი
წიკავი html დიზაინერის პორტფოლიოს შაბლონი. პირველ ეკრანზე შეგიძლიათ განათავსოთ თქვენი ფოტო, წარმოგიდგინოთ საკუთარი თავი და დაწეროთ თქვენი სპეციალობა.შაბლონის თითქმის ყველა ბლოკი განხორციელებულია ისევე, როგორც ჩვენ გვინდა ვიხილოთ სტანდარტულ სადესანტო გვერდზე.
ფერადი სქემა რომ იყოს, შევცვლიდი. უკვე უნდა მოვიშორო.
MyFolio
ვიდმინნი ადაპტირებული ცალმხრივი პორტფელიმწვანე ტონებში. ეს ეხება როგორც ფრილანსერებს, ასევე დეველოპერების გუნდებს. წერის შაბლონი ნათელია და პატივისცემას იმსახურებს.ძირითადი
სუვორი შაბლონი ლურჯი ტონებითპორტფელის შესაქმნელად. პობუდოვანოვი Bootstrsp 3.2-ზე. პირველ ეკრანზე ხატების შეცვლით, შეგიძლიათ გახდეთ ფრილანსერი საქმიანობის ნებისმიერ სფეროში.Პატარა
არ არის დიდი ცალმხრივი HTML შაბლონი ბრტყელ სტილში. განყოფილებები დაყოფილია სამ ეკრანად 100% სიმაღლით. პირველი ეკრანი არის ფოტო და მოკლე ინფორმაცია ფრილანსერის შესახებ.კიდევ ერთი ეკრანი არის პორტფოლიო. დანარჩენი ნახეთ 8 რობოტი თქვენი პორტფოლიოდან დრიბლზე. სულ ეს არის, რაც უნდა განვითარდეს და სულ ეს არის. სურათები განახლდება დამოუკიდებლად, Dribbble-ზე თქვენს აქტივობებთან სინქრონულად.
მესამე ეკრანი - საკონტაქტო ინფორმაცია.
კელვინი
მკაფიო, უნივერსალური HTML5 CSS3 შაბლონი. Ceevee-ს შეუძლია გამოიცნოს რა სახის მოგება არსებობს და ასევე მნიშვნელობა აქვს კონდახებით ბლოკის კონცეფციას, რომელიც მუშაობს გრაფიკებში, რომლებიც წარმოადგენენ ფრილანსერის უნარებს. დაემატა სხვადასხვა ბლოკის მეშვეობით დეტალური თვითმმართველობის საუბრის შესაძლებლობა.პორტიო
შესანიშნავი, უნივერსალური შაბლონია, თუმცა ბევრი პუნქტია, რომელსაც არ გავაფუჭებ: სულელური შრიფტები, ცუდი ღილაკები. ალბათ ვინმეს მოეწონება ეს ვარიანტი. Yak nyak - ნათელი ფერის სქემა. იაკშჩო ცოტა სიხალისე CSS სტილები, შეგიძლიათ მიაღწიოთ კარგ შედეგებს.პორტი
ბეზკოშტოვნი, მე ვგულისხმობ, რომ ვთქვა ბი, ელეგანტური ცალმხრივი შაბლონი Bootstrap-ზე დაფუძნებული. განსაკუთრებით მომწონს წითელი აქტიური ელემენტები. კონდახებით ბლოკი მუშაობს როგორც დასაკეცი ბადე და ეს არის პლუსი. ეს შაბლონი იქნება სასარგებლო გადაწყვეტილებები შესაქმნელად ვებ დიზაინერის ან პროგრამისტის პორტფოლიო.ჰექსა
მდიდრულად ფერადი ბრტყელი შაბლონი სლაიდერით და თავსახურით დამახასიათებელი ფერის სქემით - მწვანე. ამ გადაწყვეტით, თქვენ შეგიძლიათ შექმნათ სავიზიტო ბარათის მშვენიერი ვებგვერდი კონდახებით და ბლოგით.ფრილანსერი
ვიდმინნი ცალმხრივი ბრტყელი სტილიდა მწვანე ფერის სქემა. პირველ ეკრანზე არის ადგილი ფოტოს ქვეშ და უფრო მარტივად, რომ არ გააფუჭოს დიზაინის სტილი, ვლასნიკის ავტოპორტრეტის ნახატი საიტზე.შაბლონი პატარაა და ეს შესანიშნავი პლიუსია, ასე რომ, ჩვენი მიზნებისთვის არაფერია „პარტიის გოგოების“ ვიკორიზაცია. Viconaniy, გასაკვირია, ძალიან ნათელია. ის მთლიანად ადაპტირებადია და ეფუძნება Bootstrap ჩარჩოს.
Dribbble პორტფოლიო
კიდევ ერთი შაბლონი, პორტფოლიო იაკომაში ინტეგრირებულია Dribbble-თან. თქვენ უნდა შეწყვიტოთ თქვენი დანარჩენი სამუშაოს აქტივობების კორექტირება და დაივიწყოთ თქვენი პორტფელის მუდმივი, დამღლელი განახლება საკუთარ გვერდზე.ლექსების ნიმუში სუვორია, ყოველდღიური ფერის სქემა. ყველაფერი ძალიან სუფთად გამოიყურება.
ასე რომ, ისევე როგორც წინა Dribbble შაბლონი, ის არ არის დიდი. მე ვიტყოდი, ლაკონური. ზაგალომ, ჩემი რეიტინგი 10-დან 9-ია.
გიკი
უმნიშვნელო, მინდა ვიგრძნო თავი ცოტა მნიშვნელოვანი, შაბლონი ფრილანსერის პორტფოლიოს შესაქმნელადდანახვაზე სადესანტო მხარე. ჩვენ ვიყენებთ სხვადასხვა დიაგრამებს, რათა ვიზუალურად აჩვენოთ ახალბედათა დონე მათ აქტივობის პროფილებში - ეს ყველაფერია. ასევე არის სლაიდერი კლიკერებით და ბლოკი ლამაზი ბადით ფოტოთი, რომელიც შეგიძლიათ გამოიყენოთ თქვენი სამუშაოს დემონსტრირებისთვის.Dribbble Folio V2
ბეზკოშტოვნი შაბლონი ავტომატური განახლების პორტფელით. ნამუშევრები შემოტანილია საიტიდან დრიბლინგი. ვიკორსტანიამამდე რა არის გადაწყვეტილება, არ დაგავიწყდეთ ინტეგრაციის დაყენება თქვენს Dribbble პროფილთან.სამწუხაროდ, დემო ვერსია არ არის.
ნავსადგური
Ორიგინალური html cssნიმუში მეწამულ ტონებშიპირადი ვებსაიტის შესაქმნელად. ეს არის უხვად ცალმხრივი თემა, მთავარი გვერდით ცალმხრივი გვერდის სტილში და ასევე, თავისებურად, ასევე შიდა გვერდებით. წადი შენობისკენ სპეციალური ფრილანსერების საიტიიყოს რაიმე სპეციალობა.კომპეტენტურად დაკეცილი და ვიზუალურად გაფორმებული, ჩვენი აზრით, ეს გვერდიგვერდ არის სპეციალური ვებსაიტის თუ ბლოგის, იქნება ეს რომელიმე სპეციალისტის მნიშვნელოვანი ელემენტი, რაც მისი ოსტატობის დიდი დონის მიღწევაა. პროფესიული საქმიანობა.
პორტფოლიოს გვერდი, ასეთი უნიკალური ჟღერადობით, ან ვიზუალური შეჯამებით, რომლის დახმარებით თქვენ შეგიძლიათ ნათლად აჩვენოთ საიტის/ბლოგის მკითხველებს და ვიზიტორებს, ბოლო დროს განხორციელებული ნამუშევრების შერჩევა, იქნება ეს ფოტოები, სტატისტიკა, პუბლიკაციები. , დიზაინის ელემენტები და ა.შ.
მე არ მაქვს ასეთი მხარე და, მეორე მხრივ, არის ზედამხედველობა, რომელიც უნდა გამოსწორდეს რაც შეიძლება სწრაფად, რაზეც მე მაქვს ძალა ნარაზიᲕმუშაობ.
გაუთავებელ სივრცეებში გლობალური ზომა, შეგიძლიათ იპოვოთ არაერთი მზა გვერდის შაბლონი პორტფელის ორგანიზებისთვის და ასეთი გვერდების მრავალფეროვნება მართლაც შთამბეჭდავია. ასე რომ, მათ, ვისაც სურს გაიგოს ვებ დიზაინის ყველა დახვეწილობა და განვითარება, მალე შეძლებენ იპოვონ შესაფერისი ვარიანტი საკუთარი თავისთვის. კარგად, მათთვის, ვისაც სჭირდება ცოდნა ვებსაიტისგან, მე წარმოგიდგენთ ადაპტირებულ განლაგებას, მარტივ პორტფოლიოს გვერდს, სამუშაოების ფილტრირებით კატეგორიების მიხედვით, განზავებით დამატებითი გარდამავალი ეფექტით, ანიმაციის ელემენტებით ї .
გვერდის განლაგება, რომელიც მოიცავს Javascript და დიზაინის ელემენტებს, როგორც ჩანს „მთაზე“, მშვენიერი ვებ დიზაინერის და დეველოპერი კევინ ლიუს მიერ (queness.com). ოპტიმალური გადაწყვეტის არჩევისას ჩემთვის მნიშვნელოვანი იყო დიზაინის სიმარტივე და ფუნქციონალობა jQuery მოდული, სამუშაო ყველასთვის სწორია მიმდინარე ბრაუზერები, და მზარდი პოპულარობა ჯანმრთელობის დაზღვევის და სხვადასხვა მობილური მოწყობილობებიინტერნეტში სერფინგისთვის, თქვენი ვებსაიტის დიზაინთან ადაპტირება. ყველა სახის ქიმერული, დიზაინერული ზარები და სასტვენები და შესანიშნავი დანამატები.
ძირითადი განლაგება შედგება მომხმარებელთა ინტერფეისის ორი ძირითადი ელემენტისგან, რომლებზეც ჩვენ უნდა ვიმუშაოთ: ნავიგაცია ჩანართებში სამუშაო წარდგენის კატეგორიების გასაფილტრად და თავად ესკიზების ბადე შერწყმის ეფექტით, როდესაც მითითებულია.
დასაწყისისთვის, იმისათვის, რომ ყველაფერი სწორად იმუშაოს, დაგჭირდებათ jQuery ვერსია 1.7.0 ან უფრო მაღალი. თუ ჯერ არ გაქვთ კავშირები, დაამატეთ წამყვანი მწკრივი ტეგის წინ :
გაუშვით MixItUp მოდული რობოტში, ჩადეთ ეს კოდი სხვა ფაილების შემდეგ:
< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) ) mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , ეფექტები: [ "fade" ) , შემსუბუქება : "snap" , // მოვუწოდებთ hover-ის ეფექტს MixEnd: filterList () . img" ) , 500 , "easeOutQuad" ), ფუნქცია () ($(this) . find(".label" ) . stop() . animate(( bottom: - 40 ) , 200 , "easeInQuad" ) ; this) .find("img") .stop() .animate(( top: 0) , 300, "easeOutQuad"); )) ; ) ) ;filterList.init() ; )) ; |
ყურადღებით დააკვირდით მოდულის ყველა კონფიგურაციას, საუკეთესო ვარიანტის დადგენის გზა არ არსებობს. ისე, თუ უკვე გსურთ პარამეტრებით ექსპერიმენტი, იყავით კეთილი, ყველაფერი თქვენს ძალაშია.
გვერდის განლაგებისა და ელემენტების ახალი გარეგნობის ჩამოსაყალიბებლად, დააკავშირეთ რამდენიმე ფაილი დოკუმენტთან .
, ერთი ძირითადი სტილისთვის, მაგალითად: layout.css და სხვა პატარა CSS ფაილი normalize.css, რათა უზრუნველყოს ბრაუზერის უკეთესი გამოყენებადობა სტანდარტული დიზაინის ელემენტებით:
< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" > |
ახლა მოდით შევხედოთ ყველაფერს თანმიმდევრობით, რამდენად არის შესაძლებელი ზედმეტი წყლის გარეშე, ხელმისაწვდომი და გასაგები, ჩვენი ძვირფასი, უხვად დაავადებული ადამიანისთვის.
< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >ყველა span> li> < li>< span class = "filter" data- filter= "app" >პროგრამა span> li> < li>< span class = "filter" data- filter= "card" >Ბიზნეს ბარათები span> li> < li>< span class = "filter" data- filter= "icon" >ხატები span> li> < li>< span class = "filter" data- filter= "logo" >ლოგო span> li> < li>< span class = "filter" data- filter= "web" >ვებ დიზაინი span> li> ul> |
- ყველა
- პროგრამა
- Ბიზნეს ბარათები
- ხატები
- ლოგო
- ვებ დიზაინი
ნავიგაციის პანელი შეიცავს სამუშაოებისა და კატეგორიების მთელ ჩამონათვალს. ჩვენ უნდა დავაკავშიროთ პორტფელის თითოეული კატეგორია data-cat ატრიბუტის მეშვეობით ამ და სხვა ელემენტს ნავიგაციის პანელში მონაცემთა ფილტრის ატრიბუტის მნიშვნელობასთან. მონაცემთა ფილტრის მნიშვნელობის data-cat-ზე დაყენების გზა არის პორტფელის ელემენტების კატეგორიების მიხედვით გაფილტვრა.
გარდა ამისა, დღის ბოლომდე შენახულ ესკიზს ემატება პატარა პანელი ნამუშევრის სახელწოდებით და კატეგორიის სათაურით, რომელიც ერწყმის მხოლოდ სურათზე გადაადგილებისას. და უფრო ადვილია ჩამოყალიბება გარეგანი სახე CSS-ში ყველა ამ კონსტრუქციისთვის ჩვენ დავწერთ ელემენტების შემდეგ კლასებს:
< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >შექმენით ჰოსტინგი. რუ a> < span class = "text-category" >ლოგო span> div> < div class = "label-bg" > div> div> div> div> ......... div> |
![](https://i1.wp.com/img/portfolios/logo/5.jpg)
გთხოვთ გაითვალისწინოთ, რომ თქვენ შეგიძლიათ დაამატოთ თქვენი შეტყობინება სურათზე ან პირდაპირ ხელმოწერაზე, რათა მყიდველმა დარწმუნებული იყოს, რომ შეასრულებს თქვენს სამუშაოს.
CSS
ახლა, ჩუმად, გადავიდეთ საბოლოო ეტაპზე, CSS-ში ჩვენი პორტფელის გვერდის კლიენტის ინტერფეისის მოწინავე სტილის ფორმირებაზე და ადაპტირებულ ვერსიაზე. სტატისტიკაში მხოლოდ ძირითად (განსახილველად) მნიშვნელობებს მივუთითებ ისე, რომ ყოველგვარი ფონის სურათებიდა დაკავშირებული შრიფტები, ყველაფერი რაც თქვენ გჭირდებათ, შეგიძლიათ ჩამოტვირთოთ დემო ვერსიაში, ან იპოვოთ არქივებში გამომავალი ფაილებით.
.container(პოზიცია: ფარდობითი; სიგანე: 960px; ზღვარი: 0 ავტო; /* შეგიძლიათ შეცვალოთ გადასვლების რაოდენობა ბრაუზერის ფანჯრის ზომის შეცვლისას */-webkit-transition: all 1s ease; -Moz-გარდამავალი: ყველა 1-ის სიმარტივე; -o-ტრანზიცია: ყველა 1-ის სიმარტივე; გადასვლა: ყველა 1-ის სიმარტივე; ) #filters (ზღვარი : 1% ; padding : 0 ; list-style : none ; ) #filters li (float : left ; ) : # 666; /* დაამატეთ ცოტა ჩრდილი ტექსტს */ text-shadow : 1px 1px #FFFFFF; კურსორი: მაჩვენებელი; ) /* შეცვალეთ კატეგორიის ფონი ჰოვერზე */#ფილტრები დიაპაზონში: ჰოვერი (ფონი: #34B7CD; ტექსტის ჩრდილი: 0 0 2px #004B7D; ფერი: #fff; ) /* აქტიური კატეგორიის ელემენტის ფონი */#filters li span.active (ფონი: rgb (62, 151, 221); ტექსტი-ჩრდილი: 0 0 2px #004B7D; ფერი: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box - moz-box-sizing ; -სიგანე : 100% ; /* ხელმოწერების რეგისტრაციისთვის */.პორტფოლიო .ეტიკეტი (პოზიცია: აბსოლუტური; სიგანე: 100%; სიმაღლე: 40 პიქსელი; %; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0;). ჩვენება: ბლოკი; შრიფტის ზომა: 9px; ) |
კონტეინერი ( პოზიცია: ფარდობითი; სიგანე: 960 პიქსელი; ზღვარი: 0 ავტო; /* შეგიძლიათ შეცვალოთ გადასვლების რაოდენობა ბრაუზერის ფანჯრის ზომის შეცვლისას */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o- transition: all 1s ease: all 1s ease ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li (float:left; ) padding:5px 20px; -დეკორაცია: არცერთი;ფერი:#666;/* დაამატეთ ცოტა ჩრდილი ტექსტისთვის */ text-shadow: 1px 1px #FFFFFF;კურსორი: მაჩვენებელი; ) /* კატეგორიის ფონის შეცვლა li span:hover ( background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* აქტიური კატეგორიის ელემენტის ფონი */ #filters li span. აქტიური (ფონი: rgb(62, 151, 221) );ტექსტი-ჩრდილი: 0 0 2px #004B7D;ფერი:#fff; ზომა: სასაზღვრო ყუთი; სიგანე:23%; ზღვარი:1%; ჩვენება: არცერთი; float:მარცხნივ; overflow:დამალული; ) .po rtfolio-wrapper ( overflow: დამალული; პოზიცია: შედარებითი !მნიშვნელოვანი; ფონი: #666; კურსორი: მაჩვენებელი; ) .portfolio img ( max-width:100%; პოზიცია: ნათესავი; ) /* რეგისტრაციისთვის * / .პორტფოლიო .ლეიბლი (პოზიცია: აბსოლუტური; სიგანე: 100%; სიმაღლე: 40 პიქს; ქვედა: -40 პიქს; ) . პორტფოლიო .label-bg ( ფონი: rgb(62, 151, 221); სიგანე: 100%; სიმაღლე:100%; პოზიცია: აბსოლუტური; ზედა:0; მარცხნივ:0; .პორტფოლიო .label-ტექსტი ( ფერი:# fff, პოზიცია: ნათესავი, z-ინდექსი: 500 padding: 5px 8px;
მეორე ნაწილში, პირდაპირ ამ სტილის ფურცელში, ალტერნატიული CSS სექციები შეიძლება შეიქმნას რამდენიმე მედია მოთხოვნის გამოყენებით. იმის უზრუნველსაყოფად, რომ ჩვენი გვერდის განლაგება სწორად გამოჩნდება სხვადასხვა მობილური მოწყობილობის ეკრანებზე, ჩვენ დავამატებთ CSS-ის ალტერნატიულ წესებს. სხვადასხვა ეკრანებიამ განყოფილებაში. თავად ტიმს შეუძლია მარტივად განისაზღვროს ის წესები, რომლებიც ადრე იყო ჩვენში დადგენილი CSS ცხრილებიძირითადი ბრაუზერებისთვის, იგივე საჭირო ადაპტირება მიიღწევა.
/* ტაბლეტი */ @media მხოლოდ ეკრანი და (მინ-სიგანე: 768 პიქსელი) და (მაქს-სიგანე: 959 პიქსელი) (. კონტეინერი (სიგანე: 768 პიქსელი; )) /*მობილური - შენიშვნა: დიზაინი 320px სიგანეზე*/@media მხოლოდ ეკრანი და (მაქს. სიგანე: 767 პიქსელი) (.container (სიგანე: 95%;) #portfoliolist.portfolio (სიგანე: 48%; ზღვარი: 1%;)) /* მობილური - შენიშვნა: დიზაინი 480px სიგანეზე */@media მხოლოდ ეკრანი და (მინ. სიგანე: 480 პიქსელი) და (მაქს. სიგანე: 767 პიქსელი) (. კონტეინერი (სიგანე: 70%;)) |
/* ტაბლეტი */ @media მხოლოდ ეკრანი და (მინ-სიგანე: 768 პიქსელი) და (მაქს-სიგანე: 959 პიქსელი) ( .კონტეინერი ( სიგანე: 768 პიქს; ) ) /* მობილური - შენიშვნა: დიზაინი 320 პიქს სიგანეზე*/ მხოლოდ @media ეკრანი და (მაქსიმალური სიგანე: 767 პიქსელი) ( .container ( სიგანე: 95%; ) #portfoliolist .portfolio ( სიგანე:48%; ზღვარი:1%; ) ) /* მობილური - შენიშვნა: დიზაინი 480px სიგანეზე */ @media მხოლოდ ეკრანი და (მინ. სიგანე: 480 პიქსელი) და (მაქს. სიგანე: 767 პიქსელი) ( .კონტეინერი (სიგანე: 70%; ) )
Სულ ეს არის. ჩვენი სასწაულმოქმედი გვერდი სახელწოდებით "პორტფოლიო" მზად არის, მზად არის შეგვახსენოს თავისი არანაკლებ სასწაულებრივი და მნიშვნელოვანი რობოტები და გამოვაქვეყნოთ მთელი მსოფლიოსთვის სანახავად. თქვენ მაინც შეგიძლიათ მშვიდად, მოკრძალებულად დაწეროთ საკუთარ თავზე. ნუ გადააჭარბებთ ამ მხრივ.
კიდევ ერთხელ უყურეთ მაგალითს და, საჭიროების შემთხვევაში, წაიღეთ თქვენი სამუშაო, თუ ეს შესაძლებელია, მშვიდი სახლის გარემოში, შეგიძლიათ დაასრულოთ ეს სამუშაო.
გაკვეთილის შექმნის საათზე შეიქმნა ვიკორის მასალა: . ორიგინალი, დაუკავებელი, ფრთხილად ავტორის კალმიდან, პორტფოლიოს მხრიდან, იქ განთავსებული.
წარმატებები ყველას და წარმატებები სხეულს, გაატარეთ მოკლე ზაფხული!
სამხატვრო გალერეის შენობა
როგორ შეგიძლიათ მარტივად და ხელით შექმნათ სურათების გალერეა ჩვენი პროგრამირების ცოდნის გარეშე? უპირველეს ყოვლისა, შეიძლება ამას საკმაოდ ცოტა საათი დასჭირდეს, მაგრამ წინააღმდეგ შემთხვევაში, მისი დათვალიერებისას, არაფერზე ფიქრი არ არის საჭირო - ან კერუვანას ღილაკებზე ან სხვა რამეზე. გახსენით Notepad პროგრამა და სუფთა ფურცლიდანახლავე, ჩვენ ვისწავლით როგორ შევქმნათ პორტფელის ვებსაიტი და ხელოვნების გალერეა ხარჯების გარეშე.