From c230a7c73b9cb7cb57bca99e06bf00d71669b41c Mon Sep 17 00:00:00 2001 From: Nikhil Sharma Date: Tue, 19 Jan 2021 11:22:36 +0530 Subject: [PATCH] made a toggle switch but not have a functionality to change the theme --- HTML_files/edit.html | 57 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 52 insertions(+), 5 deletions(-) diff --git a/HTML_files/edit.html b/HTML_files/edit.html index 7a265a5..c678d5e 100644 --- a/HTML_files/edit.html +++ b/HTML_files/edit.html @@ -76,14 +76,14 @@ } .form-control{ padding: 5px; - + } .save-btn{ color: #fff !important; border-radius: 1rem; padding: .375rem .75rem; line-height: 1rem; - font-size: 1rem; + font-size: 1rem; text-align: center; vertical-align: middle; background-color: teal; @@ -97,7 +97,7 @@ border-radius: 1rem; padding: .375rem .75rem; line-height: 1rem; - font-size: 1rem; + font-size: 1rem; text-align: center; vertical-align: middle; background-color: teal; @@ -116,18 +116,60 @@ width: 100%; margin: .5rem; } + .switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + } + + /* Hide default HTML checkbox */ + + + + /* The slider */ + .slider { + position: absolute; + cursor: pointer; + top:0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; + border-radius: 10px; + + } + + .slider:before { + position: absolute; + content: "hi"; + + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + + } + input:checked + .slider:before { + -webkit-transform: translateX(10px); + -ms-transform: translateX(10px); + transform: translateX(26px); + + }

Edit Profile Information

- +
- +
@@ -177,5 +219,10 @@

Edit Profile Information

  Back
+ +