css battle i scored 100 25 number 4

Solutions on MaxInterview for css battle i scored 100 25 number 4 by the best coders in the world

showing results for - "css battle i scored 100 25 number 4"

02 Feb 2019

1<body>
2<div class="A"></div>
3<div class="B"></div>
4<div class="C"></div>
5<div class="D"></div>
6<style>
7  body{
8	margin:0px;
9  }
10  .A{
11    margin-left: 0px;
12    background:#F7EC7D;
13    height:50;
14  }
15  .B{
16    background:#E38F66;
17    height:50;
18  }
19  .C{
20    background:#AA445F;
21    height:100;
22  }
23  .D{
24    background:#62306D;
25    height:100;
26  }
27</style>
28</body>

Fabian

31 Jul 2017

1<body>
2<div class="A"></div>
3<div class ="B"></div>
4<div class ="C"></div>
5<div class ="D"></div>
6<style>
7  .A {
8    height: 100px;
9    width: 50px;
10    background: #F9E492;
11    border-radius:0 90px 90px 0;
12    transform: rotate(-90deg);
13    position:absolute;
14    top:75;
15    left:125;
16  }
17  .B {
18    height: 100px;
19    width: 50px;
20    background: #4F77FF;
21    border-radius:0 90px 90px 0;
22    transform: rotate(-0deg);
23    position:relative;
24    top:-50;
25    left:50;
26  }
27  .C {
28    height: 100px;
29    width: 50px;
30    background: #F9E492;
31    border-radius:0 90px 90px 0;
32    transform: rotate(90deg);
33    position:relative;
34    top:25;
35    left:25;
36  }
37  .D {
38    height: 100px;
39    width: 50px;
40    background: #4F77FF;
41    border-radius:0 90px 90px 0;
42    transform: rotate(180deg);
43    position:absolute;
44    top:150;
45    left:150;
46  }
47  body{
48    background-color:#191919;
49    display: flex;
50    justify-content:center;
51    align-items:center;
52  }
53</style>
54</body>

Sarah

20 May 2020

1<body>
2<div class="A">
3  <div class="B">
4  <div class="C"></div>
5  </div>
6  </div>
7 
8 
9<style>
10  .A {
11    width: 150;
12    height: 150;
13    background: #4F77FF;
14    border-radius:105px;
15    position: absolute;
16    top:50;
17    left:125;
18    display:flex;
19    justify-content:center;
20    align-items:center;
21    
22    ;
23    
24  }
25  .B{
26    width:75px;
27    height:125px;
28    background-color:#F9E492;
29    position:relative;
30    top:62;
31    left:-38;
32    
33    
34    
35    
36  }
37  .C{
38    width:75px;
39    height:75px;
40    background-color:#9AD5FF;
41    border-radius: 0 0 0 90px ;
42
43    
44  }
45  body{
46    background-color:#19191A;
47    display:flex;
48	justify-content:center;
49    align-items:center;
50    
51  }
52</style>
53</body>

Bryn

13 Nov 2020

1<body>
2  <div class="C"></div>
3<div class="A">
4  <div class="B"></div>
5  </div>
6<style>
7  .A {
8    width: 200px;
9    height: 100px;
10    background: #FE5F55;
11    position:absolute;
12    top:90;
13    border-radius:20px;
14    display:flex;
15    justify-content:center;
16    align-items:center;
17  }
18  .B{
19    width:140px;
20    height:40px;
21    border-radius:20px;
22    background-color:#A64942;
23  }
24  .C{
25    width:200px;
26    height:120px;
27    border-radius:20px;
28    background-color:#A64942;
29    
30  }
31  body{
32    background-color:#293462;
33    display:flex;
34    justify-content:center;
35    align-items:center;
36  }
37</style>
38</body>

Alan

29 Jan 2016

1<body>
2<div></div>
3<style>
4  div {
5    width: 200px;
6    height: 200px;
7    background: #b5e0ba;
8    position:absolute;
9    top:0px;
10    left:0px;
11  }
12  body{
13    background:#5d3a3a;
14  }
15</style>
16</body>