Skip to content

Commit 251c1db

Browse files
arbaouimehdiarbaouimehdi
committed
Add Initial Files
0 parents  commit 251c1db

File tree

4 files changed

+194
-0
lines changed

4 files changed

+194
-0
lines changed

‎css/reset.css

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
2+
3+
:root {
4+
--primary: #36c007;
5+
--secondary: #9507c0;
6+
--background: #181824;
7+
--white: #fff;
8+
--black: #000;
9+
--gray: #777;
10+
--fontFamily: "Quicksand", sans-serif;
11+
--fontWeightNormal: 400;
12+
--fontSizeRoot: 20px;
13+
--fontSizeLarge: 1.325rem;
14+
--fontSizeSmall: 0.875rem;
15+
}
16+
17+
html {
18+
box-sizing: border-box;
19+
height: 100%;
20+
font-size: var(--fontSizeRoot);
21+
}
22+
23+
body {
24+
display: flex;
25+
flex-direction: column;
26+
align-items: center;
27+
height: 100%;
28+
margin: auto;
29+
color: var(--text-color);
30+
font-family: var(--fontFamily);
31+
background-color: var(--background);
32+
cursor: default;
33+
}
34+
35+
body,
36+
h1,
37+
h2,
38+
h3,
39+
h4,
40+
h5,
41+
h6,
42+
p,
43+
ol,
44+
ul,
45+
dl,
46+
dd {
47+
padding: 0;
48+
margin: 0;
49+
}
50+
51+
ol,
52+
ul {
53+
list-style: none;
54+
}
55+
56+
img {
57+
max-width: 100%;
58+
height: auto;
59+
}
60+
61+
a {
62+
text-decoration: none;
63+
}
64+
65+
button {
66+
background: none;
67+
border: 0;
68+
}
69+
70+
/* ------------------------ */
71+
/* UI Style */
72+
/* ------------------------ */
73+
74+
.product {
75+
position: relative;
76+
width: 395px;
77+
margin-top: 2rem;
78+
background-color: var(--white);
79+
border: 10px solid transparent;
80+
border-radius: 1rem;
81+
82+
&:before {
83+
position: absolute;
84+
right: 0;
85+
z-index: 1;
86+
padding: 0 0.6rem 0.2rem 0.6rem;
87+
color: var(--white);
88+
font-size: 1.1rem;
89+
font-weight: bold;
90+
text-transform: uppercase;
91+
border-radius: 0 0 0 0.5rem;
92+
}
93+
}
94+
95+
.product img {
96+
border-radius: 1rem 1rem 0 0;
97+
}
98+
99+
.product__art {
100+
position: relative;
101+
}
102+
103+
.product__art:hover .button {
104+
opacity: 1;
105+
pointer-events: auto;
106+
}
107+
108+
.product__infos {
109+
display: flex;
110+
flex-direction: column;
111+
align-items: center;
112+
padding: 20px 0;
113+
}
114+
115+
.product__title {
116+
margin-bottom: 10px;
117+
font-size: var(--fontSizeLarge);
118+
}
119+
120+
.product__link {
121+
color: var(--black);
122+
}
123+
124+
.product__link:hover {
125+
text-decoration: underline;
126+
}
127+
128+
.product__price {
129+
display: block;
130+
margin-bottom: 20px;
131+
font-weight: var(--fontWeightNormal);
132+
}
133+
134+
.product__brand {
135+
color: var(--gray);
136+
text-transform: uppercase;
137+
}

‎css/tutorial.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.product {
2+
container-name: product;
3+
}
4+
5+
/* -------- is new -------- */
6+
@container style(--isNew: true) {
7+
.product {
8+
border-color: var(--primary);
9+
10+
&::before {
11+
content: "🔥 new";
12+
background-color: var(--primary);
13+
}
14+
}
15+
}
16+
17+
/* ------ is popular ------ */
18+
@container style(--isPopular: true) {
19+
.product {
20+
border-color: var(--secondary);
21+
22+
&::before {
23+
content: "⭐ popular";
24+
background-color: var(--secondary);
25+
}
26+
}
27+
}

‎images/sneaker.jpg

9.86 KB
Loading

‎index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0"
8+
/>
9+
<link rel="stylesheet" href="css/reset.css" />
10+
<link rel="stylesheet" href="css/tutorial.css" />
11+
<title>Front Tips - Style Container Queries</title>
12+
</head>
13+
<body>
14+
<article style="--isNew: true">
15+
<div class="product">
16+
<header class="product__art">
17+
<img src="./images/sneaker.jpg" alt="JumpStep Campus" />
18+
</header>
19+
20+
<div class="product__infos">
21+
<h2 class="product__title">
22+
<a href="#" class="product__link">JumpStep Campus</a>
23+
</h2>
24+
<strong class="product__price">£75.00</strong>
25+
<span class="product__brand">swaghook</span>
26+
</div>
27+
</div>
28+
</article>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)