Skip to content

Commit ceeff89

Browse files
thecodercoderthecodercoder
committed
initial commit
1 parent 48b9cb0 commit ceeff89

8 files changed

+251
-2
lines changed

‎README.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
# fem-single-price-grid-component
2-
Frontend Mentor challenge
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)

‎design/desktop-design.jpg

38.5 KB
Loading

‎design/desktop-preview.jpg

35.4 KB
Loading

‎design/mobile-design.jpg

31.6 KB
Loading

‎images/favicon-32x32.png

1.04 KB
Loading

‎index.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
6+
7+
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
8+
<link rel="preconnect" href="https://fonts.gstatic.com">
9+
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="style.css">
11+
<title>Frontend Mentor | Single Price Grid Component</title>
12+
13+
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
14+
<style>
15+
.attribution { font-size: 11px; text-align: center; }
16+
.attribution a { color: hsl(228, 45%, 44%); }
17+
</style>
18+
</head>
19+
<body>
20+
21+
<section class="price">
22+
23+
<div class="community">
24+
<h2>Join our community</h2>
25+
<div class="subtitle">30-day, hassle-free money back guarantee</div>
26+
<p>
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+
</p>
30+
</div>
31+
<div class="subscription">
32+
<h3>Monthly Subscription</h3>
33+
<div class="subscription__price">
34+
&dollar;29 <span>per month</span>
35+
</div>
36+
<p>
37+
Full access for less than &dollar;1 a day
38+
</p>
39+
<a href="#">Sign Up</a>
40+
</div>
41+
<div class="why">
42+
<h3>Why Us</h3>
43+
<ul>
44+
<li>Tutorials by industry experts</li>
45+
<li>Peer &amp; expert code review</li>
46+
<li>Coding exercises</li>
47+
<li>Access to our GitHub repos</li>
48+
<li>Community forum</li>
49+
<li>Flashcard decks</li>
50+
<li>New videos every week</li>
51+
</ul>
52+
</div>
53+
54+
</section>
55+
56+
<footer>
57+
<p class="attribution">
58+
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
59+
Coded by <a href="#">Your Name Here</a>.
60+
</p>
61+
</footer>
62+
</body>
63+
</html>

‎style-guide.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
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+
}

0 commit comments

Comments
 (0)