-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4b664a2
commit b864999
Showing
1 changed file
with
331 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,331 @@ | ||
| :root { | ||
| --main-text-color: #757575; | ||
| --title-text-color: #212121; | ||
| --accent-color: #2196f3; | ||
| --main-white-color: #ffffff; | ||
| --main-black-color: #000000; | ||
| --add-footer-color: rgba(255, 255, 255, 0.6); | ||
| --main-bg-color: #ffffff; | ||
| --sec-bg-color: #2f303a; | ||
| --add-bg-color: #f5f4fa; | ||
| --border-portfolio-color: #ECECEC; | ||
| } | ||
| body { | ||
| background-color: var(--main-bg-color); | ||
| color: var(--main-text-color); | ||
| font-family: Roboto, sans-serif; | ||
| font-size: 14px; | ||
| line-height: 1.71; | ||
| letter-spacing: 0.03em; | ||
| } | ||
| .container { | ||
| margin: 0 auto; | ||
| width: 1200px; | ||
| padding: 0 15px; | ||
| /* outline: 2px solid tomato; used for checking */ | ||
| } | ||
| ul { | ||
| list-style: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
| a { | ||
| text-decoration: none; | ||
| } | ||
| .page-header .container, | ||
| .main-nav, | ||
| .main-contacts { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| /* Logo */ | ||
| .logo { | ||
| display: inline-block; | ||
| color: var(--accent-color); | ||
| font-family: Raleway, sans-serif; | ||
| font-weight: 700; | ||
| font-size: 26px; | ||
| line-height: 1.19; | ||
| } | ||
| .studio { | ||
| color: var(--main-black-color); | ||
| } | ||
| /* Site-navigation */ | ||
| .site-nav { | ||
| display: flex; | ||
| margin-left: 93px; | ||
| } | ||
| .site-nav .list { | ||
| display: block; | ||
| padding-top: 32px ; | ||
| padding-bottom: 32px ; | ||
| color: var(--title-text-color); | ||
| font-weight: 500; | ||
| line-height: 1.14; | ||
| letter-spacing: 0.02em; | ||
| } | ||
| .site-nav .list:hover, | ||
| .site-nav .list:focus { | ||
| color: var(--accent-color); | ||
| } | ||
| .site-nav .list.current { | ||
| color: var(--accent-color); | ||
| } | ||
| .site-nav .item:not(:last-child) { | ||
| margin-right: 50px; | ||
| } | ||
| .main-contacts { | ||
| margin-left: auto; | ||
| } | ||
| .main-contacts .item:not(:last-child) { | ||
| margin-right: 50px; | ||
| } | ||
| .header-contacts { | ||
| display: inline-block; | ||
| color: var(--main-text-color); | ||
| font-weight: 500; | ||
| line-height: 1.14; | ||
| letter-spacing: 0.02em; | ||
| } | ||
| .header-contacts:hover, | ||
| .header-contacts:focus { | ||
| color: var(--accent-color); | ||
| } | ||
|
|
||
| /* Hero section*/ | ||
| .hero { | ||
| padding-top: 200px; | ||
| padding-bottom: 200px; | ||
| background-color: var(--sec-bg-color); | ||
| text-align: center; | ||
| } | ||
| .hero-title { | ||
| margin-top: 0; | ||
| margin-bottom: 30px; | ||
| color: var(--main-white-color); | ||
| font-weight: 900; | ||
| font-size: 44px; | ||
| line-height: 1.36; | ||
| letter-spacing: 0.06em; | ||
| text-transform: uppercase; | ||
| } | ||
| .visually-hidden { | ||
| position: absolute; | ||
| clip: rect(0 0 0 0); | ||
| width: 1 px; | ||
| height: 1px; | ||
| margin: -1px; | ||
| } | ||
| .hero-button { | ||
| display: inline-block; | ||
| border-radius: 4px; | ||
| padding: 10px 32px; | ||
| min-width: 200px; | ||
| background-color: var(--accent-color); | ||
| color: var(--main-white-color); | ||
| box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15); | ||
| font-family: inherit; | ||
| font-weight: 700; | ||
| font-size: 16px; | ||
| line-height: 1.87; | ||
| letter-spacing: 0.06em; | ||
| border: transparent; | ||
| outline: transparent; | ||
| cursor: pointer; | ||
| } | ||
| /* Section */ | ||
| .section { | ||
| padding-top: 94px; | ||
| padding-bottom: 94px; | ||
| } | ||
| .no-padding { | ||
| padding-top: 0; | ||
| } | ||
| .section-title { | ||
| margin-top: 0; | ||
| margin-bottom: 50px; | ||
| color: var(--title-text-color); | ||
| font-weight: 700; | ||
| font-size: 36px; | ||
| line-height: 1.17; | ||
| text-align: center; | ||
| } | ||
| .section-title centered { | ||
| text-align: center; | ||
| } | ||
| .feature-list { | ||
| display: flex; | ||
| } | ||
| .feature-list .item { | ||
| margin-right: 30px; | ||
| width: calc((100% - 3 * 30px) / 3); | ||
| } | ||
| .feature-list .item:last-child { | ||
| margin-right: 0; | ||
| } | ||
| .feature-list .title { | ||
| margin-top: 0; | ||
| margin-bottom: 10px; | ||
| color: var(--title-text-color); | ||
| font-weight: 700; | ||
| font-size: 14px; | ||
| line-height: 1.14; | ||
| text-transform: uppercase; | ||
| } | ||
| .feature-list p, | ||
| .team-list p { | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| } | ||
| .activities-list { | ||
| display: flex; | ||
| } | ||
| .activities-list .item { | ||
| margin-right: 30px; | ||
| } | ||
| .activities-list .item:last-child { | ||
| margin-right: 0; | ||
| } | ||
| .team { | ||
| background-color: var(--add-bg-color); | ||
| text-align: center; | ||
| } | ||
| .team-list .photo { | ||
| display: block; | ||
| margin-bottom: 30px; | ||
| } | ||
| .team-list { | ||
| display: flex; | ||
| } | ||
| .team-list .item { | ||
| width: 270px; | ||
| padding-top: 0; | ||
| padding-bottom: 30px; | ||
| margin-right: 30px; | ||
| background: #ffffff; | ||
| box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14), | ||
| 0px 2px 1px rgba(0, 0, 0, 0.2); | ||
| border-radius: 0px 0px 4px 4px; | ||
| } | ||
| .team-list .item:last-child { | ||
| margin-right: 0; | ||
| } | ||
| .team-list .name { | ||
| margin-top: 0; | ||
| margin-bottom: 10px; | ||
| color: var(--title-text-color); | ||
| font-weight: 500; | ||
| font-size: 16px; | ||
| line-height: 1.19; | ||
| } | ||
| .team-list .position { | ||
| font-size: 16px; | ||
| line-height: 1.19; | ||
| } | ||
| /* Footer */ | ||
| .footer { | ||
| padding: 60px 0; | ||
| background-color: var(--sec-bg-color); | ||
| } | ||
| /* Logo */ | ||
| .footer-studio { | ||
| margin-top: 0; | ||
| margin-bottom: 20px; | ||
| color: var(--main-white-color); | ||
| } | ||
| .footer .address { | ||
| margin-top: 0; | ||
| margin-bottom: 9px; | ||
| color: var(--main-white-color); | ||
| font-style: normal; | ||
| } | ||
| .footer-contacts { | ||
| margin-top: 0; | ||
| margin-bottom: 9px; | ||
| } | ||
| .footer-contacts-list .footer-contacts:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| .footer-contacts-list a { | ||
| display: block; | ||
| color: var(--add-footer-color); | ||
| font-style: normal | ||
| } | ||
|
|
||
| /* Portfolio */ | ||
| .line { | ||
| border-bottom: 1px solid var(--border-portfolio-color); | ||
| } | ||
| /* Filter */ | ||
| .filter-list { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| .filter-item { | ||
| display: inline-block; | ||
| border-radius: 0px; | ||
| padding: 6px 22px; | ||
| margin-bottom: 50px; | ||
| margin-right: 8px; | ||
| background-color: var(--add-bg-color); | ||
| color: var(--title-text-color); | ||
| font-family: inherit; | ||
| font-weight: 500; | ||
| font-size: 16px; | ||
| line-height: 1.62; | ||
| text-align: center; | ||
| letter-spacing: 0.03em; | ||
| cursor: pointer; | ||
| border: transparent; | ||
| outline: transparent; | ||
| } | ||
| .filter-item:hover, | ||
| .filter-item:focus { | ||
| background-color: var(--accent-color); | ||
| color: var(--main-white-color); | ||
| } | ||
| /* Projects */ | ||
| .work-list .item .photo { | ||
| display: block; | ||
| margin-bottom: 20px; | ||
| } | ||
| .work-list .item { | ||
| width: calc((100% - 60px) / 3); | ||
| padding-bottom: 20px; | ||
| margin-bottom: 30px; | ||
| margin-right: 30px; | ||
| background: var(--main-bg-color); | ||
| border: 1px solid var(--border-portfolio-color); | ||
| box-sizing: border-box; | ||
| } | ||
| .work-list .section-title { | ||
| padding-left: 24px; | ||
| padding-right: 24px; | ||
| margin-top: 0; | ||
| margin-bottom: 4px; | ||
| font-weight: 700; | ||
| font-size: 18px; | ||
| line-height: 2; | ||
| text-align: left; | ||
| letter-spacing: 0.06em; | ||
| } | ||
| .work-list { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| } | ||
| .work-list .item:nth-child(3n) { | ||
| margin-right: 0; | ||
| } | ||
| .work-list .item:nth-last-child(-n+3) { | ||
| margin-bottom: 0; | ||
| } | ||
| .section-description { | ||
| padding-left: 24px; | ||
| padding-right: 24px; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| color: var(--main-text-color); | ||
| font-size: 16px; | ||
| line-height: 1.87; | ||
| } |