< Back to Frontend Friday Folks Index

Piano

Highlighted solution (1100 characters)
1 
<div>
2 
  <div a>
3 
    <p></p>
4 
    <p></p>
5 
    <p></p>
6 
    <p></p>
7 
    <p></p>
8 
    <p></p>
9 
    <p></p>
10 
  </div>
11 
  <div b>
12 
    <r></r>
13 
    <r></r>
14 
    <r x></r>
15 
    <r></r>
16 
    <r></r>
17 
    <r></r>
18 
  </div>
19 
  </div>
20 
  <style>
21 
    body {
22 
      display: grid;
23 
      place-items: center;
24 
      background: #998235;
25 
    }
26 
    div {
27 
      position: relative;
28 
    }
29 
    [a] {
30 
      width: 180;
31 
      height: 100;
32 
      background: #191919;
33 
      border-radius: 10px;
34 
      display: grid;
35 
      grid-template-columns: repeat(7, 20px);
36 
      justify-content: space-between;
37 
      box-sizing: border-box;
38 
      padding: 25px 5px 5px;
39 
    }
40 
    [b] {
41 
      position:absolute;
42 
      width: 180;
43 
      height: 100;
44 
      box-sizing: border-box;
45 
      display: grid;
46 
      grid-template-columns: repeat(6, 15px);
47 
      justify-content: space-between;
48 
      padding: 0 20;
49 
      top:20;
50 
    }
51 
    p {
52 
      background: #fff;
53 
      margin: 0;
54 
      padding: 0;
55 
      border-radius: 5px;
56 
    }
57 
    r {
58 
      background: #191919;
59 
      width: 15;
60 
      height: 40;
61 
    }
62 
    [x] {
63 
      background: #0000;
64 
    }
65 
  </style>
This was special! We've tested Eddie's collaborative CSSBattle.dev script and it worked out well! You connect through a websocket server and this script syncs the slider and the text for all browsers. Really nice to see it working! There are a few issues with this, but the idea looks promising. Let's see how it goes and when we can share a working version of it.
< Back to Frontend Friday Folks Index