Skip to content

Commit d037520

Browse files
bnidevsbnidevs
committed
push puzzle
1 parent 6baf3bb commit d037520

File tree

2 files changed

+117
-0
lines changed

2 files changed

+117
-0
lines changed

‎puzzles/alignment/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>
7+
Alignment Puzzle
8+
</title>
9+
10+
<link rel="stylesheet" type="text/css" href="style.css">
11+
</head>
12+
<body>
13+
<div class="puzzle-rules">
14+
Aim: Correct the HTML/CSS so that the blue square is centered against the four green rectangles;<br> in other words, the two white guidelines (one is the center of the blue square, and the other is the center of the 4 green rectangles) are in essence the same guideline
15+
<ol>
16+
<li>You are not allowed to modify the size of any of the elements</li>
17+
<li>You are allowed to add but not remove elements as long as the order of the DOM tree remains the same (divs with "attachment" classes are children of the div with the "element" class)</li>
18+
<li>Solution must be relatively concise (soft limit of a 100-line difference)</li>
19+
<li>JavaScript solutions are not allowed</li>
20+
<li>Red lines are spacers, disregard besides for visualization</li>
21+
<li>Correctness of solution will be assessed by <a href="https://github.com/bnidevs">github.com/bnidevs</a> AKA @.sourcerer</li>
22+
<li>Reward is 100USD, distributed via Venmo, or Zelle</li>
23+
</ol>
24+
</div>
25+
<div class="scroll-container">
26+
<div class="scroll-spacer"></div>
27+
<div class="element">
28+
<div class="guideline relative"></div>
29+
<div class="attachment-container">
30+
<div class="guideline absolute"></div>
31+
<div class="attachment-element"></div>
32+
<div class="attachment-spacer"></div>
33+
<div class="attachment-element"></div>
34+
<div class="attachment-spacer"></div>
35+
<div class="attachment-element"></div>
36+
<div class="attachment-spacer"></div>
37+
<div class="attachment-element"></div>
38+
</div>
39+
</div>
40+
<div class="scroll-spacer"></div>
41+
</div>
42+
</body>
43+
</html>

‎puzzles/alignment/style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.scroll-container {
2+
position: absolute;
3+
top: 50%;
4+
left: 50%;
5+
transform: translate(-50%, -50%);
6+
width: 90vw;
7+
height: 20vh;
8+
overflow-x: scroll;
9+
overflow-y: hidden;
10+
background-color: lightgray;
11+
12+
display: flex;
13+
align-items: center;
14+
}
15+
16+
.scroll-spacer {
17+
min-width: 70vw;
18+
height: 1px;
19+
background-color: red;
20+
}
21+
22+
.element {
23+
min-width: 100px;
24+
height: 100px;
25+
outline: 1px solid black;
26+
background-color: rgba(0,0,255,0.1);
27+
}
28+
29+
.absolute {
30+
position: absolute;
31+
}
32+
33+
.relative {
34+
position: relative;
35+
}
36+
37+
.guideline {
38+
height: 200vh;
39+
width: 2px;
40+
background-color: rgb(255,255,255);
41+
top: 50%;
42+
left: 50%;
43+
transform: translate(-50%,-50%);
44+
}
45+
46+
.attachment-container {
47+
position: absolute;
48+
top: 50%;
49+
left: 50%;
50+
transform: translate(-50%,0);
51+
z-index: 10;
52+
display: flex;
53+
align-items: center;
54+
}
55+
56+
.attachment-element {
57+
min-width: 30vw;
58+
height: 100px;
59+
outline: 1px solid black;
60+
background-color: rgba(0,255,0,0.1);
61+
}
62+
63+
.attachment-spacer {
64+
min-width: 50px;
65+
height: 1px;
66+
background-color: red;
67+
}
68+
69+
.puzzle-rules {
70+
position: absolute;
71+
top: 50px;
72+
left: 50%;
73+
transform: translate(-50%, 0);
74+
}

0 commit comments

Comments
 (0)