booknook.md

ფონტები, დიზაინი და ფერები

• Book Nook Figma Board
• Lato – Google Fonts
• Libre Baskerville – Google Fonts

--col-primary: hsl(25, 76%, 31%);
--col-secondary: hsl(43, 74%, 49%);
--col-bg-primary: hsla(42, 31%, 94%, 0.5);
--col-bg-secondary: hsl(43, 47%, 94%);
--input-focus-shadow: 0 0 0 3px rgba(139, 83, 37, 0.1);
--card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--border-radius: 10px;

შექმენით utility კლასები შემდეგისთვის

(დაამატეთ სტილები ამ კლასებისთვის Figma დიზაინის მიხედვით. აქ მოცემულია რამდენიმე იდეა)

• btn (საწყისი ფონის მოცილება, საწყისი border-ის მოცილება, შესაბამისი padding-ის დამატება + font: inherit)
• btn-primary (განსხვავებული ფონისა და hover ეფექტები, ფერები CSS ცვლადებიდან)
• btn-outline (border, ფერი CSS ცვლადებიდან)
• btn-icon (კვადრატული ფორმა)
• input (font: inherit, შესაბამისი padding, focus სტილები და border – ყველა ფერისა და border-ის მნიშვნელობა CSS ცვლადებიდან)
• card (padding და border + border-radius, ყველა მნიშვნელობა CSS ცვლადებიდან)
• container (ექნება max-width და ცენტრში მოქცეული შიგთავსი auto margin-ებით)

სასარგებლო resets

• a ტეგი უნდა იყოს inline-block
• img ტეგი უნდა გამოვაჩინოთ block-ად და max-width შეზღუდული უნდა: 100%
• body-ს უნდა მოეხსნას margin
• label უნდა იყოს გამოჩენილი, როგორც block
• ტექსტის უკეთ წასაკითხად დაამატეთ line-height: 1.4
• input-ებისთვის width უნდა იყოს 100%

ძალიან მნიშვნელოვანია

• ყოველთვის დაიწყეთ მთავარი CSS ფაილი ამ კოდის ბლოკით * { box-sizing: border-box; }
• ყველა გამეორებადი მნიშვნელობისთვის მხოლოდ გამოიყენეთ CSS ცვლადები და ყოველთვის მიმართეთ უკვე შექმნილ CSS ცვლადებს
• არასოდეს დაწეროთ: outline: none არც ერთ ელემენტზე

დამატებითი მოთხოვნები

• ყოველი ცვლილების დამატებისას, ატვირთე კოდი Github-ზე Git-ის ბრძანებებით ან VSCode-ის ღილაკებით

  git add main.css index.html
  git commit -m "Add header styles and change HTML"
  git push

• main.css ფაილში მხოლოდ უნდა იყოს ზოგადი და ისეთი სტილები, რომლებსაც ყველა გვერდი იყენებს

• რომელიმე გვერდის სპეციფიური სტილებისთვის შექმენი ახალი css ფაილი