Frontend Mentor | Single Price Grid Component

├── .gitattributes ├── README.md ├── design ├── desktop-design.jpg ├── desktop-preview.jpg └── mobile-design.jpg ├── images └── favicon-32x32.png ├── index.html ├── style-guide.md └── style.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor challenge: Single Price Grid Component 2 | 3 | [Single price grid component challenge](https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc) 4 | -------------------------------------------------------------------------------- /design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-price-grid-component/ceeff8946f2e61daf99e5eb72850368fc09a02e3/design/desktop-design.jpg -------------------------------------------------------------------------------- /design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-price-grid-component/ceeff8946f2e61daf99e5eb72850368fc09a02e3/design/desktop-preview.jpg -------------------------------------------------------------------------------- /design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-price-grid-component/ceeff8946f2e61daf99e5eb72850368fc09a02e3/design/mobile-design.jpg -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-single-price-grid-component/ceeff8946f2e61daf99e5eb72850368fc09a02e3/images/favicon-32x32.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Frontend Mentor | Single Price Grid Component 12 | 13 | 14 | 18 | 19 | 20 | 21 |

22 | 23 |

24 |

Join our community

25 |

30-day, hassle-free money back guarantee

26 |

27 | Gain access to our full library of tutorials along with expert code reviews. 28 | Perfect for any developers who are serious about honing their skills. 29 |

30 |

31 |

32 |

Monthly Subscription

33 |

34 | $29 per month 35 |

36 |

37 | Full access for less than $1 a day 38 |

39 | Sign Up 40 |

41 |

42 |

Why Us

43 |

Tutorials by industry experts
Peer & expert code review
Coding exercises
Access to our GitHub repos
Community forum
Flashcard decks
New videos every week

52 |

53 | 54 |

55 | 56 | 62 | 63 | -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Cyan: hsl(179, 62%, 43%) 15 | - Bright Yellow: hsl(71, 73%, 54%) 16 | 17 | ### Neutral 18 | 19 | - Light Gray: hsl(204, 43%, 93%) 20 | - Grayish Blue: hsl(218, 22%, 67%) 21 | 22 | ## Typography 23 | 24 | ### Body Copy 25 | 26 | - Font size: 16px 27 | 28 | ### Font 29 | 30 | - Family: [Karla](https://fonts.google.com/specimen/Karla) 31 | - Weights: 400, 700 -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-size: 100%; 4 | } 5 | 6 | *, *::before, *::after { 7 | box-sizing: inherit; 8 | } 9 | 10 | body { 11 | font-family: 'Karla', sans-serif; 12 | line-height: 1.3; 13 | background-color: var(--ltgray); 14 | color: var(--grayblue); 15 | padding: var(--paddingX); 16 | } 17 | 18 | :root { 19 | --white: hsl(0, 0%, 100%); 20 | --cyan: hsl(179, 62%, 40%); 21 | --ltcyan: hsl(179, 62%, 45%); 22 | --yellow: hsl(71, 73%, 54%); 23 | --dkyellow: hsl(71, 73%, 48%); 24 | --ltgray: hsl(204, 43%, 93%); 25 | --grayblue: hsl(218, 22%, 67%); 26 | --paddingX: 1.8rem; 27 | --paddingY: 1.5rem; 28 | } 29 | 30 | a { 31 | text-decoration: none; 32 | } 33 | 34 | h1, h2, h3 { 35 | font-weight: bold; 36 | margin-top: 0; 37 | line-height: 1.15; 38 | } 39 | 40 | h2 { 41 | font-size: 1.25rem; 42 | margin-bottom: 1.25rem; 43 | } 44 | 45 | h3 { 46 | font-size: 1.1rem; 47 | } 48 | 49 | p { 50 | margin-top: 0; 51 | } 52 | 53 | .price { 54 | border-radius: 0.5rem; 55 | overflow: hidden; 56 | max-width: 40rem; 57 | margin: auto; 58 | } 59 | 60 | @media only screen and (min-width: 62.5em){ 61 | 62 | .price { 63 | display: grid; 64 | grid-template-columns: repeat(2, 1fr); 65 | grid-template-rows: repeat(2, auto); 66 | } 67 | 68 | .community { 69 | grid-column: 1 / 3; 70 | } 71 | } 72 | 73 | .price > * { 74 | padding: var(--paddingX) var(--paddingY); 75 | } 76 | 77 | .community { 78 | background-color: var(--white); 79 | } 80 | 81 | .community h2 { 82 | color: var(--cyan); 83 | } 84 | 85 | .community .subtitle { 86 | font-size: 1rem; 87 | color: var(--yellow); 88 | font-weight: bold; 89 | margin-bottom: 1rem; 90 | } 91 | 92 | .community p { 93 | font-size: 0.85rem; 94 | line-height: 1.75; 95 | margin-bottom: 0; 96 | } 97 | 98 | .subscription, .why { 99 | color: var(--ltgray); 100 | } 101 | 102 | .subscription { 103 | background-color: var(--cyan); 104 | } 105 | 106 | .subscription__price { 107 | display: flex; 108 | align-items: center; 109 | font-size: 2rem; 110 | font-weight: bold; 111 | margin-bottom: 0.25rem; 112 | } 113 | 114 | .subscription__price span { 115 | font-size: 1rem; 116 | margin-left: 0.8rem; 117 | font-weight: normal; 118 | opacity: 0.75; 119 | } 120 | 121 | .subscription p { 122 | font-size: 0.9rem; 123 | margin-bottom: 1.75rem; 124 | } 125 | 126 | .subscription a { 127 | display: block; 128 | background-color: var(--yellow); 129 | color: var(--white); 130 | padding: 0.75rem; 131 | text-align: center; 132 | border-radius: 0.25rem; 133 | box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); 134 | transition: background-color 200ms ease; 135 | } 136 | 137 | .subscription a:hover { 138 | background-color: var(--dkyellow); 139 | } 140 | 141 | .why { 142 | background-color: var(--ltcyan); 143 | } 144 | 145 | .why ul { 146 | margin-top: 0; 147 | padding: 0; 148 | } 149 | 150 | .why ul li { 151 | list-style-type: none; 152 | font-size: 0.85rem; 153 | margin-bottom: 0.2rem; 154 | } --------------------------------------------------------------------------------