< Back to Frontend Friday Folks Index

Stay at Home

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (911 characters)
1 
<div class="house roof"></div>
2 
<div class="house main">
3 
  <div class="feature window"></div>
4 
  <div class="feature door"></div>
5 
</div>
6 
<style>
7 
  body{
8 
    background:#6592CF;
9 
    display:grid;
10 
    place-content:center;
11 
    place-items:center;
12 
  }
13 
  .house {
14 
    &.roof {
15 
      border:100px solid transparent;
16 
      border-top:0;
17 
      border-bottom-color:#243D83;
18 
    }
19 
    &.main {
20 
      background:#243D83;
21 
      border-radius: 0 0 10px 10px;
22 
      height:100;
23 
      width:150;
24 
      display:grid;
25 
      justify-content:center;
26 
      align-content: space-between;
27 
      justify-items:center;
28 
      & .feature {
29 
        background:#EEB850;
30 
        &.window {
31 
          height: 10px;
32 
          width: 100;
33 
          border-radius: 10px;
34 
          margin-top:-5px;
35 
        }
36 
        &.door {
37 
          height: 50;
38 
          width: 50;
39 
          border-radius: 10px 10px 0 0;
40 
        }
41 
      }
42 
    }
43 
  }
44 
</style>
45
Another puzzle I think we haven't done during VirtualCoffee. I've solved it by myself with regular elements and in a way that could work as a component.
< Back to Frontend Friday Folks Index