diff --git a/100_projects/53-custom-checkbox-toggle-dark-light-mode/app.js b/100_projects/53-custom-checkbox-toggle-dark-light-mode/app.js new file mode 100644 index 0000000..08292d3 --- /dev/null +++ b/100_projects/53-custom-checkbox-toggle-dark-light-mode/app.js @@ -0,0 +1,10 @@ +let body = document.querySelector('body'); +let dark = document.querySelector('#dark'); + +dark.onclick = function (){ + if(dark.checked == true){ + body.classList.add('darkMode'); + } else { + body.classList.remove('darkMode'); + } +} \ No newline at end of file diff --git a/100_projects/53-custom-checkbox-toggle-dark-light-mode/index.html b/100_projects/53-custom-checkbox-toggle-dark-light-mode/index.html new file mode 100644 index 0000000..1f67089 --- /dev/null +++ b/100_projects/53-custom-checkbox-toggle-dark-light-mode/index.html @@ -0,0 +1,72 @@ + + + + + + + + Document + + +
+
+
+ +
+

Ahmed ...
Full Stack

+
+ +
+ + + + + \ No newline at end of file diff --git a/100_projects/53-custom-checkbox-toggle-dark-light-mode/style.css b/100_projects/53-custom-checkbox-toggle-dark-light-mode/style.css new file mode 100644 index 0000000..748f464 --- /dev/null +++ b/100_projects/53-custom-checkbox-toggle-dark-light-mode/style.css @@ -0,0 +1,144 @@ +*{ + margin:0; + padding:0; + box-sizing: border-box; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #f0f0f0; + transition: .3s; +} +.darkMode{ + background: #333; +} +.box{ + position: relative; + width: 300px; + padding: 30px; + background: #fff; + border-radius: 4px; + box-shadow: 0 30px 30px rgba(0,0,0, .5); + transition: .3s; +} +.darkMode .box{ + background: #292929; +} +.profile{ + position: relative; + display: flex; + align-items: center; + gap: 10px; +} +.profile .imgBx{ + position: relative; + width: 50px; + height: 50px; + background: #f00; + border-radius: 50%; + overflow: hidden; +} +.profile .imgBx img{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; +} +.profile .text{ + font-weight: 500; + color: #777; + line-height: 1.2em; +} +.darkMode .profile .text{ + color: #ddd; +} +.profile .text span{ + font-weight: 400; + font-size: .85em; + color: #888; +} +.darkMode .profile .text span{ + color: #aaa; +} +.menu{ + position: relative; + margin-top: 20px; + padding-top: 10px; + border-top: 1px solid rgba(0,0,0, .1); +} +.darkMode .menu{ + border-top: 1px solid rgba(255,255,255, .5); +} +.menu li{ + list-style: none; + display: flex; + flex-direction: column; + gap: 20px; +} +.menu li label{ + position: relative; + display: flex; + justify-content: space-between; +} +.menu li label span{ + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + user-select: none; + cursor: pointer; + color: #777; + transition: .2s; +} +.darkMode .menu li label span{ + color: #aaa; +} +.menu li label span:hover{ + color: rgba(0,0,0, .3); +} +.darkMode .menu li label span:hover{ + color: rgba(255,255,255, .3); +} +.menu li label span ion-icon{ + margin-right: 5px; +} +.menu li label .action{ + position: relative; +} +.menu li label .action input{ + appearance: none; +} +.menu li label .action i { + position: relative; + width: 30px; + height: 15px; + background: #ddd; + border-radius: 15px; + transition: .3s; +} +.darkMode .menu li label .action i{ + background: #666; +} +.menu li label .action input:checked ~ i{ + background: #555; +} +.menu li label .action i::before{ + content: ''; + position: absolute; + top: 2.5px; + left: 2.5px; + width: 10px; + height: 10px; + border-radius: 10px; + background: #fff; + box-shadow: 0 2px 4px rgba(0,0,0, .1); + transition: .3s; +} +.menu li label .action input:checked ~ i::before{ + left: calc(100% - 12.5px); +} \ No newline at end of file diff --git a/100_projects/53-custom-checkbox-toggle-dark-light-mode/user.jpg b/100_projects/53-custom-checkbox-toggle-dark-light-mode/user.jpg new file mode 100644 index 0000000..ef9abf9 Binary files /dev/null and b/100_projects/53-custom-checkbox-toggle-dark-light-mode/user.jpg differ