This repsitory for homework Module 2. Basics CSS. Selectors and color. Text and fonts.
- Layout color palette (Студія). 1.1. Text colors. 1.1.1. Колір основного тексту color: #757575; 1.1.2. Вторинний колір тексту color: #212121; 1.1.3. Кольори логотипу у header color: #000000; та #2196F3; 1.1.4. Кольори посилань на сторінки у header: Основний - color: #212121; :hover, :focus - color: #2196F3 (accent); 1.1.5. Кольори посилань-контактів у header: Основний - color: #757575; :hover color: #2196F3 (accent); 1.1.6. Колір заголовків секцій color: #212121; 1.1.7. Колір заголовку секції Hero (білий) color: #FFFFFF; 1.1.8. Колір имені кнопки секції Hero (білий) color: #FFFFFF; 1.1.9. Кольори логотипу у footer color: #FFFFFF; та #2196F3; 1.1.10. Колір адреси у footer (білий) color: #FFFFFF; Колір посилань e-mail і телефон (Hex #FFFFFF 60%) RGB color: rgba(255, 255, 255, 0.6); 1.2. Background-color. 1.2.1. Background-color button in the Section Hero background-color: #2196F3 (accent); 1.2.2. Background-color header background-color: #ECECEC; 1.2.3. Background-color section Hero color: #2F303A; 1.2.4. Background-color section "Hang" none. 1.2.5. Background-color section "What are we doing" none. 1.2.6. Background-color section "Our team" background-color: #F5F4FA; 1.2.7. Background-color footer background-color: #2F303A;
- Layout color palette (Portfolio) 2.1. Text colors. 2.1.1. Колір основного тексту section Portfolio color: #757575; 2.1.2. Вторинний колір тексту section Portfolio color: #212121; 2.1.3. Кольори посилань section Portfolio: Основний - color: #212121; :focus - color: #FFFFFF; 2.2. Background-color. 2.2.1. Background-color посилань section Portfolio: Основний - background-color: #F5F4FA; :hover, :focus - color: #2196F3; 2.2.2. Background-color containers section Portfolio background-color: #FFFFFF; 2.3. Border. 2.3.1. Color border containers section Portfolio color: #EEEEEE;
/_ Колір основного тексту color: #757575; / / Вторинний колір тексту color: #212121; / / Кольори логотипу у header color: #000000; та #2196F3; / / Кольори посилань на сторінки у header: Основний - color: #212121; :hover color: #2196F3 (accent); / / Кольори посилань-контактів у header: Основний - color: #757575; :hover color: #2196F3 (accent); / / Колір заголовків секцій color: #212121; / / Колір заголовку секції Hero (білий) color: #FFFFFF; / / Колір имені кнопки секції Hero (білий) color: #FFFFFF; / / Кольори логотипу у footer (білий) color: #FFFFFF; та #2196F3; / / Колір адрес у footer (білий) color: #FFFFFF; Колір посилань e-mail і телефон (Hex #FFFFFF 60%) RGB color: rgba(255, 255, 255, 0.6) / / Background-color button in the Section Hero background-color: #2196F3; (accent) / / Background-color header background-color: #ECECEC; / / Background-color section Hero background-color: #2F303A; / / Background-color section "Hang" none / / Background-color section "What are we doing" none / / Background-color section "Our team" background-color: #F5F4FA; / / Background-color footer background-color: #2F303A; / / Колір основного тексту section Portfolio color: #212121; / / Вторинний колір тексту section Portfolio color: #757575; / / Кольори посилань section Portfolio: Основний - color: #212121; :focus - color: #FFFFFF; / / Background-color посилань section Portfolio: Основний - background-color: #F5F4FA; :hover, :focus - color: #2196F3; / / Background-color containers section Portfolio background-color: #FFFFFF; / / Color border containers section Portfolio color: #EEEEEE; _/
18/10/2022
- Corrected name of class button to filter-button (in the styles.css and portfolio.html).
- Replacement completed tegs to in the list of "Portfolio content" section.
19/10/2022
- Fonts: 1.1. Studio. 1.1.1. Logo - Raleway;
font-family: 'Raleway'; font-style: normal; font-weight: 700; font-size: 26px; line-height: 31px;
/_ identical to box height _/ letter-spacing: 0.03em;
1.1.2. Links of heder - Roboto;
font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: 0.02em;
1.1.3. h1 in hero section - Roboto;
font-family: 'Roboto'; font-style: normal; font-weight: 900; font-size: 44px; line-height: 60px;
/_ or 136% _/ text-align: center; letter-spacing: 0.06em; text-transform: uppercase;
1.1.4. Button in hero section - Roboto;
font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 16px; line-height: 30px;
/_ identical to box height, or 188% _/ display: flex; align-items: center; text-align: center; letter-spacing: 0.06em;
1.1.5. h2 - Roboto;
(sections "Heng" "Whot are we doing" and "Our teams")
font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 36px; line-height: 42px; text-align: center; letter-spacing: 0.03em;
1.1.6. h3 - Roboto;
(section "Hang")
font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 14px; line-height: 16px; letter-spacing: 0.03em; text-transform: uppercase;
(section "Our taems")
font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 19px;
/_ identical to box height _/ text-align: center; letter-spacing: 0.03em;
1.1.7. p - Roboto;
(section "Heng")
font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 24px;
/_ or 171% _/ letter-spacing: 0.03em;
(section "Our taems")
font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 19px;
/_ identical to box height _/ text-align: center; letter-spacing: 0.03em;
1.1.8. Links of footer - Roboto;
font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 24px;
/_ or 171% _/ letter-spacing: 0.03em;
1.2. Portfolio. 1.2.1. h1 - Roboto; 1.2.2. h2 - Roboto;
font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 18px; line-height: 36px;
/_ identical to box height, or 200% _/ letter-spacing: 0.06em;
1.2.3. Button - Roboto;
font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px;
/_ identical to box height, or 162% _/ text-align: center; letter-spacing: 0.03em;
1.2.4. p - Roboto.
font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 30px;
/_ identical to box height, or 188% _/ letter-spacing: 0.03em;
1.3. Raleway: 700; Roboto: 400, 500, 700, 900.
- Add lang="en" to of "Logo text" and "Link to email-app" in and footer. Add to studio.html and portfolio.html.
- Separated classes .header-contacts .link and .container-portfolio .link.
- Add cursor: pointer; for button (.hero-button and .filter-button).
- Add attributes "width" and "height" to
in portfolio.html.
- Title "Portfolio" and "Heng" hidden in styles (class="visually-hidden").
20/10/2022
Fixing homework.
- Removed default property (font-style: normal;).
- Property (line-height:) indicated in "em".
- Add property (font-family: inherit;) to classes .button-title and .filter-button for inherit font-family from .
- Add effects :hover and :focus with color #188ce8; to class .hero-button.
- Add effects :hover and :focus with color var(--accent-color); to class .contacts-footer.
- Add link to googlemaps for .
Additional fixed homework.
- Property (line-height:) indicated without "em".
- Removed class .saction-title for h2 in "Heng" section.
- Removed default property (font-weight: 700;) for <h...>.
- Removed class hero-portfolio-title for h1 in portfolio.html and styles.css.