Skip to content

Commit 6f6f7ea

Browse files
shovoalwaysshovoalways
authored
Add files via upload
1 parent 690afe9 commit 6f6f7ea

6 files changed

Lines changed: 174 additions & 0 deletions

File tree

‎040_CSS_Projects/product-preview-card-component-main/images/favicon-32x32.png‎

1.04 KB
Loading

‎040_CSS_Projects/product-preview-card-component-main/images/icon-cart.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎040_CSS_Projects/product-preview-card-component-main/images/image-product-desktop.jpg‎

44 KB
Loading

‎040_CSS_Projects/product-preview-card-component-main/images/image-product-mobile.jpg‎

28.8 KB
Loading

‎040_CSS_Projects/product-preview-card-component-main/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<!-- displays site properly based on user's device -->
8+
9+
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
10+
11+
<title>Frontend Mentor | Product preview card component</title>
12+
<link rel="stylesheet" href="style.css">
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link
16+
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@400;500;700&display=swap"
17+
rel="stylesheet">
18+
</head>
19+
20+
<body>
21+
<div class="card">
22+
<div class="card-img">
23+
<img class="desktop" src="/images/image-product-desktop.jpg" alt="">
24+
<img class="mobile" src="/images/image-product-mobile.jpg" alt="">
25+
</div>
26+
<div class="card-body">
27+
<h6>Perfume</h6>
28+
<h2>Gabrielle Essence Eau De Parfum</h2>
29+
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge,
30+
Perfumer-Creator for the House of CHANEL.</p>
31+
<p class="price">$149.99 <span>$169.99</span></p>
32+
<button type="button"><img src="/images/icon-cart.svg" alt=""> Add to Cart</button>
33+
</div>
34+
</div>
35+
</body>
36+
37+
</html>

‎040_CSS_Projects/product-preview-card-component-main/style.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
:root {
2+
--primaryFont: 'Montserrat', sans-serif;
3+
--secFont: 'Fraunces', serif;
4+
5+
--darkCyan: hsl(158, 36%, 37%);
6+
--creamColor: hsl(30, 38%, 92%);
7+
--veryDarkBlue: hsl(212, 21%, 14%);
8+
--darkGrayishBlue: hsl(228, 12%, 48%);
9+
--whiteColor: hsl(0, 0%, 100%);
10+
}
11+
*,
12+
*::after,
13+
*::before {
14+
margin: 0;
15+
padding: 0;
16+
list-style: none;
17+
box-sizing: border-box;
18+
}
19+
html,
20+
body {
21+
height: 100%;
22+
}
23+
body {
24+
font-family: var(--primaryFont);
25+
font-weight: 400;
26+
font-size: 14px;
27+
background: var(--creamColor);
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
}
32+
h1,
33+
h2,
34+
h3,
35+
h4,
36+
h5,
37+
h6 {
38+
font-family: var(--secFont);
39+
font-weight: 700;
40+
margin-bottom: 15px;
41+
}
42+
p {
43+
font-weight: 400;
44+
margin-bottom: 15px;
45+
}
46+
img {
47+
max-width: 100%;
48+
height: auto;
49+
}
50+
.card {
51+
width: 600px;
52+
display: flex;
53+
}
54+
.card-img {
55+
flex-basis: 50%;
56+
}
57+
.card-img img.desktop {
58+
border-radius: 10px 0 0 10px;
59+
display: block;
60+
}
61+
.card-img img.mobile {
62+
border-radius: 10px 10px 0 0;
63+
display: none;
64+
}
65+
.card-body {
66+
flex-basis: 50%;
67+
background: var(--whiteColor);
68+
border-radius: 0 10px 10px 0;
69+
padding: 30px;
70+
}
71+
.card-body h2 {
72+
color: var(--veryDarkBlue);
73+
font-size: 32px;
74+
}
75+
.card-body h6 {
76+
color: var(--darkGrayishBlue);
77+
font-family: var(--primaryFont);
78+
font-size: 14px;
79+
font-weight: 500;
80+
text-transform: uppercase;
81+
letter-spacing: 3px;
82+
}
83+
.card-body p {
84+
font-size: 14px;
85+
color: var(--darkGrayishBlue);
86+
line-height: 1.5em;
87+
}
88+
.card-body p.price {
89+
font-family: var(--secFont);
90+
color: var(--darkCyan);
91+
font-size: 32px;
92+
}
93+
.card-body p.price span {
94+
font-family: var(--primaryFont);
95+
color: var(--darkGrayishBlue);
96+
font-size: 14px;
97+
text-decoration: line-through;
98+
position: relative;
99+
top: -5px;
100+
}
101+
.card-body button {
102+
background: var(--darkCyan);
103+
border: 0;
104+
width: 100%;
105+
padding: 15px;
106+
border-radius: 10px;
107+
color: var(--whiteColor);
108+
font-weight: 500;
109+
}
110+
.card-body button img {
111+
display: inline-block;
112+
padding-right: 10px;
113+
position: relative;
114+
top: 3px;
115+
}
116+
117+
/* Responsive */
118+
@media only screen and (max-width: 600px) {
119+
body {
120+
align-items: flex-start;
121+
}
122+
.card {
123+
width: 90%;
124+
flex-direction: column;
125+
margin-top: 20px;
126+
}
127+
.card-img img.desktop {
128+
display: none;
129+
}
130+
.card-img img.mobile {
131+
display: block;
132+
}
133+
.card-body {
134+
border-radius: 0 0 10px 10px;
135+
}
136+
}

0 commit comments

Comments
 (0)