Card by Pradeepsaranbishnoi made with CSS

#e8e8e8

1/* GENERAL */
2
3.credit {
4  position: fixed;
5  right: 2rem;
6  bottom: 2rem;
7  color: white;
8}
9
10.credit a {
11  color: inherit;
12}
13
14/* Main Circle */
15.main-circle {
16  width: 40rem;
17  height: 40rem;
18  border-radius: 100%;
19  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
20  position: absolute;
21  z-index: 1;
22  left: 50%;
23  -webkit-transform: translate(-50%, -70%);
24  -ms-transform: translate(-50%, -70%);
25  transform: translate(-50%, -70%)
26}
27
28/* Phone */
29.phone {
30  position: relative;
31  z-index: 2;
32  width: 18rem;
33  height: 17rem;
34  background-color: inherit;
35  -webkit-box-shadow: 0 4px 35px rgba(0,0,0,.1);
36  box-shadow: 0 4px 35px rgba(0,0,0,.1);
37  border-radius: 40px;
38  display: -webkit-box;
39  display: -ms-flexbox;
40  display: flex;
41  -webkit-box-orient: vertical;
42  -webkit-box-direction: normal;
43  -ms-flex-direction: column;
44  flex-direction: column;
45}
46
47
48
49/* Top */
50.menu {
51/*   background-color: blue; */
52  font-size: 80%;
53  opacity: .4;
54  padding: .8rem 1.8rem;
55  display: -webkit-box;
56  display: -ms-flexbox;
57  display: flex;
58  -webkit-box-pack: justify;
59  -ms-flex-pack: justify;
60  justify-content: space-between;
61  -webkit-box-align: center;
62  -ms-flex-align: center;
63  align-items: center;
64}
65
66.icons {
67  display: -webkit-box;
68  display: -ms-flexbox;
69  display: flex;
70  margin-top: .5rem;
71}
72
73.battery {
74  width: .85rem;
75  height: .45rem;
76  background-color: black;
77}
78
79.network {
80  width: 0;
81  height: 0;
82  border-style: solid;
83  border-width: 0 6.8px 7.2px 6.8px;
84  border-color: transparent transparent black transparent;
85  -webkit-transform: rotate(135deg);
86  -ms-transform: rotate(135deg);
87  transform: rotate(135deg);
88  margin: .12rem .5rem;
89}
90
91/* Middle */
92.content {
93  display: -webkit-box;
94  display: -ms-flexbox;
95  display: flex;
96  -webkit-box-orient: vertical;
97  -webkit-box-direction: normal;
98  -ms-flex-direction: column;
99  flex-direction: column;
100  margin: auto;
101  text-align: center;
102  width: 70%;
103  -webkit-transform: translateY(5%);
104  -ms-transform: translateY(5%);
105  transform: translateY(5%);
106}
107
108.circle {
109  position: relative;
110  border-radius: 100%;
111  width: 8rem;
112  height: 8rem;
113  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
114  margin: auto;
115}
116
117.crescent {
118  position: absolute;
119  border-radius: 100%;
120  right: 0;
121  width: 6rem;
122  height: 6rem;
123  background: white;
124  -webkit-transform: scale(0);
125  -ms-transform: scale(0);
126  transform: scale(0);
127  -webkit-transform-origin: top right;
128  -ms-transform-origin: top right;
129  transform-origin: top right;
130  -webkit-transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
131  transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
132  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
133  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
134}
135
136label, .toggle {
137  height: 2.8rem;
138  border-radius: 100px;
139}
140
141label {
142  width: 100%;
143  background-color: rgba(0,0,0,.1);
144  border-radius: 100px;
145  position: relative;
146  margin: 1.8rem 0 4rem 0;
147  cursor: pointer;
148}
149
150.toggle {
151  position: absolute;
152  width: 50%;
153  background-color: #fff;
154  -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.15);
155  box-shadow: 0 2px 15px rgba(0,0,0,.15);
156  -webkit-transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
157  transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
158  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
159  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
160}
161
162.names {
163  font-size: 90%;
164  font-weight: bolder;
165  color: black;
166  width: 65%;
167  margin-left: 17.5%;
168  margin-top: 6.5%;
169  position: absolute;
170  display: -webkit-box;
171  display: -ms-flexbox;
172  display: flex;
173  -webkit-box-pack: justify;
174  -ms-flex-pack: justify;
175  justify-content: space-between;
176  -webkit-user-select: none;
177  -moz-user-select: none;
178  -ms-user-select: none;
179  user-select: none;
180}
181
182.dark {
183  opacity: .5;
184}
185
186.mark {
187  border-radius: 100px;
188  background-color: black;
189}
190
191.time {
192  color: black;
193}
194/* -------- Switch Styles ------------*/
195[type="checkbox"] {
196  display: none;
197}
198/* Toggle */
199[type="checkbox"]:checked + .app .toggle {
200  -webkit-transform: translateX(100%);
201  -ms-transform: translateX(100%);
202  transform: translateX(100%);
203  background-color: #34323D;
204}
205
206[type="checkbox"]:checked + .app .dark {
207  opacity: 1;
208  color: white;
209}
210
211[type="checkbox"]:checked + .app .light {
212  opacity: 1;
213  color: white;
214}
215/* App */
216[type="checkbox"]:checked + .app .body {
217  background-color: #26242E;
218  color: white;
219}
220/* Circle */
221[type="checkbox"]:checked + .app .crescent {
222  -webkit-transform: scale(1);
223  -ms-transform: scale(1);
224  transform: scale(1);
225  background: #26242E;
226}
227
228[type="checkbox"]:checked + .app .circle {
229  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
230}
231
232[type="checkbox"]:checked + .app .main-circle {
233  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
234}
235
236[type="checkbox"]:checked + .time {
237  color: white;
238}
239
240[type="checkbox"]:checked + .app .body .phone .menu .time {
241  color: white;
242}
243
244[type="checkbox"]:checked + .app .body .phone .menu .icons .network {
245  border-color: transparent transparent white transparent;
246}
247
248[type="checkbox"]:checked + .app .body .phone .menu .icons .battery {
249  background-color: white;
250}
251
252[type="checkbox"]:checked + .app .body {
253  border-radius: 40px;
254  ;
255}
256
257.menu {
258/*   background-color: blue; */
259  font-size: 80%;
260  opacity: .4;
261  padding: .8rem 1.8rem;
262  display: -webkit-box;
263  display: -ms-flexbox;
264  display: flex;
265  -webkit-box-pack: justify;
266  -ms-flex-pack: justify;
267  justify-content: space-between;
268  -webkit-box-align: center;
269  -ms-flex-align: center;
270  align-items: center;
271}
272

/* GENERAL */

.credit {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  color: white;
}

.credit a {
  color: inherit;
}

/* Main Circle */
.main-circle {
  width: 40rem;
  height: 40rem;
  border-radius: 100%;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  position: absolute;
  z-index: 1;
  left: 50%;
  -webkit-transform: translate(-50%, -70%);
  -ms-transform: translate(-50%, -70%);
  transform: translate(-50%, -70%)
}

/* Phone */
.phone {
  position: relative;
  z-index: 2;
  width: 18rem;
  height: 17rem;
  background-color: inherit;
  -webkit-box-shadow: 0 4px 35px rgba(0,0,0,.1);
  box-shadow: 0 4px 35px rgba(0,0,0,.1);
  border-radius: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}



/* Top */
.menu {
/*   background-color: blue; */
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: .5rem;
}

.battery {
  width: .85rem;
  height: .45rem;
  background-color: black;
}

.network {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6.8px 7.2px 6.8px;
  border-color: transparent transparent black transparent;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  margin: .12rem .5rem;
}

/* Middle */
.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: auto;
  text-align: center;
  width: 70%;
  -webkit-transform: translateY(5%);
  -ms-transform: translateY(5%);
  transform: translateY(5%);
}

.circle {
  position: relative;
  border-radius: 100%;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  margin: auto;
}

.crescent {
  position: absolute;
  border-radius: 100%;
  right: 0;
  width: 6rem;
  height: 6rem;
  background: white;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

label, .toggle {
  height: 2.8rem;
  border-radius: 100px;
}

label {
  width: 100%;
  background-color: rgba(0,0,0,.1);
  border-radius: 100px;
  position: relative;
  margin: 1.8rem 0 4rem 0;
  cursor: pointer;
}

.toggle {
  position: absolute;
  width: 50%;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.15);
  box-shadow: 0 2px 15px rgba(0,0,0,.15);
  -webkit-transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.names {
  font-size: 90%;
  font-weight: bolder;
  color: black;
  width: 65%;
  margin-left: 17.5%;
  margin-top: 6.5%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dark {
  opacity: .5;
}

.mark {
  border-radius: 100px;
  background-color: black;
}

.time {
  color: black;
}
/* -------- Switch Styles ------------*/
[type="checkbox"] {
  display: none;
}
/* Toggle */
[type="checkbox"]:checked + .app .toggle {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  background-color: #34323D;
}

[type="checkbox"]:checked + .app .dark {
  opacity: 1;
  color: white;
}

[type="checkbox"]:checked + .app .light {
  opacity: 1;
  color: white;
}
/* App */
[type="checkbox"]:checked + .app .body {
  background-color: #26242E;
  color: white;
}
/* Circle */
[type="checkbox"]:checked + .app .crescent {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  background: #26242E;
}

[type="checkbox"]:checked + .app .circle {
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked + .app .main-circle {
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked + .time {
  color: white;
}

[type="checkbox"]:checked + .app .body .phone .menu .time {
  color: white;
}

[type="checkbox"]:checked + .app .body .phone .menu .icons .network {
  border-color: transparent transparent white transparent;
}

[type="checkbox"]:checked + .app .body .phone .menu .icons .battery {
  background-color: white;
}

[type="checkbox"]:checked + .app .body {
  border-radius: 40px;
  ;
}

.menu {
/*   background-color: blue; */
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

Toggle prefixes

90K views

Comments

No variations yet

MIT License

Copyright - 2023 Pradeepsaranbishnoi (Pradeep Saran) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.