-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #163 from MastersAcademy/2-css-Mariya-Artemenko
added homework #3
- Loading branch information
Showing
14 changed files
with
595 additions
and
46 deletions.
There are no files selected for viewing
41 changes: 41 additions & 0 deletions
41
homeworks/mariya.artemenko_Mariya-Artemenko/PokemonProject/css/default.css
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,41 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| } | ||
|
|
||
| a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| ul li { | ||
| list-style: none; | ||
| display: inline; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| font-weight: inherit; | ||
| font-size: inherit; | ||
| } | ||
|
|
||
| button { | ||
| line-height: inherit; | ||
| font-weight: inherit; | ||
| font-size: inherit; | ||
| cursor: pointer; | ||
| color: inherit; | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| body { | ||
| font-family: "Roboto", sans-serif; | ||
| line-height: 32px; | ||
| color: #221F1F; | ||
| margin: 0; | ||
| } |
120 changes: 120 additions & 0 deletions
120
homeworks/mariya.artemenko_Mariya-Artemenko/PokemonProject/css/games.css
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,120 @@ | ||
| @import "default.css"; | ||
| @import "header.css"; | ||
|
|
||
| .pokemons-cards__title { | ||
| width: 100%; | ||
| font-size: 48px; | ||
| font-weight: 700; | ||
| margin: 40px 0 40px 53px; | ||
| } | ||
|
|
||
| .pokemons-cards { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| margin: 0 28px; | ||
| } | ||
|
|
||
| .pokemons-cards__single-pokemon { | ||
| width: 251px; | ||
| height: 288px; | ||
| padding: 12px 12px 22px; | ||
| border-radius: 12px; | ||
| background-color: #ECECEC; | ||
| margin: 0 0 25px 25px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .single-pokemon__overview { | ||
| margin: 0 0 22px; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .single-pokemon__overview img { | ||
| width: 90px; | ||
| height: 90px; | ||
| border-radius: 8px; | ||
| background-color: #FDB714; | ||
| } | ||
|
|
||
| .single-pokemon__overview h2 { | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| padding: 0; | ||
| margin: 0 0 0 12px; | ||
| } | ||
|
|
||
| .single-pokemon__features { | ||
| margin: 0 0 0 10px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .single-pokemon__features p { | ||
| font-size: 14px; | ||
| line-height: 18px; | ||
| padding: 0; | ||
| margin: 0 0 16px; | ||
| } | ||
|
|
||
| .single-pokemon__features p span { | ||
| margin: 0 6px 0 0; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| .single-pokemon__type, | ||
| .single-pokemon__weakness { | ||
| display: flex; | ||
| align-items: baseline; | ||
| margin: 0 0 16px; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .single-pokemon__type h3, | ||
| .single-pokemon__weakness h3 { | ||
| font-size: 14px; | ||
| line-height: 18px; | ||
| padding: 0; | ||
| margin: 0 12px 0 10px; | ||
| } | ||
|
|
||
| .type__list { | ||
| width: 100%; | ||
| display: flex; | ||
| } | ||
|
|
||
| .type__list li { | ||
| height: 15px; | ||
| font-size: 14px; | ||
| font-weight: 400; | ||
| line-height: 21px; | ||
| color: #FFF; | ||
| border-radius: 3px; | ||
| display: flex; | ||
| align-items: center; | ||
| margin: 0 6px 0 0; | ||
| } | ||
|
|
||
| .yellow_type { | ||
| background-color: #FDB714; | ||
| padding: 7px 9px; | ||
| } | ||
|
|
||
| .red_type { | ||
| background-color: #EF4934; | ||
| padding: 7px 20px; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .pink_type { | ||
| background-color: #FF87F3; | ||
| padding: 7px 20px; | ||
| margin: 0 6px 0 0; | ||
| } | ||
|
|
||
| .blue_type { | ||
| background-color: #3447EF; | ||
| padding: 7px 16px; | ||
| margin: 0; | ||
| } |
26 changes: 26 additions & 0 deletions
26
homeworks/mariya.artemenko_Mariya-Artemenko/PokemonProject/css/header.css
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,26 @@ | ||
| .header { | ||
| height: 80px; | ||
| background-color: #333; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .header__nav { | ||
| width: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| margin-left: 53px; | ||
| } | ||
|
|
||
| .nav__link { | ||
| font-size: 16px; | ||
| font-weight: 500; | ||
| color: #FFF; | ||
| margin-right: 50px; | ||
| } | ||
|
|
||
| .nav__link:hover { | ||
| color: #FFF; | ||
| text-decoration: underline; | ||
| } |
57 changes: 57 additions & 0 deletions
57
homeworks/mariya.artemenko_Mariya-Artemenko/PokemonProject/css/style.css
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,57 @@ | ||
| @import "default.css"; | ||
| @import "header.css"; | ||
|
|
||
| .about-me { | ||
| width: 1175px; | ||
| height: 409px; | ||
| margin: 65px auto; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| } | ||
|
|
||
| .about-me__image { | ||
| width: 532px; | ||
| height: 275px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-content: center; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| background-color: #FDB714; | ||
| border-radius: 22px; | ||
| margin: 0 68px 0 0; | ||
| } | ||
|
|
||
| .image__big { | ||
| margin: 0; | ||
| padding: 25px 0 0; | ||
| } | ||
|
|
||
| .image__small { | ||
| margin: -15px 0 0; | ||
| padding: 0; | ||
| background-image: url("../images/index/small_pokemon_back.png"); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| } | ||
|
|
||
| .about-me__text-block { | ||
| width: 532px; | ||
| } | ||
|
|
||
| .about-me__text-block h1 { | ||
| font-size: 48px; | ||
| font-weight: 700; | ||
| margin: 0 0 24px; | ||
| } | ||
|
|
||
| .about-me__text-block p { | ||
| font-size: 22px; | ||
| font-weight: 400; | ||
| margin: 0 0 32px; | ||
| } | ||
|
|
||
| .about-me__text-block a { | ||
| color: #EF4934; | ||
| text-decoration: underline; | ||
| } |
Oops, something went wrong.