Skip to content

Commit 405affe

Browse files
arinkerarinker
committed
basic example
1 parent 658ffa6 commit 405affe

File tree

2 files changed

+435
-14
lines changed

2 files changed

+435
-14
lines changed

‎css_attributes.html‎

Lines changed: 200 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,205 @@
11
<!DOCTYPE html>
22
<html>
3+
4+
<head>
5+
<style>
6+
.mastermind {}
7+
8+
.row {
9+
display: flex;
10+
}
11+
12+
.dot {
13+
width: 16.6666%;
14+
height: 2rem;
15+
}
16+
17+
@media screen and (min-width: 500px) {
18+
[data-mq1~="red"] {
19+
background: red;
20+
}
21+
22+
[data-mq1~="orange"] {
23+
background: orange;
24+
}
25+
26+
[data-mq1~="yellow"] {
27+
background: yellow;
28+
}
29+
30+
[data-mq1~="green"] {
31+
background: green;
32+
}
33+
34+
[data-mq1~="blue"] {
35+
background: blue;
36+
}
37+
38+
[data-mq1~="violet"] {
39+
background: violet;
40+
}
41+
}
42+
43+
@media screen and (min-width: 750px) {
44+
[data-mq2~="red"] {
45+
background: red;
46+
}
47+
48+
[data-mq2~="orange"] {
49+
background: orange;
50+
}
51+
52+
[data-mq2~="yellow"] {
53+
background: yellow;
54+
}
55+
56+
[data-mq2~="green"] {
57+
background: green;
58+
}
59+
60+
[data-mq2~="blue"] {
61+
background: blue;
62+
}
63+
64+
[data-mq2~="violet"] {
65+
background: violet;
66+
}
67+
}
68+
69+
@media screen and (min-width: 1000px) {
70+
[data-mq3~="red"] {
71+
background: red;
72+
}
73+
74+
[data-mq3~="orange"] {
75+
background: orange;
76+
}
77+
78+
[data-mq3~="yellow"] {
79+
background: yellow;
80+
}
81+
82+
[data-mq3~="green"] {
83+
background: green;
84+
}
85+
86+
[data-mq3~="blue"] {
87+
background: blue;
88+
}
89+
90+
[data-mq3~="violet"] {
91+
background: violet;
92+
}
93+
}
94+
95+
@media screen and (min-width: 1250px) {
96+
[data-mq4~="red"] {
97+
background: red;
98+
}
99+
100+
[data-mq4~="orange"] {
101+
background: orange;
102+
}
103+
104+
[data-mq4~="yellow"] {
105+
background: yellow;
106+
}
107+
108+
[data-mq4~="green"] {
109+
background: green;
110+
}
111+
112+
[data-mq4~="blue"] {
113+
background: blue;
114+
}
115+
116+
[data-mq4~="violet"] {
117+
background: violet;
118+
}
119+
}
120+
121+
@media screen and (min-width: 1500px) {
122+
[data-mq5~="red"] {
123+
background: red;
124+
}
125+
126+
[data-mq5~="orange"] {
127+
background: orange;
128+
}
129+
130+
[data-mq5~="yellow"] {
131+
background: yellow;
132+
}
133+
134+
[data-mq5~="green"] {
135+
background: green;
136+
}
137+
138+
[data-mq5~="blue"] {
139+
background: blue;
140+
}
141+
142+
[data-mq5~="violet"] {
143+
background: violet;
144+
}
145+
}
146+
147+
@media screen and (min-width: 1750px) {
148+
[data-mq6~="red"] {
149+
background: red;
150+
}
151+
152+
[data-mq6~="orange"] {
153+
background: orange;
154+
}
155+
156+
[data-mq6~="yellow"] {
157+
background: yellow;
158+
}
159+
160+
[data-mq6~="green"] {
161+
background: green;
162+
}
163+
164+
[data-mq6~="blue"] {
165+
background: blue;
166+
}
167+
168+
[data-mq6~="violet"] {
169+
background: violet;
170+
}
171+
}
172+
</style>
173+
</head>
174+
3175
<body>
4-
<h1>Hello World</h1>
5-
<p>I'm hosted with GitHub Pages.</p>
6-
<ul>
7-
<li><a href="/">Start</a></li>
8-
<li><a href="/css_classes.html">CSS Class</a></li>
9-
<li><a href="/css_attributes.html">CSS Attributes</a></li>
10-
</ul>
176+
177+
<h1>Hello World</h1>
178+
<p>I'm hosted with GitHub Pages.</p>
179+
180+
<ul>
181+
<li><a href="/">Start</a></li>
182+
<li><a href="/css_classes.html">CSS Class</a></li>
183+
<li><a href="/css_attributes.html">CSS Attributes</a></li>
184+
</ul>
185+
186+
<article class="mastermind">
187+
<section class="row">
188+
<div class="dot" data-mq1="red" data-mq2="orange" data-mq3="yellow" data-mq4="green" data-mq5="blue"
189+
data-mq6="violet"></div>
190+
<div class="dot" data-mq1="red" data-mq2="orange" data-mq3="yellow" data-mq4="green" data-mq5="blue"
191+
data-mq6="violet"></div>
192+
<div class="dot" data-mq1="red" data-mq2="orange" data-mq3="yellow" data-mq4="green" data-mq5="blue"
193+
data-mq6="violet"></div>
194+
<div class="dot" data-mq1="red" data-mq2="orange" data-mq3="yellow" data-mq4="green" data-mq5="blue"
195+
data-mq6="violet"></div>
196+
<div class="dot" data-mq1="red" data-mq2="orange" data-mq3="yellow" data-mq4="green" data-mq5="blue"
197+
data-mq6="violet"></div>
198+
<div class="dot" data-mq1="red" data-mq2="orange" data-mq3="yellow" data-mq4="green" data-mq5="blue"
199+
data-mq6="violet"></div>
200+
</section>
201+
</article>
202+
11203
</body>
204+
12205
</html>

0 commit comments

Comments
 (0)