Color-Switcher/index.css at main · ShimilSAbraham/Color-Switcher · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
*{
  box-sizing: border-box;
}
body{
        margin:0;
        padding:0;
        background: #343434;
        transition: 1s;
        font-family: 'Montserrat', sans-serif;
      }
      .head{
          color: #0275d8;
          margin: 0;
          font-weight: 500;
          /* padding: 20px auto; */
      }
      .head h1{
          transition: 0.5s;
          font-size: 40px;
          text-align: center;
	  padding: 0;
      }
      @media screen and (min-width: 692px)
      {
        body{
          padding: 0;
          margin: 0;
          max-width:fit-content}
          .head{margin: 0 auto;}
        .head h1{font-size: 50px; }
      }
      .center{
        position:absolute;
        top:20%;
        left:50%;
            transform: translate(-50%,-50%);

      }
      .switch
      {
        position:relative;
        width:80px;
        height:40px;
        margin: 20px 10px;
        appearance:none;
        outline:none;
        border-radius:20px;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
        transition: 0.5s;
      }
      @media screen and (max-width: 692px)
      {
          .center{flex-direction: column;}
          .switch{transform: scale(0.7); margin: 20px 0;}
      }
      .switch{
        background: #0275d8;
      }

      .switch::before
      {
        content:'';
        position:absolute;
        width: 40px;
        height:40px;
        border-radius:20px;
        top:0;
        left:0;
        background:#fff;
        transform: scale(1.1);
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        transition:0.5s;
      }

      .switch:checked::before
      {
        left:40px;
      }


.image
{
    background-image:url('img/blue.png');
    background-repeat: no-repeat;
    background-size: 550px;
    padding: 20%;
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%,-20%);
    transition: 1s all;
}

@media screen and (max-width:600px){
    .image
{
    background-size: 250px;
    margin: 10% auto;
    padding: 30%;
    width: 300px;
    transform: translate(-45%,-50%);
}
}