kawsarBinSiraj / cssbattle-solved

cssbattle-solved (https://cssbattle.dev/player/kawsar_bin_siraj)

Battle #1 - #3. Push Button

Here is my solution

<a class="d">
    <div class="e"><div class="f"></div></div>
</a>
<style>
    body {
        margin: 0;
        background: #6592cf;
        display: grid;
        place-items: center;
    }
    .d {
        width: 300px;
        height: 150px;
        background: #243d83;
    }
    .e {
        width: 250px;
        box-sizing: border-box;
        height: 250px;
        border: 50px solid #6592cf;
        display: grid;
        place-items: center;
        margin: auto;
        margin-top: -50px;
        border-radius: 50%;
    }
    .f {
        width: 50px;
        height: 50px;
        background: #eeb850;
        border-radius: 50%;
    }
</style>

Battle #1 - #2. Carrom

Here is my solution

<div></div>
<div></div>
<div></div>
<div></div>
<style>
    body {
        padding: 0;
        margin: 0;
        background: #62374e;
        display: grid;
        grid-template-columns: repeat(2, 50px);
        justify-content: space-between;
        align-items: center;
        padding: 0 50px;
    }
    div {
        width: 50px;
        height: 50px;
        background: #fdc57b;
    }
</style>

Battle #23 - #141. Third Eye

Here is my solution

<p></p>
<div class="d"></div>
<div class="d e"></div>
<style>
    * {
        background: #d9d9d9;
        margin: 0;
    }
    body {
        background: #e3516e;
        display: grid;
        place-items: center;
    }
    p {
        width: 100px;
        height: 100px;
        border-radius: 100% 0;
        transform: rotate(45deg);
    }
    .d {
        position: absolute;
        width: 124px;
        height: 124px;
        border-radius: 80px 50px;
        top: -49px;
        left: -49px;
    }
    .e {
        top: initial;
        left: initial;
        bottom: -49px;
        right: -49px;
        border-radius: 80px 50px;
    }
</style>

Battle #23 - #142. Curtains

Here is my solution

<div></div>
<style>
    body {
        margin: 0;
        background: #4f77ff;
        display: grid;
        place-items: center;
    }
    div {
        height: 200px;
        width: 300px;
        background: repeating-linear-gradient(90deg, #1038bf 0, #1038bf 60px, #4f77ff 60px, #4f77ff 80px, #ffffff 80px, #ffffff 100px, #4f77ff 100px, #4f77ff 120px);
    }
</style>