1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Day & Night Toggle</title>
7<style>
8.container {
9 width: 100%;
10 max-width: 1920px;
11 margin: 0 auto;
12 padding: 0px;
13 display: flex;
14 flex-direction: row;
15 align-items: center;
16 justify-content: space-between;
17 padding-top: 100px;
18 padding-bottom: 100px;
19}
20
21.text-section, .toggle-section {
22 width: 50%;
23 display: flex;
24 justify-content: center;
25}
26
27.text-label {
28 font-family: 'Metropolis', sans-serif;
29 font-size: 65px;
30 font-weight: 900;
31 color: #666666;
32 text-align: left;
33}
34
35.word {
36 display: block;
37 line-height: 1.2;
38}
39
40label {
41 width: 60%;
42 height: 200px;
43 position: relative;
44 display: block;
45 background-image: url('https://cdn.shopify.com/s/files/1/0686/4909/1296/files/Start-1.png');
46 background-size: cover;
47 background-position: center;
48 border-radius: 200px;
49 box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
50 inset 0px -5px 15px rgba(255, 255, 255, 0.4);
51 cursor: pointer;
52 transition: background-image 0.5s ease-in-out, background-position 0.5s ease-in-out;
53}
54
55label:after {
56 content: "";
57 width: 180px;
58 height: 180px;
59 position: absolute;
60 top: 10px;
61 left: 10px;
62 background: linear-gradient(180deg, #ffcc89, #d8860b);
63 border-radius: 200px;
64 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
65 transition: transform 0.5s ease-in-out, background 0.5s ease-in-out;
66}
67
68button {
69 width: 0;
70 height: 0;
71 visibility: hidden;
72}
73
74button:focus + label {
75 outline: none;
76}
77
78label.toggled {
79 background-image: url('https://cdn.shopify.com/s/files/1/0686/4909/1296/files/end-01.png');
80 background-size: cover;
81 background-position: center;
82 transition: background-image 0.5s ease-in-out, background-position 0.5s ease-in-out;
83}
84
85label.toggled:after {
86 transform: translateX(calc(100% + 195px));
87 background: linear-gradient(180deg, #fff, #cafaf9);
88 border-radius: 200px;
89 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
90 transition: transform 0.5s ease-in-out, background 0.5s ease-in-out;
91}
92
93@media screen and (max-width: 768px) {
94 .container {
95 flex-direction: column;
96 align-items: center;
97 }
98
99 .text-section, .toggle-section {
100 width: 100%;
101 margin-bottom: 50px;
102 align-items: center;
103 }
104
105 .text-label {
106 font-size: 48px;
107 line-height: 1.2;
108 }
109
110 label {
111 max-width: 300px;
112 height: 100px;
113 }
114
115 label:after {
116 content: "";
117 width: 90px;
118 height: 90px;
119 position: absolute;
120 top: 5px;
121 left: 5px;
122 }
123
124 label.toggled:after {
125 transform: translateX(calc(100% + 110px));
126 }
127}
128</style>
129</head>
130<body>
131<div class="container">
132 <div class="text-section">
133 <div class="text-label">
134 <span class="word">A complete</span>
135 <span class="word">remarkable</span>
136 <span class="word">playback</span>
137 <span class="word">time</span>
138 </div>
139 </div>
140 <div class="toggle-section">
141 <button id="darkmode-toggle"></button>
142 <label for="darkmode-toggle"></label>
143 </div>
144</div>
145<script>
146document.getElementById('darkmode-toggle').addEventListener('click', function() {
147 this.nextElementSibling.classList.toggle('toggled');
148});
149</script>
150</body>
151</html>