Giter Club home page Giter Club logo

goit-markup-hw-02-old's Introduction

goit-markup-hw-02

Technologies

This repsitory for homework Module 2. Basics CSS. Selectors and color. Text and fonts.

  1. 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;
  2. 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

  1. Corrected name of class button to filter-button (in the styles.css and portfolio.html).
  2. Replacement completed tegs to in the list of "Portfolio content" section.

19/10/2022

  1. 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.

  1. Add lang="en" to of "Logo text" and "Link to email-app" in and footer. Add to studio.html and portfolio.html.
  2. Separated classes .header-contacts .link and .container-portfolio .link.
  3. Add cursor: pointer; for button (.hero-button and .filter-button).
  4. Add attributes "width" and "height" to in portfolio.html.
  5. Title "Portfolio" and "Heng" hidden in styles (class="visually-hidden").

20/10/2022

Fixing homework.

  1. Removed default property (font-style: normal;).
  2. Property (line-height:) indicated in "em".
  3. Add property (font-family: inherit;) to classes .button-title and .filter-button for inherit font-family from .
  4. Add effects :hover and :focus with color #188ce8; to class .hero-button.
  5. Add effects :hover and :focus with color var(--accent-color); to class .contacts-footer.
  6. Add link to googlemaps for .

Additional fixed homework.

  1. Property (line-height:) indicated without "em".
  2. Removed class .saction-title for h2 in "Heng" section.
  3. Removed default property (font-weight: 700;) for <h...>.
  4. Removed class hero-portfolio-title for h1 in portfolio.html and styles.css.

goit-markup-hw-02-old's People

Contributors

aleksey-dr avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.