Skip to content

Commit 2bb0849

Browse files
tobidellytobidelly
authored
Add files via upload
0 parents  commit 2bb0849

File tree

2 files changed

+166
-0
lines changed

2 files changed

+166
-0
lines changed

Diff for: ‎Index.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Order Summary Component</title>
9+
<link rel="stylesheet" type="text/css" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="card">
14+
<img class="hero-image" src="images/illustration-hero.svg" alt="Hero image">
15+
<div class="container">
16+
<h2 class="title">Order Summary</h2>
17+
18+
<p class="order-description">You can now listen to millions of songs, audiobooks, and podcasts
19+
on any device anywhere you like! </p>
20+
21+
<div class="plan-container">
22+
<img src="images/icon-music.svg" alt="icon-music">
23+
<div class="plan-description">
24+
<strong>Annual plan</strong>
25+
<p>$59.99/year</p>
26+
</div>
27+
<a href="#">Change</a>
28+
</div>
29+
30+
<button class="proceed-button">Proceed to payment</button>
31+
<button class="cancel-button">Cancel order</button>
32+
</div>
33+
34+
</div>
35+
</body>
36+
</html>

Diff for: ‎style.css

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');
2+
3+
4+
:root {
5+
--pale-blue: hsl(225, 100%, 94%);
6+
--bright-blue: hsl(245, 75%, 52%);
7+
--very-pale-blue: hsl(225, 100%, 98%);
8+
--desaturated-blue: hsl(224, 23%, 55%);
9+
--dark-blue: hsl(223, 47%, 23%);
10+
}
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
background-image: url('/images/pattern-background-desktop.svg');
20+
background-repeat: no-repeat;
21+
background-size: cover;
22+
background-color: var(--pale-blue);
23+
font-size: 16px;
24+
font-family: "Red Hat Display", sans-serif;
25+
}
26+
27+
.card {
28+
29+
width: 450px;
30+
background-color: white;
31+
color: var(--desaturated-blue);
32+
border-radius: 20px;
33+
overflow: hidden;
34+
margin: 50px auto;
35+
}
36+
37+
.title {
38+
color: var(--dark-blue);
39+
font-weight: 900;
40+
font-size: 32px;
41+
}
42+
43+
.hero-image {
44+
width: 100%;
45+
}
46+
47+
.container {
48+
padding: 30px;
49+
display: flex;
50+
flex-direction: column;
51+
justify-content: center;
52+
text-align: center;
53+
font-size: 18px;
54+
}
55+
56+
.container > * {
57+
margin: 13px 0;
58+
}
59+
60+
.order-description {
61+
line-height: 25px;
62+
}
63+
64+
.plan-container {
65+
font-size: 16px;
66+
background-color: var(--very-pale-blue);
67+
padding: 25px;
68+
border-radius: 12px;
69+
display: flex;
70+
flex-direction: row;
71+
justify-content: space-between;
72+
align-items: center;
73+
74+
}
75+
76+
.plan-container a {
77+
color: var(--bright-blue);
78+
font-size: 13px;
79+
font-weight: 700;
80+
}
81+
82+
.plan-container a:hover {
83+
opacity: 0.8;
84+
text-decoration: none;
85+
86+
}
87+
88+
.plan-container strong {
89+
color: var(--dark-blue);
90+
}
91+
92+
.plan-description strong p {
93+
line-height: 20px;
94+
margin: 75px;
95+
}
96+
97+
.proceed-button {
98+
background-color: var(--bright-blue);
99+
padding: 1rem 0;
100+
color: white;
101+
box-shadow: 0 20px 30px -8px rgb(197 189 245);
102+
width: 100%;
103+
border: none;
104+
font-weight: 700;
105+
cursor: pointer;
106+
font-size: 0.9rem;
107+
border-radius: 12px;
108+
109+
}
110+
111+
.proceed-button:hover {
112+
opacity: 0.8;
113+
}
114+
115+
.cancel-button {
116+
background-color: white;
117+
color: var(--desaturated-blue);
118+
border: none;
119+
margin-top: 20px;
120+
width: 100%;
121+
font-weight: 700;
122+
font-size: 0.9rem;
123+
border-radius: 12px;
124+
cursor: pointer;
125+
}
126+
127+
.cancel-button:hover {
128+
color: black;
129+
}
130+

0 commit comments

Comments
 (0)